Gutes Webdesign und was das mit deiner Küchenuhr zu tun hat

Was hat diese Uhr mit gutem Webdesign zu tun? Zwei mal im Jahr, wenn die Zeitumstellung erfolgt frage ich mich, wie man bei meinem Herd die Uhr einstellt. Was hat das aber jetzt mit gutem Webdesign zu tun? Lerne in diesem Artikel kennen, was gutes Webdesign ausmacht.
Gutens Webdesign und deine Küchenuhr

Was hat diese Uhr mit gutem Webdesign zu tun? Zwei mal im Jahr, wenn die Zeitumstellung erfolgt frage ich mich, wie man bei meinem Herd die Uhr einstellt. Intuitiv würde man die Taste mit der Uhr drücken. Leider ist das aber nicht der richtige Weg.

Was hat das aber jetzt mit gutem Webdesign zu tun?

Lerne in diesem Artikel kennen, was gutes Webdesign ausmacht.

[toc]

Um die Frage zu beantworten, möchte ich einmal ein wenig den Begriff Design, bzw. Webdesign beleuchten.

Wenn man eine Umfrage macht, was Menschen unter gutem Webdesign verstehen, dann wird meist über hübsche, ansprechende, ästhetisch und gut gestaltete Webseiten gesprochen.

Das ist sicher ein wichtiger Teil guten Designs, macht aber ein solches alleine sicher nicht aus. Zu einem guten Design gehört viel mehr.

Um das besser zu verstehen, möchte ich mein Lieblingszitat zu diesem Thema aufschreiben.

Design ist nicht, wie es aussieht, Design ist wie es funktioniert.

Steve Jobs

Diesen Satz hat kein geringerer als Steve Jobs gesagt, der in Richtung Design sicher hervorragende positive Beispiele geliefert hat.

Was meint Steve Jobs aber mit dieser Aussage?

Zurück zu unserer Uhr

Das Einstellen diverser Uhren mindestens zweimal im Jahr erinnert mich immer wieder an diesen Satz. Denn dieser Vorgang kann zeitweise schon eine Herausforderung sein.

So toll manche Geräte im Haushalt aussehen, wenn es nicht einfach möglich ist die zugedachte Funktion nutzen zu können, kann man auch nicht von gutem Design sprechen.

Es nützt dir dabei gar nichts, wenn das Gerät ein noch so tolles Aussehen hat und stylisch durch nichts zu überbieten ist. Wenn man es nicht ordentlich bedienen kann, dann verfehlt es seinen Zweck.

Man könnte das Spiel jetzt noch mit anderen Arten von Geräten im Haushalt oder im täglichen Leben spielen. Aber wir wollen ja wissen was gutes Webdesign ausmacht.

Wenden wir uns dazu einmal dem Computer zu. Was zeichnet eine gute Software aus? Richtig sie soll einfach und intuitiv bedienbar sein. Es sollte möglich sein, die wichtigsten Funktionen bedienen zu können, ohne lange in der Anleitung nachlesen zu müssen.

Klar erwartet man sich auch ein modernes Aussehen, gut lesbare Schriften, ansprechende Farben und einiges mehr in dieser Richtung.

Im Vordergrund sollte aber bei einer Software die Funktion stehen. Wie schon erwähnt, sollte diese ohne viel denken zu müssen bedient werden können.

Liefere, was der Nutzer erwartet

Erreichen kann man das zum Beispiel durch eine klare nachvollziehbare Menüstruktur oder durch Icons bzw. Symbole, die klar verständlich sind.

Aber auch klar durchdachte Abläufe die nachvollziehbar oder noch besser vorhersehbar sind.

Ebenfalls wichtig ist es Konventionen einzuhalten. Das Warenkorbsymbol hat sich bereits in den Köpfen der User verankert und man muss nicht nachdenken, was es bedeutet. Der User sucht sogar in seiner Mustersammlung im Kopf nach diesem Symbol, wenn er den Warenkorb sucht.

Ähnlich ist es mit dem Symbol für das Speichern. Viele, vor allem junge Leute kennen heute Disketten gar nicht mehr. Dennoch ist es bis heute das Symbol zum Speichern von Inhalten. Würde man hier versuchen kreativ zu sein und dem User eine Festplatte oder ein Cloud-Symbol für die Speicherfunktion anbieten, würden das wahrscheinlich nur wenige auf Anhieb verstehen. Man wird jedes mal erneut nachdenken müssen, wie man jetzt auf die Speichern Funktion zugreifen kann.

