Good/Bad Design 10: MAMP

Last night, I wasted 4 hours trying to figure out how to connect to mySQLServer.

I recently downloaded MAMP, which is Apache, MySQL, PHP for Mac. Everything worked fine and dandy – I had green lights for both servers:

MAMP - Green Light

But on the start page, whenever I clicked on “myPHPAdmin”, I was given an error that said it couldn’t connect. I then googled for hours – many people have had the same problem, but solutions that I actually understood didn’t work. After about four hours, I had my roommate look at it. We deleted the program (for the second time), reinstalled it, but no results.

Finally, my roommate happened to click on this little number:

MAMP myPHPAdmin

And for some reason, it worked. I don’t know why that link overcame a faulty connection to the mySQL server, but it did. It frustrates me that I wasted four hours clicking the main link above it and racking my brain when the solution was just a few pixels below. Well, I certainly feel dumb.

I don’t know much about programming, but it’s certainly poor usability when similar links work in different ways. Also, what was that popular design saying by Krug? Oh right, “Don’t make me think!”

Good/Bad Design 9: AmazonLocal

If you don’t know what AmazonLocal is, the easiest way to describe it would probably be to relate it to services like Groupon or LivingSocial. Basically, you can sign up to get notifications on deals in your area, and “save up to 75% on local restaurants, spas, entertainment, and more.”

I sometimes get these emails, although I’m not sure why because I don’t ever recall signing up for it. I didn’t bother unsubscribing though; I usually just ignore and delete them. What I found interesting was that apparently Amazon noticed! One day I received this in an email:

AmazonLocal Notification

I’m pretty sure my eyebrows rose upon reading this. They’ll stop sending me emails on their own accord? That’s the first I’ve seen a company do so.

Anyway, perhaps this is a better example of good public relations than design, but the fact that AmazonLocal was realizing that their emails didn’t interest me and acted accordingly made me want to applaud them a bit. Definitely increased my user experience due to their attention to my needs and wants. Nice.

Good/Bad Design 8: Apple Help Menu

I was working in inDesign the other day when I needed to use Spell Check on my work, yet didn’t know where to find it. Rather than hunting aimlessly through the menu structure, I went to the Help menu to type in my search. Using the Help menu is an action I rarely do; I usually know what I’m looking for or don’t trust the application to give me a straight answer. A reasonable reaction, I think. After all, Cooper says that Help menus are more often created poorly and historically known to not be very helpful.

But what I found through my search was that the menu not only changed results according to my input, but it would highlight and point to the menu item I was looking for. I thought it might have been an Adobe feature, but later I discovered that it was just my iMac. 😛

Help Menu

So from a usability standpoint, the Help menu not only helps users find what they’re looking for, but also shows them where it is by highlighting it and providing a blue arrow that moves slightly to catch your attention. Cooper states that Help menus should aid the user in understanding the program, and I would certainly say that this does a good job of that.

Help Menu 2

Good/Bad Design 7: Instructions

I spoke to two of my friends today and asked them what they thought was an example of good or bad design; things they would use everyday and possibly either get frustrated with or say, “Huh, that’s convenient.”

Their answers were mostly focused on bad designs as they spouted heated indignations about many things. These ideas strangely ranged from technology in general and how it makes us lazy, to the design of strapless bras. (Don’t ask me how we ended up on that subject because I’m not so sure I even know.)

crib instructions

Regardless, one large tangent we traversed was the poor design of instructions. Paper instructions, specifically. My friends had recently encountered the problem of trying to put together a baby crib and could not understand how it was so difficult to “put together four posts of wood.” They said they felt that the instructions were impossible to follow and had several opinions on the matter:

  • Picture instructions are good, except when the images are so difficult to decipher that you have no clue what you’re looking at.
  • It helps when different angles are portrayed.
  • Some people need textual instructions and therefore it should always be included.
  • It helps when the size of small parts, like screws, in the instructions match the ones in real life.
  • Descriptions need to be simplified and made easier to understand.

