Erste Hilfe Web Design – Wie vermeide ich die schlimmsten Fehler?

Was sind die häufigsten Fehler im Web Design und wie kannst du sie vermeiden, damit deine Projekte konzeptionell und gestalterisch noch besser werden? Um eine inhaltlich wie grafisch ansprechende Website professionell gestalten zu lassen, fehlt manchmal die Zeit oder das Budget. Also machst du es selbst, vielleicht etwas unzufrieden mit dem Ergebnis oder unsicher, was man noch verbessern könnte, um sich mehr abzuheben. Wenn du das kennst, dann ist dieser Vortrag genau richtig für dich.

Mit zahlreichen Beispielen lernst du die zehn schlimmsten Fehler im Web Design kennen und die dazu passenden Erste-Hilfe-Maßnahmen gleich dazu. So verbesserst du deine Designs und holst mehr für dich und deine Kunden heraus.

Transcript

1. Erste Hilfe Web Design
   Zehn tödliche Krankheiten und wie man sie heilt
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. 86/60
   Oliver Schöndorfer glyphe
   

   View Slide

6. glyphe
   Schlechtes Design hat

   immer gute Gründe
   

   View Slide

7. glyphe
   ?
   

   View Slide

8. Kann ich mich zurechtfinden?
   glyphe
   Worum geht es?
   Ist die Atmosphäre ansprechend?
   II.
   I.
   III.
   

   View Slide

9. II.
   I.
   III.
   glyphe
   II. Struktur & Navigation
   I. Inhalte
   III. Design
   Kann ich mich zurechtfinden?
   Worum geht es?
   Ist die Atmosphäre ansprechend?
   

   View Slide

10. glyphe
    10
    

    View Slide

11. Inhalte
    

    View Slide

12. glyphe
    – Sie sind der wichtigste Teil
    – Nicht nur Text, auch Bilder, Videos, Audio-Files, etc.
    – Gute Qualität, gut strukturiert und gut geschrieben
    – Sollten SEO bedenken
    Die Inhalte sind das Herz einer Website
    

    View Slide

13. Ziellosigkeit
    1
    

    View Slide

14. glyphe
    gartenbaukino.at
    Ticket-Kauf
    immer möglich
    an vielen Stellen
    

    View Slide

15. glyphe
    gartenbaukino.at
    Ticket-Kauf
    immer möglich
    an vielen Stellen
    

    View Slide

16. glyphe
    gartenbaukino.at
    Ticket-Kauf
    immer möglich
    an vielen Stellen
    

    View Slide

17. glyphe
    steman.at
    

    View Slide

18. glyphe
    steman.at
    Wiederkehrende
    User im Fokus
    

    View Slide

19. glyphe
    sensomotorische-koerpertherapie.at
    Besucher anleiten 

    ein Formular
    auszufüllen, um
    einen Termin zu
    vereinbaren
    

    View Slide

20. glyphe
    – Was soll mit der Website erreicht werden?
    – Wie soll man sich mit den Kunden oder der Zielgruppe verbinden?
    – Wie könnte die Website im Tagesgeschä unterstützen?
    Lege Ziele für die Website fest
    

    View Slide

21. User-Bedürfnisse ignorieren
    2
    

    View Slide

22. glyphe
    polizei.gv.at
    

    View Slide

23. glyphe
    polizei.gv.at
    Wo ist die nächste
    Polizeiwache?
    

    View Slide

24. glyphe
    streamtimeapp.tv
    

    View Slide

25. glyphe
    streamtimeapp.tv
    Mögliche Fragen
    dort beantworten,
    wo sie entstehen
    

    View Slide

26. glyphe
    – Worum geht es?
    – Wozu brauche ich das? Wobei hil es mir?
    – Was macht es besonders? (USP?)
    – Welche Optionen gibt es? Was soll ich machen?
    Beantworte Fragen der User
    

    View Slide

27. Fehlende Story Line
    3
    

    View Slide

28. glyphe
    miyo.garden
    

    View Slide

29. glyphe
    miyo.garden
    

    View Slide

30. glyphe
    miyo.garden
    

    View Slide

31. glyphe
    miyo.garden
    

    View Slide

32. glyphe
    miyo.garden
    

    View Slide

33. glyphe
    miyo.garden
    

    View Slide

34. glyphe
    miyo.garden
    Vage Headlines, zu viel Text
    Bilder bezugslos zum Inhalt
    vorwiegend Dekoration
    Undeutliche Darstellung

    der Funktionsweise
    Undeutliche Zuordnung

    der Inhalte
    Keine Kaufaufforderung

    bis zum Ende der Seite
    Gute Feature-Aufbereitung
    

    View Slide

35. glyphe
    betterspot.com
    

    View Slide

