GOG.com. A website built as if the builders had to use it.

Usability Examples

Here is a quick example of some clever touches that makes me (as a user) really appreciate the care taken in the creation of  this site. It is rather surprising to say this, but it’s built in a way that lets me know that the designers of this site actually do USE it, not just build it.  I’ll give two quick examples which made me far more happy than you think it would. (Perhaps it’s because I feel as if they read my mind and gave me exactly what I needed without asking?)
Here we have a screenshot snippet of a list of games that are on sale from GOG.com.


And here at the bottom of the list we have…a list of the games I already own! It still wants me to know that those games are on sale, but doesn’t want me to waste my time sorting through my library. Brilliant and efficient!


I’ve only just begun exploring this website but I’ll leave you with one more example that made me happy. An English version of their legal user agreement. GogUser agreement

My wish for you: May your user agreements always have “English” versions.

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.

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.

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.

Usability of SOE Launcher

Usability Examples

The MMORPG I play (Everquest 2) made a change a while back that irks me to no end.  In order to launch the game, you click the icon or select from your start menu.  The launchpad comes up.  This launchpad is designed to let you choose what character you want to play in that game.  In the past, you selected your character, hit play and the launchpad disappeared.  You then stared at your desktop and wondered if it was working or not.  In a few seconds the screen would turn back and the introduction to the game would start and your computer would begin the process of logging you onto the games server.

Now, you bring up your launchpad (Which they like to say they redesigned…by making it rectangular and red instead of square and blue. Oh, and adding advertisements for their other games. -_-) and you select your character. Then you hit play.  The play button after a second or two pause changes to playing.  Then the game launches as before, logging you onto the game server.  However, the launchpad doesn’t close.  It remains open and running in the background.  You can only play one character per account at a time so you can’t use it to launch another character unless you own another account and log in to it.  Its annoying to try and race to click the tiny X button at the top of the launcher before the game launches and in a game that is known for eating RAM on occasion, you don’t need anything running in the background.
They introduced feedback (play button changing to playing) but then removed a nice technical aspect, closing the window so it doesn’t run in the background.  If you’re going to redesign something, improve it, don’t just add new things and remove others.

Mighty Mouse not so Mighty

Usability Examples

I was glancing around the room to see if anything here could inspire me for a good or bad example of usability when my usb extender caught my eye. (This is my opinion on its usability, others may not see the same problems) Here is the scenario:

1. I have a white macbook that is six years old.  (Old enough that it is made with the old style of plastic that cracks easily.)

2. My mouse is not wireless, it is wired.

3. The USB ports on a Mac are on the left side.

4. I am right handed.

5. The Mighty Mouse has the shortest cord…ever.

In order to use my mouse I must plug in a USB extender or be continually annoyed by tugging on the mouse due to the length of its cord. In retrospect, I should have gotten a wireless mouse but it was my first mac book and I had no idea that the cord would be that short.  (I’m not a fan of forever buying batteries)

Also, the Mighty mouse has a tiny trackball that gets dirty and stops working just by using it.  I’m not talking about eating a bag of Cheetos and scrolling that little trackball to my hearts content, but just normal mouse scrolling causes the wheel to stick.

My solution? I don’t use my mouse most of the time. 😦 I will be better informed for my next computer/mouse purchase. (Anyone use a Magic mouse? It looks better)

Poor usability= me not using it.  All it would take for better usability was a longer cord and a trackball design that doesn’t get dirty so easy! ( They eliminated the trackball for scrolling in their next mouse so apparently it was better to just remove that completely)



Usability of new vacuum

Usability Examples

I had a usability issue with my new vaccum cleaner the other day.  I was merrily vaccuming our little rug with the handheld vaccuum when the little brush stopped spinning. How odd. So I take a look at it, clean it out, and can’t figure out why it stopped. Then I take the brush part completely apart and this is what  I see.


The brush has a gap between it and the wall and hair and dust can get wound up in the gap.  It completely stops the brush from spinning.  I would like to add, that this little vacuum is designed for pet hair.  Pet hair may be shorter, but this cleaner should not have a problem like this.  I would clean for a while, then have to stop, take it apart, clean it out, and continue.  It makes the task take four times longer! I bought the silly thing for convenience’s sake. (We only have one rug and the linoleum floors can be swept.)  It is not convenient to take it apart when I use it.

It also only holds a charge for a couple of hours and you can’t keep the vacuum on the charger.  You have to decide in advance when you are going to use it, charge it, then use it.  If you decide later that day you want to use it again, too bad! Charge it again!  It does not make me want to use it . (Not that I enjoyed vacuuming before, but it makes it more annoying)  I wish companies were required to put a usability rating on boxes so I would have known this was going to be annoying.

This was the rug I was supposed to be vacuuming with the vacuum in question sitting on top.





Genicap Website Usability

Usability Examples

I showed the splash page during our presentation on home pages the other day but it just has so many problems I wanted to share it with you in more detail.

First, a recap of last week. It has a splash screen to greet you with the four logos for its four sections/pages? So you must apparently know what each of the sections are and also you must scroll down to see the bottom G logos. Both are not good design.


Ok, so we click a G. What is this now? Indeed, it is a small link at the top left of the page you must click to access the navigation for the site. The bottom of the page explains how to work the site (more or less). If you have to explain how to work your site, your site is way too complicated. Also, you would expect on the navigation page to be able to click links. Well you are wrong! There isn’t a link to be had on the navigation page. You have to click one of the G’s at the top, assuming you can understand what section each G represents.

Also, here is what happens when you click the Contact link.  I didn’t even see the actual contact information at first because I assumed the small words at the bottom of the page were the copyright information.

Such a shame, they are technologically minded company but didn’t give too much of a  thought to how their website users would be able to interact with their site. It looks pretty but makes me think to hard.