100 Tipps für eine bessere User Experience

1. Planen Sie die Wege durch Ihre Website wie Züge auf einem Schachbrett: Führen Sie die Nutzer*innen nahtlos von einem Abschnitt zum nächsten. Dafür müssen Sie die Ziele und Bedürfnisse Ihrer Personas kennen.

2. Was oben auf der Seite steht, fällt den Nutzer*innen eher auf. Ordnen Sie die Elemente deshalb nach ihrer Wichtigkeit, das Wichtigste nach oben.

3. Eine einheitliche Oberfläche hilft den Nutzer*innen, sich auf den Inhalt zu konzentrieren und sich darin zurechtzufinden.

4. Vermeiden Sie Seiten, die in einer Sackgasse enden. Solche Seiten verwirren und machen den Nutzer*innen zusätzliche Arbeit.

5. Verwenden Sie gängige Muster und Bedienelemente. Zwingen Sie die Nutzer*innen nicht, ständig etwas Neues zu lernen.

6. Nutzer*innen scrollen nach unten, solange klar ist, dass unterhalb des sichtbaren Bereichs weitere relevante Informationen folgen.

7. Zeigen Sie deutlich, in welche Richtung gescrollt wird und ob weitere Inhalte folgen.

8. Je länger eine Seite ist, desto unwahrscheinlicher scrollt jemand bis nach unten.

9. Seiten, durch die man in einem Zug scrollt, sind angenehm, weil Scrollen schneller geht als Klicken. Zu lang sollten sie trotzdem nicht werden.

10. Denken Sie beim Gestalten an Menschen mit Farbsehschwäche. Wandeln Sie Ihre Entwürfe in Graustufen um und prüfen Sie, ob alle Nutzer*innen die wichtigen Informationen dann noch lesen können.

11. Verwenden Sie Blau auf Websites nur für Links, nicht für anderen Text.

12. Achten Sie auf mobilen Websites besonders auf den Kontrast. Spiegelt sich Licht auf dem Bildschirm, wird eine Website sonst schnell unbrauchbar.

13. Geben Sie Handlungsaufforderungen (Call-to-Actions) eine eigene Farbe, die sonst nirgends vorkommt.

14. Warme, helle Farben treten nach vorn. Kalte, dunkle Farben treten zurück.

15. Sorgen Sie dafür, dass Nutzer*innen ihr Hauptziel schnell und einfach erreichen.

16. Für Nutzer*innen zählt, dass sich Ihre Website schnell anfühlt, auch wenn das nur ihr subjektiver Eindruck ist.

17. Wie schnell eine Website wirkt, hängt von Ladezeit, Ladeverhalten, Wartezeiten und dem Rendern von Animationen ab.

18. Zeigen Sie früh das Gerüst der Seite. So ist das Layout schon während des Ladens erkennbar.

19. Laden Sie Text vor Bildern. Dann können Nutzer*innen schon lesen, während der Rest noch lädt.

20. Müssen Nutzer*innen länger als ein paar Sekunden warten, verlassen sie die Website oft.

21. Kleine oder eng beieinanderliegende Bedienelemente sind auf Mobilgeräten schwer zu treffen.

22. Eine Fläche zum Antippen sollte auf dem Handy mindestens 1 × 1 cm groß sein.

23. Braucht man den kleinen Finger, um auf Ihrer mobilen Website oder in Ihrer App etwas zu treffen, sind die Klickflächen zu klein.

24. Wer ein Tablet hält, erreicht mit dem Daumen am leichtesten die Seitenränder und den unteren Teil des Bildschirms.

25. Vertikales Wischen sollte auf Webseiten immer nur scrollen.

26. Verlangen Sie auf Mobilgeräten kein doppeltes Antippen. Eine einzige Berührung sollte genügen.

27. Klären Sie beim Entwurf mobiler Layouts, ob die Nutzer*innen ihr Gerät mit einer oder mit zwei Händen bedienen.

28. Bieten Sie immer einen gut sichtbaren Zugang zum Navigationsmenü.

29. Ist Ihre Website mehr als drei bis vier Ebenen tief, sollten Sie die Informationshierarchie oder das Design überarbeiten.

30. Erwägen Sie mitlaufende Menüs (Sticky-Menüs), besonders auf längeren Seiten oder wenn schneller Zugriff nötig ist.

31. Eine gute Navigation steht nicht im Weg, sondern tritt in den Hintergrund.

32. Halten Sie die Navigation auf allen Seiten Ihrer Website gleich.

33. Benennen Sie Navigationspunkte genau, mit höchstens zwei bis drei Wörtern. Das aussagekräftigste Wort steht vorn.

34. Zeigen Sie den Nutzer*innen mit einer Brotkrumennavigation (Breadcrumbs), wo sie sich auf der Website befinden.

35. Zeigen Sie in der mobilen Navigation die am häufigsten genutzten Punkte direkt an. Die übrigen gehören in ein Hamburger-Menü.

