Blog | FAQ | Kontakt | Login

Zurück

Usability-Hinweise zu typischen Website-Elementen

Webdesign

Diese Seite ist eine Sammlung der UI/UX-Grundsätze zu häufig verwendeten Website-Elementen. Es handelt sich nicht um feste Regeln, sondern Best Practices, die sich in unserem Alltag als Webdesign-Agentur etabliert haben.

Inhaltsverzeichnis

Akkordeons

  • Das erste Element ist beim Start ausgeklappt. So sieht der Nutzer sofort, dass es sich um ausklappbare Elemente handelt. Außerdem wird er dadurch zum Weiterlesen animiert.
  • Akkordeons schließen sich nicht automatisch, denn manche Nutzer möchten die Inhalte zweier Elemente vergleichen.
  • Die Titel der einzelnen Akkordeon-Elemente beginnen bündig mit den Inhalten der aufgeklappten Akkordeon-Elemente.

Animationen

  • Grundsätzlich sollten Animationen vorhandene Elemente des Interfaces verwenden, anstatt neue Elemente hinzuzufügen.
  • Animationen sind in der Regel kürzer zu gestalten, als man annehmen könnte. Unaffällige, kleine Animationen, wie beispielsweise das Anwählen von Checkboxen, sollten nicht länger als 100 ms dauern. Große Animationen, wie beipielsweise das Öffnen eines Overlays, sollten nicht länger als 400 ms dauern. Ansonsten empfindet der Nutzer die Seite als langsam und die Animation schnell als nervig.
  • Ladebalken verhalten sich normalerweise nichtlinear. Dadurch, dass der Balken am Ende schneller wird, empfindet der Nutzer die Ladezeit als kürzer.

Abstände

  • Abstände dienen dazu, Gruppen an Elementen visuell zu unterteilen.
  • Der Abstand vor einer Überschrift ist in der Regel größer als der Abstand nach der Überschrift. Die Abstand gehört inhaltlich schließlich zum nachfolgenden Absatz, weshalb diese visuell gruppiert sein sollten.
  • Vertikale Abstände über 75 px sind zu vermeiden, da diese insbesondere auf mobilen Geräten den Scrollfluss stören. Zwischen 25 und 50 px Abstand zwischen einzelnen Sektionen auf einer Unterseite sind meistens ausreichend.

Bilder

  • Realbilder, wie beispielsweise Fotografien, sind in der angezeigten Auflösung einzubinden.
  • Grafiken, wie beispielsweise Illustrationen mit feinen Linien oder Text, sind in doppelter Auflösung zu hinterlegen. Ansonsten wirken diese auf Bildschirmen mit hoher Pixeldichte verschwommen.
  • Bilder dürfen in der Darstellung nicht vom Seitenverhältnis des Originalbilds abweichen, da das Bild dadurch verzerrt wird.

Breadcrumbs

Die Breadcrumb-Navigation zeigt dem Nutzer den Pfad zur aktuellen Unterseite.

  • Der letzte, aktive Punkt ist üblicherweise durch Fettdruck hervorgehoben.
  • Das Trennzeichen ist > oder ein gleichbedeutendes Symbol, um die Vorwärtsbewegung in der Hierarchie zu veranschaulichen.

Buttons

  • Die Breite des Buttons ist üblicherweise abhängig vom Label. Buttons mit fixen Breiten wirken hingegen oft blockmäßig und wenig harmonisch.
  • Für Buttons sollte man mindestens zwei Stile vorsehen. Durch den primären und sekundären Stil können wichtige von untergeordneten Aktionen unterschieden werden.
  • Für den sekundären Stil eignen sich Ghost-Buttons, bei denen der Button keine Füllung, sondern nur eine Outline hat.
  • Buttons ohne Text haben einen Hover-Text. Hat der Button nur ein Icon, so muss dieses eindeutig sein. Buttons mit Text sind möglichst mit Verben zu beschriften.
  • Buttons haben eine Pressed-State. Das zeigt mobilen Nutzern, dass sie den Button getroffen haben.

