This session was presented by Jon von Gillern. Admits much of the presentation is based on Mark Miller’s good UX presentation.
- Wrote Nitriq and Atomiq
- Why focus on UI?
- Happy customers == more money
- Good UI is taken for granted, bad UI is easier to notice
- Pour UI adds up
- How can we measure UI
- Keystrokes
- Mouse Travel distance
- Gaze Shift (eye travel distance)
- Recall Rules of interaction
- Find signal among noise (don’t make the user think about what they’re looking for)
- Variance from user mental model (does the UI behave how they expect it to?)
- Mental Time = Total Time – Physical Time
- Mental Costs – things that prevent users from getting into the “flow” of being productive
- Lose of focus
- Good UI is:
- Clear (in purpose)
- Concise
- Consistent
- Tools for UI
- Contrast
- visual difference between two elements
- “Visual Weight should match information relevance” – Mark Miller
- Eyes are attracted to greatest contrast (similar to why young kid’s shows are generally primary colors because they are so different)
- Nitriq example: Actions have more contract, Information has less contrast
- Google “WCAG 2.0”
- Relative Luminance
- Contrast Ratio
- Black Text vs White Text article
- Green, Red, Blue for the order that the eye can tell differences in shades.
- Testing Tools
- Color
- Can represent differences
- Lots of color == Lots of noise
- Work with a limited color palatte
- Hue, Saturation, Luminesces vs Hue, Saturation, Value
- Pick a hue for a color, and add others by changing the saturation & value
- Kuler
- Read the article on Wikipedia
- ~5% of humans have some form of color deficiency
- Use Red & Blue, not Red & Green to account for color blindness
- Size
- Easier to find large items
- Important information should be larger
- Relationship to precision
- Common actions should be larger
- Test on the worst device to allow for finding if sizes still work.
- Ordering
- You can scan up & down faster than left-to-right
- Motion
- Effective for helping guide gaze
- great for entrance & exits
- use acceleration/deceleration (easing)
- Fade in with size at the same time to affect flow documents
- Shape
- Icons are a kind of shape
- Depend on context (flow chart, etc)
- Fonts
- Sans-serif: quick to read/recognize
- Serif
- better for long chunks of text
- Character by character legibility (“1” vs “l” vs “I”)
- Dyslexia
- Kerning, Symmetry
- Comic Sans actually helps with this…or just buy a specialized font
- Parallel vs Serial
- Don’t display information in serial if it can be done in parallel
- Modal Dialogs
- Combo Boxes when seeing all options
- Shadow/Glow
- Can help differentiate UI that “sits on top” of other UI
- Glow can help defuse similar colors that sit on top of other items
- Gradient
- Transferring gaze
- Proximity
- Similar data should be close
- Similar actions should be close
- Vice Versa
- Bad proximity causes gaze shifting
- Interaction Patterns
- http://quince.infragistics.com
- Remember Parallel vs Serial
- Just because a pattern doesn’t mean it’s good
- Immediate, continuous feedback
- Progress Indicators
- Preview Hinting
- Know your users (who, how many, how often)
- Discoverability
- How often specific features used
- gather telemetry
- Don’t be afraid to steal ideas
- UI Checklist:
- What are the 3 most important screens
- What are the 3 most important pieces of data
- What are the most important actions
- Are you using the same terms as your users
No comments:
Post a Comment