Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Andreas Hecht 1. Juli 2019

Konsistentes Design: So erstellst du Websites, die den Erwartungen deiner Besucher entsprechen

Gute Websites zu erstellen, beginnt mit einer gewissen Konsequenz. Diese Konsequenz ist wesentlich für die kognitive Belastung der Besucher einer Website. Wenn dein Design konsequent ist, fühlt sich jede Nutzung der Website glatt, reibungslos und logisch an. Wenn das Design jedoch inkonsequent ist, dann muss der Benutzer unnötige Mühe aufwenden. Genau das gilt es jedoch zu vermeiden, wenn du Websites erstellen willst, die den Erwartungen deiner Besucher entsprechen.

Anzeige

Konsequenz im Sinne von Konsistenz meint natürlich mehr als nur immer wieder die gleichen Dinge zu tun. In manchen Bereichen muss man mehr Konsistenz investieren, andere Bereiche sind einfacher umzusetzen. Zudem ist es sehr langweilig, stets immer wieder die gleichen Dinge zu tun und langweilige, einheitliche Designs abzuliefern. Der Schlüssel zum Erfolg ist die goldene Mitte zwischen dem Konsistenten und dem Chaos.

MightyText Website

In diesem Artikel werden wir im Detail erläutern, was Konsistenz im Webdesign bedeutet, warum es wichtig ist, sie zu erlangen und was es bedeutet, sie mit den Benutzererwartungen in Einklang zu bringen.

Anzeige

Warum Konsistenz im Webdesign wichtig ist

Gutes Design für Interaktionen stützt sich auf die Erlernbarkeit des Systems. Einfach ausgedrückt: Wenn eine Benutzeroberfläche gut arbeitet, wird sie vorhersehbar. Das bedeutet, dass ein Benutzer versteht, wie er bestimmte Funktionen intuitiv und ohne Anweisungen verwenden kann. Und genau darum geht es in diesem Artikel.

Eine gute und vorhersehbare UI sorgt für eine einfachere Verwendung des Endproduktes, es ist eine gute Konsistenz vorhanden. Wenn eine Benutzeroberfläche hingegen inkonsistent ist, behindert sie die Nutzung, provoziert Frustrationen des Nutzers und führt zu einer schlechten Erfahrung. Dieser User wird also die Website nicht noch einmal besuchen.

Natürlich ist die Konsistenz nicht allein auf die von dir erschaffene Website beschränkt. Die meiste Zeit wird der User damit verbringen, auf anderen Websites zu surfen. Dies vermittelt ihm wiederum Erfahrungen im Umgang mit einer Website. Diese Erfahrungen sind für deine Website entweder positiv oder negativ, je nachdem, wie viel Gehirnschmalz du in die Benutzerführung und Bedienbarkeit deiner Website investiert hast. Konsistenz heißt also nichts anderes, als das alles perfekt zusammenpasst und wie aus einem Guss funktioniert.

Das Prinzip der geringsten Überraschung

Wenn du mal Zweifel hast, wie du die Oberfläche deiner Website gestalten solltest, folge einfach dem Prinzip der geringsten Überraschung. Kleine Überraschungen wie die von MailChimp sind natürlich okay. Aber deine Kernfunktionen sollten sich nicht zu weit vom Standard abheben. Der Design-Standard sollte schon eingehalten werden. Videos sind nicht mit Bildern zu verwechseln, Buttons sollten gut sichtbar und mit einer klaren Kernaussage beschriftet sein und so weiter. Überprüfe dein Design stets aus der Sicht des späteren Users.

Wenn du dir immer noch nicht im klaren bist, was gutes konsistentes Design bedeutet, dann lies dir die guten Human Interface Guidelines durch. Das sollte dir helfen. Diese Richtlinien sind durchaus auch für eine Website anzuwenden.

Konsistenz im Webdesign

