User Interface is King: Developing a Web App UI


Published on

An overview of what the user experience is, changes you can make to your applications, and tips for testing. Uses before and after examples from our content management system (CMS) slate to demonstrate the topics.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

User Interface is King: Developing a Web App UI

  1. 1. User Interface is King Developing a Web App UI by Dave Olsen West Virginia University Web Services
  2. 2. I’m nervous.
  3. 3. Who is Dave Olsen? • I’m a Programmer/Project Manager with WVU Web Services • Languages: Ruby, PHP, & JavaScript • 7+ years of experience developing web apps • Spent the last 2+ years overseeing slate
  4. 4. What is slate? • A content management system focused on rapid production of traditional web sites • Uses Ruby on Rails • Under development for 2+ years • serving 71 live sites which leads to a quarter of a million page views a month • Not open sourced... yet • More info @
  5. 5. The Talk • What is User Experience • Zen of User Interface • Things You Can Do: • Before You Code • While You’re Coding • After You’ve Coded • Other Things You Can Do • Resources
  6. 6. What is User Experience Interface + Expectations = A Feeling simple math, really
  7. 7. Success Spectrum Colorful! credit: amy hoy
  8. 8. Success Spectrum It’s awesome!
  9. 9. Success Spectrum It’s pretty cool.
  10. 10. Success Spectrum It’s ok. Sometimes I have problems.
  11. 11. Success Spectrum I hate it!
  12. 12. What We Want Everyone to be happy!
  13. 13. Zen of User Interface
  14. 14. Zen of User Interface Have a Vision For Your App write it down. post it in your cube. stick to it!
  15. 15. Zen of User Interface It’s About: Balance, Form, & Function it’s not about “pretty”
  16. 16. Zen of User Interface Add Nothing But Value avoid “it’d be nice to have” features
  17. 17. Zen of User Interface Design for 80% don’t listen to all of your users
  18. 18. Zen of User Interface Be Consistent same font, same alignment, same copy structure
  19. 19. Consistency Example Example of being consistent ooga!
  20. 20. Consistency Example Example of being consistent ooga!
  21. 21. Inconsistency Example Example of being consistent ooga!
  22. 22. Zen of User Interface Be Opinionated preferences are evil
  23. 23. Weak Be Opinionated preferences are evil
  24. 24. Strong
  25. 25. Zen of User Interface Listen To Your Gut Instinct negative emotional/physical response = something wrong
  26. 26. But at the end of the day... this is the most important thing!
  27. 27. Zen of User Interface It’s All About The User and, remember, their will always be a first-time user
  28. 28. First-time Example
  29. 29. Before You Code Use Case Screenflow Wireframe
  30. 30. Before You Code Buy a Whiteboard 12’x4’ is a good size
  31. 31. Our Whiteboard Our Whiteboard
  32. 32. Before You Code Design Your App Around Tasks let the UI determine your feature set
  33. 33. Before You Code Write Use Cases 1. User clicks ‘Feedback’ and short form is shown 2. User fills out form noting session was ‘excellent’ 3. User clicks ‘Submit’ and is shown a success flash
  34. 34. Before You Code Screenflow get some use out of the whiteboard
  35. 35. Example of Screenflow Screen 1 Screen 2 Screen 3
  36. 36. Before You Code Wireframe get some more use out of the whiteboard
  37. 37. Wireframe Example Example of Wireframe use our feedback form example
  38. 38. Before You Code Paper Prototyping faster than Photoshop but not something we do...
  39. 39. While You’re Coding <%= ‘Hello World’ -%>
  40. 40. While You’re Coding Learn To Let Go especially if you’re part of a team
  41. 41. While You’re Coding Flex Everything but the Deadline limited time will force you to keep your UI clean
  42. 42. While You’re Coding Iterate lather, rinse, repeat
  43. 43. Iteration Example - v1 Iterate lather, rinse, repeat
  44. 44. Iteration Example - v2
  45. 45. Iteration Example - v3
  46. 46. While You’re Coding Share UI Concepts let your users know what you’re up to
  47. 47. UI Concept Demo
  48. 48. While You’re Coding Have a Proofer for consistency
  49. 49. After You’ve Coded mmm... creamery
  50. 50. After You’ve Coded Ride Out the Storm wait out knee-jerk reactions
  51. 51. After You’ve Coded Reconnaissance Testing be stealthy!
  52. 52. After You’ve Coded Use the App become a user
  53. 53. After You’ve Coded Don’t Be Afraid to Change Things if there’s something wrong, fix it
  54. 54. Change Example - Before
  55. 55. Change Example - After
  56. 56. Other Things You Can Do
  57. 57. Other Things You Can Do For Copy • Be concise. Edit and edit some more. • Use Headings. • Paragraphs or, better yet, bulleted lists. • Avoid technical jargon at all costs.
  58. 58. Other Things You Can Do Hide Advanced Features not everyone needs them vs.
  59. 59. Other Things You Can Do Give Hints everyone needs them
  60. 60. Other Things You Can Do Segmentation bite-sized chunks
  61. 61. Other Things You Can Do Space Out Submit Options avoid accidental clicks
  62. 62. Other Things You Can Do Standardize Your Icons choose icons that make sense vs.
  63. 63. Other Things You Can Do Use Icon Keys ‘cause not everyone will know what they mean
  64. 64. Resources • Slash7 (blog) • Designing the Obvious by Robert Hoekman • Good Experience (blog) • UIE Brain Sparks (blog) • Boxes and Arrows (blog) • Silk Icon Set (the pretty) • Your Gut (you)
  65. 65. Q &A Any Questions? otherwise, thanks!