Oreo’s Usability

Usability Examples

I recently was enjoying some Oreos and on a whim decided to look up their website. (Writing a blog post about the usability of the cookie would be far too short, I’d write crunch, crunch, and then it would be done) The design is brightly colored and fun. Oreo is celebrating their 100th anniversary and  the main banner is decorated with confetti and is the main focal point of the page.

There is a button you can click that takes you to a website devoted just to that but its not very interesting. You can watch a video where people talk about how much they love oreos but mostly its just a repositioning and repeating of the main links on the home page.

So lets say I want to contact Oreo to tell them I think they’re awesome.  Where do I go? Well, I can use social media since their little icons are situated at the top right of the page. Well, thats convenient but lets try a more formal method, maybe there is more formal contact info at the bottom…

Oh, hey, more social media at the bottom.  Seems rather redundant to have it twice but maybe they just want to make sure…

Ok, three separate sections on the home page just for social media.  I understand Oreo, you want us to use your social media. I just want your company contact information!  There is nothing on the main page that indicates who I can contact about Oreo unless I do it via social media. Lets try Products.

Well, now I am at Nabisco world.  Nabisco owns Oreo, I remember that so thats fine and there’s a contact us link! Hurray!

What is this? Who is Mondelez affiliates Inc? Its webpage conveniently opens to a FAQ but that answer is not evident here.  There is however a link on the left side that states “Email Us” But I have to choose a subject and none of them are close to what I want. Oh well, Oreo, I just won’t compliment you then. I had to hunt for your contact information through Oreo’s site, then Nabisco, and then got to Mondelez Affiliates, and then you make me choose a subject heading.  Too much work. No compliment for you! I’ll just eat another cookie! (Try the fudge cremes,  they are delightfully addicting)

Good usability, Google Drive

Usability Examples

I am rather fond of minimalism.  I like having to put forth the least amount of effort to achieve my goals.  Something that I am rather fond of is Google Drive.  Not only is cloud technology incredibily convenient in that I can access it beyond my own computer, but its being utilized in a way that is simply perfect for me.  There are no frills, nor major issues with signing up and in fact, once you have your gmail account, you’re good to go! To the left there is a menu with two main icons, a create button and an upload button.  The upload button is a little hard-drive I think but the arrow that points upwards, as if pointing from the hard-drive to the computer, is super helpful, indicating “hey, take a file from your hard-drive and put it in here!”  Then, if you click on it you get the ability to upload your files from your computer or another drive.  It uploads and appears in the list.  Super convenient and to the point.  My kind of usability.  You can even organize them according to the date they were modified and organize them into folders.

If you don’t have a google drive, you should get one.  Never hurts to back things up and it’s super easy to use.

Nov. 7th reading.

Reading Response

This weeks reading was regarding analysis and reporting your evaluation.

Chapter 16 was rather boring and I don’t think the authors said anything that really stood out.  I suppose the concept of a symptom versus a problem was interesting but the rest of the chapter seemed to read more like, “How do you analyze data? You analyze it.”  I understand it is difficult to describe the process of analysis but I found this rather uninteresting.

Chapter 17 brought up the CIF standard of reporting which is essentially the normal standard of reporting so nothing really new there.  The CIF for qualitative research was basically, “it depends” though.  The chapter also notes you can report individual problems and can include video clips if they are important.  I am not certain who is reading this and are happy they now have permission to use video clips in their report.  It also goes into how you should cater your report to your audience and not use jargon.  You also shouldn’t demean your audience and avoid blaming.

Both this weeks and last weeks seemed to be more of the use your common sense chapters.  I was not really impressed by these as I don’t think they actually gave any really good advice other than common sense.  I think I would search elsewhere for tips on how to create my report.

Usability of Election touch screen voting machines

Usability Examples

For this week usability example I decided to describe the voting machine I used on Saturday. (early voting, yay!)