All very good points. This is obviously a list of frustrations, of which can be easily broken down into usability heuristics:

  • Picture instructions are good, except when the images are so difficult to decipher that you have no clue what you’re looking at.
    Match between system and real world: Create a clear connection between the system (instructions) and what the user understands and knows (or in this case, has to work with).
  • It helps when different angles are portrayed.
    Flexibility and efficiency of use: Different angles could help accelerate the amount of time this task requires by providing this information.
  • Some people need textual instructions and therefore it should always be included.
    Help: Even when a system is better without documentation, you should still provide that information to help those that need it.
  • It helps when the size of small parts, like screws, in the instructions match the ones in real life.
    Recognition: The system should use concepts familiar to the user and make objects, actions, and options visible to minimize the user’s memory load.
  • Descriptions need to be simplified and made easier to understand.
    Match between system and real world: The system should use words and phrases that make sense and are natural to the user.

Of this list, not every one of Jakob Nielsen’s usability heuristics are touched on, but I would definitely say they still apply.

Good/Bad Design 6: Copiers

Copier

Having worked at the HSSE Library in an office by the copy machines for the past year, I can tell you that wholeheartedly that they are NOT easy to use. Everyday, people knock on door asking for help of some sort. And it’s not that they’re unintelligent; it’s just that the large contraption is a beast, especially when you’re doing something other than making a copy.

It’s almost difficult to point out all the way this object is confusing. If you’re making one copy, I suppose it’s quite simple to understand to press the large START button. But then again, why am I pressing START when I want to COPY?

In fact, when I think about it there are many labels that could be clarified: To copy a regular 8.5″ x 11″ page, the user is required to understand that it is “Letter” size. And then they are required to understand that “Letter” is abbreviated as “LT”. Same with Ledger (LD) and Legal (LG). Different paper trays are also labeled as A4 or A3… Why? That means nothing to the user. And sometimes you can choose an “Original Mode”, but what constitutes as “Original”? In this case, the copier does a poor job of the mental model, or matching the system to the real world.

Although, I think one of the most interesting aspects (of the copiers in the library, at least) is that they require to user to switch between pressing tactile buttons on a keypad and digital buttons on the touch screen. This is not only for switching the mode you want – Say, from COPY to SCAN – but even when inputting your email. I’ve had to tell several students that numbers aren’t listed on the touch screen because you have to use the number keypad instead. A simple switch, but one that isn’t intuitive.

Another common mistake is that some users don’t seem to even notice from where the copies eject. It actually appears in one of two nooks in the copier, and you usually have to bend down slightly to see and grab them.

With all the complex workings of a copier, it’s no wonder that staff need to be trained to use them and help others; it’s practically impossible to figure out on your own. Even I’m not learned in all its functions.

Good/Bad Design 5: Hipmunk

Last week I posted a link to a design blog by Sacha Grief (Attack of Design), but today I would like to draw attention to a website he mentioned on his blog: Hipmunk

Hipmunk Start

Hipmunk is a travel start-up much like Travelocity or Kayak, however it focuses much more on data visualization. From the get-go, users are introduced to a large, simple interface. After inputting details on your trip, you get to see your results in a colorful, organized timeline that allows you to visualize a lot if data at once. I would say this differs from the many travel sites that give you text-based results.

Hipmunk

Hipmunk allows for a lot of options while remaining visually appealing. Not only can you sort by different options such as prince, duration, arrival, but you can narrow your search down to specific airlines, start a parallel search on the same page, and talk to live help, if available.

Aside from the functionality of the site, there are several principles that help this succeed. For one, the obvious use of a grid helps align this information to give users a better sense of the timeline. The menu is also well done and simplified, where drop downs are for secondary functions that might not be used right away. Certain data is also noticeably clickable (buttons) as they give the affordance of being pushed.

Overall, I would just say that Hipmunk, Inc. did a notable job in displaying such a large amount of information in a very simple matter. Compared to other travel sites, it really does succeed in helping users visualize, however, it goes without saying that there is always room for improvement. In fact, I discovered later that Sacha Grief had several ideas on this: Hipmunk Redesign

Good/Bad Design 4: WordPress.com

I decided to jump on WordPress tonight to submit another Good/Bad design post, but after signing in from the main page, I was lost for a few seconds. What happened to the button to go to my blog?

No Blog Link Visible

Do you see it? Because I don't.

