2012/08/13

That Conference: Designers? We Don’t Need No Stinkin’ Designers!

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
Post a Comment