Rundgang: Benutzerfreundliches Webdesign

2.298 visualizações

Publicada em

Einige grundlegende Konzepte für benutzerfreundliche Websites

Publicada em: Educação
  • Lieber Andreas, vielen Dank, das hast Du ***super*** gemacht, darauf werde ich jetzt immer verweisen wenn es um die Evaluation von Websites über den reinen Inhalt hinaus gehen soll. Nur ein Detail: 'Saint-Exupéry'...
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Seja a primeira pessoa a gostar disto

Rundgang: Benutzerfreundliches Webdesign

  1. 1. Ein Rundgang Benutzerfreundliches Webdesign
  2. 2. Design „Vollkommenheit entsteht nicht dann, wenn man nichts mehr hinzufügen kann, sondern, wenn man nichts mehr wegnehmen kann.“ (Sainte-Exupery)
  3. 3. Design ≠ Dekoration
  4. 4. Design ≠ Dekoration Design ≠ Kunst
  5. 5. Design ≠ Dekoration Gutes Design … • ist „unsichtbar“, • dient dem Benutzer, • erweist sich in der Benutzung. Design ≠ Kunst
  6. 6. Usability Benutzerfreundlichkeit
  7. 7. Usability Usability measures the quality of the user experience. Benutzerfreundlichkeit
  8. 8. 1. Layout 2. Texte und Typographie 3. Interaktion („Klicken“) 4. Orientierung Layout | Texte | Interaktion | Orientierung
  9. 9. Layout
  10. 10. Weißraum Whitespace
  11. 11. Layout | Texte | Interaktion | Orientierung
  12. 12. Layout | Texte | Interaktion | Orientierung
  13. 13. Layout | Texte | Interaktion | Orientierung
  14. 14. Layout | Texte | Interaktion | Orientierung
  15. 15. Layout | Texte | Interaktion | Orientierung
  16. 16. Layout | Texte | Interaktion | Orientierung
  17. 17. Layout | Texte | Interaktion | Orientierung
  18. 18. Layout | Texte | Interaktion | Orientierung
  19. 19. Layout | Texte | Interaktion | Orientierung
  20. 20. Geplant, nicht übrig geblieben Jason Berberich: http://flickr.com/photos/berberich/22309133/ – Creative Commons BY-ND-SA Layout | Texte | Interaktion | Orientierung
  21. 21. Abstand und Nähe Weißraum Layout
  22. 22. Layout | Texte | Interaktion | Orientierung
  23. 23. Layout | Texte | Interaktion | Orientierung
  24. 24. Layout | Texte | Interaktion | Orientierung
  25. 25. Layout | Texte | Interaktion | Orientierung
  26. 26. Visuelle Einheiten Layout
  27. 27. Layout | Texte | Interaktion | Orientierung
  28. 28. Layout | Texte | Interaktion | Orientierung
  29. 29. Layout | Texte | Interaktion | Orientierung
  30. 30. Layout | Texte | Interaktion | Orientierung
  31. 31. Layout | Texte | Interaktion | Orientierung
  32. 32. Layout | Texte | Interaktion | Orientierung
  33. 33. Layout | Texte | Interaktion | Orientierung
  34. 34. Layout | Texte | Interaktion | Orientierung
  35. 35. Hans Englisch Mo,4. Std. Elke Französisch Di, 1. Std. Gustav Kunst Do, 2. Std. Petra Biologie Do, 4. Std. Egon Erdkunde Fr, 4. Std. Claudia Geschichte Mo, 2. Std. Implizite Linien Layout | Texte | Interaktion | Orientierung
  36. 36. Hans Englisch Mo,4. Std. Elke Französisch Di, 1. Std. Gustav Kunst Do, 2. Std. Petra Biologie Do, 4. Std. Egon Erdkunde Fr, 4. Std. Claudia Geschichte Mo, 2. Std. Implizite Linien Layout | Texte | Interaktion | Orientierung
  37. 37. Texte & Typographie
  38. 38. Layout | Texte | Interaktion | Orientierung
  39. 39. How do users read on the Web? Layout | Texte | Interaktion | Orientierung
  40. 40. How do users read on the Web? They don’t. Jakob Nielsen Layout | Texte | Interaktion | Orientierung
  41. 41. Besucher lesen nicht, sie scannen. Layout | Texte | Interaktion | Orientierung
  42. 42. Besucher lesen nicht, sie scannen. http://www.useit.com/alertbox/reading_pattern.html Layout | Texte | Interaktion | Orientierung
  43. 43. Text „scanbar“ machen Layout | Texte | Interaktion | Orientierung
  44. 44. • Mehr Absätze Text „scanbar“ machen Layout | Texte | Interaktion | Orientierung
  45. 45. • Mehr Absätze • Mehr Listen Text „scanbar“ machen Layout | Texte | Interaktion | Orientierung
  46. 46. • Mehr Absätze • Mehr Listen • Stichwörter hervorheben Text „scanbar“ machen Layout | Texte | Interaktion | Orientierung
  47. 47. • Mehr Absätze • Mehr Listen • Stichwörter hervorheben • Unterüberschriften Text „scanbar“ machen Layout | Texte | Interaktion | Orientierung
  48. 48. • Mehr Absätze • Mehr Listen • Stichwörter hervorheben • Unterüberschriften • (Ein Gedanke pro Absatz) Text „scanbar“ machen Layout | Texte | Interaktion | Orientierung
  49. 49. • Mehr Absätze • Mehr Listen • Stichwörter hervorheben • Unterüberschriften • (Ein Gedanke pro Absatz) • (Umgekehrte Pyramide) Text „scanbar“ machen Layout | Texte | Interaktion | Orientierung
  50. 50. Stichwörter hervorheben Layout | Texte | Interaktion | Orientierung
  51. 51. Stichwörter hervorheben Layout | Texte | Interaktion | Orientierung
  52. 52. Stichwörter hervorheben Layout | Texte | Interaktion | Orientierung
  53. 53. Unterüberschriften Layout | Texte | Interaktion | Orientierung
  54. 54. Unterüberschriften Layout | Texte | Interaktion | Orientierung
  55. 55. Mehr Absätze Layout | Texte | Interaktion | Orientierung
  56. 56. Mehr Absätze Layout | Texte | Interaktion | Orientierung
  57. 57. Mehr Listen Layout | Texte | Interaktion | Orientierung
  58. 58. Mehr Listen Layout | Texte | Interaktion | Orientierung
  59. 59. Texte gut lesbar gestalten Typographie
  60. 60. Web-Typographie Layout | Texte | Interaktion | Orientierung
  61. 61. • Schriftart • Zeilenhöhe • Zeilenlänge • Weißraum / Text Web-Typographie Layout | Texte | Interaktion | Orientierung
  62. 62. Details sind wichtig Layout | Texte | Interaktion | Orientierung
  63. 63. Details sind wichtig Layout | Texte | Interaktion | Orientierung
  64. 64. Details sind wichtig Layout | Texte | Interaktion | Orientierung
  65. 65. Details sind wichtig Layout | Texte | Interaktion | Orientierung
  66. 66. Details sind wichtig Zeilenhöhe (leading, line-height) Layout | Texte | Interaktion | Orientierung
  67. 67. typetester.org Layout | Texte | Interaktion | Orientierung
  68. 68. typetester.org Layout | Texte | Interaktion | Orientierung
  69. 69. Zeilenlänge Layout | Texte | Interaktion | Orientierung
  70. 70. Zeilenlänge Layout | Texte | Interaktion | Orientierung
  71. 71. Zeilenlänge Layout | Texte | Interaktion | Orientierung
  72. 72. Verhältnis Weißraum/Text Layout | Texte | Interaktion | Orientierung
  73. 73. Verhältnis Weißraum/Text Layout | Texte | Interaktion | Orientierung
  74. 74. Verhältnis Weißraum/Text Layout | Texte | Interaktion | Orientierung
  75. 75. Fragen?
  76. 76. Interaktion
  77. 77. Layout | Texte | Interaktion | Orientierung
  78. 78. Layout | Texte | Interaktion | Orientierung
  79. 79. Rückmeldungen Interactive Feedback Interaktion
  80. 80. Layout | Texte | Interaktion | Orientierung | Farbe Kellie Herring: http://flickr.com/photos/dontwreckyourhead/3008283630/ – Creative Commons BY-NC-ND
  81. 81. Alltag Interaktion – Rückmeldung Layout | Texte | Interaktion | Orientierung | Farbe Kellie Herring: http://flickr.com/photos/dontwreckyourhead/3008283630/ – Creative Commons BY-NC-ND
  82. 82. Layout | Texte | Interaktion | Orientierung
  83. 83. Formular reagiert auf das Abschicken Layout | Texte | Interaktion | Orientierung
  84. 84. Links Interaktion
  85. 85. Layout | Texte | Interaktion | Orientierung
  86. 86. Links reagieren auf „Berührung“ Layout | Texte | Interaktion | Orientierung
  87. 87. Layout | Texte | Interaktion | Orientierung
  88. 88. Linkflächen maximieren Layout | Texte | Interaktion | Orientierung
  89. 89. Linkflächen maximieren Layout | Texte | Interaktion | Orientierung
  90. 90. Alberto http://flickr.com/photos/albertoalerigi/3111010288/ – Creative Commons CC BY
  91. 91. Alberto http://flickr.com/photos/albertoalerigi/3111010288/ – Creative Commons CC BY Links „riechen“ nach ihrem Ziel
  92. 92. Wenn Sie sich unseren Ferienplan herunterladen möchten, klicken Sie hier. L Wenn Sie sich unseren Ferienplan herunterladen möchten, klicken Sie hier. L Möchten Sie sich unseren Ferienplan herunterladen? ✓ Hier können Sie sich unseren Ferienplan herunterladen. ✓
  93. 93. Wenn Sie sich unseren Ferienplan herunterladen möchten, klicken Sie hier. L Wenn Sie sich unseren Ferienplan herunterladen möchten, klicken Sie hier. L Möchten Sie sich unseren Ferienplan herunterladen? ✓ Hier können Sie sich unseren Ferienplan herunterladen. ✓
  94. 94. Wenn Sie sich unseren Ferienplan herunterladen möchten, klicken Sie hier. L Wenn Sie sich unseren Ferienplan herunterladen möchten, klicken Sie hier. L Möchten Sie sich unseren Ferienplan herunterladen? ✓ Hier können Sie sich unseren Ferienplan herunterladen. ✓
  95. 95. Wenn Sie sich unseren Ferienplan herunterladen möchten, klicken Sie hier. L Wenn Sie sich unseren Ferienplan herunterladen möchten, klicken Sie hier. L Möchten Sie sich unseren Ferienplan herunterladen? ✓ Hier können Sie sich unseren Ferienplan herunterladen. ✓
  96. 96. Orientierung
  97. 97. Jonathon Colman: http://flickr.com/photos/jcolman/342059405/ – CC BY-NC-ND Wo bin ich?
  98. 98. Layout | Texte | Interaktion | Orientierung
  99. 99. Layout | Texte | Interaktion | Orientierung
  100. 100. Breadcrumbs Layout | Texte | Interaktion | Orientierung
  101. 101. Mehrere Wege zum Ziel Layout | Texte | Interaktion | Orientierung
  102. 102. Mehrere Wege zum Ziel Layout | Texte | Interaktion | Orientierung
  103. 103. Mehrere Wege zum Ziel Layout | Texte | Interaktion | Orientierung
  104. 104. Mehrere Wege zum Ziel Layout | Texte | Interaktion | Orientierung
  105. 105. Layout | Texte | Interaktion | Orientierung
  106. 106. Layout | Texte | Interaktion | Orientierung
  107. 107. Layout | Texte | Interaktion | Orientierung
  108. 108. Layout | Texte | Interaktion | Orientierung
  109. 109. Layout | Texte | Interaktion | Orientierung
  110. 110. Layout | Texte | Interaktion | Orientierung
  111. 111. Layout | Texte | Interaktion | Orientierung
  112. 112. Layout Text & Typo Interaktion Orientierung • Weißraum • Abstand und Nähe • Visuelle Einheiten • Implizite Linien • Text scanbar • Schriftart, Zeilenhöhe etc. • Zeilenlänge • Rück- meldungen • Linkflächen • „Linkgeruch“ • Wo bin ich? • Mehrere Wege zum Ziel • Suche • Schlag- wörter
  113. 113. Fragen?

×