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.

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!