Die 24 Regeln des Webdesigns

Als jemand der Webseiten entwirft weißt du sicherlich, dass es unumstößlich ist, deine Designs so nützlich und unterhaltsam wie möglich zu gestalten. Vielleicht fängst du aber auch grade erst an Webseiten zu erstellen und merkst, dass es eine gewaltige Herausforderung sein kann.

Um dir dein nächstes Webdesign-Projekt etwas zu versüßen habe ich dir eine Liste von Regeln (bzw. Best Practices) zusammengestellt.

Image for post
Die 24 Regeln des Webdesigns (Bild)

Fangen wir damit an was du unbedingt umsetzen solltest

1. Halte deine Benutzeroberfläche konsistent

Eine der wichtigsten Prinzipien von guter Nutzererfahrung (User Experience / UX) ist das Interface deiner Website ,während des gesamten Prozesses, konsistent zu halten. Der Gesamteindruck jeder einzelnen Seite sollte also durchweg ähnlich sein. Denk dabei an eine einheitliche Navigation, ein festgelegtes Farbeschama, passende Schriftarten und Schreibstile. Das alles kann einen positiven Einfluss auf die Bedienbarkeit und die Nutzererfahrung deiner Homepage haben

Tipp: Konzentriere dich zunächst darauf, deine Website nutzerfreundlich zu gestalten. Konsistenz ist ein zweischneidiges Schwert. Sollte deine Website auf den ersten Blick völlig unübersichtlich sein, erreichst du damit nur eine schlechte Nutzererfahrung und die Konsistenz hilft dir dann auch nicht mehr. Mach also zuerst das Design benutzbar, dann mach es konsistent.

2. Gestalte eine benutzerfreundliche Navigation

Die Navigation ist der Eckpfeiler der Benutzerfreundlichkeit. Durch sie wird die Interaktion mit deiner Website überhaupt erst ermöglicht. Eine gute Navigation auf deiner Seite ist entscheidend, um sicherzustellen, dass Besucher finden können, was sie suchen.

Tipps:

  • Reduziere dein Hauptmenü auf die wesentlichsten Navigationspunkte. Beschränke es auf maximal sieben Auswahlmöglichkeiten ━ die Anzahl der Objekte, die sich ein durchschnittlicher Mensch kurzfristig merken kann, beträgt 7 ± 2 ━ und erstelle eine Unternavigation mit klarer Kategorisierung.
  • Verwende klare Bezeichnungen für die Navigationspunkte. Versuche vertraute Wörter für die Menüoptionen zu wählen, damit deine Besucher sie besser nachvollziehen können.
  • Optimiere die Zeit, die deine Nutzer benötigen, um zum Ziel zu gelangen. Gestalte deine Navigation so, dass Besucher mit möglichst wenig Klicks dorthin gelangen, wo sie hin wollen. Denke bei der Gestaltung einer Website an die Drei-Klick-Regel, die besagt, dass deine Besucher nie mehr als drei Klicks von dem entfernt sein sollten, was sie suchen.
  • Füge Navigationsmöglichkeiten in die Fußzeile deiner Seite ein. Auch die Fußzeile ist ein Ort, an dem Besucher Navigationsmöglichkeiten und Kontaktinformationen erwarten.

3. Ändere die Farbe der besuchten Links

Links spielen eine wichtige Rolle im Surfverhalten deiner Nutzer. Wenn besuchte Links ihre Farbe nicht ändern, könnten Benutzer unbeabsichtigt immer wieder die gleichen Seiten aufrufen.

4. Mach es deinen Besuchern einfach, deine Seiten zu “scannen”

Wenn jemand deine Seite besucht, wird diejenige, oder derjenige, eher schnell die Seite scannen, als alles Wort für Wort lesen zu wollen. Wenn deine Besucher beispielsweise einen bestimmten Inhalt finden oder eine bestimmte Aufgabe erledigen wollen, durchsuchen sie die Seiten einer Website, bis sie finden, was sie suchen. Und du, als Designer, kannst ihnen, durch den Entwurf einer guten visuellen Hierarchie, dabei helfen. Visuelle Hierarchie bezieht sich auf die Anordnung oder Präsentation von Elementen in einer Art und Weise, die eine gewisse Wichtigkeit impliziert ━. z.B. wo ihre Augen zuerst, zweitens, etc. hinschauen sollen.