Gutes Design für Webseiten

So wie es mit der Software ist, so ist es auch mit Webseiten.

Naja nicht ganz.

Wenn man bei einer Software etwas nicht versteht, dann versucht man doch einmal mit einer Anleitung zu Ziel zu kommen.

Aber kennst du einen User, der bei einer Website nach einer Anleitung sucht, wenn er nicht weiterkommt? Ich nicht.

Was machen die Besucher der Website stattdessen? Richtig sie verlassen die Seite, wenn es ihnen nicht möglich oder zu mühsam ihr Ziel zu erreichen.

Die Folg daraus. Es kann sich auf der einen Seite negativ auf die finanzielle Situation auswirken, aber auch ein schlechteres Ranking bei Suchmaschinen zu Folge haben.

Jene Menschen, die hier Geduld zeigen und es weiter probieren werden immer weniger. Man muss schon ein sehr grosses Interesse an den Inhalten der Website oder dem Thema haben, wenn man trotz der Schwierigkeiten bleibt und sich weiter abmüht.

Warum ist Einfachheit und Klarheit, wichtig?

Was du über das Hirn des Menschen wissen solltest

Wenn du dich mit dem Design deiner Website auseinander setzt, dann solltest du dich auch ein wenig mit dem Hirn des Menschen beschäftigen.

Unser Hirn ist sehr effizient. Es ist normalerweise einer der größten Energie Verbraucher in unserem Körper. Daher versucht es soweit es geht Energie zu sparen.

Die Folge daraus ist – unser Hirn ist faul.

Es versucht unnötiges Denken zu vermeiden und sich die Energie für wirkliche Notfälle aufzuheben. Zwar lauert heute nicht mehr der legendäre Säbelzahntiger hinter dem Gebüsch auf uns. Aber unser Hirn ist trotzdem noch darauf eingestellt für Notfälle bereit zu sein.

User wollen nicht denken

Mit diesem Wissen in deinem Kopf solltest du an das Design deiner Website herangehen. Du weisst ja – Design bedeutet nicht nur hübsch aussehen, es hat sehr viel mit der Funktion zu tun.

Es sollte das oberste Ziel sein, deine Website so zu gestalten, damit deine Besucher so wenig wie nur möglich denken müssen.

Über dieses Thema wurden schon ganze Bücher geschrieben:

Denken wir einmal an Steve Krug, der in seinem Buch „Don‘t make me think!“ (*) Usability für Webseiten erklärt und den Buchtitel zum Leitsatz für gutes Webdesign macht.

User lesen Webseiten nicht, sie scannen. User versuchen Webseiten nicht zu verstehen, sie wurschteln sich einfach so durch.

User wollen nicht überrascht und nicht zum Denken gezwungen werden.

Erfinde das Rad nicht neu

Auch das W3C, jene Organisation, die sich mit den Webstandards auseinander setzt hat ein interessantes Dokument mit dem Titel „HTML Design Principles“ veröffentlicht. Dort gibt es unter anderem ein Kapitel mit dem Titel „Do not reinvent the wheel“. Wir sollen also das Rad nicht neu erfinden, sondern auf das setzen, was der User kennt und gewohnt ist.

https://www.w3.org/TR/html-design-principles/#do-not-reinvent-the-wheel

Designs müssen nicht immer etwas besonderes und anderes sein. Sie müssen sich nicht immer kreativ von anderen abheben. Mache es deinen Nutzern mit gewohntem und Konventionen einfacher mit deiner Website zu arbeiten.

Irgendwann muss man sich entscheiden, welche Eigenschaften eine gute designte Website erfüllen soll um.

Soll sie innovativ anders sein oder den User unbeschwert unsere Inhalte konsumieren lassen?

Soll sie toll aussehen oder soll sie schnell sein?

Das sind Beispiele von Eigenschaften, die sich nicht immer gut miteinander vereinbaren lassen.

Es sollte daher vor der Erstellung der Website darauf geachtet werden Richtlinien und vor allem Prioritäten festzulegen um im Konfliktfall leichter entscheiden zu können, welchen Weg man gehen soll.

