Ein Rundgang
Benutzerfreundliches
Webdesign
Design
„Vollkommenheit entsteht nicht dann,
wenn man nichts mehr hinzufügen
kann, sondern, wenn man nichts mehr
wegnehmen ...
Design ≠ Dekoration
Design ≠ Dekoration
Design ≠ Kunst
Design ≠ Dekoration
Gutes Design …
• ist „unsichtbar“,
• dient dem Benutzer,
• erweist sich in der Benutzung.
Design ≠ Kun...
Usability
Benutzerfreundlichkeit
Usability
Usability measures the
quality of the
user experience.
Benutzerfreundlichkeit
1. Layout
2. Texte und Typographie
3. Interaktion („Klicken“)
4. Orientierung
Layout | Texte | Interaktion | Orientierung
Layout
Weißraum
Whitespace
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Geplant, nicht übrig geblieben
Jason Berberich: http://flickr.com/photos/berberich/22309133/ – Creative Commons BY-ND-SA
La...
Abstand und Nähe
Weißraum
Layout
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Visuelle Einheiten
Layout
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Hans Englisch Mo,4. Std.
Elke Französisch Di, 1. Std.
Gustav Kunst Do, 2. Std.
Petra Biologie Do, 4. Std.
Egon Erdkunde Fr...
Hans Englisch Mo,4. Std.
Elke Französisch Di, 1. Std.
Gustav Kunst Do, 2. Std.
Petra Biologie Do, 4. Std.
Egon Erdkunde Fr...
Texte & Typographie
Layout | Texte | Interaktion | Orientierung
How do users read
on the Web?
Layout | Texte | Interaktion | Orientierung
How do users read
on the Web?
They don’t.
Jakob Nielsen
Layout | Texte | Interaktion | Orientierung
Besucher lesen nicht, sie scannen.
Layout | Texte | Interaktion | Orientierung
Besucher lesen nicht, sie scannen.
http://www.useit.com/alertbox/reading_pattern.html
Layout | Texte | Interaktion | Orien...
Text „scanbar“ machen
Layout | Texte | Interaktion | Orientierung
• Mehr Absätze
Text „scanbar“ machen
Layout | Texte | Interaktion | Orientierung
• Mehr Absätze
• Mehr Listen
Text „scanbar“ machen
Layout | Texte | Interaktion | Orientierung
• Mehr Absätze
• Mehr Listen
• Stichwörter hervorheben
Text „scanbar“ machen
Layout | Texte | Interaktion | Orientierung
• Mehr Absätze
• Mehr Listen
• Stichwörter hervorheben
• Unterüberschriften
Text „scanbar“ machen
Layout | Texte | Interak...
• Mehr Absätze
• Mehr Listen
• Stichwörter hervorheben
• Unterüberschriften
• (Ein Gedanke pro Absatz)
Text „scanbar“ mach...
• Mehr Absätze
• Mehr Listen
• Stichwörter hervorheben
• Unterüberschriften
• (Ein Gedanke pro Absatz)
• (Umgekehrte Pyram...
Stichwörter hervorheben
Layout | Texte | Interaktion | Orientierung
Stichwörter hervorheben
Layout | Texte | Interaktion | Orientierung
Stichwörter hervorheben
Layout | Texte | Interaktion | Orientierung
Unterüberschriften
Layout | Texte | Interaktion | Orientierung
Unterüberschriften
Layout | Texte | Interaktion | Orientierung
Mehr Absätze
Layout | Texte | Interaktion | Orientierung
Mehr Absätze
Layout | Texte | Interaktion | Orientierung
Mehr Listen
Layout | Texte | Interaktion | Orientierung
Mehr Listen
Layout | Texte | Interaktion | Orientierung
Texte gut lesbar gestalten
Typographie
Web-Typographie
Layout | Texte | Interaktion | Orientierung
• Schriftart
• Zeilenhöhe
• Zeilenlänge
• Weißraum / Text
Web-Typographie
Layout | Texte | Interaktion | Orientierung
Details sind wichtig
Layout | Texte | Interaktion | Orientierung
Details sind wichtig
Layout | Texte | Interaktion | Orientierung
Details sind wichtig
Layout | Texte | Interaktion | Orientierung
Details sind wichtig
Layout | Texte | Interaktion | Orientierung
Details sind wichtig
Zeilenhöhe (leading, line-height)
Layout | Texte | Interaktion | Orientierung
typetester.org
Layout | Texte | Interaktion | Orientierung
typetester.org
Layout | Texte | Interaktion | Orientierung
Zeilenlänge
Layout | Texte | Interaktion | Orientierung
Zeilenlänge
Layout | Texte | Interaktion | Orientierung
Zeilenlänge
Layout | Texte | Interaktion | Orientierung
Verhältnis Weißraum/Text
Layout | Texte | Interaktion | Orientierung
Verhältnis Weißraum/Text
Layout | Texte | Interaktion | Orientierung
Verhältnis Weißraum/Text
Layout | Texte | Interaktion | Orientierung
Fragen?
Interaktion
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Rückmeldungen
Interactive Feedback
Interaktion
Layout | Texte | Interaktion | Orientierung | Farbe
Kellie Herring: http://flickr.com/photos/dontwreckyourhead/3008283630/ ...
Alltag
Interaktion – Rückmeldung
Layout | Texte | Interaktion | Orientierung | Farbe
Kellie Herring: http://flickr.com/phot...
Layout | Texte | Interaktion | Orientierung
Formular reagiert auf das Abschicken
Layout | Texte | Interaktion | Orientierung
Links
Interaktion
Layout | Texte | Interaktion | Orientierung
Links reagieren auf „Berührung“
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Linkflächen maximieren
Layout | Texte | Interaktion | Orientierung
Linkflächen maximieren
Layout | Texte | Interaktion | Orientierung
Alberto http://flickr.com/photos/albertoalerigi/3111010288/ – Creative Commons CC BY
Alberto http://flickr.com/photos/albertoalerigi/3111010288/ – Creative Commons CC BY
Links „riechen“ nach ihrem Ziel
Wenn Sie sich unseren Ferienplan
herunterladen möchten, klicken Sie hier. L
Wenn Sie sich unseren Ferienplan
herunterlade...
Wenn Sie sich unseren Ferienplan
herunterladen möchten, klicken Sie hier. L
Wenn Sie sich unseren Ferienplan
herunterlade...
Wenn Sie sich unseren Ferienplan
herunterladen möchten, klicken Sie hier. L
Wenn Sie sich unseren Ferienplan
herunterlade...
Wenn Sie sich unseren Ferienplan
herunterladen möchten, klicken Sie hier. L
Wenn Sie sich unseren Ferienplan
herunterlade...
Orientierung
Jonathon Colman: http://flickr.com/photos/jcolman/342059405/ – CC BY-NC-ND
Wo bin ich?
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Breadcrumbs
Layout | Texte | Interaktion | Orientierung
Mehrere Wege zum Ziel
Layout | Texte | Interaktion | Orientierung
Mehrere Wege zum Ziel
Layout | Texte | Interaktion | Orientierung
Mehrere Wege zum Ziel
Layout | Texte | Interaktion | Orientierung
Mehrere Wege zum Ziel
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout | Texte | Interaktion | Orientierung
Layout Text & Typo Interaktion Orientierung
• Weißraum
• Abstand und
Nähe
• Visuelle
Einheiten
• Implizite
Linien
• Text s...
Fragen?
Rundgang: Benutzerfreundliches Webdesign
Rundgang: Benutzerfreundliches Webdesign
Rundgang: Benutzerfreundliches Webdesign
Rundgang: Benutzerfreundliches Webdesign
Rundgang: Benutzerfreundliches Webdesign
Rundgang: Benutzerfreundliches Webdesign
Rundgang: Benutzerfreundliches Webdesign
Rundgang: Benutzerfreundliches Webdesign
Nächste SlideShare
Wird geladen in …5
×

Rundgang: Benutzerfreundliches Webdesign

2.115 Aufrufe

Veröffentlicht am

Einige grundlegende Konzepte für benutzerfreundliche Websites

Veröffentlicht in: Bildung
1 Kommentar
0 Gefällt mir
Statistik
Notizen
  • 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'...
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.115
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1.085
Aktionen
Geteilt
0
Downloads
0
Kommentare
1
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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?

×