100 Tipps für eine bessere User Experience

User Experience Design soll die Nutzerzufriedenheit durch die Verbesserung der Nutzerfreundlichkeit, Zugänglichkeit und Effizienz der Benutzerinteraktion mit Websites sicherstellen.

Dabei können dieses Tipps helfen ein nutzerfreundlicheres Webdesign zu ermöglichen.

1. Flow

1. Betrachten Sie die Website als ein Schachbrett: Bewegen Sie die Nutzer*innen nahtlos von einem Abschnitt zum nächsten, indem Sie die Ziele und Bedürfnisse die Personas verstehen.

2. Nutzer*innen werden eher Elemente am oberen Rand der Seite bemerken, die sich nach Wichtigkeit positionieren.

3. Konsistente Web-Oberflächen helfen den Nutzer*innen, sich auf den Inhalt zu konzentrieren und sich durch ihn zu bewegen.

4. Vermeiden Sie es, Sackgassen-Seiten auf Websites zu erstellen. Sie verursachen Verwirrung und schaffen zusätzliche Arbeit für die Nutzer*innen.

5. Verwenden Sie gängige Website-Muster und -Schnittstellen; lassen Sie die Nutzer*innen nicht ständig etwas Neues lernen.

6. Die Nutzer*innen scrollen die Webseite nach unten, solange klar ist, dass sich zusätzliche, relevante Informationen unterhalb der Falz befinden.

7. Ihre Website sollte einen starken visuellen Hinweis auf die Richtung des Scrollens und ob mehr Inhalte verfügbar sind, enthalten.

8. Je länger die Website-Seite ist, desto unwahrscheinlicher ist es, dass jemand nach unten scrollt.

9. Laufende Webseiten sind schön, weil das Scrollen schneller ist als das klicken – aber machen Sie die Seiten nicht zu lang.

2. Kontrast & Farbe

10. Design für Menschen mit Farbschwächen. Konvertieren Sie Ihre Designs in Graustufen, um sicherzustellen, dass alle Nutzer*innen wichtige Informationen lesen können.

11. Verwenden Sie die Farbe Blau nicht für Text auf Websites mit Ausnahme von Links.

12. Achten Sie auf den Kontrast auf mobilen Websites. Bildschirmeinblendungen können Ihre Website unbrauchbar machen.

13. Reservieren Sie eine Farbe für Call-to-Actions auf Ihrer Website und verwenden Sie diese nicht für etwas anderes.

14. Warme, helle Farben kommen nach vorn und kalte, dunkle Farben bleiben im Hintergrund.

3. Laden

15. Stellen Sie sicher, dass Website-Nutzer*innen ihr Hauptziel schnell und einfach erreichen können.

16. Wichtig für die Nutzer*innen ist, dass sich Ihre Website schnell anfühlt (auch wenn es nur ihre subjektive Wahrnehmung ist).

17. Die Wahrnehmung der Website-Geschwindigkeit basiert auf Ladezeit, Ladeverhalten, Wartezeiten und dem Rendern von Animationen.

18. Zeigen Sie zügig eine Seitenstruktur der Website, um das Layout bereits beim Laden zu kommunizieren.

19. Website-Text sollte vor Bildern geladen werden, damit Nutzer*innen mit dem Lesen beginnen können, bevor der Rest der Website geladen wird.

20. Verzögerungen von mehr als einigen Sekunden führen oft dazu, dass Nutzer*innen die Website verlassen.

4. Mobile

21. Mobile Oberflächenelemente sind schwer zu erfassen, wenn sie klein oder eng beieinander liegen.

22. Die Mindestgröße für ein Berührungsziel auf Handys sollte 1 cm x 1 cm betragen.

23. Wenn der kleinen Finger zur Navigation auf Ihrer mobilen Website oder App benutzt werden muss, ist die Klickfläche zu klein.

