Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Full Frontal for the Backend Pack

82476266af9d460415d8f1fc16bb54ed?s=47 jarkko
September 29, 2011

Full Frontal for the Backend Pack

My presentation from Frozen Rails 2011.

82476266af9d460415d8f1fc16bb54ed?s=128

jarkko

September 29, 2011
Tweet

More Decks by jarkko

Other Decks in Design

Transcript

  1. Full Frontal for the Backend Pack Jarkko Laine

  2. FU

  3. FU Follow-up

  4. None
  5. Dumped the clutch

  6. None
  7. None
  8. None
  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

  26. None
  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.
  38. None
  39. JS and Ajax don’t have to break browsing history

  40. None
  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?

  54. None
  55. None
  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...
  76. None
  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