I have never been a UI guy, my focus being mostly on databases and middleware. Sure I know HTML / CSS / XAML, but my knowledge here is far less than what I know about the other tiers. In any case this is from a development point of view – whatever little I do know of these languages does not help me distinguish a good UI from a bad UI, leave alone design a good UI. However, users ultimately buy experience, and as someone who owns a few products at Directi it is my job to own that experience. Now I doubt I can teach myself aesthetic appreciation, but usability is a little bit more objective. So of late I have been investing some time in understanding the core principles behind usability. This series of posts summarizes the key things that I learnt and is meant as notes to myself. Hopefully, this material would be useful to others as well.
Basic Usability Design
The first thing any programmer who is looking to improve his UI skills must read is User Interface Design for Programmers – classic Joel Spolsky from his early days. The key points are simple enough:
- Invent some users
- Figure out the important activities
- Figure out the user model — how the user will expect to accomplish those activities
- Sketch out the first draft of the design
- Iterate over your design again and again, making it easier and easier until it’s well within the capabilities of your imaginary users
- Watch real humans trying to use your software. Note the areas where people have trouble, which probably demonstrate areas where the program model isn’t matching the user model.
However, what is hard is implementing these steps correctly, and Joel gives several examples on correct and incorrect decision and typical mistakes. As I said, a must read.
Research Findings
This content comes from a document that my friend Ninad Rawal – the Usability Lead at Directi – shared with me. He is also responsible for introducing me to the Web Form Design book which is the topic of the second post.
1) Memory
a) Initial short-term memory is fragile – you cannot remember a lot. (So avoid having your user remember stuff across screens)
b) More you process info, more you remember it. So for example if your screen refreshes to display an update, keep that update in the same spot because your mind remember the update being there at that spot. Example is the clock in Windows Taskbar in the bottom right corner. Consistency is key since it increases recall.
c) Interfering with info while it is being processed affects how much you remember. I think it is for this reason that I prefer the static notification icon in Facebook to the popup toasts common in IM apps.
d) How much you are able to remember can be assisted by chunking information. For example, phone numbers. Or updates on a micro-blog being grouped by date. Ideal chunking is 3-4 chunks with 3-4 items / chunk.
e) Mostly you do not remember events, you remember your interpretation of events. You typically remember parts of the event and fill in the gaps by parts of other memories or what you believe is probable. Memory is not perfect and not reliable. Avoid having people to remember things. (I am thinking passwords here!)
2) Visual Recall
a) There is a common perspective associated with each object we see in daily life. In engineering terms, it happens to be the isometric perspective, followed by the front-perspective, followed by the top-perspective. This is why icons should be isometric (3d like) and not flat. For 2d objects like files and messages, a 2d icon is alright.
b) Humans are great at shape recognition (reading is a form of shape recognition). The sides of a shape are more important than the middle of a shape for recall. The mind can extrapolate and create the middle parts if the edges are present but not the other way round.
c) People tend to scan horizontally rather than diagonally. While looking for something specific, we start at top-left and then go to center, avoiding edges. So put most imp info in the center and assume a horizontal scan. Don’t put imp info at the edges.
d) Clutter creates confusion. This is because if two things are present together, the mind processes them together, even if they are unrelated. So put less space between related items and increase space between unrelated items.
e) In printed text, it is easier to read mixed upper case and lower case. For isolated words, all caps is better.
3) Decision making
a) First impressions are important, especially if they are consistently reinforced. It is hard to change once someone has made up her mind even sub-consciously.
b) Humans like to have more info. So if your user needs to use x amount of data, you may need to provide 4x.
c) Abstract info is hard to grasp – real-life examples, especially actual events (case-studies, anecdotes) create a bigger impact
4) Text Reading
a) Length of Line: (source: http://www.ingentaconnect.com/content/tandf/tbit/2004/00000023/00000006/art00002)
People prefer reading text with a smaller line length because of less eye movement, even though they are able to read faster with a longer line length of around 95 chars.
b) Number of Columns and Justification: (source: http://psychology.wichita.edu/surl/usabilitynews/72/columns.asp)
- Fast readers get best reading speed and efficiency in two column fully-justified text
- Slow readers get best reading speed and efficiency in single column left justified text
- If you are not sure, choose single column left justified text
c) Serif vs. Sans-serif Typeface: (source: http://www.alexpoole.info/academic/literaturereview.html)
- They are equally legible – could be a matter of preference, not of performance
- Choose a standard typeface – TNR, Arial, Verdana …
d) Visual Factors for GUI and Web: (source: http://www.ingentaconnect.com/content/hfes/hf/2005/00000047/00000001/art00012)
- Reading Performance reduces with in pages with many links and variable densities
- Text Alignment is not a performance enhancing factor
e) Font and Background Color: (source: http://sigs.aisnet.org/sighci/bit04/BIT_Hall.pdf)
- People believe black text on white background is most readable as compared to color fonts / backgrounds (though it does not affect their ability to retain info)
- People find color to be aesthetically appealing
- People equate higher readability with higher professionalism
5) Interaction
a) Icons (source: http://www.informaworld.com/smpp/content~content=a785033788~db=all)
- Bigger icons are faster to
w
ork with
- Icons left on the screen (like on the Windows task bar) result in faster response. Increasing number of icons does not increase response time.
- Icons appearing on the screen on an action (say on pressing Start button in Windows) result in a slower response. Increasing number of icons increases response time.
- Minimizing movement reduces response time (Fitts’ Law) – hence square configuration is best, followed by horizontal
b) Keyboard Shortcuts (source: Hidden Cost of GUI : Failure to Make Transition form Menu and Icon Toolbars. International Journal of Human Computer Interaction, 18(2), pp. 133-144)
- Using a keyboard shortcut is fastest, followed by icon, followed by menu
- People don’t learn shortcuts despite being easy to learn.
- Habitual patterns dominate performance
Recent Comments