2012/08/15

That Conference: Design for Software: A UX Playbook for Developers

This session was done by Erik Klimczak. I got into it late, and it was standing room only, so I had to jot notes down on my phone. Hopefully these still make sense and there’s not too many typos/autocorrects.

  • James Webb Young quote about ideas
  • Sketch out ideas
  • Sketch early& often to identify edge cases quickly
  • Define patterns, be consistent, reduce steps
  • Storyboarding as a form sketching
  • Drawing app in context of environment will help define usage
  • Tools: sharpie, moleskine, non-photo pencil, neutral gray pen
  • Wireframing to identify interactions, pattern layout, and get stake holder buy in early
  • Good wireframe: content, interaction, layout, hierarchy, functionality
  • Prototyping: whole point is to be wrong
  • Paper prototyping give sense of relative size. Think about things like touch screens and apps.
  • Prototyping is about taking it. Be clever, not complicated
  • Colors: start with solids and add gradients if necessary
  • Be aware of the psychology of colors
  • Use tints of color to add more colors to your palette of 2-3 colors
  • Shades of gray for the chrome of the app
  • Typography: if done right, you don't see it.
  • For print use serif body font with san-serif headers. Generally opposite for digital
  • Pick a typography and stick with it.
  • Rhythm & Scale calculator in Chrome app store
  • Pick a single family with lots of variations to give variety.
  • Visual Communication: telling the most with the least amount on a screen at a time.
  • Basically logically organizing UI.
  • If things look the same or are grouped together, the user expects them to behave the same.
  • Consistent margins, spacing, type size...
  • Reducing colors, and redundancy will greatly help.
  • Grids actually help break up a UI to help with consistent layout
  • Motion: easing should be between 250-350 milliseconds to always feel snappy
  • Animations don't always have to be complete for a user's mind to fill in the blanks.
  • Use motion for long running operations
  • Artefact Animator for C#/XAML
  • Interaction design: user flow is when the interface gets out of the way so the user feels productive
  • Avoid modal states & pop ups
  • Use color cues (red X)
  • Don't block UI
  • Read About Face 3
  • Solicit feedback: if the user doesn't know they can do something or doesn't feel confident about an action, they won't perform the action
  • Mouse adorners, touch/click states, audio, inline feedback (invalid input, password strength), wizards, refresh animations for long operations all are great forms of feedback
  • UX patterns: don't reinvent the wheel
  • Most every pattern you'd need is out there
  • He has a forth-coming book: Design For Software

No comments: