Your SlideShare is downloading. ×
User Interface is King: Developing a Web App UI
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

User Interface is King: Developing a Web App UI

2,844

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 …

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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,844
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
62
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. User Interface is King Developing a Web App UI by Dave Olsen West Virginia University Web Services
  • 2. I’m nervous.
  • 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. 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 @ slateinfo.blogs.wvu.edu
  • 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. What is User Experience Interface + Expectations = A Feeling simple math, really
  • 7. Success Spectrum Colorful! credit: amy hoy
  • 8. Success Spectrum It’s awesome!
  • 9. Success Spectrum It’s pretty cool.
  • 10. Success Spectrum It’s ok. Sometimes I have problems.
  • 11. Success Spectrum I hate it!
  • 12. What We Want Everyone to be happy!
  • 13. Zen of User Interface
  • 14. Zen of User Interface Have a Vision For Your App write it down. post it in your cube. stick to it!
  • 15. Zen of User Interface It’s About: Balance, Form, & Function it’s not about “pretty”
  • 16. Zen of User Interface Add Nothing But Value avoid “it’d be nice to have” features
  • 17. Zen of User Interface Design for 80% don’t listen to all of your users
  • 18. Zen of User Interface Be Consistent same font, same alignment, same copy structure
  • 19. Consistency Example Example of being consistent ooga!
  • 20. Consistency Example Example of being consistent ooga!
  • 21. Inconsistency Example Example of being consistent ooga!
  • 22. Zen of User Interface Be Opinionated preferences are evil
  • 23. Weak Be Opinionated preferences are evil
  • 24. Strong
  • 25. Zen of User Interface Listen To Your Gut Instinct negative emotional/physical response = something wrong
  • 26. But at the end of the day... this is the most important thing!
  • 27. Zen of User Interface It’s All About The User and, remember, their will always be a first-time user
  • 28. First-time Example
  • 29. Before You Code Use Case Screenflow Wireframe
  • 30. Before You Code Buy a Whiteboard 12’x4’ is a good size
  • 31. Our Whiteboard Our Whiteboard
  • 32. Before You Code Design Your App Around Tasks let the UI determine your feature set
  • 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. Before You Code Screenflow get some use out of the whiteboard
  • 35. Example of Screenflow Screen 1 Screen 2 Screen 3
  • 36. Before You Code Wireframe get some more use out of the whiteboard
  • 37. Wireframe Example Example of Wireframe use our feedback form example
  • 38. Before You Code Paper Prototyping faster than Photoshop but not something we do...
  • 39. While You’re Coding <%= ‘Hello World’ -%>
  • 40. While You’re Coding Learn To Let Go especially if you’re part of a team
  • 41. While You’re Coding Flex Everything but the Deadline limited time will force you to keep your UI clean
  • 42. While You’re Coding Iterate lather, rinse, repeat
  • 43. Iteration Example - v1 Iterate lather, rinse, repeat
  • 44. Iteration Example - v2
  • 45. Iteration Example - v3
  • 46. While You’re Coding Share UI Concepts let your users know what you’re up to
  • 47. UI Concept Demo
  • 48. While You’re Coding Have a Proofer for consistency
  • 49. After You’ve Coded mmm... creamery
  • 50. After You’ve Coded Ride Out the Storm wait out knee-jerk reactions
  • 51. After You’ve Coded Reconnaissance Testing be stealthy!
  • 52. After You’ve Coded Use the App become a user
  • 53. After You’ve Coded Don’t Be Afraid to Change Things if there’s something wrong, fix it
  • 54. Change Example - Before
  • 55. Change Example - After
  • 56. Other Things You Can Do
  • 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. Other Things You Can Do Hide Advanced Features not everyone needs them vs.
  • 59. Other Things You Can Do Give Hints everyone needs them
  • 60. Other Things You Can Do Segmentation bite-sized chunks
  • 61. Other Things You Can Do Space Out Submit Options avoid accidental clicks
  • 62. Other Things You Can Do Standardize Your Icons choose icons that make sense vs.
  • 63. Other Things You Can Do Use Icon Keys ‘cause not everyone will know what they mean
  • 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. Q &A Any Questions? otherwise, thanks!

×