Die Konsistenz im Webdesign kann auf zwei Bereiche umgebrochen werden, die interne und die externe Konsistenz. Die externe Konsistenz bezeichnet dabei den Vergleich mit anderen Produkten und Oberflächen, die interne Konsistenz hingegen bezeichnet die Beschaffenheit deiner eigenen Oberfläche. Werfen wir also einen näheren Blick auf einige der besten Praktiken für ein Oberflächendesign.

Die externe Konsistenz

Die externe Konsistenz bezeichnet auch die Vergleichbarkeit mit ähnlichen Produkten. Deine Website wird täglich mehrfach mit anderen Websites verglichen. Zusammenfassend kann man sagen, dass externe Konsistenz bedeutet, den Erwartungen der Benutzer zu entsprechen. Um ein Design zu erstellen, dass mit den Benutzererwartungen übereinstimmt, musst du zunächst dein Design und die Arbeiten anderer Designer mit den Augen eines Benutzers betrachten. Wenn du dich auf einer Website hervorragend zurechtfindest, kannst du diese externe Konsistenz in dein eigenes Design übernehmen.

CoShedule

Eine klare Benutzerführung. Der User weiß sich sofort zurechtzufinden

Die derzeitigen Kenntnisse der Besucher einer Website hängen von einigen externen Faktoren ab. In den meisten Fällen jedoch werden die Erwartungen der User angemessen sein, so dass man gut auf diese Erwartungen reagieren kann. Die Gestaltung basiert letztendlich darauf, was deine User bereits wissen. Das ist kein wirklich neues Konzept, es hat sich als Standard herauskristallisiert und ist heute auf nahezu jeder Website oder mobilen Anwendung zu finden.

Da wären zum Beispiel ein Slider für die Präsentation von Bildern, ein Briefumschlag-Symbol für die E-Mail-Adresse, das Logo der Website, das nach dem Klick auf die Startseite zurückführt. All das sind immer wiederkehrende UI-Muster und entsprechen den Erwartungen deiner Besucher.

Wiedererkennbare Oberflächen-Muster nutzen

Sogenannte UI-Patterns oder Oberflächen-Muster zu nutzen, verhindert viele Probleme in der Benutzerfreundlichkeit von Anwendungen. Diese Muster kennen viele Anwender bereits aus anderen Lösungen, haben sie durch die Besuche von anderen Websites verinnerlicht oder durch die Nutzung von Programmen, wie zum Beispiel Word. Designer müssen also nicht immer das Rad neu erfinden. Das kostenfreie E-Book »Web UI Design Patterns 2014« deckt die meisten konventionellen Muster ab. Dort kann man sich gute Anregungen holen.

Beispiele für UI-Patterns
Microsoft Word für OS X

Font Awesome Icons

Der Icon-Font Font Awesome

Microsoft Word

Microsoft Word haben wir alle bestimmt schon mal genutzt. Diese Art von Menüoptionen hat sich so fest in die Gehirne von Usern gebrannt, die häufig Text-Editoren nutzen, dass es nur natürlich erscheint, sie in anderen Anwendungen wiederzusehen. Selbst in diesem Moment, indem ich diesen Artikel schreibe, sehe ich diese Art der Benutzerführung vor mir. Denn der TinyMCE-Editor von WordPress nutzt genau diese Design-Elemente.

Icon-Fonts

Der Icon-Font »Font Awesome« ist ein sehr gutes Beispiel für UI-Patterns, denn er bietet dir viele für jedermann sofort wiederzuerkennende Icons an. Da sich diese Icons zudem noch leicht in der Größe anpassen lassen, sind Icon-Fonts erste Wahl bei der Erstellung einer guten Benutzererfahrung. Wie du siehst, kann externe Konsistenz verschiedene Gesichter haben, doch der Wiedererkennungswert ist stets sehr hoch und sorgt dadurch für eine gute Benutzererfahrung.

Wiedererkennbar, klar, strukturiert und intuitiv

