Rundgang: Benutzerfreundliches Webdesign

1. Ein Rundgang Benutzerfreundliches Webdesign

2. Design „Vollkommenheit entsteht nicht dann, wenn man nichts mehr hinzufügen kann, sondern, wenn man nichts mehr wegnehmen kann.“ (Sainte-Exupery)

4. Design ≠ Dekoration

5. Design ≠ Dekoration Design ≠ Kunst

6. Design ≠ Dekoration Gutes Design … • ist „unsichtbar“, • dient dem Benutzer, • erweist sich in der Benutzung. Design ≠ Kunst

7. Usability Benutzerfreundlichkeit

8. Usability Usability measures the quality of the user experience. Benutzerfreundlichkeit

10. 1. Layout 2. Texte und Typographie 3. Interaktion („Klicken“) 4. Orientierung Layout | Texte | Interaktion | Orientierung

11. Layout

13. Weißraum Whitespace

14. Layout | Texte | Interaktion | Orientierung

23. Geplant, nicht übrig geblieben Jason Berberich: http://ﬂickr.com/photos/berberich/22309133/ – Creative Commons BY-ND-SA Layout | Texte | Interaktion | Orientierung

24. Abstand und Nähe Weißraum Layout

29. Visuelle Einheiten Layout

38. 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

39. 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

40. Texte & Typographie

42. How do users read on the Web? Layout | Texte | Interaktion | Orientierung

43. How do users read on the Web? They don’t. Jakob Nielsen Layout | Texte | Interaktion | Orientierung

44. Besucher lesen nicht, sie scannen. Layout | Texte | Interaktion | Orientierung

45. Besucher lesen nicht, sie scannen. http://www.useit.com/alertbox/reading_pattern.html Layout | Texte | Interaktion | Orientierung

46. Text „scanbar“ machen Layout | Texte | Interaktion | Orientierung

47. • Mehr Absätze Text „scanbar“ machen Layout | Texte | Interaktion | Orientierung

48. • Mehr Absätze • Mehr Listen Text „scanbar“ machen Layout | Texte | Interaktion | Orientierung

49. • Mehr Absätze • Mehr Listen • Stichwörter hervorheben Text „scanbar“ machen Layout | Texte | Interaktion | Orientierung

50. • Mehr Absätze • Mehr Listen • Stichwörter hervorheben • Unterüberschriften Text „scanbar“ machen Layout | Texte | Interaktion | Orientierung

51. • Mehr Absätze • Mehr Listen • Stichwörter hervorheben • Unterüberschriften • (Ein Gedanke pro Absatz) Text „scanbar“ machen Layout | Texte | Interaktion | Orientierung

52. • Mehr Absätze • Mehr Listen • Stichwörter hervorheben • Unterüberschriften • (Ein Gedanke pro Absatz) • (Umgekehrte Pyramide) Text „scanbar“ machen Layout | Texte | Interaktion | Orientierung

53. Stichwörter hervorheben Layout | Texte | Interaktion | Orientierung

56. Unterüberschriften Layout | Texte | Interaktion | Orientierung

57. Unterüberschriften Layout | Texte | Interaktion | Orientierung

58. Mehr Absätze Layout | Texte | Interaktion | Orientierung

59. Mehr Absätze Layout | Texte | Interaktion | Orientierung

60. Mehr Listen Layout | Texte | Interaktion | Orientierung

61. Mehr Listen Layout | Texte | Interaktion | Orientierung

62. Texte gut lesbar gestalten Typographie

63. Web-Typographie Layout | Texte | Interaktion | Orientierung

64. • Schriftart • Zeilenhöhe • Zeilenlänge • Weißraum / Text Web-Typographie Layout | Texte | Interaktion | Orientierung

65. Details sind wichtig Layout | Texte | Interaktion | Orientierung

69. Details sind wichtig Zeilenhöhe (leading, line-height) Layout | Texte | Interaktion | Orientierung

70. typetester.org Layout | Texte | Interaktion | Orientierung

71. typetester.org Layout | Texte | Interaktion | Orientierung

72. Zeilenlänge Layout | Texte | Interaktion | Orientierung

75. Verhältnis Weißraum/Text Layout | Texte | Interaktion | Orientierung

78. Fragen?

79. Interaktion

82. Rückmeldungen Interactive Feedback Interaktion

83. Layout | Texte | Interaktion | Orientierung | Farbe Kellie Herring: http://ﬂickr.com/photos/dontwreckyourhead/3008283630/ – Creative Commons BY-NC-ND

84. Alltag Interaktion – Rückmeldung Layout | Texte | Interaktion | Orientierung | Farbe Kellie Herring: http://ﬂickr.com/photos/dontwreckyourhead/3008283630/ – Creative Commons BY-NC-ND

86. Formular reagiert auf das Abschicken Layout | Texte | Interaktion | Orientierung

87. Links Interaktion

89. Links reagieren auf „Berührung“ Layout | Texte | Interaktion | Orientierung

91. Linkﬂächen maximieren Layout | Texte | Interaktion | Orientierung

92. Linkﬂächen maximieren Layout | Texte | Interaktion | Orientierung

94. Alberto http://ﬂickr.com/photos/albertoalerigi/3111010288/ – Creative Commons CC BY

95. Alberto http://ﬂickr.com/photos/albertoalerigi/3111010288/ – Creative Commons CC BY Links „riechen“ nach ihrem Ziel

100. 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. ✓

104. Orientierung

105. Jonathon Colman: http://ﬂickr.com/photos/jcolman/342059405/ – CC BY-NC-ND Wo bin ich?

108. Breadcrumbs Layout | Texte | Interaktion | Orientierung

109. Mehrere Wege zum Ziel Layout | Texte | Interaktion | Orientierung

120. 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 • Linkﬂächen • „Linkgeruch“ • Wo bin ich? • Mehrere Wege zum Ziel • Suche • Schlag- wörter

121. Fragen?

Rundgang: Benutzerfreundliches Webdesign

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Rundgang: Benutzerfreundliches Webdesign