Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Interface Fundamentals

14 037 vues

Publié le

From Stanford BUS 40: User Experience Design for the NonDesigner

How do we get from task flows to interface screens? How do we make sure they are clear and effective?

Covering key design ideas when designing the user interface.

Publié dans : Design, Technologie
  • Unlock Her Legs - How to Turn a Girl On In 10 Minutes or Less... ◆◆◆ https://tinyurl.com/unlockherlegss
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Interface Fundamentals

  1. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike @cwodtke INTERFACE DESIGN FUNDAMENTALS
  2. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike “Like putting an Armani suit on Attila the Hun, interface design only tells how to dress up an existing behavior.” – Alan Cooper
  3. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike A framework is the way elements will be organized on a page for use and understanding
  4. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike From last week’s homework 5min
  5. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike A task analysis From Information Architecture: Blueprints for the Web, this is a task analysis for a website for Sundance film festival, featuring a schedule planner
  6. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  7. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Each task could have a page
  8. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike First Yahoo 1994 1995: first graphic logo Remind you of something?
  9. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Including the schedule creator tool…
  10. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Wizards: Many boxes, many pages
  11. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike When to Use Wizards • Multi step process • Must be completed in order • The audience is not technically savvy • Bandwidth is low
  12. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  13. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike What if we put the tasks with the thing they were modifying?
  14. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike It’s a toolbar Tools here Item affected here
  15. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Toolbars Tools here Item affected here And here And here Photoshop: toolbars on steroids
  16. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike The web uses toolbars more sparingly
  17. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike ToolbarsTools here Item affected here A simpler design is better for infrequent use.
  18. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  19. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  20. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  21. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  22. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  23. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike What other ways can we organize elements? Control Panels? Carousels? Thumbnail<-> Full Size?
  24. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  25. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Two videos sites. The “meal” is the video, and the tools to consume (or play with) it are arrayed around the main meal. (P.S. There are toolbars too)
  26. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHICH PAIR OF PANTS ARE NOW 39.99?
  27. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHICH CAR IS 49.99?
  28. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Why is the response so far from the invitation?
  29. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  30. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike When designing the page, group items by similarity and similarity of task (navigation items together, editing items together) Give them visual importance based on user number, usage frequency and importance to business.
  31. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike • Create “zones” for functionality groups. • You can group them by putting white space around them, or use lines • Remember to keep tools close to the thing your working on
  32. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike IF YOU ARE PUTTING BOXES AROUND THINGS TO MAKE IT CLEAR, YOU PROBABLY SHOULD START OVER
  33. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 5 Minutes
  34. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 5 Minutes
  35. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 10 Minutes
  36. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  37. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  38. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  39. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike BUTTONS HAVE MEANING
  40. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  41. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike LINKS HAVE MEANING
  42. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  43. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Subtlety will send you to the poor house. Tell your users what to do. Clarity is relaxing, not annoying.
  44. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  45. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  46. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  47. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  48. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  49. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 10 Minutes
  50. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  51. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  52. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  53. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  54. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  55. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike On the product page (apples!) For the company to succeed 2 minutes
  56. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 5 minutes
  57. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  58. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike PAINTING
  59. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike PAINTING
  60. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  61. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  62. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Comics are read in the west left to right, like a page. However, good artists add visual elements to help you flow. http://samkieth.blogspot.com/
  63. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  64. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  65. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  66. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  67. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike I AM TIMES NEW ROMAN Hey, I’m Arial
  68. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike I AM COMIC SANS I am the devil
  69. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike I AM IMPACT LOL
  70. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  71. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Georgia is always welcome
  72. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike A foolish consistency is the hobgoblin of little minds, adored by little statesmen and philosophers and divines. With consistency a great soul has simply nothing to do. He may as well concern himself with his shadow on the wall. Speak what you think now in hard words, and to-morrow speak what to-morrow thinks in hard words again, though it contradict every thing you said to-day. — 'Ah, so you shall be sure to be misunderstood.' — Is it so bad, then, to be misunderstood? Pythagoras was misunderstood, and Socrates, and Jesus, and Luther, and Copernicus, and Galileo, and Newton, and every pure and wise spirit that ever took flesh. To be great is to be misunderstood.
  73. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike To be great is to be misunderstood.
  74. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike A foolish consistency is the hobgoblin of little minds, Adored by little stAtesmen And philosophers And divines. With consistency A greAt soul hAs simply nothing to do. he mAy As Well concern himself With his shAdoW on the WAll. speAk WhAt you think noW in hArd Words, And to- morroW speAk WhAt to-morroW thinks in hArd Words AgAin, though it contrAdict every thing you sAid to-dAy. — 'Ah, so you shAll be sure to be misunderstood.' — is it so bAd, then, to be misunderstood? pythAgorAs WAs misunderstood, And socrAtes, And Jesus, And luther, And copernicus, And gAlileo, And neWton, And every pure And Wise spirit thAt ever took flesh. to be greAt is to be misunderstood.
  75. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike to be greAt is to be misunderstood.
  76. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike A foolish consistency is the hobgoblin of little minds, adored by little statesmen and philosophers and divines. With consistency a great soul has simply nothing to do. He may as well concern himself with his shadow on the wall. Speak what you think now in hard words, and to-morrow speak what to-morrow thinks in hard words again, though it contradict every thing you said to-day. — 'Ah, so you shall be sure to be misunderstood.' — Is it so bad, then, to be misunderstood? Pythagoras was misunderstood, and Socrates, and Jesus, and Luther, and Copernicus, and Galileo, and Newton, and every pure and wise spirit that ever took flesh. To be great is to be misunderstood.
  77. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike To be great is to be misunderstood.
  78. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  79. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  80. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  81. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  82. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike NATURE
  83. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  84. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  85. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  86. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  87. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  88. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  89. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  90. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  91. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHAT DO YOU THINK ABOUT WHEN YOU THINK OF A PAINTING PROGRAM?
  92. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 92 Poetics: Control, power, precision
  93. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 93 Values: Lightweight, easy, sketchy,
  94. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  95. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHAT DO YOU THINK OF WHEN YOU THINK OF WRITING?
  96. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 96 Power, control, precision,
  97. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 97 mWriter uty, peace, zen
  98. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 98
  99. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHAT DO YOU THINK OF WHEN YOU THINK OF SOCIAL?
  100. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  101. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  102. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  103. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  104. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  105. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  106. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Q&A "In an architecture of content, the information becomes the interface." -- Edward Tufte

×