Webseiten und Usability

Usability steht für die Ergonomie bzw. Alltagstauglichkeit / Bedienerfreundlichkeit einer Homepage, Anwendung oder Software.

Die sogenannten "Gestaltgesetze der Wahrnehmung", die sich wie viele weitere Gestaltpsychologierichtungen aus der Arbeit des Philosophen Christian von Ehrenfels von 1890 ableiten, spielen dabei eine große Rolle. Diese Gesetze dürften vielen noch aus dem Kunstunterricht ein Begriff sein. Dieser Artikel beinhaltet diese und noch ein paar hinzugefügte unverzichtbare Regeln für den Bau einer Homepage.

Das Wahrnehmungsgesetz der Nähe

Dinge, die räumlich nahe beieinander liegen, werden von unserer Wahrnehmung gruppiert, also als zusammengehörig erkannt. Dinge, die weit entfernt von einander liegen, werden als getrennt und unabhängig voneinander wahrgenommen.

Beim Layout ist es sehr wichtig, dieses Gesetz zu beachten, "Verstöße" dagegen können eine verheerende Wirkung haben. Dies betrifft Texte und Grafiken gleichermaßen wie Buttons und Links.

Das Gesetz der Nähe: Nah beieinander liegende Objekte werden als zusammengehörig angesehen.

Das Gesetz der Ähnlichkeit

Dinge, die sich ähnlich sind, werden von unserer Wahrnehmung als zusammengehörig angesehen. Umgekehrt werden Dinge, die sich voneinander entscheiden, als voneinander getrennt wahrgenommen. Dabei kann es sich um Ähnlichkeiten bei der Größe, Farbe, Schriftart, Helligkeit, Geschwindigkeit oder Bewegung handeln.

Gestaltet man die Elemente einer Website ähnlich, werden sie schnell in Zusammenhang miteinander gebracht, auch wenn sie weit voneinander entfernt platziert sind.

Das Gesetz der Ähnlichkeit: Dinge, die sich ähnlich sind, werden als zusammengehörig aufgefasst.

Das Gesetz der Geschlossenheit

Elemente, die unter gleichen Bedingungen  gruppiert  sind, werden zuerst als geschlossene Einheit betrachtet. Fehlende Informationen ergänzt das menschliche Gehirn durch gesammelte Erfahrungswerte . In der Gestaltung werden komplexe Designs mit Hilfe dieses Gesetzes vereinfacht.

Das Gesetz der Geschlossenheit: Fehlende Informationen ergänzt das Gehirn durch Erfahrungswerte.

Das Gesetz der Prägnanz

Unter gleichen Objekten einer Gruppe erfasst das menschliche Gehirn jenes Objekt, welches sich durch ein bestimmtes Merkmal von den anderen Objekten abhebt. Bei der Gestaltung einer Seite kann mit Hilfe dieses Gesetzes das Auge des Users bewusst auf ein bestimmtes Objekt gelenkt werden (z. B. Störer)

Das Gesetz der Prägnanz: Das Objekt, welches sich durch ein besonderes Merkmal von der Masse abhebt, wird erfasst.

Das Gesetz der guten Fortsetzung

Wir setzen Dinge nach räumlicher und zeitlicher Einfachheit, Gesetzmäßigkeit und Harmonie fort. Dabei stellen wir uns sogar Fortsetzungen vor, wo in Wirklichkeit gar keine sind. Kreuzen sich zwei Linien, sehen wir eine Linie immer als eine durchgehende, die nach der bisherigen Linienrichtung in eine Richtung verläuft. Wir setzen sie fort. Deshalb wird auch sehr oft vom "Gesetz der fortgesetzt durchgehenden Linie" gesprochen. Befinden sich mehrere Elemente auf einer Linie, nehmen wir sie als zusammengehörig wahr.

Das Gesetz der guten Fortsetzung wird auch als das "Gesetz der fortgesetzt durchgehenden Linie" bezeichnet.

Das Gesetz der Symmetrie

Wir nehmen Elemente, die ohne erkennbare Struktur angeordnet wurden, wesentlich schlechter wahr, als solche, die einander symmetrisch zugeordnet wurden. Objekte auf einer Homepage sollten also nach Möglichkeit als symmetrische Form abgebildet, bzw. in einer solchen angeordnet werden.

Gesetz der Symmetrie: Elemente, die ohne erkennbare Struktur angeordnet sind, nehmen wir wesentlich schlechter wahr.

Das Gesetz der Erfahrung

Das menschliche Gehirn versucht bei der Betrachtung von Objekten ständig bereits erkannte Objekte, Bilder und Eindrücke abzurufen und darzustellen. Deshalb sind wir dazu in der Lage, fehlende Bildteile zu ersetzen und angedeutet dargestellte Bilder komplett zu erkennen.

Im Webdesign kann dieses Gesetz bei der Gestaltung von Bildern und Logos genutzt werden. Dadurch kann die Spannung deutlich gesteigert werden.

