Here are my responses for the 2nd-week assignment of Design for Usability in Spring of 2016.

Required readings:

• Jordan, An Introduction to Usability, Chapter 4: Designing for Usability
• Lidwell, Universal Principles of Design, Article three

Discuss:

• Post on Canvas one positive and one negative example of each of the following principles of design (along with comments):
  • Readability
  • Recognition over Recall
  • Signal-to-Noise Ratio
  • Visibility
  • Way Finding

 

 

---

 

READABILITY

The degree to which prose can be understood , based on the complexity of words and sentences. Readability is determined by factors such as word length, word commonality, sentence length, number of clauses in a sentence, and number of syllables in a sentence.

 

Good Example

I kept seeing these signs all throughout hospitals last year. They were advising people who had traveled internationally about the warning signs for ebola. These signs are a great example of readability. They use simple, clear, and direct action words to describe what to look out for. They also complement these with universally understood symbols and color combinations that alert the reader to the importance of the notice.

 

Bad Example

 

This sign, besides being just poorly poorly thought out, is a great example of low readability. In this case, the passivity of the sentence leads to confusion rather than helping to convey the importance of the message. Also, the grammar and punctuation are super confusing. This could be written in a much much simpler way using less words and more symbols.

 

RECOGNITION OVER RECALL

Memory for recognizing things is better than memory for recalling things. People are better at recognizing things they have previously experienced than they are at recalling those things from memory. It is easier to recognize things than recall them because recognition tasks provide memory cues that facilitate searching through memory.

 

Good Example

Using familiar UI elements and pre-set lists can assist users to select from a large range of choices. Here, Apple uses the same setup screen across all of their models of mac, allowing users to recognize their preferred setup. They also utilize lists to help users select what is important to them, versus recalling all of the specific options.

 

Bad Example

I think that terminal is a super bad example of this principle. You have to recall all of the commands making it very hard to use. When logging into terminal, all you see is a blinking cursor allowing you to type. Although you can access commands to list things in your directory, you still have to recall each of the commands on how to navigate it. For this reason, programs like GitHub are much easier to use as a GUI, although perhaps terminal has more flexibility and speed.

 

SIGNAL-TO-NOISE RATIO

The ratio of relevant to irrelevant information in a display. The highest possible signal-to-noise ratio is desirable in design. All communication involves the creation, transmission, and reception of information. During each stage of this process, the form of the information- the signal is degraded, and extraneous information- noise- is added. Degradation reduces the amount of useful information by altering its form. Noise reduces clarity by diluting useful information with useless information. The clarity of information can be understood as the ratio of remaining signal to added noise.

 

Good Example

Besides the fact that this is just hilarious, it is also well designed and very clear. In terms of signal amplification, the “poop” represents the correct ratios in both length and volume, while the different colors clearly demarcate the percentages represented. When it comes to minimizing noise, there is minimal text that represents necessary information and it is in different sizes according to its importance in the order of reading this graphs contents. Users can quickly look at big numbers to get an impression, and they can then dig down into smaller elements.

 

Bad Example

This is a great example of terrible signal-to-noise ratio. First of all, it is printed on a galaxy, if the rest of it wasn’t confusing enough. Then we have the fact that while they are indeed pie charts, the sliver appears not to be changing more than infinitesimally in each of them. This leads to a very very low signal as the information is super confusing, and degraded at each stage of attempting to interpret it. In terms of minimizing noise, did I say it was printed on a galaxy? Also, the bars underneath each of the stacked pie charts that make no sense are written in light ink and have a indecipherable legend. Can you tell what this graph means? I definitely can’t.

 

VISIBILITY

The usability of a system is improved when its status and methods of use are clearly visible. According to the principle of visibility, systems are more usable when they clearly indicate their status, the possible actions that can be performed, and the consequences of the actions once performed.

 

Good Example

 

This website from Budicon is a great example of visibility. It clearly plays on the trope of recognizing important elements through color, sizing, and hierarchy of choice with menus and type. In addition, they utilize context sensitivity to great effect with their huge yellow Buy button – guess what they really want you to do on their site? All of the less important information is similarly hidden in the top right menu, whereas the free option, of medium desirability, is on the main page, but in much smaller type and in negative against the background.

 

Bad Example

Now I know people may hate on me for this, but I think that Reddit is a good example of poor visibility. I find their multiple menus, arrow-down comment sections, and especially their super small, crowded and bewildering navigation bar that even has a more → on it!!! In some ways they do have their information organized hierarchically, especially given how much information they do have, but I don’t think it carries over to the visual design of the site. There has to be a way to make the categories more contextual and easy to understand by pulling out different relationships between the threads.

 

WAYFINDING

The process of using spatial and environmental information to navigate to a destination. Whether navigating a college campus, the wilds of a forest, or a Web site, the basic process of wayfinding involves the same four stages: orientation, route decision, route monitoring, and destination recognition.

 

Good Example

This is a corridor inside the Tokyo Metro Fukutoshin Line’s Shibuya station. This is a great example of elegant and effective wayfinding. Passengers can easily orient themselves using the large and clear arrows, symbols, and colors along the walls. Once they know where they are, they can decide on their route by following the signage at different intersections indicating where to go. Along the way the colors repeat allowing passengers to make sure they are on the correct route, and exits are the same color as the route line so they know where to get off for their exit.

 

Bad Example

 

And coming back to my rant about Penn Station… It has terrible wayfinding. Here is an example of the Amtrak section of Penn Station where people can wait for their trains. The only indication of what train is where is the sign of the board they are on high up above. None of the routes have different colors or signage indicating where passengers should go. In addition, it’s hard to immediately orient oneself since you come up an escalator in the middle of the room and have signs, people, and labels literally all around you. Each exit is actually listed along the wall, but there are no clear indications of which are where anywhere else in the room and they are tough to recognize from the get go. Come on Penn station, get it together!