24. Beim Halten eines Tabletts sind die Seiten und der untere Teil des Bildschirms am einfachsten mit dem Daumen zu erreichen.

25. Sie benötigen kein vertikales Durchsuchen für etwas anderes als normales Scrollen auf Webseiten.

26. Verwenden Sie keine Doppelklicks auf mobilen Geräten. Stellen Sie sicher, dass Nutzer*innen mit einer einzigen Berührung interagieren können.

27. Bestimmen Sie, ob Nutzer*innen Geräte mit einer oder zwei Händen verwenden werden, wenn sie mobile Layouts entwerfen.

5. Navigation

28. Zeigen Sie immer eine offensichtliche Möglichkeit auf, auf das Navigationsmenü auf Ihrer Website zuzugreifen.

29. Wenn Ihre Website-Hierarchie mehr als 3-4 Ebenen tief ist, ist es an der Zeit, die Informationshierarchie oder das Design neu zu gestalten.

30. Erwägen Sie die Verwendung von Sticky-Menüs, insbesondere auf längeren Webseiten oder wenn ein schneller Zugriff erforderlich ist.

31. Eine gute Navigation auf der Website ist nicht im Weg, sie verschwindet im Hintergrund.

32. Machen Sie Ihre Navigation konsistent; sie sollte sich nicht auf der gesamten Website ändern.

33. Machen Sie Navigationspunkte spezifisch, nicht mehr als 2-3 Wörter und beginnen Sie mit den meisten Informationen, die das Wort tragen.

34. Lassen Sie die Nutzer*innen wissen, wo sie sich auf der Website befinden, indem Sie Breadcrumbs (Brotkrumennavigation) verwenden.

35. Mobile Navigation: Zeigen Sie die am häufigsten verwendeten Optionen an und blenden Sie die anderen unter einem Hamburger-Menü aus.

36. Hamburger-Menüs auf Desktops sind weniger auffällig, weniger vertraut und erhöhen die Interaktionskosten.

37. Für die sekundäre Navigation auf dem Handy verwenden Sie Kategorie-Landingpages, Untermenüs oder In-Page-Menüs.

38. Die Dropdown-Menüs sollten vertikal und nicht horizontal schweben; es ist viel schwieriger, horizontal zu scrollen.

39. Megamenus sollte schmaler sein als die Seite, sodass es einfach ist, aus ihnen „herauszuklicken“.

40. Wenn Sie Megamenus verwenden, organisieren Sie Links in Gruppen und unterscheiden Sie zwischen anklickbaren und nicht anklickbaren Elementen.

41. Verbergen Sie keine Login- oder Suchfunktionen in den Menüs der Website.

6. Formulare

42. Richten Sie Formularbeschriftungen und -felder in einer einzigen vertikalen Linie aus, um ein schnelles Scannen zu ermöglichen.

43. Feldbezeichnungen sollten sich außerhalb des Textfeldes befinden, nicht innerhalb, damit die Nutzer*innen sie nicht aus den Augen verliert.

44. Unterteilen Sie Abschnitte mit Trennzeichen, um lange Webformulare nutzer*innenfreundlicher zu gestalten.

45. Setzen Sie Formularfehler neben die fehlerverursachenden Felder in allen Webformularen.

46. Fehlermeldungen sollten hilfreich, brauchbar, prägnant und leicht verständlich sein.

47. Zeigen Sie alle fehlerverursachenden Felder auf einmal an, neben jedem problematischen Feld, damit mobile Nutzer*innen die Warnung nicht verpassen.

7. Links

48. Links auf Websites müssen sich abheben – verwenden Sie blauen Text und/oder Unterstreichung, um Hyperlinks anzuzeigen.

49. Links sollten immer wie Links aussehen.

50. Ein Nutzer*innen sollte nicht auf einen Link klicken müssen, um herauszufinden, wohin er führt. Der Linktext sollte ihnen sagen was sich dahinter verbirgt.