Das Gesetz der Erfahrung: Bekannte Objekte und Eindrücke werden abgerufen und dargestellt.

Schrift

Die verwendeten Schriften sollten klar, gut erkennbar und nicht zu klein gewählt werden. Wichtig ist auch, nicht zu viele Schriften zu mischen. Erlaubt sind zwei unterschiedliche Schriftarten, natürlich sollten auch nur bestimmte Schriftarten zum Einsatz kommen. Der Kontrast zwischen Schrift und Hintergrund sollte ausreichend sein.

_Bild: birgitH pixelio.de_

Text

Der Text sollte passend formatiert sein, Blocksatz ist für das Internet nicht geeignet. Die Sätze sollten kurz und knackig formuliert sein, im Idealfall höchstens ein Komma enthalte und schnell auf den Punkt kommen.

Links

Links sollten sich vom Rest des Textes abheben, sie sollten klar als solche erkennbar sein.

Suche

Jede Homepage sollte eine vernünftige, gut funktionierende, auf einen Blick zu erkennende Suchfunktion beinhalten.

Suchfunktion

Feedback

Der User sollte über alles, das während der Zeit, die er auf einer Seite verbringt informiert werden ("Sie werden weitergeleitet.", "Sollten Sie nicht weitergeleitet werden, …", "Sie erhalten von uns umgehende eine E-Mail als Bestätigung.").

Sound

Soundeinspielungen sind auf einer Homepage nicht nur tunlichst zu vermeiden, sondern verboten. Sie lenken den User vom Wesentlichen ab, können sogar störend wirken und die Verweildauer wesentlich verkürzen.

Formulare

Bei durch den User auszufüllenden Formularen sollte man sich auf jeden Fall auf das Wesentliche beschränken. Felder, für die eine Ausfüllpflicht besteht, sollten durch ein Sternchen gekennzeichnet sein, um dem User ein erneutes Ausfüllen zu ersparen. Außerdem sollte das Weiterspringen von Feld zu Feld mit der Tab-Taste möglich sein. Sollte es zu Fehleingaben kommen, sollte der User durch sinnvolle Fehlermeldungen informiert werden. Nach dem Ausfüllen eines Formulars sollte der User auf jeden Fall die Möglichkeit einer Bestätigung über die Formularinhalte per E-Mail haben.

Navigation

• Die Kontaktdaten sollten auf jeden Fall immer klar erkennbar und von jeder Unterseite aus problemlos ohne Suche erreichbar sein.
• Begriffe sollten für den Besucher einer Seite problemlos verständlich sein.
• Das Impressum sollte alle gesetzlich vorgeschriebenen Inhalte vorweisen und von jeder Unterseite aus problemlos ohne Suche erreichbar sein.
• Die Seite sollte auch alle wichtigen Datenschutzhinweise erhalten. Diese sollten natürlich klar erkennbar sein.
• Alle Unterseiten sollten mit Hilfe eines deutlich sichtbaren Links auf die Startseite verlinken.
• Natürlich sollten alle persönlichen Links einen Link zur Startseite enthalten.
• Standartfunktionen sollten idealerweise auch mit Standartbegriffen benannt sein (Also "Suche" und nicht "cardasearch" als "Suche").
• Gleiche Symbole und Links sollten auf jeden Fall auf der gesamten Seite immer die gleichen Funktionen auslösen, um den Besucher nicht zu verwirren.
• Links, die nicht auf Webseiten, sondern auf PDF-Dokumente führen, sollten gekennzeichnet und mit Größenangaben versehen werden. Achtung! Nicht aus Bequemlichkeit immer gleich auf ein PDF verweisen. Immer abwägen, ob es sinnvoll ist, oder ob es doch userfreundlicher wäre, den Inhalt in ein paar Sätzen direkt auf der Homepage darzustellen.
• Basislinks, wie "Kontakt", "Impressum", "Startseite", etc. sollten auch auf jeder Unterseite gut sichtbar sein.

_Bild Thomas Siepmann pixelio.de_

Größenanpassung

Das Layout einer Seite sollte sich der Größe des Browserfensters des Users anpassen. Daher auf jeden Fall vor dem Onlinestellen für verschiedene Bildschirmgrößen und Browserarten testen. Im Idealfall sollte die Seite natürlich auch für mobile Geräte wie Tablets oder Mobiltelefone optimiert sein.

Bilder

(Produkt-) Bilder sollten durch Anklicken vergrößerbar sein.

Kontrolle

• Alle Links sollten auch nochmal von einer weiteren Person kontrolliert werden, oft übersieht man selbst etwas.
• Texte, die in Fremdsprachen verfasst wurden, sollten in jedem Fall von einem Muttersprachler geprüft werden.
• Natürlich gilt auch für alle anderen Texte, die auf der Seite eingestellt werden sollen immer das  4-Augen-Prinzip.

Viel Spaß beim Basteln!

Vielen Dank an Fabian Ziegler, Dipl.-Designer (FH) von Webmasterpro für die Grafiken!