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: