OpenWest: Embrace your inner designer

During the first weekend in May, I attended the outstanding OpenWest conference, and enjoyed learning from experts. Among the most interesting sessions was one by Josh Broton titled, “Embrace your Inner Designer“.

Is design important? Yes. It changes how users see your application, how they use your application, and how they spread/recommend your application.

Think in flows, not in screens. Make a list of steps users take to use your application, and then do it yourself, and have your staff do it too.

  1. Users navigate to our site
  2. Users click login button
  3. User enters email address
  4. Enter password
  5. Click login button
  6. System validates credentials

The best marketing is FREE marketing. When your users recommend the app to others.

Design tips for developers:

  1. Use a consistent layout — use a grid system to ensure proper spacing.
    1. e.g. http://5by5.tv, http://panoetic.com
  2. Use white space! It helps users differentiate between objects. Less space creates groupings. It improves your readability and user retention.
  3. Use Color, Size and Positioning to convey importance.
  4. Be Consistent. Use one sans-serif font for the body on the screen. On paper, use serif fonts. On Retina displays, either is okay. Use one other font for accent. Use h1, h2 tags, etc. If you change the font you’re using part way through, it takes the brain a while to switch so that it starts comprehending again.
  5. Icons should only be used to add emphasis. This drives him crazy about mobile apps. If you must use icons, then be consistent, and adhere to UI standards.
  6. Color. Every color should consistently match an action. Remember that 10% of the world is colorblind. Use “Adobe Kuler” to help you pick good color palettes. There’s a CSS plugin to desaturate your website.
  7. Use typical casing. All UPPERCASE is extremely difficult to read. Use a non-monospace font. People use width to help them differentiate words.
  8. Left-align type and objects. Don’t center text or right-align.
  9. Steal/mimic ideas. “99% of creating is forgetting where you stole an idea from”
  10. Navigation MUST be easy. Proper nesting, breadcrumb navigation, and consider touch devices (which have no hover capability).
  11. Keep it Simple. Don’t make your users think. Ever. Buy the book — it’s great. by Steve Krug.
    • But you can let them access additional features or enable them.
    • Search engines may penalize you.
  12. Make action items obvious.
  13. Make important items stand out.
  14. Minimize noise
  15. Omit needless items. “The reduction to the essential has never led to catastrophe.” — Dieter Rams
  16. When in doubt, leave it out!
  17. Keep your instructions simple
  18. Test, test, test

Ask your users if they can do what they need to with your app. Don’t ask them whether your app does what it should.

Twitter bootstrap is awesome for non-designers. You can tell websites that use it because of their look, but that might be okay. (Wikipedia info here)

Audience question: Does Windows 8 suck?

Answer: For my mom, it’s perfect. The use of whitespace is great. However, people don’t like switching to a new design paradigm. He despises the complete and total waste of space in Metro.

Check out Font-Awesome — it helps you know standard icons to use in your application.