36. glyphe
    betterspot.com
    

    View Slide

37. glyphe
    betterspot.com
    

    View Slide

38. glyphe
    betterspot.com
    

    View Slide

39. glyphe
    betterspot.com
    

    View Slide

40. glyphe
    betterspot.com
    Attention
    Was ist es? Wobei hilft es?
    Interest
    In die Themen Datenschutz
    und Sicherheit
    Desire
    Features, App und einfache
    Anwendung zeigen
    Action
    Jetzt kaufen
    

    View Slide

41. glyphe
    AIDA
    

    View Slide

42. glyphe
    – Denk darüber nach was du erzählen möchtest
    – Nutze das AIDA-Modell
    – Ende mit einer Aufforderung, einem Call to Action
    Entwickle eine klare Story Line
    

    View Slide

43. Struktur & Navigation
    

    View Slide

44. glyphe
    – Navigation scha Orientierung (wo bin ich, wohin kann ich gehen?)
    – Klare Struktur ordnet das Chaos
    – Setze Prioritäten, das fokussiert darauf was für Website und Nutzer
    am wichtigsten ist
    Mach es Menschen einfach
    

    View Slide

45. Verwirrende Navigation
    4
    

    View Slide

46. glyphe
    kokua.de
    Überladene
    Navigation
    

    View Slide

47. glyphe
    issmich.at
    Überladene
    Navigation
    

    View Slide

48. glyphe
    hubblecontacts.com
    Simple Navigation
    die man leicht
    überblicken kann
    

    View Slide

49. glyphe
    avia-law.at
    Sichtbare Navigation
    ist am Handy leichter
    zugängliche
    

    View Slide

50. glyphe
    – Fünf bis sieben Links maximal
    – Verwende kurze Wörter
    – Denke an Mobile
    – Sollte immer zugänglich und an der selben Stelle sein
    Schaffe eine einfache Navigation
    

    View Slide

51. Unklare Struktur
    5
    

    View Slide

52. glyphe
    4connect-e.com
    

    View Slide

53. glyphe
    4connect-e.com
    

    View Slide

54. glyphe
    4connect-e.com
    Unklare Trennung
    der Seitenbereiche
    

    View Slide

55. glyphe
    forit.iondigi.com
    

    View Slide

56. glyphe
    forit.iondigi.com
    

    View Slide

57. glyphe
    forit.iondigi.com
    Klarer Anfang eines
    neuen Bereichs
    

    View Slide

58. glyphe
    giromatch.com
    Viele verschiedene
    Elemente und
    fehlende Struktur
    

    View Slide

59. glyphe
    microsoft.com
    Saubere Struktur
    durch Gliederung
    mittels Überschriften
    

    View Slide

60. glyphe
    Mehr
    

    View Slide

61. glyphe
    Wie wir helfen können
    

    View Slide

62. glyphe
    – Unterteile die Website in deutliche Sektionen
    – Nutze Überschriften und Textauszeichnungen
    – Verwende sprechende Links
    Baue eine klare Seitenstruktur
    

    View Slide

63. Schlechte Usability
    6
    

    View Slide

64. glyphe
    more-ohr-less.com
    Was ist ein Link?
    Überschrift
    Überschrift
    Link
    

    View Slide

65. glyphe
    forward-festival.com
    Unvertraute
    Usability Patterns
    an mehreren Stellen
    

    View Slide

66. glyphe
    autistenhilfe.at
    Problematisches
    Drop-Down-Menü
    

    View Slide

67. glyphe
    fotografen.at
    

    View Slide

68. glyphe
    fotografen.at
    

    View Slide

69. glyphe
    fotografen.at
    Unerwarteter
    Layoutwechsel
    beim Klick auf
    einzelne Links
    

    View Slide

70. glyphe
    schlosshof.at
    

    View Slide

71. glyphe
    schlosshof.at
    Unklare Inkonografie
    ohne ALT-Text oder
    Erklärung
    

    View Slide

72. glyphe
    – Nutze bekannte, vertraute Usability Pa erns
    – Gewisse Elemente sollten sich wie erwartet verhalten
    – Denke an Accessibility
    Biete die beste Usability
    

    View Slide

73. View Slide

74. Design
    

    View Slide

75. glyphe
    – Du kannst nichts nicht gestalten
    – Es legt die Stimmung fest und zeugt von Professionalität
    – Manchmal ist es offensichtlich, machmal subtil
    – Design alleine kann nichts retten
    Alles ist Design
    

    View Slide

76. Überladene Seiten
    7
    

    View Slide

77. glyphe
    amstoan.com
    Ohne Kommentar
    

    View Slide

78. glyphe
    leo-hillinger.com
    Überladene Seite
    auf der es schwer ist
    sich zu orientieren
    

    View Slide