Eines ist aber wichtig. Bei einer gut designten Website muss der Nutzer immer im Mittelpunkt stehen. Daher muss man ihn und sein Verhalten und seine Vorlieben kennen. Wenn wir Produkte und Dienstleistungen anbieten, dann sollten diese unseren Kunden helfen. Genau das gilt auch für unsere Website.

Zufriedene Webseiten Besucher bleiben nicht nur auf der Seiten, sie kommen auch wieder. Sie empfehlen uns und die Seite sogar weiter und sie kaufen auch unsere Produkte und Leistungen.

Usability und deren Prinzipien

Wenn man von Bedienbarkeit spricht, dann kommt einem oft auch das Wort Usability unter. Usability heisst übersetzt Gebrauchstauglichkeit. Ein Wort, mit dem auch nicht jeder was anzufangen weiss. Ein besseres Wort ist vielleicht Benutzerfreundlichkeit.

Usability ist übrigens auch in einer ISO Norm (ISO 9241) festgehalten. Es gibt damit messbare Kriterien für die Umsetzung.

Im folgenden habe ich die einige wichtige Kriterien für eine bessere Usability aufgeführt. Wenn dich dieses Thema näher interessiert, dann findest du weitere Details in meinem Artikel „Was ist Usability“.

Für alle verwendbar – Barrierefreiheit, Accessibility, Zugänglichkeit.

Das ist zwar keine direkte Usability Eigenschaft, aber Voraussetzung dafür dass eine Seite überhaupt bedient werden kann.

Einer der wichtigsten Grundsätze ist, dass eine Website für alle Menschen zugänglich ist. Sprich es sollten alle Menschen die Seite bedienen und die Inhalte konsumieren können. Auch wenn diese irgendwelche körperlichen oder geistigen Einschränkungen haben.

Eine dieser Einschränkungen könnte die Sehkraft sein, also zum Beispiel blinde User oder etwas weniger einschränkend Nutzer, die Farbenblind sind.

Man spricht dabei von Begriffen wie Barrierefreiheit, Accessibility oder Zugänglichkeit.

Barrierefreiheit wird in verschiedene Stufen gekennzeichnet mit A, AA oder AAA.

Es müssen ja nicht unbedingt die drei A sein. Ein A lässt sich aber durch geeignete Massnahmen schon relativ einfach erreichen und hilft den betroffenen schon immens weiter.

Die Seite muss flott sein

Man sagt dazu auch, sie sollte performant sein.

Oft tun es auch hier Kleinigkeiten um dem Ziel mit grossen Schritten näher zu kommen.