36. Auf dem Desktop fallen Hamburger-Menüs weniger auf und sind weniger vertraut. Außerdem machen sie mehr Arbeit, weil man sie erst öffnen muss.

37. Für die zweite Navigationsebene eignen sich auf dem Handy eigene Einstiegsseiten für jede Kategorie, Untermenüs oder Menüs innerhalb der Seite.

38. Lassen Sie Dropdown-Menüs senkrecht aufklappen, nicht waagerecht. Waagerecht zu scrollen ist viel mühsamer.

39. Megamenüs sollten schmaler sein als die Seite. Dann kann man leicht daneben klicken, um sie zu schließen.

40. Fassen Sie die Links in Megamenüs zu Gruppen zusammen. Machen Sie dabei sichtbar, welche Elemente anklickbar sind und welche nicht.

41. Zeigen Sie Login und Suche offen, statt sie in den Menüs der Website zu verstecken.

42. Richten Sie Beschriftungen und Felder eines Formulars an einer senkrechten Linie aus. So lässt es sich schnell überfliegen.

43. Feldbezeichnungen gehören neben oder über das Textfeld, nicht hinein. Sonst verlieren die Nutzer*innen sie aus den Augen.

44. Gliedern Sie lange Formulare mit Trennlinien in Abschnitte. So bleiben sie übersichtlich und lassen sich leichter ausfüllen.

45. Zeigen Sie eine Fehlermeldung immer direkt neben dem Feld, in dem der Fehler steckt.

46. Eine gute Fehlermeldung ist hilfreich, knapp und leicht verständlich, und sie sagt, was zu tun ist.

47. Markieren Sie alle fehlerhaften Felder auf einmal und setzen Sie die Meldung jeweils direkt ans Feld. So übersehen auch mobile Nutzer*innen keine Warnung.

48. Links müssen sich vom übrigen Text abheben. Kennzeichnen Sie sie mit blauer Schrift, einer Unterstreichung oder beidem.

49. Links sollten immer wie Links aussehen.

50. Der Linktext sollte sagen, wohin ein Link führt. Dann wissen die Nutzer*innen es schon vor dem Klick.

51. Verwenden Sie auf Websites und in Anwendungen keinen blauen oder unterstrichenen Text für Elemente, die keine Links sind.

52. Wird irgendwo auf der Website eine vollständige URL genannt, sollte sie immer auf genau diese Seite verlinken.

53. Nutzer*innen erwarten, dass bestimmte Elemente anklickbar sind, etwa Produktbilder oder Rezensionen.

54. Geben Sie besuchten Links eine andere Farbe. Das erleichtert den Nutzer*innen die Orientierung.

55. Schaltflächen müssen klickbar aussehen. Sie brauchen genug Platz, damit Nutzer*innen sie bequem anklicken oder antippen können.

56. Häufige Aktionen auf Websites oder in Apps gehören auf große Schaltflächen an leicht erreichbaren Stellen.

57. Hintergrundfarbe, Rahmen und eine handlungsorientierte Beschriftung zeigen den Nutzer*innen, dass ein Element anklickbar ist.

58. Achten Sie im Flat Design darauf, dass Aktionsschaltflächen eine kontrastreiche Farbe und eine handlungsorientierte Beschriftung haben.

59. Eine Website sollte innerhalb von 0,1 Sekunden sichtbar anzeigen, dass ein Klick auf eine Schaltfläche angekommen ist.

60. Schaltflächen, die auf dem Handy Daten ändern oder löschen, sollten etwas mehr Aufwand verlangen. So löst sie niemand aus Versehen aus.

61. Eine Website mit vielen Inhalten braucht immer ein Suchfeld.

62. Auf dem Desktop sollte das Suchfeld immer wie ein Textfeld aussehen. Auf dem Handy genügt das Suchsymbol.

63. Das Suchfeld sollte leicht zu finden sein. Nutzer*innen suchen es meist oben rechts.

64. Wer auf einer Website die Suche finden will, hält meist nach einer „kleinen Box zum Eingeben“ Ausschau.

65. Suchfelder sollten breit genug sein, um die ganze Suchanfrage anzuzeigen.

66. Vermeiden Sie Karussells. Nutzer*innen können sich immer nur auf eine Sache konzentrieren, und jede neue Folie verdrängt die Erinnerung an die vorherige.

67. Die Punkte unter Karussells sind auf mobilen Websites schwer zu erkennen. Lassen Sie die Nutzer*innen stattdessen nach links und rechts durch die Bilder blättern.

68. Versehen Sie die Navigation eines Karussells mit sprechenden Bezeichnungen statt mit Pfeilen. Dann wissen die Nutzer*innen, was sie auf der nächsten Folie erwartet.

69. Nur etwa 1 % der Nutzer*innen klicken auf Karussells. Verlassen Sie sich also nicht auf diese Klicks.

70. Karussells, die automatisch weiterlaufen, sollten auf manuelle Bedienung umschalten, sobald die Nutzer*innen eingreifen.