Tipps:

  • Vermeide Textwände. Unterteile deine Inhalte und Informationen, um sie visuell leichter verdaulich zu machen. Breche Textwände durch Überschriften oder Aufzählungspunkte auf.
  • Setze wichtige Elemente visuell in den Vordergrund. Mache wichtige Elemente wie Call-To-Action-Buttons oder Anmeldeformulare zu Aufhängern, damit Besucher sie sofort sehen können. Du kannst Elemente durch verschiedene Größen oder Farben hervorheben.
  • Betrachte natürliche Scanmuster. Die Menschen in der westlichen Welt lesen normalerweise von links nach rechts und von oben nach unten. Ein Design, das gegen dieses Muster verstößt, macht es deinen Besuchern schwer deinen Texten zu folgen. Gut gestaltete Websites legen ihren Inhalt normalerweise in einer “F”-Leseform oder “Z”-Leseform an.
  • Halte dich an ein Rasterlayout. Ein Rasterlayout ermöglicht es dir, Informationen so zu organisieren, dass es für die Besucher einfacher wird, die auf der Seite dargestellten Informationen zu lesen und zu verstehen.

5. Nimm deine Inhalte ernst

Text ist genauso wichtig wie das Design deiner Webseite. Mehr als 95 Prozent der Informationen im Web liegen in Form von geschriebener Sprache vor. Selbst wenn deine Website schön gestaltet ist, ist sie nicht mehr als ein leerer Frame ohne guten Inhalt; eine gute Website hat sowohl tolles Design als auch tollen Inhalt. Die Aufgabe eines Designers ist es, dafür zu sorgen, dass das Design den Inhalt unterstützt und ergänzt.

Tipps:

  • Stelle sicher, dass der Text auf deiner Website relevant ist. Irrelevanter Text bringt keinen Mehrwert für deine Besucher und kann sie sogar verwirren. Bemühe dich darum, wertvolle Inhalte anzubieten.
  • Vermeide Fachjargon. Die Informationen auf deiner Webseite sollten so einfach und klar wie möglich sein, damit sie leicht zu verstehen sind. Ein Jurist beispielsweise, der Online seine Kanzlei vorstellt sollte von Fachjargon absehen. Denn wer nach juristischer Hilfe sucht, hat meistens kein Jura studiert.

6. Überprüfe deine Website auf Fehler

Ein großes Werk kann schnell durch einen kleinen Fehler getrübt werden. Hier sind ein paar häufige Probleme, auf die du achten solltest:

  • Achte auf tote Links. Ein Benutzer kann schnell frustriert sein, wenn er auf einen Link klickt und als Antwort eine 404-Fehlerseite erhält.
  • Überprüfe deine Website auf Tippfehler.
  • Stelle sicher, dass alle Medieninhalte korrekt geladen werden ━ keine kaputten Bilder oder Videos.

7. Minimiere die Anzahl von Auswahlmöglichkeiten

Die Anzahl von Wahlmöglichkeiten, die ein Mensch hat, beeinflusst seine Entscheidungen; je mehr Wahlmöglichkeiten zur Verfügung stehen, desto eher fühlt er sich Überfordert. Wenn du deinem Nutzer zu viele Optionen präsentierst, bringst du ihn dazu, zu viel nachzudenken. Unterstütze deine Besucher bei der Entscheidungsfindung, durch übersichtliche Inhalte.

8. Benutzer zum Scrollen veranlassen

Durch Scrollen werden deine Besucher tiefer auf deine Seite geführt und so verbringen sie automatisch mehr Zeit auf deiner Seite. So erhöhst du die Chance, dass deine Nutzer ━ z.B. etwas kaufen, einen Newsletter abonnieren oder dich kontaktieren. Obwohl die Leute normalerweise sofort nach dem Laden der Seite mit dem Scrollen beginnen, ist der erste Inhalt deiner Seite durchaus sehr wichtig. Was oben erscheint bestimmt den Eindruck und die Qualitätserwartung deiner Besucher. Die Leute scrollen zwar, aber nur, wenn das, was am Anfang (Above the Fold) steht, vielversprechend genug ist.

Praktischer Tipp: Der Inhalt am Anfang der Seite weckt erste Erwartungen. Wenn deine Seite deinen Besuchern qualitativ hochwertige Inhalte bietet, sind sie bereit, nach weiteren Inhalten zu blättern.

9. Buttons entsprechend ihrer Funktion beschriften