79. glyphe
    leo-hillinger.com
    Überladene Seite
    auf der es schwer ist
    sich zu orientieren
    

    View Slide

80. glyphe
    leo-hillinger.com
    Unnötige
    Instruktionen
    auf jeder Seite
    Sehr dichtes Layout
    selbst auf Seiten mit
    wenig Inhalt
    

    View Slide

81. glyphe
    hubblecontacts.com
    Einfach erfassbarer
    Prozess
    

    View Slide

82. glyphe
    – Eine Kernaussage pro Seitenbereich
    – Strukturiere die Inhalte
    – Schaffe Hierarchie durch Abstände und Größenverhältnisse
    Räum dein Design auf
    

    View Slide

83. Schlechte Typografie
    8
    

    View Slide

84. glyphe
    oolipo.com
    Sehr heller Text
    ist schwer zu lesen
    

    View Slide

85. glyphe
    gosepp.com
    Sehr heller Text
    ist schwer zu lesen
    

    View Slide

86. glyphe
    steigenberger.com
    Zu kleiner Text
    für Desktop (11 px)
    

    View Slide

87. glyphe
    tickets.oebb.at
    Sehr schlechte
    Lesbarkeit wegen
    zu kleiner Schrift
    und wenig Kontrast
    

    View Slide

88. glyphe
    wien.gv.at
    Unpassende Schriftart
    auf iOS, die den Text
    schwerer zu lesen macht,
    als auf Android
     iOS
    Android
    

    View Slide

89. glyphe
    phpconference.com
    Dichte, unruhige
    Typografie die
    einen nicht einlädt
    den Text zu lesen
    

    View Slide

90. glyphe
    comstocksmag.com
    Einladender Text
    sauber strukturiert,
    leicht zu lesen
    

    View Slide

91. glyphe
    edenspiekermann.com
    Gute Typografie
    durch deutliche
    Hierarchie, große
    Schrift und gutem
    Kontrast
    

    View Slide

92. glyphe
    – Nutze robuste Schri arten
    – Schaffe deutliche Hierarchien
    – Achte auf guten Kontrast
    – Setze den Text in ausreichender Größe (mind. 16 px)
    – Verwende niemals Blocksatz im Web
    – Niemals
    Hab ein Herz für Typografie
    

    View Slide

93. Keine Optimierung für Mobile
    9
    

    View Slide

94. glyphe
    giromatch.com
    

    View Slide

95. glyphe
    giromatch.com
    Nicht direkt vergleichbar
    auf einem Smartphone
    

    View Slide

96. glyphe
    gourban.at
    

    View Slide

97. glyphe
    gourban.at
    Kaum lesbare Navigation
    am Handy
    

    View Slide

98. glyphe
    gourban.at
    

    View Slide

99. glyphe
    gourban.at
    Problematische Hierarchie
    und zu großer Text fürs Handy
    

    View Slide

100. glyphe
     – Inhalte müssen auch am Handy passen und funktionieren
     – Gleiche Inhalte für Mobile und Desktop
     – Seiten sollten schnell laden, auch im Mobilfunknetz
     Denke Mobile first
     

     View Slide

101. Zur Untersuchung
     

     View Slide

102. Aufs Testen vergessen
     10
     

     View Slide

103. glyphe
     tickets.oebb.at
     Falsche
     Fehlermeldungen
     

     View Slide

104. glyphe
     ragusa.swiss
      iPhone SE
      iPhone 6
     Inhalt passt nicht

     auf kleinere Bildschirme
     

     View Slide

105. glyphe
     – Beobachte User, wie sie die Website verwenden
     – Auf verschiedenen Geräten und Auflösungen testen
     – In verschiedenen Situationen (schelle und langsame Verbindung)
     – Mit bestimmten Zielen (z.B. neue Kunden gewinnen)
     Teste deine Website
     

     View Slide

106. View Slide

107. glyphe
     II.
     I.
     III.
     Kann ich mich zurechtfinden?
     Worum geht es?
     Ist die Atmosphäre ansprechend?
     

     View Slide

108. glyphe
     1 Lege Ziele fest
     2 Achte auf User-Bedürfnisse
     3 Schaffe eine Story-Line
     4 Baue eine einfache Navigation
     5 Bau eine klare Seitenstruktur
     6 Biete die beste Usability
     7 Räum dein Design auf
     8 Achte auf gute Typografie
     9 Denke Mobile First
     10 Testen, testen, testen
     Die Erste Hilfe Maßnahmen
     

     View Slide

109. Icons by hunotika from the Noun Project
     Gemeinsam heilen wir das Web!
     Oliver Schöndorfer glyphe www.8660.at
     

     View Slide