Artists and designers often talk about different emotions that colors elicit, and suggest specific use for them in mobile app and web designs. Interestingly, across cultures different colors can be associated with very distinct emotions. For example, while anger is represented by red in the Western world, it is depicted as black in Hindu culture. Love is yellow to Native Americans and blue to Africans! So, while crafting away at the next project, keep these cultural flavors in mind. David McCandless has created a handy color-culture reference!
The two extremes of visualizing data are poor and excessive design. On the one hand, there are poorly designed charts that contain unnecessary elements that add visual clutter, have poor color selections and so on (see Stephen Few’s example). On the other hand, other charts are over-designed with various embellishments added purely for aesthetic effect (again, Stephen Few’s example to the rescue!). Both types of graphs make it difficult for the audience to extract information that the chart is meant to represent without sacrificing accuracy of the data.
A recent paper on visual embellishments in bar graphs empirically evaluates how different design choices affect accuracy of data extracted from a chart. The authors test the following bar charts against a standard graph (see g in Figure below):
- Rounded ends on rectangle bars (see a)
- Triangles instead of rectangle bars (see b)
- Capped ends on rectangle bars (see c)
- Overlapping triangles instead of rectangle bars (see d)
- Quadratically increasing triangles (see e)
- Bars that begin below the origin (see f)
Authors find that only the capped charts (c) and bars extending below the origin (f) are as effective at representing data accurately as the standard bar chart (g). For relative comparison between bars and their numerical representations, only the chart where bars extend beyond the origin (f) do as well as standard bars (g). The take-away? Stick to the standard bar chart. And, in the words of the authors:
Bar chart embellishments do indeed have an impact on how well the data within the chart can be communicated. For nearly all tested chart embellishments, even small changes like rounding the top of a bar, led to higher error rate.
So, while striving to avoid the extreme of poor chart design, make sure you don’t end up on the opposite end of the spectrum. Simply designed charts are often the best ones.
For a device with a small screen, you must limit the number of features to those that matter the most for the mobile-use case. Even on desktop computers, precious pixels are the world’s most valuable real estate.
These wise words, no-brainers to some, come from Jakob Nielsen and Raluca Budiu’s Mobile Usability book (p. 52). The authors highlight the need to balance available screen space with the amount of information that is presented; too little as well as too much information will create a poor mobile user experience.
How to determine what’s appropriate?
- Conduct user research to determine requirements for design
- Follow design best practices in the mobile user-centered design philosophy
- Conduct heuristic evaluations and usability testing
- Tweak design based on insights from step 3
A heuristic evaluation checklist developed specifically for assessing usability of mobile devices has recently been published by a team from Spain. The authors combined standard software heuristic checklists from leading authorities in the field, and adapted them for evaluating touchscreen devices. The checklist was tested with non-trained engineers who were able to effectively identify usability gaps of a design. The authors argue that “selecting and rearranging these heuristic guidelines offer a tool which works well not just for evaluation but also as a best-practices checklist.” See their Supplementary Materials for the entire checklist.
This article presents a case study comparing user behavior on an e-commerce website before and after it was optimized for mobile devices. Improving user experience by optimizing the website for mobile devices lead to, among other things:
- System Usability Scale (SUS) increased from 57 to 73
- Website bounce rate decreased by 50%
- Unique page views increased by 41%
- Particular product sales increased by 31%
- Overall sales increased by over 70%
This article discusses usability do’s and don’ts that are grounded in actual research. Of the 10 tips listed, the highlights are:
- The “Three-click rule” is arbitrary
- F-shaped pattern is best for skimming
- Important content should be on the left of the page
- Instructional and error messages matter
- Search is no substitute for poor navigation
Users are expert in knowing what they need to accomplish, but not in knowing how software ought to be designed to support their needs. Allowing users to design software through feature requests is the worst form of disaster by committee.
Wise words by Stephen Few from Information Dashboard Design (2nd edition). I substituted ‘users’ instead of ‘customers’ to underscore that to properly design for users, their needs must first be uncovered through various research methods (e.g. contextual inquiry) rather than by asking the user “What do you need?”