Die wichtigen Dinge im Webdesign kann man durchaus in einer Überschrift zusammenfassen. Ein Design muss wiedererkennbar sein. Das bedeutet nicht, dass deine Websites immer gleich aussehen sollen. Es bedeutet lediglich, dass die wichtigen Elemente sich immer genau dort befinden, wo der Besucher deiner Website danach sucht. Eine Navigation gehört in den oberen Bereich einer Website. Gut ersichtlich und sofort ins Auge fallend. Die Suchfunktion muss ebenfalls – wenn angeboten – sofort ersichtlich sein. Das Logo muss anklickbar sein und zur Startseite führen.

Dr. Web

Eine Website darf nicht zu überladen sein. Weniger ist hier bedeutend mehr! Klare Strukturen sind wichtig. Call-To-Action-Buttons müssen sofort ins Auge fallen und eindeutig beschriftet sein, damit dem User klar ist, was man von ihm erwartet. Intuitiv heißt, alles ist dort zu finden, wo man als Erstes danach sucht. Du kennst das. Du bist selbst ein Konsumierer von Websites. Also prüfe dein Design aus dieser Sicht heraus.
Alles an der richtigen Stelle: Dr. Web

Diese Dinge gilt es zu vermeiden

Erwartungen der Besucher sind nicht nur Vorlieben, sondern manchmal auch Gewohnheiten. Nehmen wir zum Beispiel mal ein Standard-Kommentarformular. Wir alle wissen, dass ein Sternchen neben dem Feld bedeutet, dass diese Angabe erforderlich ist. Wird dort nichts eingegeben, kann man nicht fortfahren.

Ein Standard-Kommentarformular

In vielen Anmeldeformularen hingegen überwiegen die erforderlichen Felder die optionalen. Wäre es dann nicht einfacher, die optionalen Felder mit einem Stern zu markieren? Avis hatte genau das vor einigen Jahren einmal versucht.

Avis Formular

Allerdings war der einzige Weg, diese neue Kennzeichnung zu verstehen, das Lesen des Textes oberhalb des Formulars. Unterschätze niemals die Faulheit der Nutzer. Damals haben die Besucher von Avis das Formular wie gewohnt abgearbeitet und sich recht verärgert gewundert, was diese neue Art der Benutzerführung soll. Dieses neue Design zwang die Besucher, Formulare erneut lesen zu müssen. Mit Benutzerfreundlichkeit hat das nichts zu tun. Sehr schnell bemerkte Avis den Fehler und bietet heute wieder ein „normales“ Formular an.

Das neue Avis-Formular

Alle erforderlichen Felder sind sofort zu erkennen, die Sternchen teilen dem Besucher mit, was er zu tun hat. Egal, ob die Sternchen nun schwarz oder rot sind, die Bedeutung ist dem User bewusst. Alternativ können die optionalen Felder auch mit dem Wort „Optional“ gekennzeichnet werden, allerdings zwingt das den Besucher wieder, das Formular lesen zu müssen. Die kognitive Belastung des Users steigt – wenn auch nur für ein paar Millisekunden – an. Das kann nicht gewollt sein, denn intuitive Bedienungen geben dem Benutzer ein „Wohlgefühl“. Er wird die von dir gestaltete Website gern ein weiteres Mal besuchen.

Fazit

Natürlich können wir in einem Artikel nur die Basics vermitteln. Allerdings schafft schon das Einhalten der Basics eine gut gestaltete Website, die in einem guten Maße den Benutzererwartungen entspricht. Bedenke einfach stets, dass ein Besucher auf einer Website nicht nachdenken möchte. Er erwartet eine intuitive Benutzerführung, die ihm sofort und ohne Nachdenken klar macht, was er tun soll. Ein Besucher erwartet eine klare Struktur, ein Design, welches nicht überladen ist. Weniger ist oftmals mehr. Versuche stets deine Arbeit mit den Augen eines Besuchers zu sehen, das hilft bereits sehr.

Links zum Beitrag

(Beitragsbild: Gerd Altmann / Pixabay)

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.