51. Verwenden Sie keinen blauen Text oder Unterstreichung für nicht verknüpfte Elemente in Websites oder Anwendungen

50. Ein Nutzer*innen sollte nicht auf einen Link klicken müssen, um herauszufinden, wohin er führt. Der Linktext sollte ihnen sagen.

51. Verwenden Sie keinen blauen Text oder Unterstreichung für nicht verknüpfte Elemente in Websites oder Anwendungen.

52. Ein Verweis auf eine vollständige URL irgendwo auf einer Website sollte immer auf diese Seite verweisen.

53. Es wird erwartet, dass bestimmte Elemente, wie Produktbilder oder Rezensionen, anklickbar sind.

54. Verwenden Sie eine andere Farbe für besuchte Links auf Websites, um die Orientierung die Nutzer*innen zu verbessern.

8. Tasten

55. Schaltflächen auf Websites müssen klickbar aussehen und genügend Platz für Nutzer*innen haben, um bequem zu klicken oder zu tippen.

56. Häufige Aktionen auf Websites oder Apps sollten große Schaltflächen sein, die sich in leicht erreichbaren Abschnitten befinden.

57. Hintergrundfarben, Rahmen und handlungsorientierte Bezeichnungen auf einer Website signalisieren den Nutzer*innen, dass ein Element anklickbar ist.

58. Bei Flat-Designs ist darauf zu achten, dass die Aktionstasten in einer kontrastreichen Farbe mit einem handlungsorientierten Label ausgeführt werden.

59. Eine Website sollte einen visuellen Hinweis darauf haben, dass ein Tastendruck innerhalb von 0,1 Sekunden nach der Interaktion erfolgreich war.

60. Schaltflächen, die Daten auf Handys ändern oder löschen, sollten mehr Aufwand erfordern, um ein versehentliches Antippen zu verhindern.

9. Suche

61. Wenn Sie eine Website mit vielen Inhalten haben, brauchen Sie immer ein Suchfeld.

62. Das Suchfeld sollte immer wie ein Textfeld auf einem Desktop aussehen. Das Suchsymbol ist für die Verwendung auf dem Handy geeignet.

63. Das Suchfeld sollte leicht zu finden sein. Nutzer*innen suchen normalerweise in der oberen rechten Ecke danach.

64. Bei der Suche nach einer Suche auf Websites suchen Nutzer*innen in der Regel nach einer „kleinen Box zum Eingeben“.

65. Suchfelder auf Websites sollten breit genug sein, um die gesamte Suchanfrage zu sehen.

10. Karussells und Slider

66. Karussells vermeiden: Jede neue Folie löscht die Erinnerung der vorherigen Folie. Nutzer*innen können sich auf jeweils nur eine Sache konzentrieren.

67. Punkte auf Karussells sind auf mobilen Websites schwer zu erkennen. Verwenden Sie stattdessen Bilder, die von links und rechts navigieren.

68. Verwenden Sie anstelle von Karussell-Navigationspfeilen beschreibende Bezeichnungen, damit die Nutzer*innen wissen, was sie auf der nächsten Folie erwartet.

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

70. Website-Karussells, die automatisch verschoben werden, sollten auf manuell umschalten, sobald die Nutzer*innen mit ihnen interagieren.

11. Akkordeons

71. Verwenden Sie Akkordeons oder Toggles, um lange Inhalte auf mobilen Websites zu komprimieren.

72. Bieten Sie bei der Verwendung von Akkordeons eine Möglichkeit, alle exponierten Inhalte zu komprimieren, nachdem die Nutzer*innen sie erweitert hat.

73. Vorteile des Einsatzes von Akkordeons auf mobilen Websites: Kürzere Seiten sind einfacher zu bedienen als Sprunglinks auf der Seite.

74. Nachteile der Verwendung von Akkordeons auf mobilen Websites: Erhöhte Interaktionskosten – und: aus den Augen aus dem Sinn.