71. Verdichten Sie lange Inhalte auf mobilen Websites mit Akkordeons oder anderen Aufklappern.

72. Geben Sie den Nutzer*innen bei Akkordeons eine Möglichkeit, alle aufgeklappten Abschnitte wieder zu schließen.

73. Akkordeons haben auf mobilen Websites einen Vorteil: Die Seiten werden kürzer, und kurze Seiten sind einfacher zu bedienen als Sprunglinks innerhalb der Seite.

74. Akkordeons haben auf mobilen Websites aber auch einen Nachteil: Die Nutzer*innen müssen mehr tippen, und was zugeklappt ist, gerät aus den Augen und aus dem Sinn.

75. Der Hauptzweck jeder Seite sollte für die Nutzer*innen offensichtlich sein.

76. Nutzer*innen greifen ungern auf die Hilfe einer Website zurück. Bieten Sie Hilfe deshalb dort an, wo sie gebraucht wird, bei Bedarf auch mit Assistenten und FAQs.

77. Zeigen Sie Hinweise auf Websites und in Apps nur dort und nur dann, wenn sie gebraucht werden.

78. Hilfe und Anleitungen sollten kurz sein und sich optisch von anderen Oberflächenelementen abheben.

79. Zeigen Sie auf Websites und in mobilen Apps nur einen Hinweis auf einmal. Das entlastet das Gedächtnis.

80. Die meisten Nutzer*innen verstehen nur wenige Icons. Ein Icon muss seine Funktion und seinen Zweck deshalb bildlich vermitteln und einfach, vertraut und verständlich sein.

81. Setzen Sie Icons sparsam ein, nur dort, wo sie nötig sind, und nicht als bloße Dekoration.

82. Die wichtigsten Informationen auf Ihrer Seite sollten immer auch optisch am stärksten hervortreten.

83. Stellen Sie wichtige Informationen nach vorn. Nutzer*innen beginnen oben links, und die ersten zwei bis drei Wörter überfliegen sie am häufigsten.

84. Platzieren Sie Inhalte mit hoher Priorität oben auf der Seite. Welche Prioritäten auf welchem Gerät gelten, zeigen Ihnen Ihre Analysedaten.

85. Unterscheiden Sie Hauptinformationen von ergänzenden Details durch Kontraste in Farbe und Größe.

86. Wer mobil unterwegs ist, braucht eher Informationen zum Kontext, zum Standort und für Notfälle.

87. Auf Mobilgeräten haben Ort, Veranstaltungen, Telefonnummer, Notfallinformationen und alles Zeitkritische Vorrang, kurz: alles, was man unterwegs braucht.

88. Für die Navigation sind einfache, eindeutige Begriffe besser als Branchenjargon oder Modewörter.

89. Die meisten Nutzer*innen überfliegen zuerst und lesen später. Erleichtern Sie das Überfliegen mit visueller Abwechslung und aussagekräftigem Text.

90. Bei der Lesbarkeit geht es nicht nur darum, ob man etwas lesen kann, sondern auch darum, ob man es lesen will.

91. Verwenden Sie größere Abstände bei Aufzählungen, nummerierten Listen, Zeilen und Absätzen. Das verbessert die Lesbarkeit.

92. Achten Sie bei der Wahl einer Schrift auf Leserlichkeit, Lesbarkeit, Strichstärke und Stil.

93. Wählen Sie für mobile Websites und Apps möglichst eine Schrift mit größerer x-Höhe. Das verbessert die Lesbarkeit.

94. Vermeiden Sie auf allen Geräten kleine Schriften, besonders bei langen Texten. Verwenden Sie im Fließtext keine schmal laufenden Schriften.

95. Sorgen Sie dafür, dass sich Überschriften auf mobilen Websites in der Größe genauso anpassen wie der übrige Inhalt.

96. Erhöhen Sie die Schriftgröße auf mobilen Websites und passen Sie die Schrift immer an die Bildschirmgröße an.

97. Nutzer*innen schauen an allem vorbei, was wie ein Werbebanner aussieht. Man nennt das Bannerblindheit.

98. Lange Textblöcke lesen sich leichter, wenn jeder Absatz nur eine Idee enthält.

99. Kursivschrift ist schwerer zu lesen, besonders für Leser*innen mit Legasthenie.

100. VERWENDEN SIE IN ÜBERSCHRIFTEN UND TAGLINES NICHT DURCHGEHEND GROSSBUCHSTABEN. Sie sehen selbst, wie viel schwerer sich das liest.

Webdesign | Tools & Ressourcen

Hier finden Sie Werkzeuge für die Entwicklung von Websites, etwa Tutorials auf Codrops und Codepen. Für HTML gibt es einen Validator, ein Cheatsheet und eine Referenz der Elemente und ihrer Eigenschaften […]

Gute Formulare bauen

Hier finden Sie Tipps und UX-Beispiele für die Gestaltung von Formularen. Ob ein Formular gut funktioniert, hängt nicht nur von seiner Gestaltung ab, sondern stark vom Zusammenhang, in dem es steht […]