Then I realized, Oh, they changed it. Now, I’m usually an open minded person when it comes to changes; I usually take these things in stride. So when I saw my name in the upper right-hand corner instead of the left, I clicked it without much thought and was taken to my Public Profile. Okay, a link with my name and picture on it takes me to my profile; it makes sense. However, it wasn’t what I expected, nor my intention. I’m still lost.

After a little more investigating, I rediscovered how to create a New Post! But I’m a little disappointed that it is no longer a single stride and click of my mouse. Instead, I have to navigate through a list.

Wordpress Menu

Oh, THERE it is!

Yea, kind of a bummer. I really did like having the New Post button immediately at the top. After all, this is a blog, isn’t it? Isn’t writing a new post an important action that I should be able to access easiest?

Anyway, I guess this would be another case of not keeping the user’s goal in mind. And as we learned in class recently, users will satisfice because we are too lazy to move our mouse that few extra pixels. Well, WordPress is making us do just that. Not a huge change, but it still makes a difference. I do wish that there had been a notification that they moved things around though. No offense to WordPress (because honestly, I love how easy and sleek the WordPress UI is), but at least Facebook notifies me of changes with little pop-ups that grab my attention, instead of making me ogle idly at the screen, wondering if that New Post button just never loaded.

Edit: 9/25/2011 9:39PM
After reading Cooper’s Chapter 22 on menus, I felt the need to add this bit of information. Cooper states, “Cascading menus make it difficult for users to find and browse the command set, but they do allow menus to usefully contain much larger command sets” (p. 486). So by Cooper’s standards, I would say that WordPress could have done without a cascading menu, considering the command set is miniscule.

Good/Bad Design 3: Venetian Blinds

Venetian Blinds
Maybe this is too similar to my previous good/bad design post, but this weekend I had a particular struggle with the venetian blinds in my bedroom. Namely, I could not figure out which angle to pull the cords in order to lower the blinds. Who decided to build the controls based on the angle anyway? At least some hint how to operate it should be visible; there should be some kind of affordance of raising or lowering so I don’t have to guess and check.

If that isn’t bad enough, let me point out that for whatever reason, there are two cords. But contrary to what you may think, one doesn’t raise them and the other lower them. Instead, they control different sides of the blinds. Because everyone loves having crooked blinds:

Crooked Blinds

I would say this is a mapping issue since the cord isn’t by the side it controls, but really there just needs to be one cord. I guess that’s why they make these:
Cord Holder
Poor design, if you ask me. What is even more sad is that there needs to be an eHow page for it: How To Lower Venetian Blinds.

Good/Bad Design 2: Ceiling Fan

Ceiling Fan
Ceiling fans. Two chains: one for the light, the other for the fan. I’m pretty sure at one time or another, we’ve all wondered, “Which chain do I pull?” The fact that we have to think about it demonstrates it’s poor design.

When designing controls, the controls should differentiate from one another in some way. Not only should they look different, but they should reflect their function. As we just learned from Cooper (2007), designers should design to represent the mental model or vision of the user. There may only be two controls, but it doesn’t mean that product designers should just assume that users will remember the function of each. Perhaps one should end with a light and the other with a fan, to reflect their uses.

Good/Bad Design 1

So I was playing on my Xbox 360 the other day, when I got a notification that I unlocked one of the achievements for the game. Realizing this, I pressed the center Guide button on my controller to bring up a list of the achievements for the game, including the one I just received, to read more about it.

The reason this is good design is because the system is anticipating the user’s goal. You see, the Guide button has several functions. The main one being that when pressed, it brings up a generic menu with options. However, if pressed soon after a notification is received (whether it is a new message from a friend, or an invitation to play a game), the system will bring up information related to that notification. So, if I get a message from a friend and press the Guide button in time, the Xbox will bring up the message for me to read instead of the menu. This keeps the user from having to take an extra step to complete their goal, because the system is already taking the user to their intended destination.

Great thinking on Microsoft’s part, in my opinion. Sony’s PS3 doesn’t do this, after all. And although a simple function, this benefit really does enhance the user experience for the system.

Achievement Unlocked

Congratulations! You unlocked an achievement!