Die Beschriftung eines Interface-Elements sollte immer an das erinnern, was es für den Benutzer tun wird. Benutzer werden sich wohler fühlen, wenn sie verstehen, welche Aktion ein durch einen ausgelöst Button wird. Vage Bezeichnungen wie “Absenden” oder abstrakte Bezeichnungen liefern nicht genug Informationen über die Aktion.

10. Sorg dafür, dass Elemente mit einer Funktion dementsprechend aussehen.

Überlege wie du deine Buttons und anderen interaktiven Elementen, wie das Design, dessen Funktion kommunizieren kannst. Erinnere dich an das alte Sprichwort “form follows function”: Die Art und Weise, wie ein Objekt aussieht, sagt deinem Benutzer, wie er es benutzen soll. Visuelle Elemente, die wie Links oder Buttons aussehen, aber nicht anklickbar sind ━, wie z.B. unterstrichene Wörter, die keine Links sind, oder Elemente, die einen rechteckigen Hintergrund haben, aber keine Buttons sind ━, können deinen Besucher leicht verwirren.

11. Mach deine Website responsiv.

Heute gibt es mehr als 5 Milliarden Geräte mit Webbrowsern. Das bedeutet, dass Besucher von verschiedenen Geräten wie einem Desktop, Tablet, Telefon, Musik-Player oder sogar einer Uhr auf deine Seite kommen können. Ein großer Teil des UX-Designs stellt sicher, dass, egal wie der Besucher deine Seite sieht, alle wichtigen Informationen auf verschiedenen Bildschirmgrößen korrekt angezeigt werden.

Mache wichtige Informationen leicht auffindbar. Im Gegensatz zu Desktop-Nutzern suchen die Nutzer beim Surfen auf dem Handy nach etwas Bestimmtem, wie z.B. Kontaktinformationen oder den Kosten für ein Produkt, das sie kaufen möchten. Mache es unmöglich, diese Informationen zu übersehen.

Bedenke die Größe deiner interaktiven Elemente entsprechend der jeweiligen Bildschirmgröße. Da Handynutzer mit ihren Fingern scrollen und tippen, kann es sein, dass du die Größe der interaktiven Elemente, wie zum Beispiel Buttons, anpassen musst.

12. Teste dein Design

Du hast vielleicht ein Design, dass du großartig findest, aber ohne Feedback von echten Nutzern wirst du nie wissen, wie effektiv es ist. Du solltest in Erfahrung bringen, wie potentielle Nutzer darauf reagieren. Selbst wenn du bloß ein oder zwei echte, unvoreingenommene Bekannte oder Arbeitskollegen fragst, deine Website auf Herz und Nieren zu prüfen um dann ihre Gedanken mit dir zu teilen, wirst du viele hilfreiche Erkenntnisse bekommen, die du ohne sie nicht hättest.

Tipp: Behalte die Analytik im Auge. Webanalysen sind leistungsstarke Werkzeuge, die dir helfen können, Bereiche auf deiner Website zu finden, die zusätzliche Aufmerksamkeit erfordern.

Jetzt gucken wir uns an, was du unbedingt vermeiden solltest

13. Lass die Benutzer nicht warten, bis die Inhalte geladen wurden

Die Ladezeit ist extrem wichtig für das Benutzererlebnis. Je weiter die Technologie fortschreitet, desto ungeduldiger werden wir, und heute erwarten 47 Prozent der Nutzer, dass eine Webseite in zwei Sekunden oder weniger geladen wird. Wenn eine Webseite mehr Zeit zum Laden benötigt, werden deine Besucher sehr wahrscheinlich frustriert von dannen ziehen. Aus diesem Grund sollte beim Erstellen einer Homepage oder Webanwendung die Geschwindigkeit priorisiert sein.

Tipps:

  • Vermeide eine leere Seite während des Ladevorgangs. Wenn das Laden einige Zeit in Anspruch nimmt, solltest du in Erwägung ziehen, einen Teil des Inhalts zusammen mit einer Form von visuellem Feedback anzuzeigen, z. B. einer Ladeanzeige.
  • Optimiere Bilder. Bilder, vor allem große Hintergrundbilder, können sehr viel Zeit zum Laden beanspruchen. Du kannst die Ladezeit erheblich verkürzen, indem du deine Bilder optimierst.
  • Messe die aktuelle Leistung deiner Website. Die Google-Tools PageSpeed Insights und Think With Google helfen dir nicht nur dabei, Performance-Probleme auf deiner Website zu erkennen, sondern sie schlagen auch Lösungen für bestimmte Probleme vor.