Container

Container beinhalten weitere Inhaltselemente und bestimmen die Anzeigebreite.

  • Ein Full Width Container reicht immer über 100 % der Bildschirmbreite
  • Ein Content Width Container reicht über die festgelegte Content-Breite. Diese kann frei gewählt werden und liegt üblicherweise bei 960, 1.024 oder 1.200 px.
  • Der Wide Width Container liegt zwischen der Content und Full Width, beispielsweise bei 1.500 px. Dieser kann das Layout auflockern, sodass nicht alle Elemente der strikten Content Width folgen müssen.

Filter

  • Aktive Filterkriterien müssen hervorgehoben sein, beispielsweise kann man diese in Form von Badges mit X-Icon zum Entfernen des Filter-Kriteriums.
  • Die Filter-Kriterien sollten immer zu Ergebnissen führen. Wenn der Nutzer einen Filter setzt und 0 Ergebnisse erhält, dann führt das zu Frust seitens des Nutzers.

Formulare

  • Labels sind idealerweise rechtsbündig links neben dem Eingabefeld zu platzieren. Fokussiert sich die Website auf mobile Nutzer, dann kann man die Labels oberhalb des Eingabefeldes platzieren.
  • Ein Zurücksetzen-Button ist nicht erforderlich. Klickt man als Nutzer versehentlich auf den Zurücksetzen-Button, dann ist das für den Nutzer ärgerlich.
  • Bei Checkboxen oder Radiobuttons für Auswahllisten sind maximal 5 Optionen gelistet. Bei mehr Elementen verwendet man am besten ein Dropdown.
  • Eingabefelder validieren direkt nach der Bearbeitung des Feldes. Erscheint die Fehlermeldung bereits während der Eingabe, dann kann das nervig sein. Denn unter Umständen wird man auf einen Fehler hingewiesen, obwohl man seine Eingabe noch nicht abgeschlossen hat.

Footer

  • Die Spalten des Footers sollten auch auf Tablets und Laptops ordentlich stacken. Häufig springt der Footer zur früh auf das einspaltige Layout um, was auf größeren Bildschirmen unnötig langes Scrolling erfordert.

Header

Siehe auch: Menüs

  • Das Logo verlinkt immer zur Startseite.
  • Damit Logos immer scharf dargestellt werden, ist das Dateiformat SVG das Mittel der Wahl.
  • Der Header ist über die gesamte Website konsistent auf jeder Unterseite anzuzeigen. Einzige Ausnahme sind Landing Pages, die nicht über das Menü zu erreichen sind.
  • Sticky Header dürfen beim Scrollen nicht zu hoch sein, ansonsten wird zu viel Content verdeckt. Unter Umständen muss der Header animiert verkleinert werden.
  • Wenn es keinen Sticky Header geben soll, dann macht ein Scroll-To-Top-Button rechts unten Sinn, damit der User Mobile schneller nach oben gelangt.

Icons

  • Bei Icons ist zu bewerten, wie viele auf der Website eingesetzt werden. Das Iconset Font Awesome hat in der kleinsten Variante 500 MB Dateigröße, weshalb es nur eingesetzt wird, wenn viele Icons gefordert sind. Ansonsten bindet man die einzelnen Icons am besten direkt als SVGs ein, welche man beispielsweise bei Font Awesome herunterladen kann.
  • Icon-Stile wie Light, Regular oder Bold dürfen in der Regel nicht gemischt werden.
  • Das Close-Icon ist als echtes X-Icon einzufügen, nicht als einfacher Buchstabe.

Kacheln

Kacheln sind rechteckige Elemente, welche zum Beispiel für die Teaser von Blogbeiträgen oder Produkten verwendet werden.

  • Bei Kacheln verlinkt idealerweise die gesamte Kachel auf das Ziel, nicht nur der “Weiterlesen”-Button.

