This week’s episode continues the series of user experience fundamentals with Dr. Tobias Komischke Director of User Experience at Infragistics. Tobias shares seven user-centered design concepts and the associated “dos” and “don’ts” with each point.

1: Orientation

Do

• Try to answer the three fundamental questions for every screen:
  • Where am I?
  • Where have I come from?
  • What's next?
• Employ UI patterns (often implemented by controls) to answer these questions
  • Bread crumb and outlook bars do an excellent job of orienting a user

Don’t

• Provide a blank context for a screen

2: Visual Attention

Do

• Group items that go together
• Make important elements stick out using size and color
• Use relative white space as a way to draw attention

Don’t

• Give all visual elements the same “weight” in size and color
• Use motion or animation unless you have a good reason to do so

3: Visual Structure and Flow

Do

• Think about how people consume visual information (often top to bottom and left to right)
• Provide visual clues to guide users what to look at first, next and so on
• Place controls that finalize actions at the end of the flow
• Pay attention to consistent alignment
• Try to adhere to established conventions

Don’t

• Add components to a screen simply because there is space to fill
• Place submit buttons at the top of a form  - we’re looking at you, SharePoint :)
• Require users add in un-necessary data

4: Scrolling & Paging

Do

• Employ paging when data is 3x or more larger than the available view area
• Give ways for users to jump to specific pages when dealing with a lot of data

Don’t

• Scroll horizontally unless you absolutely must
• Scroll endlessly

5: Text

Do

• Vary font sizes to bring attention to important text
• Choose font sizes that people can read

Don’t

• Select text colors that are hard to read
• Use text when it obstructs the meaning or a function of an operation – consider using an icon

6: Icons

Do

• Use icons to save screen real estate
• Provide a legend to explain meaning of icons
• Define tool tips to give context and meaning to icons

Don’t

• Use icons to represent complicated concepts
• Use icons inconsistently throughout the application

7: Graphs

Do

• Bar charts when possible
  • Research indicates bar charts are easiest to interpret as the X axis doesn’t convey meaning relative to the value
• Label chart scales
• Use appropriate scale values

Don’t

• Rely solely on ability of the user to interpret volumes
  • For example, 3D pie charts may prove difficult to understand as volumes are difficult for users to rate

Reference Books

In the interview Tobias mentions a number of books that you may find useful when building data visualization screens:

• Elements of Graphing Data
• The Visual Display of Quantitative Information
• Envisioning Information
• Information Visualization