14. Interne Links nicht in neuen Tabs öffnen

Benutzer erwarten ein unterschiedliches Verhalten von internen und externen Links. Alle internen Links sollten sich im selben Tab öffnen; auf diese Weise erlaubst du deinen Besuchern, den “Zurück”-Button zu nutzen. Wenn du dich dafür entscheidest, externe Links in einem neuen Fenster zu öffnen, könntest du eine Vorwarnung geben, bevor du automatisch ein neues Fenster oder einen neuen Tab öffnest. Das kannst du mit Hilfe von einem kurzen Text bewerkstelligen, der dem Link-Text hinzugefügt wird. “öffnet sich in einem neuen Fenster”.

15. Verwende nicht zu viele Schriften

Für viele Anfänger im Webdesign kann es verlockend sein, viele verschiedene Schriftarten in ihren Designs zu verwenden. Es ist allerdings von Vorteil, wenn du dieser Versuchung widerstehen kannst. Zu viele Variationen von Schriftarten können ablenkend, verwirrend und im schlimmsten Fall lästig sein.

Eine allgemeine Empfehlung ist es, maximal drei verschiedene Schriften in maximal drei verschiedenen Größen zu verwenden. Überlege dir bei der Gestaltung einer Website, wie du Typografie sinnvoll einsetzen kannst.

16. Verwende nicht zu viele Farben auf deiner Website

Ähnlich wie bei Schriften ist es ratsam, auf zu viele Farben im Design zu verzichten. Farbe hat viel mit Balance zu tun, und je mehr Farben du verwendest, desto schwieriger wird es die Balance zu wahren. Zu viele Farben im Design zu verwenden ist wie der Versuch, eine Million Gefühle und Botschaften auf einmal zu vermitteln.

Es ist immer besser, das Farbschema auf ein paar Farben zu beschränken und es auf deiner Seite einheitlich zu halten, es sei denn, du möchtest einen wichtigen Abschnitt farblich hervorheben.

Tipp: Überlege dir, welche Emotionen du bei deinen Besuchern hervorrufen möchtest. Zu wissen, welche Gefühle du vermitteln möchtest, kann dir bei der Auswahl des richtigen Farbschemas helfen. Wenn du zum Beispiel Produkte für Ruhe und Meditation auf deiner Website verkaufen möchtest, wirst du kein schrilles und buntes Farbschema wollen.

17. Zeige automatische Pop-ups nicht zu früh an

Viele Websites zeigen Pop-up-Boxen mit der Bitte, ein Abonnement abzuschließen, sobald du auf der Seite angekommen bist. Als Designer ist das Anzeigen von Pop-up-Fenstern wahrscheinlich eines der ärgerlichsten Dinge, die du jemandem, der deine Website besucht, antun kannst. Pop-ups sind von Natur aus störend. Und da sie typischerweise zum Anzeigen von Werbung verwendet werden, schließen deine Nutzer sie oft schon, bevor sie den Inhalt lesen.

Tipp: Stelle deine Pop-ups so ein, dass sie erst nach einer bestimmten Zeit angezeigt werden. Bevor du deinen Besucher aufforderst, etwas zu tun, musst du zeigen, wie du einen Mehrwert bieten kannst.

18. Verwende keine generischen Fotos von irgendwelchen Leuten

Bilder mit echten menschlichen Gesichtern sind eine sehr effektive Methode, um deine User zu binden. Unsere Gehirne sind prädisponiert, auf Gesichter zu achten. Wenn wir Gesichter von anderen Menschen sehen, haben wir das Gefühl, dass wir uns tatsächlich mit ihnen identifizieren und nicht nur ein Produkt betrachten.

Durchaus sind einige Firmenwebsites für ihren übermäßigen Gebrauch von sogenannten Stock-Fotos bekannt. Sie werden eingesetzt, um “Vertrauen aufzubauen”. Usability-Tests zeigen, dass rein dekorative Fotos dem Design nur selten einen Mehrwert verleihen und oft der Benutzererfahrung schaden.

19. Lass dir von zu vielen Werbeanzeigen nicht die Show stehlen.

Zu viele Werbeaktionen oder Anzeigen auf einer Seite können leicht den Hauptinhalt verwässern und es deinen Besuchern erschweren, gewisse Ziele zu erreichen. Wenn du zu viele Werbeanzeigen auf der Seite eingebaut hast, werden diese alle um die Aufmerksamkeit deiner Leser ringen. Dies führt zu einer Reizüberflutung, die letztendlich deine Absprungraten erhöht. Es ist auch wichtig anzuerkennen, dass alles, was wie eine Werbung aussieht, von den Usern in der Regel ignoriert wird. Das Phänomen ist als “Banner-Blindheit” bekannt.