Wichtig ist auf jeden Fall einmal den IST Zustand aufzunehmen. Das kann entweder mit den Browser Tools (Network) oder den Pingdom Tools (https://tools.pingdom.com/) erfolgen. Dieses Tool gibt dir übrigens eine Menge Informationen und Tipps um deine Seite auf Grund der Messung zu optimieren.

Genauere Detail zu diesem Tool und den Massnahmen, die du daraus ableiten kannst, werde ich in einem eigenen Blog Artikel veröffentlichen.

Flott und schnell hat aber auch eine andere Seite. Der User muss sein Ziel schnell erreichen können. Klare einfache Wege sind das Ziel.

Zum Beispiel – weg mit dem Formularwahnsinn. Einfach und kurz reciht oftmals aus.

Der User muss unterstützt werden damit er sein Ziel möglichst rasch erreichen kann. Dazu muss man die Ziele der User und deren Verhalten aber kennen.

Erreichen kann man das durch erstellen von Personas und dem durchführen von User Tests. Personas sind übrigens fiktive Personen, die deiner Zielgruppe entsprechen und ein typischen Abbild deiner Wunschkunden sind. Mehr zu Thema Personas und wie du diese erstellst, wird ebenfalls in einem eigenen Artikel behandelt.

Seiten müssen sich anpassen

Auch als responsive Design bekannt, sollte sich die Website dem Gerät der Nutzer anpassen. Eigentlich sollte das heute schon selbstverständlich sein. Die Praxis im Internet zeigt aber leider sehr oft das Gegenteil.

Die Inhalte sollten so optimiert sein, dass sie sich auf dem jeweiligen Gerät optimal konsumieren lassen. Auch die Funktion sollte dem jeweiligen Gerät angepasst werden.

Notfalls müssen auch Inhalte auf verschiedenen Endgeräten ausgeblendet werden.

Aber nicht nur das Gerät in ein Grundlage für die Anpassung. Auch der Kontext des Users ist zu beachten. Eine Seite die man entspannt im Wohnzimmer am Sofa konsumiert, wird anders gestaltet sein müssen, als eine Seite, die man im Auto bedienen sollte. Es macht einen Unterschied ob du im entspannten Zustand, in einer Stresssituation oder unter Zeitdruck bist.

Design sollte vorhersehbar sein

In der Usability wird diese Anforderung auch Erwartungskonformität genannt. Dabei geht es vor allem darum eine Anwendung und ein Design zu erstellen das einheitlich ist und den Erwartungen des Nutzers entspricht.

Erreichen kann man das durch Konventionen. Wie schon weiter oben erwähnt, macht es nicht immer Sinn kreativ zu sein und Neues zu erfinden. Altes bekanntes, was dein Besucher kennt ist in diesem Fall viel besser. Ein Beispiel ist das bekannte Warenkorb Symbol. Aber auch Links, die zumindest unterstrichen sein sollten gehören zu diesen Elementen.

Aber auch eine gewisse Konsistenz in deinem Design hilft deinem User Muster zu erkennen, zu erlernen und dann mit deiner Website besser arbeiten zu können. Das ganze sind natürlich Prozesse, die bei deinem Besucher völlig automatisch ablaufen.

Feedback liefern

Dein User sollte bei Eingaben oder Aktionen ein brauchbares Feedback vom System bekommen. Das kann sowohl im Erfolgsfall als auch im Fall von Fehlern erfolgen.

Ein Beispiel dafür ist das Ablegen von Produkten in den Warenkorb und der Eingabe von Daten in ein Formularfeld. Aber auch einfache Dinge, wie das Anklicken von Elementen auf deiner Seite.

Im Fall von Fehlermeldungen sollten diese zum richtigen Zeitpunkt und an der richtigen Stelle erscheinen.

Beachten solltest du aber, dass das Feedback auf keinen Fall störend wirken sollte.

Bei der Navigation fängt alles an

Gutes Design fängt schon bei einem der ersten Elementen einer Seite an, nämlich der Navigation. Hier kann man in Hinblick auf gutes Webdesign sehr viel gut, aber leider auch vieles falsch machen.

Bei der Navigation gilt besonders der Grundsatz, dass der User diese möglichst einfach bedienen können soll und möglichst wenig nachgedacht werden muss.

Das beginnt bei so einfachen Grundregeln, wie der maximalen Anzahl an Menüpunkten, die 5-7 nicht überschreiten sollte und endet dann bei der sehr oft schwer zu beantwortenden Frage, welche Menüpunkte kommen idealerweise wohin. Die Anzahl der Menüpunkte kommt übrigens von der Millerschen Zahl, die beschreibt, wieviel Einheiten ein Mensch im Kurzzeitgedächtnis halten kann.

Fragen zur Navigation

Wo soll die Navigation platziert werden?

Soll ich eine vertikale oder horizontale Navigation verwenden?

Kommt sie unter, neben oder über das Logo?

Soll sie beim Scrollen fix bleiben oder mit der Seite mitwandern?

Wie viele Ebenen soll mein Menü haben?

All das sind Fragen (und sicher noch einige mehr), die mit Sicherheit auftauchen und die man sich gut überlegen sollte.

Die Navigation ist ein zentraler und wichtiger Bestandteil einer guten Seite, da sie dem Nutzer bei der Orientierung und damit bei der Benutzung unserer Seite hilft.

Schaffe Orientierung

Die Navigation sollte nicht nur die Möglichkeit bieten den User strukturiert durch unsere Inhalte zu führen, sondern auch anzeigen, wo man sich gerade befindet. Sei es zum Beispiel durch eingefärbte Navigationselemente oder durch die sogenannten Breadcrumbs.

Diese Breadcrumbs, sind vergleichbar mit den Brotkrümmel, die man aus Märchen kennt. Sie zeigen dem Besucher deiner Website an, welchen Weg er über möglicherweise mehrere Ebenen er zur aktuellen Seite zurückgelegt hat. Bei guten Breadcrumbs kann man nicht nur den Weg sehen, sondern auch zu einer beliebigen Stelle auf diesen Weg navigieren.

Viele von den Fragen in Bezug auf die Navigation kann man sich selbst beantworten. Andere aber, wie etwa welche Elemente wohin kommen, kann und sollte man nicht so einfach selbst entscheiden. Vor allem Menüs, die noch Untermenüpunkte enthalten und damit eine umfangreichere Navigation darstellen sind hier das Problem.

Dein User sollte entscheiden, was er braucht

Hier hängt sehr viel von deinen Besuchern ab. Du solltest sie gut kennen und dann die Entscheidung auf Grund ihres Verhaltens und ihrer Denkweise treffen. Hier hilft übrigens die schon weiter oben erwähnte Erstellung einer oder mehrerer Personas weiter.

Es gibt dazu einige gute Methoden, die man in Tests oder Befragungen mit seinem Zielpublikum leicht und schnell durchführen kann. Eine davon ist zum Beispiel die Card Sorting Methode.

Bedenke auch, dass verschiedene Menschen verschiedene Zugänge haben um zum Ziel zu kommen.

Vergleichen wir das zum Beispiel mit einem Baumarkt.

Da gibt es jene, die den richtigen Gang mit dem gewünschten Produkten suchen, in dem sie die grossen Schilder mit der Aufschrift der Bereiche ansehen. Also z.B. Werkzeug, Sanitär, Gartengeräte, usw.. Das entspricht unserem bekannten Menü.

Dann gibt es aber jene, die beim Eingang einmal den Orientierungsplan studieren um zu sehen, wo sich was befindet. Um dann gezielt zu diesem Bereich zu gehen. Das ist bei einer Website vergleichbar mit der Sitemap. Diese zeigt auch bei einer Website einmal in einer strukturierten Übersicht alle Bereiche der Website an.

Und zuletzt gibt es dann die Besucher im Baumarkt, die zur Info gehen und fragen, wo sich das gewünschte Produkt befindet. Diese benutzen auf unserer Website das Suchfeld um zu den gewünschten Inhalten zu kommen.

Du siehst also die Navigation ist ein weites Gebiet, wo es noch viel zu erzählen gibt. Ich möchte in diesem Artikel jetzt nicht tiefer in das Thema einsteigen, denn es soll ja allgemein um gutes Webdesign gehen.

Daher gehe ich in einem gesonderten Beitrag noch näher auf das Thema Website Navigation ein.

Muss man jeden Trend mitmachen?

Das sich die Erwartungen der Benutzer von Webseiten ändern, sieht man sehr gut am Thema scrollen. Galt vor einigen Jahren noch die Devise, die Inhalte möglichst auf einzelne Seiten aufzuteilen und nicht zu viel Inhalt auf eine Seite zu packen, so hat sich das heute doch stark geändert.

Wie lang darf eine Website sein?

Gerade durch das immer mehr werdende mobile Surfen, sind wir es gewohnt scrollen zu müssen. Außerdem ist am Smartphone das Scrollen viel einfacher als das herum klicken zwischen verschiedenen Seiten.

Auch die sozialen Medien haben ihren Teil zu dieser neuen Erwartung beigetragen, da wir es dort gewohnt sind auf einer endlos langen Seite die Inhalte zu konsumieren.

Auf das „normale“ Webdesign hat das Auswirkungen in Form von sogenannten One Pager Seiten. Also Webseiten, die nur aus einer langen Seite bestehen und auf der entweder durchgescrollt werden kann oder die Bereiche über eine Navigation angesprungen werden können.

Doch diese neue Art der Seitengestaltung kann auch seine Schattenseiten haben. Die Ladezeit dieser einen Seite kann sich dadurch wesentlich erhöhen. Daher muss beachtet werden, dass wichtige Inhalte auch am Anfang geladen werden.

Das was weiter unten kommt, kann durch den Einsatz von entsprechenden Techniken sogar erst dann geladen werden, wenn der Besucher der Seite in die Nähe des entsprechenden Bereiches kommt.

Bei den langen Seiten hat sich leider auch das dynamische herein bewegen von Inhalten etabliert. Oft wird dieser Effekt als Parallax Scrolling bezeichnet, was nicht ganz korrekt ist.

Der Begriff Parallax Scrolling benutzt zwar ähnliche Techniken, versucht aber durch unterschiedliche Bewegungsgeschwindigkeiten beim Scrollen einen 3D Effekt hervorzurufen.

Diesen Effekt erreicht man durch das einfache hereinfliegen lassen von Elementen mit Sicherheit nicht. So nett diese Effekte auch am Anfang waren, so nervend können diese mittlerweile sein. Diese Effekte sind heute keine Besonderheit mehr und werden statt bestaunt oftmals eher als lästig und unangenehm empfunden.

Überlege also wirklich, ob du jeden Trend mitmachen musst.

One Pager haben auch Nachteile

OnePager und vielleicht der Einsatz von Motion Scrolling können für den einen oder andern Fall schon sehr sinnvoll sein. Denke zum Beispiel an das Story Telling. Das lässt sich dadurch sehr gut darstellen.

OnePager und das Nachladen von Inhalten, können übrigens auch eine negative Auswirkung auf die SEO (Suchmaschinenoptimierung) haben. Für Suchmaschinen kann es sein, dass diese erst später erscheinenden Elemente gar nicht vorhanden sind.

Aber auch die Schwierigkeit ein Focus Keyword für deine lange Seite zu finden ist eine der Herausforderungen. Dazu kommt noch, dass die extrem lange Seite und die damit größere Anzahl an Inhalten negative Einflüsse auf die Performance hat. Statt mehrerer Einträge in der Suchmaschine bei mehreren Seiten, hast du jetzt nur einen Eintrag für die eine Seite.

Bei langen Seiten solltest du auch bestimmte Design Elemente, wie etwa den Header (Kopfbereiche) oder Footer (Fussbereich) einer Seite neu überdenken.

Der Header rückt bei langen Seiten und längerem scrollen immer mehr in unerreichbare Ferne und der Footer erscheint, bei Seiten die immer wieder nachladen möglicherweise nie.

Das sind keine unlösbaren Probleme, nur sie müssen bedacht werden.

Und was ist mit dem Aussehen?

Am Schluss will ich jetzt doch noch auf das Aussehen deiner Website eingehen.

Vielleicht hast du ja jetzt den Eindruck gewonnen, dass es völlig egal ist, wie deine Seite aussieht und dass es nur auf die Funktion ankommt.

Sollten dieser Eindruck und diese Gedanken bei dir entstanden sein, dann will ich speziell für dich noch einige Worte zu diesem Thema sagen.

Natürlich ist das Aussehen nicht egal.

Der erste Eindruck deiner Seite wird sicher durch den optischen Eindruck erzeugt. Nur auf einer Seite, die für deinen Besucher ästhetisch anzusehen ist wird er sich wohlfühlen. Nur dort wird dein Nutzer auch länger bleiben und die Inhalte konsumieren wollen.

Das Layout und damit das Aussehen ist ein wichtiger Bestandteil von gutem Design. Farben die nicht zusammenpassen, Schriften, die niemand lesen kann oder mit Inhalten überladene Seiten führen sicher nicht dazu, dass man gerne und freiwillig bleibt.

Die Gestaltungsgesetze aus der Gestaltungspsychologie sollten natürlich Teil deines Designs sein.

Aussehen darf aber nicht zur Selbstverwirklichung dienen sondern sollte auch einen Mehrwert für deine Website Besucher bringen.

Das Aussehen und die Funktion deiner Website müssen Hand in Hand gehen und sie müssen eine Einheit bilden.

Wenn du das erreichst, dann hast du ein gutes Webdesign. Und damit eine Seite, die Besucher anzieht, sie hält, zum wieder besuchen motiviert und auch im weiteren Erfolg für dich einbringt.

(*) Bei diesem Link handelt es sich im einen Affiliate Link. Das bedeutet ich bekomme eine kleine Provision, wenn du über den Link kaufst. Für dich kostet das Produkt dadurch nicht mehr.

Picture of Andreas Stocker

Andreas Stocker

Andreas hat 25 Jahre Webagentur Erfahrung und gibt jetzt sein Wissen weiter, wie man selbst einen erfolgreichen Webauftritt umsetzt und betreut.

Schreibe einen Kommentar