I was dreading going on Saturday since it meant there would be tons of people trying to do what I was doing, avoiding having to go vote on a work/class day.  The first center I tried had a giant line that I stood in for fifteen minutes without stepping an inch.  I decided to abandon it and try a different center.  The next place was much better and I stood in line to get my driver’s license read by the polling worker and have her ask me if I lived at the address she pulled up on her laptop.  I confirmed, she stuck a little credit card with an electronic chip embedded in it into a little holder plugged into her laptop.  She waited a minute and then handed me back both my cards. This new card she handed me was my Voter Access Card and apparently contained some data that would allow the polling computer to know that I was voting and not allow my information data to be used again. (to prevent people from voting at multiple places with the same demographic information) I then went and stood in another line for a while, about ten minutes.  I briefly wondered what would happen if I built up a giant static shock from my wool coat and zapped the card.

This center had four polling booths surrounded by little blue dividers blocking my choices from other people.  This machine was a touch screen computer than instructed me to put my Voter access card in the prominent card holder on the side of the screen.  I slid the Voter Access card into the machine.  It took it and held it so I couldn’t take it back out and mess up by ballot until I was done. (I assumed this part, I heard it click when I pushed it in and the design didn’t look like I could really mess with it when it was in there)  The screen then instructed me how to use the touch screen and correct mistakes if I made them.  It cautioned me that my ballot would not be cast until the very end when I pushed the “Cast Ballot Now” button.  This button did not appear until I had reviewed all my choices. (preventing the error of casting your ballot before you were done)

The first thing it displayed was the ability to vote straight ticket. This is where you vote based off a party rather than for each individual candidate. I chose not to vote straight ticket and clicked next to be taken to the presidential Ballot. I then used my finger to select my candidates whom I wished to vote for from the list.  I did not write in a candidate for the entire ballot so I don’t know if that option brought up a touch screen keyboard or how that would have worked. If you didn’t vote for a section, at the summary part of the process that section would show up in red and say “not voted”. (Or something similar, I’m not certain what the words were but it was all in red while all the others I had voted for were in blue)

The font was very legible and large enough that I think just about anyone would be able to read it easily.  It also made certain to illustrate very clearly what the position was and who the candidates were.

 

I did have some trouble with the calibration of my machine.  It twice selected someone else for me when I touched the correct “buttons”. From the muttered, “damnit” from the person next to me, I suspect it did that to them too.

After I had made all my selections and there were no more positions to vote for the screen displayed my voting summary.  After I scrolled through my choices double checking, the “Cast Ballot Now” button appeared.  I pushed the button the screen paused and then thanked me and instructed me to take my Voter Access card which audibly clicked as it was freed.  I passed my card to the polling worker and got my “I voted today” sticker.

Overall, it was interesting experience.  This is the second time I’ve been able to vote in a presidential election.  The first time I filled in a scan-tron sheet ballot and then fed it into a little machine that told me “Thank you, your vote has been counted”.  That was one bit of feedback that amused me, and I wished that the touch screens had included that at the end.  I found it easy to correct mistakes on the touch screen and even if the calibration was slightly off, it wasn’t entirely annoying.  The concept of the electronic cards as a precaution also was interesting.  They reused the cards over and over, rewriting them with the new voter’s information.  I personally found the voting machine very usable and was rather impressed by its clean and clear screen designs.

The only thing that I worried about was the elderly’s ability to use the touch screens. An elderly woman had to stand up out of her wheelchair in order to see the screen.  Also, I worry that they won’t understand touch screen systems fully nor how to correct mistakes.   I felt relaxed while I voted and I hope that the elderly aren’t put off by the touch screen technology.
There is also the issue of hacking to change votes.  I fully admit I don’t know anything about the process, but I know it can be done and with fully electronic means, there is no back up plan if the votes are compromised.  As much as I found the touch screen nifty, I think it would be safer to use a mix of paper and electronic.

 

Overall, good usability for our generation but maybe not the safest way to collect votes.

Flickr’s accessibility to Employers

Usability Examples

