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

Overexposed

 Overexposed

Design, esp. on the web, is not just pixel perfection. It is perhaps as important, if not more, to deliver a friendly and coherent experience from the very first point of interaction.

Behind the scenes every product is driven by a complex system, the internals of which — be it technology, implementation or business speak — are far from comforting for users. However, often as designers or as product/business owners, we overlook such elements that trickle through our products and expose themselves leading to a disconcerting experience.

There’s a video recording too: http://hasgeek.tv/metarefresh/2013/495-overexposed

F94f921203292a9ef700807e9cd5061f?s=128

Souvik Das Gupta

February 22, 2013
Tweet

Transcript

  1. Overexposed

  2. @souvikdg

  3. Miranj

  4. None
  5. None
  6. “…they [designers] worry about stuff, not in general but in

    particular, the fine detail of stuff, the stuff that we build our lives from; they worry about it so we don’t have to. The Genius of Design
  7. It's the little things.

  8. It’s the little things.

  9. None
  10. We build tools…

  11. …and every tool has two sides.

  12. None
  13. Let’s look back at computers…

  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. …they’ve evolved…

  21. …from floor space to inches…

  22. …but more importantly, they now expose far less complexity to

    the users.
  23. Exposures

  24. URLs

  25. http://aircel.com ↓ http://www.aircel.com/AircelWar/

  26. http://www.hindustantimes.com/business- news/WorldEconomy/Petrol-diesel-prices- may-go-up-this-week/Article1-1011191.aspx

  27. http://www.hindustantimes.com /business-news /WorldEconomy /Petrol-diesel-prices-may-go-up-this-week /Article1-1011191.aspx

  28. http://www.bbc.co.uk /news /world-asia-21408029

  29. http://www.thehindu.com /todays-paper /tp-national /tp-newdelhi /allahabad-stampede-toll-36 /article4405705.ece

  30. http://www.hindustantimes.com /India-news /UttarPradesh /Allahabad-stampede-death-toll-mounts- to-36-probe-ordered /Article1-1009801.aspx

  31. http://www.firstpost.com /india /allahabad-stampede-at-least-36-dead-many- injured-620131.html

  32. http://www.nytimes.com /2013 /02 /12 /world /asia /deadly-stampede-at-hindu-festival-that- draws-millions.html

  33. Actions

  34. None
  35. None
  36. None
  37. None
  38. Input

  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. Errors

  48. None
  49. None
  50. None
  51. None
  52. Copy

  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. Solutions

  60. None
  61. None
  62. None
  63. Empathy

  64. It’s important to step into the user’s shoes…

  65. …but it ain’t easy!

  66. Stages of Competence

  67. 1. Unconscious incompetence

  68. 2. Conscious incompetence

  69. 3. Conscious competence

  70. 4. Unconscious competence

  71. 1. Unconscious incompetence 2. Conscious incompetence 3. Conscious competence 4.

    Unconscious competence
  72. Product creators, designers are unconsciously competent at the technicalities.

  73. We’re not just experts at designing, but we’re also expert

    users.
  74. “ Just because you’ve always done it that way doesn’t

    mean it’s not incredibly stupid. Despair Poster
  75. Implementation should follow interface.

  76. Business should follow behaviour.

  77. Align business and design goals with user goals.

  78. “ People ignore design that ignores people. Frank Chimero

  79. The web is an amazing platform.

  80. Am I overexposing implementation details?

  81. Let’s not overexpose.

  82. • Laurel and Hardy — http://www.flickr.com/photos/tom-margie/1536404154/ • Biryani — http://www.flickr.com/photos/avlxyz/3643374430/

    • Spice Bag — http://www.flickr.com/photos/30991136@N04/3679973761/ • Hammer — http://commons.wikimedia.org/wiki/File:Intentions_II.jpg • Harvard Mark I — http://en.wikipedia.org/wiki/File:Harvard_Mark_I_Computer_-_Input-Output_Details.jpg • IBM 5150 — http://www.flickr.com/photos/wizzer/5357865167/ • Apple Lisa II — http://commons.wikimedia.org/wiki/File:Apple_Lisa-2-IMG_1730.jpg • Macbook Pros — http://www.flickr.com/photos/wza/3040805966/ • iPad — http://en.wikipedia.org/wiki/File:IPad_2_Smart_Cover_at_unveiling_crop.jpg