Kachel-Slider

Kachel-Slider zeigen mehrere Teaser- oder Produkt-Kacheln in einer Zeile.

  • Die Navigationspfeile vor und zurück befinden sich in der Desktop-Ansicht meistens außerhalb des Content-Bereichs. So können die Kacheln innerhalb des Content-Bereichs dem regulären Spalten-Raster folgen. Dadurch wirkt das Gesamtbild harmonischer.
  • Sobald der Bildschirm so klein ist, dass die Pfeile an den Rand stoßen, überlagern die Navigationspfeile üblicherweise die Kacheln. Es ist darauf zu achten, dass die Vor- und Zurück-Icons mit einem Hintergrund zu hinterlegen sind, damit diese eindeutig erkennbar bleiben.
  • Die Underline von Links muss von Hand über eine normale Linie hinzugefügt werden. Die klassische Underline aus der Textformatierung sieht nur selten gut aus, da diese zu schmal und zu nahe an der Grundlinie der Buchstaben ist.
  • Der Link-Stil sollte konsistent über die Website sein, damit man Links sofort erkennen kann.
  • Der Cursor muss immer zum Pointer werden, wenn ein interaktives Element gehovert wird.

Menüs

  • Jeder klickbare Menüpunkt muss auch eine eigene Unterseite haben. Eine Weiterleitung auf den ersten Unterpunkt ist in der Regel verwirrend, da der Nutzer dies nicht erwartet.
  • Menüpunkte benötigen einen Hover-Stil.
  • Die Unterseite, auf welcher sich der Benutzer gerade befindet, muss im Menü hervorgehoben sein. Falls es eine übergeordnete Seite gibt, sollte diese idealerweise auch hervorgehoben sein.
  • Mobile Menüs mit wenigen Menüpunkten können die Unterebenen dauerhaft ausgeklappt anzeigen. Mobile Menüs nehmen idealerweise den gesamten Bildschirm ein. Der Hintergrund darf bei geöffnetem Menü nicht scrollbar sein.
  • Bei Burger-Menüs müssen das Icon zum Öffnen und Schließen exakt übereinander liegen und die gleiche Größe haben, ansonsten ist kein schnelles Öffnen und Schließen möglich.
  • Megamenüs verlangen auf Desktop, dass der Nutzer nach Hover über den Hauptmenüpunkt in der zweiten Ebene gelegentlich quer über den Bildschirm navigiert. Das kann dazu führen, dass sich das Megamenü vorzeitig schließt, was ärgerlich ist. Hierzu kann die Schließen-Funktion des Menüs verzögert werden. Besser ist eine Click-To-Open-Funktion, welche sich mittlerweile als Standard etabliert hat.
  • Eine Ebene sollte maximal 7 Menüpunkte umfassen. Mehr Elemente überfordern das Kurzzeitgedänchtnis und lassen das Menü unübersichtlich wirken.

Schriften

  • Die Bold und Italic Schriftschnitte sind als eigene Font-Dateien zu hinterlegen. Ansonsten generieren die Browser die Schnitte eigenständig, was meistens schlechter als die „echte“ Font-Datei aussieht.

Sprachwechsler

  • Die initiale Sprache ist üblicherweise die Website-Sprache. In der aufwendigeren Variante wird die initiale Sprache anhand der IP-Adresse oder der Browsersprache ermittelt. So ist die Wahrscheinlichkeit höher, dass der Besucher die Sprache nicht wechseln muss.
  • Die Sprachwahl liegt üblicherweise oben rechts.
  • Das Flaggensymbol eignet sich aufgrund mehrsprachiger Länder nicht. Falls man ein Icon verwenden will, dann eignet sich ein Globus-Icon.