The other day I was asked to upload an image gallery to my employers website.   I had all the photos and decided to try and make a Flickr album and just link to the album rather than go through the hassle of asking people to change the coding I do not have permission to edit in our website. We use Adobe Contribute to upload new content and there is no function to allow us to easily put a gallery in, however Adobe Contribute is a different story.

When I go to Flickr, I start to make an account.

What is this? I must have or make a Yahoo, Facebook, or Google account? This is my employer’s business not myself, my employer does not have its own social media and is not interested in making another email account to keep track of. So, because they won’t allow a regular email address, I must use something completely different.  It would have been so easy to use my employer’s regular email address as the owner of the album since I cannot use my own as they would need to access it.  Because they cater their business towards social media and a specific type of email account, it is more difficult for employers to utilize this feature.  While it seems like a smaller usability error, it did mean that I chose not to use it.

Oct. 31st Reading not so scary.

Reading Response

Chapter 14 was very broad and its topics could be found in just about any other book discussing research.  It focused on preparing for your research session.  There really isn’t anything there that is special only to UX testing.  I did like the part about compensating your participants with a t-shirt that says, “I survived (some name)’s usability testing.” I think I would like that t-shirt.

Chapter 15 was about how to run the actual testing.  Again, it wasn’t something that was specialized to just UX testing but its always more or less nice to review the steps of how to approach your participant properly. the phrase, “allow some time for co-discovery partners to get to know each other and do a little bonding…” makes me think of taking two puppies and putting them in a box together.  Get to know each other now! The comment about deciding what counts as an error is a good one and should be determined before testing begins.

Overall, these two chapters were an overall look at the actual testing itself, what to do, how to do it, when and to whom you should do it to. As always though, the answer is mostly, “It depends”.  I think that really is the motto of UX testing and design.

Ford Keyfree login

Breakthrough Ideas

The Ford Keyfree login is a potentially nifty (and/or possibly risky) application that stores all your passwords to websites.   I find (like most of the bloggers out there chatting about this) that this concept while rather useful and convenient is also setting off little alarm bells.  How do they handle someone stealing your phone?  Do you get to choose what passwords it stores or does it automatically sync up and store every single password, including your bank passwords?

The application is still under construction but I intend to keep an eye out for this.  Seeing their solutions could provoke a wave in technology where passwords are replaced by our phones presence.  Who knows where else this technology could lead?

If you want to read a better description, check out a nice one at UsabilityGeek.

Also, it is a car company that created this and that should say something as well.  While creating easier usability for their own cars (their remote start and unlock applications) they also focused on something out of their general area.  If they succeed, perhaps Ford will branch out beyond the auto industry?

This application is currently in beta testing in France.  So, if anyone with some nice french language skills wants to test it out, please let us know what you think!

Resident Evil UI Usability.

Usability Examples

So I was watching someone play the new Resident Evil the other day and I was a bit baffled by its UI in the corner.  It was a cell phone with a heart monitor on it. (That one is the second picture below) I am more used to just a life counter or a green bar as representations of health but apparently, the heart monitor is the “usual” method for Resident Evil games to show health,(They changed it for games four and five but brought it back for six).  To make matters even more complicated, they didn’t show it on the normal screen you see when you play.  You had to push the start button and bring up your inventory in order to see it.  So when you played resident Evil one, the following image is exactly what you saw. The screen was free from anything blocking you vision.

(Screenshot gathered from Resident Evil Wikia )

I would be utterly lost.  I personally need something right there to tell me how close to death I am. So for me, that would be an ‘unusable”  UI. Now compare the original UI, to the following image of Resident Evil 6. The player I was watching actually preferred to turn off the UI and not have an indicator because he found it more annoying than beneficial.  So for him, no UI was more usable than the actual UI. For me, neither one is usable. (The image is a paused image as apparently no one in the entire internet has a shot of Leon getting damaged enough that the heart monitor appears.)

 

As a new player, I would have no idea how to read that health bar,  (I can barely see it, i just see a vague red squiggle)so if you were going to ‘update’ it why use an old version? (Resident Evil 5 used the green health bar in a circle style health indicator, why did they feel the need to go back to the old style when they had already gotten rid of it for two games.)