20. Keine Hintergrundmusik oder Videos mit Musik abspielen

Obwohl Hintergrundmusik in bestimmten Fällen, wie z.B. bei einer Promo-Website, funktionieren kann, ist sie für die meisten Websites einfach eine schlechte Idee. Unerwartete Musik oder Geräusche können störend wirken oder möglicherweise sogar Probleme verursachen. So könnte es sein das dein Besucher deine Website gerade auf seiner Arbeitsstelle, an einem öffentlichen Ort oder in der Nähe von jemandem, der schläft betrachtet. Unerwartete Musik könnte solche Besucher im Nu vergraulen.

Tipp: Gib deinen Besuchern die Kontrolle. Stellt die Musik standardmäßig auf stumm, aber erlaube ihnen, sie einzuschalten, wenn sie auf die Wiedergabe-/Pause-Tasten klicken.

Facebook-Videos sind auf automatische Wiedergabe eingestellt, aber es wird solange kein Sound abgespielt, bis der jeweilige Nutzer nicht klar anzeigt der er das Video ansehen möchte, z.B. indem er mit dem Video interagiert.

21. Nicht den Scrollbalken ausblenden.

“Scroll-Hijacking” ist, wenn Designer die Bildlaufleiste so manipulieren, dass sie sich auf ihrer Website anders verhält. Ausgeblendete Scrollbalken sind für viele Nutzer sehr ärgerlich. Es entzieht ihnen die Kontrolle und mach das Scrollverhalten völlig unvorhersehbar. Wenn du eine Webseite entwirfst, ist es besser, “Scroll-Hijacking” zu vermeiden und dem Benutzer die Kontrolle auf der Seite zu überlassen.

22. Keine horizontale Bildlaufleiste verwenden

Um aufzufallen, benutzen einige Designer horizontales Scrollen auf ihren Seiten. Leider ist horizontales Scrollen eine der wenigen Interaktionen, die immer wieder negative Reaktionen bei Nutzern hervorruft. Die Nutzer wissen oft nicht, dass sie Inhalte durch horizontales Scrollen entdecken könnten. Die meisten deiner Besucher sind es gewohnt, auf Websites nach unten zu scrollen und schauen normalerweise nicht nach links und rechts. Infolgedessen ignorieren sie Inhalte, die durch horizontales Scrollen zugänglich sind, einfach.

23. Opfere die Nutzerfreundlichkeit nicht der Schönheit zuliebe

Egal wie schön ein Design auch sein mag, es sollte deinem Besucher niemals erschweren deine Inhalte zu lesen oder mit deiner Website zu interagieren. Ein typisches Beispiel für schlechte Nutzererfahrung ist die Verwendung von hellgrauem Text auf hellem Hintergrund. Diese Kombination beeinträchtigt die Lesbarkeit des Inhalts. Es ist besser, unruhige Hintergründe hinter dem Text oder unzureichenden Farbkontrast zu vermeiden.

Tipp: Kontrolliere das Kontrastverhältnis. Das Kontrastverhältnis gibt an, wie stark sich zwei übereinanderliegende Farben voneinander unterscheiden. Mit Tools wie Color Contrast Checker kannst du mit wenigen Klicks überprüfen, ob du einen ausreichenden Farbkontrast hast.

24. Verwende blinkenden Text und Werbung

Solltest du Anzeigen und Animationen einbinden wollen, denke nicht einmal daran, flackernde Blinkeffekte zu verwenden. Inhalte, die blinken oder flackern, können bei anfälligen Personen Anfälle auslösen und sind für normale Benutzer wahrscheinlich bloß störend oder ablenkend.

Schlussfolgerung

Wenn Menschen mit Webseiten interagieren, erwarten sie eine exzellente Nutzererfahrung. Wenn du ihre Bedürfnisse nicht erfüllst, werden sie einfach zu deiner Konkurrenz wechseln, die vielleicht nur einen Klick entfernt ist. Deshalb solltest du bei jeder Designentscheidung darüber nachdenken, was das Beste für deinen Besucher ist, und versuchen, die Erfahrung so angenehm wie möglich zu gestalten.

Julien Lieske - Webentwickler
Julien Lieske
Webentwickler