Tags



April 4, 2011
 

Lesson 6: Errors

Definition:

An error is any action that causes an unwanted result. Errors fall into two types: slips and mistakes. A slip is an action that was not what was intended. An example is immediately clicking the OK button on a popup asking to delete your entire hard drive. You didn't *want* to delete everything but you did unconsciously. Mistakes are errors that occur because a user's intention is not correct but that action for that intention is sound. A common medical mistake is to treat the wrong symtoms with a specific medicine. Administering a prescription for stomach pains is the right way to treat a patient for a food allergy, but not if the patient's appendix is about to burst.

Interaction Design:

The two most common ways to account for slips and mistakes in interaction design is to warn a user if you can tell that something has been done wrong or offer the user a way to undo their last action if it was unintended. Common examples of this are forms that check your credit card information before allowing you to order a product online. This situation also falls under the 80/20 rule because most of your customers are going to use your online checkout process and some of them will encounter an error at least once. If these errors are well designed they process can fall under the aesthetic-usability rule as well.

Screen_shot_2011-01-31_at_4

User Experience Design:

Automobiles have many chances for errors to occur every second that they are in use and the experience of driving is heavily influenced by preventing these errors. Most people take for granted the interlock between your gear shift and the ability to take the key out of your ignition. Imagine you're parking on a hill and commit a slip -- you forget to put the car in park. Instead of your car rolling into the one behind it, the interlock tries to prevent you from doing this by holding your key. This is effective because the feedback is immediate -- you've done something wrong. In combination with lack of consistency -- this doesn't usually happen, what did I do differently -- allows the slip to be caught and corrected quickly.

Car-ignition

Comments [0]

February 15, 2011
 

Lesson 5: Consistency

Definition:

A system's usability is improved and the learnability is increased when it functions in a consistent way. Users of your system can focus on completing their task if they can establish how it works by experiencing it before, instead of rethinking their actions at every step.

Interaction Design:

Consistency is one of the main pillars of interaction design. The methods to restart a process, undo or redo an action, navigate between steps or enter information should be consistent. This principle can get tricky very quickly — a form should look like a form, but not all forms should look the same. Forms that are saved automatically vs queued before save should look different. A powerful way to get a user's attention is to break this rule. Modal dialog boxes that are displayed before a form is submitted can protect the user from doing something potentially dangerous.

Screen_shot_2011-01-31_at_2

User Experience Design:

Consistency in experience is important to every successful brand. Southwest Airlines is a company that has recently ramped (get it?) up it's customer experience by having two consistent, unchanging goals — to be the low-cost airline and to not take advantage of passengers with extraneous fees. Southwest has started to run commercials in the US that claim no bag fees. No weight limits. No size limits. No bag fees. Period. They've made the decision to meet their operational budget by streamlining other processes instead of charging the customer.

4622316438_e04df33bdb

Comments [0]

February 10, 2011
 

Lesson 4: Affordance

Definition:

Affordance is the influence the physical characteristics of an element or environment have on the user's ability to know how to use it. Buttons look like they can be pressed, objects with round shapes on the bottom look like they can be rolled and drawers with handles on them look like they can be pulled out.

Interaction Design:

Interaction design often involves buttons that the user can click to invoke an action. This digital representation comes directly from it's physical counterpart because the affordance is so high. Shadows and gradients on these butons are very important because they mimic real buttons, and are the only clues that show what's a button and what's just an area on the screen. The design of the new form submission buttons on the Rackspace Cloud Apps Control Panel have been meticulously designed to look clickable when they're allowed to be clicked, and to look clearly disabled when you can't.

Buttons

User Experience Design:

Affordance rules are often broken in the kitchen. Imagine you are at a friends house and need to find a spoon. From your previous experience with your own kitchen, you know that silverware drawers are commonly very wide. You reach for a drawer near the sink and pull. It seems stuck. You pull again. After a few puzzled seconds, you realize that this drawer doesn't pull out because it's purely decorative — the sink's internals are behind it. In this case the (poor) designer decided (erroneously) that uniformity between cabinet units was greater than the experience of finding an object in a drawer. This may seem like a very insignificant event— and it is — but why place a knob on a drawer that doesn't function. If it looks like a knob, it should function as a knob. Once a few of these hiccups happen to a user while experiencing your product or environment, it starts to add up.

Kitchen-sink-3

Comments [0]

February 8, 2011
 

Lesson 3: Accessibility

Definition:

Accessibility is one of the major tenets of design, and covers almost every design practice. Accessibility is not just whether or not someone with a disability can use a design effectively. It also covers the ability of a design to have mutual benefits for diverse groups of users. Can both a new user and an advanced user both accomplish their own specific goals?

Interaction Design:

In interaction design accessibility focuses on two very different types of design problems — human needs and technical limitations. It is a well known principle of accessibility to account for color-blindness, users with poor eyesight and other physical disabilities. Technical limitations due to aging browsers, lack of Javascript and slow internet connections are starting to become just as important within web application accessibility. Flickr's sign up button has a few issues with color blindness — doesn't the button on the right look disabled?

Color-blindness1

User Experience Design:

In user experience design, accessibility also contains a human element and a technical element. The Rackspace Cloud's current signup process requires a phone-based fraud check. What if our new user is completely legitimate but can't speak any of the languages that Rackspace representatives do? Can a 6'8" man realistically fit into his new Porche? The accessibility of a Porche's cockpit is a technical limitation that was designed to balance mechanical systems, aerodynamics, and the experience of driving the car. At some point, the there is a limit for each of the variables, and a decision was made to limit the physical size to increase the overall experience.

163_news080908_03z2010_porsche_cayenne_s_transsyberiainterior_cockpit

Filed under  //   design principles  

Comments [0]

February 3, 2011
 

Lesson 2: Aesthetic-Usability Effect

Definition:

The Aesthetic-Usability effect is the perception that more aesthetically pleasing interfaces are easier to use than less aesthetically pleasing ones. "Pretty" or "sexy" interfaces are also more likely to be used regardless of if they actually are easier to use.

Interaction Design:

Contemporary interaction models crafted by companies like Apple, BMW and Bank of America are prime examples of this practice. Studies have shown that users may create more errors on an iPhone than a Blackberry, but users will overwhelmingly agree that the iPhone was much easier to use. Rackspace's new Unbounded List widget is much more aesthetically pleasing than its previous version, two <select> boxes, and hopefully our users will find is more usable because of its improved look and interaction methodology.

Screen_shot_2010-11-10_at_9

User Experience Design:

Bank of America's new envelope-free deposits on their ATM's are actually slower than their previous counterparts because (I'm guessing here) the machine now has to count cash as it is deposited instead of accepting any envelope and having it hand-checked later. This process may be 10 seconds slower, but it seems more usable because you don't have to fight to insert cash inside an envelope and sealing it while it's 20 degrees outside.

Bank-of-america-atm-checks-scanned-cash-counted

Filed under  //   design principles  

Comments [0]