Full Frontal for the Backend Pack

My presentation from Frozen Rails 2011.

Transcript

1. Full Frontal for the Backend Pack Jarkko Laine
2. FU
3. FU Follow-up
5. Dumped the clutch
9. @jarkko jlaine.net / notkea.fi hacking at wildfireapp.com consulting and training at odesign.fi
10. Design
11. Ich bin ein Berliner
12. I am a designer
13. Design
14. Design What is ?
15. Aesthetics i.e. graphic design
16. Aesthetics Functional design Cost Logistics
17. This talk is NOT about graphic design
18. “I will never buy a Mac because I won’t pay extra for design”
19. Finlandia Hall http://www.flickr.com/photos/ilkkarinne/1322522488
20. Alvar Aalto http://www.flickr.com/photos/pntphoto/3948734361
21. “Sure I'll buy the web app from you but I won't pay a dime more for design”
22. “Design is not just what it looks like and feels like. Design is how it works.” http://www.flickr.com/photos/acaben/541420967/
23. “Damn, this sucks.”
24. “The products suck! There’s no sex in them anymore!” http://www.flickr.com/photos/acaben/541420967/
25. WATCH and (critically) OBSERVE
27. Four design principles from DOET: Conceptual models Feedback Constraints Affordances
28. Conceptual Models Mental Model Implementation model UI Model From Lukas Mathis: Designed for Use
29. Conceptual Models Exchanging money for a movie. Flipping bits in a bunch of databases. ? From Lukas Mathis: Designed for Use
30. Skeuomorphic design
31. Skeuomorphic design
32. How to find out whether the conceptual model of your product works?
33. WATCH and (critically) OBSERVE
34. Example: browsing history
35. Popup windows suck because they break users’ mental model of linear browsing history
36. A solved problem, right? Right?
37. “Technologists are not noted for learning from the error of the past” - Norman in 1988.
39. JS and Ajax don’t have to break browsing history
41. $(‘#slider a’).click(function() { history.pushState({ path: this.path }, ‘’, this.href) $.get(this.href, function(data) { $(‘#slider‘).slideTo(data) }) return false }) $(window).bind(‘popstate’, function() { $(‘#slider‘).slideTo(location.pathname) }) https://github.com/blog/760-the-tree-slider
42. History.js https://github.com/balupton/ History.js
43. To recap: “Designers should provide users with appropriate models: when they're not supplied, people are likely to make up inappropriate ones.”
44. Feedback
45. Feedback “Immediate and consistent feedback is the basis of learning.” John Medina, Brain Rules for Baby
46. Feedback http://www.flickr.com/photos/aschultz/3174440467
47. Feedback in the web
48. “The most egregious failures always come from the developers of the most recent technologies.” - Norman in 1988.
49. Hit a button in a pure- ajax form, and absolutely NOTHING HAPPENS.
50. Ajax-powered web applications need extra care as far as UI is considered.
51. Disable form buttons, show a spinner Don’t forget the feedback when an operation is over $(‘item_356’).fade( { duration: 3.0, from: 0, to: 1 }); $(‘spinner’).hide(); new Effect.Highlight( ‘new_item_element’, {duration: 5});
52. Feedback gone wrong
53. Are you sure?
56. confirmation popups...
57. confirmation popups... Break the user flow with modality
58. confirmation popups... Break the user flow with modality Annoy the hell out of the user
59. confirmation popups... Break the user flow with modality Annoy the hell out of the user do not work
60. confirmation popups don’t work, because...
61. confirmation popups don’t work, because... they are too close to the action ➔ user blindly confirms
62. confirmation popups don’t work, because... they are too close to the action ➔ user blindly confirms this makes the user wary of doing the right things
63. confirmation popups don’t work, because... they are too close to the action ➔ user blindly confirms this makes the user wary of doing the right things they try to fix the wrong problem: action vs the target
64. “The user has requested deletion of the wrong file but the computer's request for confirmation is unlikely to catch the error; the user is confirming the action, not the file name.” - Norman in 1988.
65. We had this covered with undo/redo/trash can
66. We had this covered with undo/redo/trash can And then the web (and to an extent, mobile) apps happened
67. “Technologists are not noted for learning from the error of the past” - Norman in 1988.
68. confirm() is the lazy, cover-my-ass solution
69. if gmail can do it, you can do it.
70. Rails-undo-redo (https://github.com/psq/ rails-undo-redo) Full undo manager for rails, but abandoned? Acts as paranoid (https://github.com/ goncalossilva/rails3_acts_as_paranoid) Oldie but goodie jQuery undo plugin http://docs.jquery.com/Plugins/Undo existing solutions
71. Constraints
72. Constraints “The surest way to make something easy to use, with few errors, is to make it impossible to do otherwise” - Norman in 1988.
73. Example: Make it impossible to insert a battery or cable the wrong way. http://www.flickr.com/photos/nandf/2434070753
74. Harder to find examples from the software world, but...
75. “When instructions have to be pasted on something it is badly designed” - Norman in 1988. Harder to find examples from the software world, but...
77. The save plague
78. The save plague For once a problem from the GUI world
79. The save plague For once a problem from the GUI world
80. The save plague For once a problem from the GUI world Nothing persisted before I hit “Done”. Why?
81. In contrast
82. How to fix the save plague? Learn the lesson from OS X Lion (and Google Docs) Save automatically, version if needed
83. How to fix the save plague? Periodical Ajax calls are your friend.
84. Disk space is cheap, user confidence priceless
85. Affordances Properties of the product that tell how it is supposed to be operated The flip side of constraints
86. Affordances “Wherever labels seem necessary, consider another design” - Norman in 1988.
87. Affordances Visibility: Make relevant parts visible “Your user interface elements should be created in a way that suggests to your users how they can interact with them” — Lukas Mathis
88. Affordances Lessons: Make links discernible, and if possible, underlined. Links take you from place a to place b. Don’t use links for actions.
89. Affordances Lessons: Make buttons look like buttons, to make them distinct from links. Disable buttons when clicked.
90. The four principles of user interface design Conceptual models Make sure the conceptual models of your application's UI correspond to the mental model users have of the task at hand.
91. The four principles of user interface design Feedback Provide immediate and consistent feedback on user's actions
92. The four principles of user interface design Constraints Guide the user to do the correct things.
93. The four principles of user interface design Affordances Make relevant parts visible, irrelevant parts invisible. User should be able to know how to operate a thing just by looking at it.
94. The next steps
95. The next steps
96. The next steps
97. The next steps Design for Hackers: Reverse-engineering beauty
98. Let’s all be the Steve Jobses of our lives Watch, observe and analyze
99. Thank You Frozen Rails 5k tomorrow at 08:15