Slider & Banner

  • Bei Slidern, welche nur über die Inhaltsbreite reichen, liegen die Pfeile üblicherweise außerhalb des Contents. Bei Full-Size-Slidern liegen die Pfeile zwangsläufig innerhalb des Bild-Elements.
  • Bei Bannern kann es optisch interessant wirken, wenn die Form des darüberliegenden Kastens mit Inhalten nicht rechteckig ist. Hier kann man beispielsweise eine Seite abschrägen.
  • Außerdem kann der Button innerhalb des Banners aus dem Kasten mit Inhalten ragen, um die blockmäßige Gestaltung aufzulockern.
  • Slider/Banner sind üblicherweise maximal 550 px hoch und maximal rund 2.050 px breit. Wenn der Banner pauschal auf 100 % gesetzt wird, dann wird der Banner unter Umständen auf breiten Monitoren zu breit, deshalb wird die Breite begrenzt. Die üblichen 1.920 px sind zu gering, da auf 2k-Monitoren mit Skalierung dann ein schmaler weißer Rand bleibt.
  • Wichtig ist bei Slider/Banner das responsive Verhalten.
    • Da das Bild meistens sehr breit ist, kann man dieses nicht einfach im gleichen Seitenverhältnis skalieren. Denn dadurch ist das Bild auf Mobile zwar nicht abgeschnitten, aber nur noch wahnsinnig niedrig und der Inhalt kaum noch zu erkennen.
    • Deshalb sollte bei sinkender Screen-Breite das Bild links und rechts gleichmäßig abgeschnitten werden, wobei die Höhe beibehalten wird. An ein oder zwei passenden Breakpoints kann man dann die Höhe des Bildes sprunghaft senken, damit nicht zu viel Bildinformation verloren geht.
    • Also verändert sich die Bildinformation im Horizontalen gleichmäßig, im Vertikalen nach Breakpoints.
    • Man kann dem Kunden zudem im Backend die Möglichkeit geben auszuwählen, ob die Hauptinformation des Bildes links, rechts oder mittig ist. Und dementsprechend das laufende horizontale Abschneiden von links, von rechts oder von beiden Seiten vornehmen. Die Textausrichtung ist davon in der Regel unabhängig linksbündig.
    • Sollte alles nichts helfen und das Bild Mobile nicht gut aussehen, dann kann man zur Not auch einen separaten Upload für ein Mobile-Bild hinzufügen.
    • Auf Mobile bietet es sich an, den Text unter das Bild zu schieben. Sonst ist das komplette Bild mit dem Text-Overlay überdeckt.

Suche

  • Die Suchfunktion muss direkt bei Eingabe dynamisch Suchergebnisse liefern. Der eingegebene (Teil-) Suchbegriff wird dabei in den Vorschlägen hervorgehoben.
  • Nach Absenden der Suche muss auf der Suchseite der Suchschlitz mit vorausgefülltem Suchbegriff vorhanden sein.
  • Bei 0 Treffern sollte ein CTA auf der Ergebnisseite den Nutzer zur Startseite, der Sitemap oder einer Übersicht bringen.

Tabs

  • Bei Tabs ist es am übersichtlichsten, wenn der aktive Tab mit dem darunterliegenden Content verbunden ist.
  • Auf mobilen Geräten können Tabs vertikal übereinander liegen, je ein Tab pro Zeile. Der Content kann dabei ähnlich eines Akkordeons aufklappen, oder sich unterhalb der Tabs öffnen.

Texte

  • Blocksatz ist im Webdesign meistens zu vermeiden. Denn Blocksatz verlangt eine wohlüberlegte Silbentrennung, damit die Abstände zwischen den einzelnen Worten einer Zeile nicht zu groß werden. Die bewusste Worttrennung ist im Webdesign nicht möglich, da die Laufweite einer Zeile von der Breite des Endgeräts abhängig ist.
  • Zentrierter Text ist in der Regel auch zu vermeiden. Der Zeilenbeginn ist beim zentrierten Text nicht fix, weshalb der Sprung zur nächsten Zeile anstrengender als im linksbündigen Text ist.