Design for Usability Week 2 Homework
Assignment: Post one positive and one negative example of each of the following principles of design from Lidwell’s Universal Principles of Design (they have a pocket edition, who knew!?!?!)
80/20 rule, Accessibility, Aesthetic-Usability Effect, Affordance, Confirmation, Constraint, Control, Cost Benefit, Entry Point, and Errors.
80/20 RULE:
“A high percentage of effects in any large system are caused by a low percentage of variables.
The 80/20 rule asserts that approximately 80 percent of the effects generated by any large system are caused by 20 percent of the variables in that system.”
Also known as the Pareto Principle after “Italian Economist and Sociologist Vilfredo Pareto (1848-1923) observed that 80% of the land in Italy was owned by 20% of the population. While investigating other countries he found the same unequal distribution of income and wealth in each.”
Positive:
80 percent of a product’s usage involves 20 percent of its features.
Tinder
The app makes decent use of a hamburger menu (for once) to hide one-time calibration features that compose most of the rest of the app (except premium features). Most users only swipe left, right and check matches. Some message. That’s really it.
Negative:
80 percent wealth is held by 20% of people.
A sad but true example that has proven itself time and time again throughout the history of the human race.
ACCESSIBILITY
“Objects and environments should be designed to be usable, without modification, by as many people as possible. The principle of accessibility asserts that designs should be usable by people of diverse abilities, without special adaptation or modification.”
Positive
One great example of accessibility is something I noticed while visiting Kyoto, Japan 10 years ago. Japan’s cities grooved path inset into them that cover most major streets. This acts as a kind of “street braille” improving the perceptibility of urban spaces in an elegant manner. It also works great when you are hunching down in the rain and see the yellow line end at the curb!
Negative
Crif Dogs Website
Web designers often do not design websites with those who have disabilities in mind. For example, design choices such as specialized text, large imagery with light text, not tagging images, and other oversights makes it difficult for special programs for those that are blind to read the page aloud.
While this website is really cool to look at, adding flash animations to the beginning can make it hard for people using specialized software to get past the entry point. There is little key information in the main page and it is in small low-contrast writing on the bottom of the page. More flash animations connect additional pages.
AESTHETIC USABILITY EFFECT
“Aesthetic designs are perceived as easier to use than less-aesthetic designs. The aesthetic-usability effect describes a phenomenon in which people perceive more~aesthetic designs as easier to use than less-aesthetic designs whether they are or not.”
Positive
Nest
While purchasing an “internet of things (IOT)” device may scare many who are not keen technologists, Nest made converting easy with a beautiful, elegant and simple design. The small range of controls and simple UI make it look very simple to setup and use (which it probably isn’t for someone unfamiliar with tech). When seeing one in a friends house, you immediately want your own just from how much nicer it looks than your current thermostat (or lack of one if you live in NYC!)
Negative
http://www.baddesigns.com/boombox.html
If anyone remembers these gems, boomboxes were one of the most purposefully complicated things around. People wanted them to look high tech, but they were just poorly designed and overly complicated to use. The techie look actually made them more scary for people to use as they were new to the market. Even though they weren’t actually super complicated to use, the multiple controls, switches, toggles and buttons (80% of which were never used. :P) made it seem that way. I may have had this exact one…
AFFORDANCE
“A property in which the physical characteristics of an object or environment Influence its function. Objects and environments are better suited for some functions than others. Round wheels are better suited than square wheels for rolling; therefore, round wheels are said to better afford rolling.”
Positive:
When creating cell phones, people wanted to be very clear about how they worked. Some were better than others. One good way affordance played a role is the icons for starting and ending calls. Pretty much gone on smartphones, these icons (seen above on the right) gave the perceived affordance of picking up and setting down a receiver. This is true of some smartphones that will auto pickup and hangup by lifting the phone to one’s cheek.
Bad:
CONFIRMATION
“A technique for preventing unintended actions by requiring verification of the actions before they are performed. Confirmation Is a technique used for critical actions, inputs, or commands. It provides a means for verifying that an action or input is intentional and correct before it is performed. “
Both of these are examples of digital User interface confirmations that incorporate dialog and two-step operation. One better than the other.
Good
This is a great digital example of confirmation. Obviously you might not want to reset your score, so a very clear alert message pops up with the options “No Thanks” and “Restart”. You couldn’t be more clear with the dialogue either.
Bad
This example is straight out of Apple’s Human Interface Guidelines – they recommend it! However I find using Cancel in conjunction with Undo as a really bad way of confirming an unintended action. Cancel and Undo kind of mean the same thing in some senses, and I can see this being very confusing for those who aren’t native English language speakers… Shame on you Apple! I actually think some more dialogue could help here.
CONSTRAINT
“A method or limiting the actions that can be performed on a system. Constraints limit the possible actions that can be performed on a system. Proper application of constraints in this fashion makes designs easier to use and dramatically reduces the probability of error during Interaction. There are two basic kinds of constraints: physical constraints and psychological constraints.”
Good:
This is a good example of a psychological constraint using both symbols (the barking dog is a pretty universal “no trespassing” and “danger”) and conventions with the bold red writing. Even if someone didn’t speaking English, they would probably catch the drift that they should stay out of whatever this sign is on.
Bad
I have always hated knobs like these. The kind that free spin and feel like you turn them too fast, the correlation between the turn and what they are doing feels off. On this thermostat, these axis based controls do indeed help provide more control surface in a small space, but not well. The left control only really needs 4 options, and who knows what the on on the right controls. Also the screen above seems to be touch/screen (note the information i) so why do we need these knobs at all? I think they are an example of bad constraint because the mapping of the dials is unclear and not the right way to control sensitivity in this case (I always somehow end up putting the volume down with these when I try to turn it up quickly!)
CONTROL
“The level of control provided by a system should be related to the proficiency and experience levels of the people using the system. Beginners do best with a reduced amount of control, while experts do best with greater control.”
Good
.pdfAdobe has tried to make some of their more complicated products easier to use in certain formats. For example. Adobe Elements – which offers a selection of Adobe Photoshop editing tools for a lower price tag – has three different user interface modes: Quick, Guided, and Expert to help all different levels of users get acquainted. I can imagine this also helps upgrade the “experts” to Photoshop when they want even more tools and functionality.
Bad
I have always found xCode particularly hard to understand, especially as a beginner. While they do have keyboard commands as do most of Mac’s built in programs, they really don’t have different levels of complexity with their user interface. It is complicated right from the start with several different screens, file folders, and buttons that can only be accessed from certain tabs – which are essential needed buttons. I also think that the buttons in the top right which allow you to switch between different views in different windows are super complicated. I can only get it so that my code displays in right window, and my interface in the other about 40% of the time. I think that XCode (given that Swift is trying to be so high level and easy to understand) could use a serious overhaul to introduce some stepped controls for different user levels, instead of having everything right from the start.
COST BENEFIT
“An activity will be pursued only if its benefits are equal to or greater than the costs, From a design perspective, the cost-benefit principle is typically used to assess the financial return associated with new features and elements. The cost-benefit principle can also be applied to assess design quality from a user perspective. If the costs associated with interacting with a design outweigh the benefits, the design is poor. If the benefits outweigh the costs, the design is good.”
Good:
A good example of cost benefit in action is the lines at ComicCon every year!!! The perceived benefit of getting into the big panels with all the famous people and popular shows (shown here) outweighs the cost of waiting in line for 3 hours and missing 3 other lesser panels (which totally still have lines too).
Bad
A personal example of bad cost benefit is when I lived in a 5th floor walkup next to Central park for the last 5 years. The perceived cost of schlepping up and down my stairs made it so that I really didn’t go to the park very much for fun. Going up and down was enough twice a day for work (and I walked across the top of the park to get to work) so the perceived benefit of perhaps one of the best parks in the world was overshadowed by 60 steps!
ENTRY POINT
“A point of physical or attentional entry into a design. The initial impression of a system or environment greatly influences subsequent perceptions and attitudes, which then affects the quality of subsequent interactions. This impression is largely formed at the entry point to a system or environment.”
Good
A great example of an entry point is the entrance to PDT (Please Don’t Tell) the “secret” bar in the back of the Crif Dog’s on St Marks place. You actually have to step inside, press the buzzer and confirm with the person on the other end of the phone before the wall of the phone booth slides open. This bar is wildly successful because of the novelty of its entrance. It absolutely sets its expectation as a very small speakeasy (read exclusive) bar. It even plays on classic tropes and symbols from film and literature to achieve this effect (Dr. Who, Harry Potter).
Bad:
I HATE the entrance to the Long Island portion of Penn Station (the lower level). The rest of Penn Station is not quite as bad, but as you can see here, outdated tiles, payphones, a low ceiling, and just kind of dim scruffy appearance always put me off when coming in. Plus it’s guarded by 5 police and 3 army people holding actual machine guns. What could be a more off putting way to get into or out of New York City???
This is the Penn Station they knocked down… Apparently they are rebuilding it, kind of?
ERRORS
“Most accidents are caused by what is referred to as human error, yet most accidents are actually due to design errors rather than errors of human operation. An understanding of the causes of errors suggests specific design strategies that can greatly reduce their frequency and severity. There are two basic types of errors: slips and mistakes.”
Slips:
Good:
An example of helping prevent slips in user interface is autofill in search, especially for sites with large catalogs of information or products (like Amazon). If the product is hard to spell or if the user is button mashing on a phone or tablet, slips can often occur when trying to type the correct word. The predictive search and autofill helps users to prevent slips by giving them suggestions to help narrow their choices and select the correct entry as soon as it appears. I think I might rely on this feature way too much with google at this point.
Mistakes:
Bad
One piece of equipment that certainly doesn’t help you not to make mistakes in operating it is treadmills/ellipticals at the gym. I mean, you are already running – which is kind of stressful when it comes to having to press things – and then you have to additionally figure out this bewildering array of random arrows, buttons, fingerprint sensors, grip handles etc. Also the feedback of the screen on these things is nonsensical. I could never figure out what all of the blocks meant with “interval training” and could really never do more than just turn the thing on and very occasionally get it to tell me my pulse. I would also always reset it, speed it up way too fast, turn it off, or change modes when trying to use it. The interface plus activity made it very stressful to try to use and I just kept messing up.
Dana Martens 