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

Full Frontal for the Backend Pack

jarkko
September 29, 2011

Full Frontal for the Backend Pack

My presentation from Frozen Rails 2011.

jarkko

September 29, 2011
Tweet

More Decks by jarkko

Other Decks in Design

Transcript

  1. FU

  2. “Sure I'll buy the web app from you but I

    won't pay a dime more for design”
  3. “Design is not just what it looks like and feels

    like. Design is how it works.” http://www.flickr.com/photos/acaben/541420967/
  4. Conceptual Models Exchanging money for a movie. Flipping bits in

    a bunch of databases. ? From Lukas Mathis: Designed for Use
  5. $(‘#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
  6. To recap: “Designers should provide users with appropriate models: when

    they're not supplied, people are likely to make up inappropriate ones.”
  7. “The most egregious failures always come from the developers of

    the most recent technologies.” - Norman in 1988.
  8. 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});
  9. 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
  10. 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
  11. “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.
  12. We had this covered with undo/redo/trash can And then the

    web (and to an extent, mobile) apps happened
  13. 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
  14. Constraints “The surest way to make something easy to use,

    with few errors, is to make it impossible to do otherwise” - Norman in 1988.
  15. Example: Make it impossible to insert a battery or cable

    the wrong way. http://www.flickr.com/photos/nandf/2434070753
  16. “When instructions have to be pasted on something it is

    badly designed” - Norman in 1988. Harder to find examples from the software world, but...
  17. The save plague For once a problem from the GUI

    world Nothing persisted before I hit “Done”. Why?
  18. How to fix the save plague? Learn the lesson from

    OS X Lion (and Google Docs) Save automatically, version if needed
  19. Affordances Properties of the product that tell how it is

    supposed to be operated The flip side of constraints
  20. 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
  21. Affordances Lessons: Make links discernible, and if possible, underlined. Links

    take you from place a to place b. Don’t use links for actions.
  22. Affordances Lessons: Make buttons look like buttons, to make them

    distinct from links. Disable buttons when clicked.
  23. 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.
  24. 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.