12. Hilfe und Hinweise

75. Der Hauptzweck jeder Webseite sollte für den Nutzer*innen offensichtlich sein.

76. Nutzer*innen zögern, die Hilfe auf Ihrer Website zu verwenden. Stellen Sie es in den Kontext und bieten Sie gegebenenfalls Assistenten und FAQs an.

77. Zeigen Sie Hinweise auf Websites und Apps im Kontext und nur bei Bedarf an.

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

79. Präsentieren Sie auf Websites und mobilen Apps jeweils nur einen Hinweis. Dies reduziert den Speicherbedarf.

13. Icons

80. Icons müssen ihre Funktion und ihren Zweck visuell beschreiben. Machen Sie sie einfach, vertraut und sinnvoll. Die meisten Nutzer*innen verstehen nur wenige Icons.

81. Icons sollten nur bei Bedarf verwendet werden. Vermeiden Sie eine Überbeanspruchung und verwenden Sie sie nicht nur zur Dekoration.

14. Inhalt

82. Die wichtigsten Informationen auf Ihrer Webseite sollten sich immer als die optisch prominentesten herausstellen.

83. Setzen Sie wichtige Informationen in den Vordergrund. Die Nutzer*innen beginnen oben links und die ersten 2-3 Wörter werden am häufigsten gescannt.

84. Platzieren Sie Inhalte mit hoher Priorität oben auf der Webseite. Verwenden Sie Analysen, um Prioritäten auf verschiedenen Geräten zu bestimmen.

85. Verwenden Sie den Farb- und Größenkontrast auf Ihrer Website, um Primärinformationen von unterstützenden Details zu unterscheiden.

86. Prioritäten wie Kontext-, Standort- und Notfallinformationen sind für mobile Nutzer*innen wichtiger.

87. Prioritäten für mobile Endgeräte: Ort, Ereignisse, Telefonnummer, Notfallinformationen, zeitkritische Informationen und Informationen, die unterwegs benötigt werden.

88. Einfache, offensichtliche Begriffe sind besser als Branchenjargon oder trendige Begriffe für die Navigation auf Websites.

15. Lesbarkeit

89. Die meisten Nutzer*innen scannen zuerst und lesen später. Verwenden Sie visuelle Vielfalt und aussagekräftigen Text, um das Scannen zu erleichtern.

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

91. Verwenden Sie einen größeren Zeilenabstand zwischen gegliederten Listen, nummerierten Listen, Zeilen und Absätzen, um die Lesbarkeit zu verbessern.

92. Berücksichtigen Sie bei der Auswahl einer Website-Schriftart deren Lesbarkeit, Lesbarkeit, Gewicht und Stil.

93. Erwägen Sie auf mobilen Websites und Apps, die x-Höhe einer Schriftart zu vergrößern, um ihre Lesbarkeit zu verbessern.

94. Vermeiden Sie kleine Schriften auf allen Geräten, insbesondere bei langen Kopien. Verwenden Sie keine verdichteten Schriften im Fließtext.

95. Stellen Sie sicher, dass die Textgröße für Schlagzeilen auf einer mobilen Website so schnell reagiert wie der Rest des Inhalts.

96. Erhöhen Sie die Schriftgröße auf mobilen Websites – skalieren Sie die Schriftgröße immer auf die Bildschirmgröße.

97. Banner-Blindheit: Die Nutzer*innen bemühen sich, nichts zu betrachten, was wie Werbebanner aussieht.

98. Erleichtern Sie die Lesbarkeit von langen Textblöcken, indem Sie nur eine Idee pro Absatz aufnehmen.

99. Kursivschrift ist schwieriger zu lesen, vornehmlich für Leser mit Legasthenie.

100. VERWENDEN SIE NICHT ALLE GROßBUCHSTABEN IN IHREN ÜBERSCHRIFTEN UND TAGLINES. Es ist viel schwieriger zu lesen.