On a different note not necessarily related to the usability of the UI but still pertinent, lets be honest here, the UI isn’t supposed to be something concrete that the character is carrying around.  The character is separate from the UI so making it be ‘realistic’ by the UI being a cell phone he can carry around actually doesn’t make sense for the player.  The character doesn’t need to ‘see’ the UI.  When he needs to check inventory, the character pulls out his cell phone to look at it since that must also be where he stores all his bullets and healing items. In his phone.  Give us a little bit more credit Resident Evil team, we’re playing a Zombie game, we can handle some suspension of disbelief.  It was an odd design choice and for the player I was watching, they may as well have saved their time and not designed a brand new UI.

Oct. 24th Reading

Reading Response
     The readings this week focus on prototyping and information architecture. The blackboard reading discusses information architecture.  The first thing it describes is navigation and how understand how users navigate websites.  The authors bring up information scent and information foraging which is something we referenced at the beginning of the class.  There are many different approaches and views regarding navigation and not one particular approach can be the best every time.  Like so much in human computer interaction field, the motto for making decisions is once again, “it depends”.
     There is a very nice chart on page 126-127 explaining the various navigation models that I found very helpful. The chapter then goes into explaing how to develop and initial architecture. I am not so certain about the usefulness of the card sorting activity as a method of determining architecture.  It seems like a very large amount of time to waste to have participants group categories.  If the designer already knows the categories and what is in them, surely they have a good idea of what goes where.  I would rather see it more as a double checking the designers work than as the initial construction.  I suspect that often the authors of HCI books think HCI groups have a lot more time and money than they actually do.
There is another useful and simultaneously specific and yet somehow broad checklist about reviewing the architecture of your site on page 144 and 145. This chapter keeps iterating the motto “it depends” in a variety of other roundabout ways.  I wish there was a chapter that actually gave examples and defended the decisions because a lot of what we read is along the lines of “choose what best suits your needs! “or “Not too many and not too few!” Which I would liken to my mother telling me to just swim faster when I was competing. (Rather than telling me how to do so) I would like some definite answers and if there are none, then barrage me with examples and explain why they made those decisions so I can get an understanding of it.
     That being said, I did enjoy the variety of charts and lists in this chapter.  It seemed pretty thorough without being really wordy or getting in too deep for each category. I think if I were going to create a webpage, I would look through this and use the checklists and make note if I covered in some way every topic they mention.

1. How do you choose between the different types and fidelity levels of prototypes?

This is dependent on who you are showing and what you want to learn.  A low fidelity prototype should probably not be shown outside the project team as it will confuse outsiders with its missing parts.  High fidelity prototypes should be made after a majority of the design decisions have been finalized as it will likely be time and money  consuming to create.  Overall, you should know who you are showing the prototype to and what you want to learn.  You don’t have to show them everything if you only want to know a particular part.

2. What are some pitfalls to avoid when prototyping?

Don’t make it too detailed too early.  Also, don’t fall in love with early designs.  They will likely be destroyed or should be destroyed.  Also, don’t worry about how it looks too early on, it will change and the most important thing is the overall functions, not the aesthetical choices.

I found the part about getting out the WD-40 underneath the How to make an effective Paper prototype section amusing.   Also that fact that he mentioned “Scotch” Tape again as well as “Sticky” note pads. (With Post-it in parenthesis)  The UX book is back to being oddly specific in its directions without giving examples which would have been helpful.

I am not certain about the purpose of the decoy buttons.  They seem silly to me. If you’re testing only what you have…then you test what you have.  Otherwise, don’t test.  I don’t see the benefit in letting the user “click” buttons that go nowhere.  It would annoy me and make me wonder what the point of the testing was if there wasn’t something to test.

The chapter ends with a wish list from the authors of what an ideal prototyping software would have.  It almost seems like they essentially have the design requirements already, maybe we will soon be seeing prototyping software from the authors?