TCANZ 2010 day 1 – Simple design choices for maximum usability
I’m attending the TCANZ Conference 2010 in Wellington, New Zealand. Patrick Hofmann gave a rousing presentation on “simple design choices for maximum usability”. These are the notes I took during the session. All credit goes to Patrick. Any mistakes are mine.
Emma introduced Patrick as “a man of few words”. He’s given many technical communicators valuable insights into visual information design. His talk today was no exception.
Patrick’s presentation focused on the key problems facing graphic design or visual design, and the simple design choices to live by.
- Graphic design is given too low a priority. As a result, we sometimes include pictures into our products for the wrong reasons: Just for decoration, or because it’s expected. We include a picture even if it’s totally irrelevant. The experience may even end up being traumatic for the user. Note from Sarah: To fully appreciate the last sentence, you need to understand Patrick’s unique presentation style. 😉
- There are too many different formats of graphics. We try to re-use the same graphics across different formats. We try to streamline our own processes, not the users’.
- We create meaningless graphics. Too often, they are there just for decoration, or with no well-defined purpose.
Patrick showed us some common responses of users during usability tests, and some ways to solve the problems.
- To build a meaningful graphic, ask yourself, “What are the main messages of this graphic, and what do I need to include or exclude to convey this meaning?”
- Verbalise what you see. Test the design by talking yourself through every element of the design. What does each element tell you? Does the picture get in the way of the actual message? Patrick showed some examples of pictures, and verbalised each object: “tree, tree, tree…” (in a map of a park where you were trying to find the paths) or “ventilation hole, ventilation hole, ventilation hole…” (in a diagram attempting to show how to put a lid back on a computer). From Sarah: I think this is a very cool idea. The verbalisation trick is very good at picking out the unnecessary detail in a diagram.
- Do the blur test. Squint, to obscure everything, and see what jumps out at you. You can do the blur test by fuzzing the image in an image tool too.
- Add some contrast.
- Get the text size and spacing right.
- Follow the workflow that the user needs to follow. Solve the oft-voiced complaint from users, “My eyes are all over the place.”
- Reduce the level of detail. Solve the complaints, “Too much jumps out at me” and “It’s too busy”.
Design choices depend on four elements, the “CRAP” elements. You should consider each of them in your page, and decide whether you’re using them to work for you or against you:
Patrick showed us some websites that used the above elements effectively and some that use them less effectively. Then he went into detail about specific design techniques that we can use to make the best use of the above four elements.
Here are just a few of the tips I picked up:
- You can align textual elements with parts of a picture. For example, the human eye is drawn to an eye or a mouth in a picture. So you could align your blocks of text with the eye or the mouth in a picture on the same page.
- When designing icons, make sure people can easily distinguish one from another. The best way is to have different silhouettes. Try to stick to a single shape, rather than two or more shapes in the same icon.
- Remove unnecessary lines, such as the borders of tables or columns. The human eye is drawn to lines, and this can detract from the actual information on the page.
- One trick that often works well, is to make the primary calls to action (buttons or links) the biggest things on the page. This really improves usability and leads to lots of good feedback from users.
Finally, evaluate your designs simply and often.
Thank you Patrick for a fun and information-packed session. As Emma quipped, “I took lots of notes, and they’re full of CRAP!” 🙂