Menu

Benutzer­freundliches Webdesign: Websites werden zum Erlebnis

Mehr als einfach nur gut ausschauen.

Das gilt insbesondere für Websites, die ihre Besucher nicht nur mit gutem Design, sondern auch mit einer einwandfreien Usability und User Experience beeindrucken wollen. Schlussendlich kann eine Website noch so gut ausschauen, wenn sich der Besucher nicht zurechtfindet oder die Website nicht für Smartphones optimiert ist, wird dieser die Website höchstwahrscheinlich wieder verlassen. Wir zeigen, worauf es bei benutzerfreundlichem Webdesign ankommt.

Warum benutzerfreundliches Webdesign wichtig ist

Wenn User eine Website besuchen, dann steckt meistens eine bestimmte Intention dahinter. Sie wollen sich beispielsweise über das Unternehmen und deren Dienstleistungen informieren oder einen Kauf tätigen. Um ein derartiges Ziel zu erreichen braucht es eine Website, die auf die Bedürfnisse des Users eingeht und ihn bestmöglich durch die Website navigiert. Und genau dafür gibt es zahlreiche Tipps und Tricks. Hier findet Ihr die wichtigsten Punkte, die die Userfreundlichkeit einer Website verbessern.

Eine einfache Navigation

Jede Webseite sollte über eine möglichst übersichtliche Navigation verfügen. Das heißt, dass die Navigation einfach und verständlich aufgebaut ist. Der Besucher sollte sich anhand der Navigation einen schnellen Überblick verschaffen können und problemlos von A nach B navigieren können.

Wichtig ist, dass die Navigation über alle Unterseiten der Webseite stets gleich bleibt und die Startseite jederzeit wieder erreicht werden kann, falls sich der User verirrt. An dieser Stelle sei erwähnt, dass die Verwendung von Breadcrumbs sehr hilfreich ist. Denn so wissen die Besucher zu jedem Zeitpunkt, wo sie sich auf der Webseite befinden.

Zudem sollten die Begriffe in der Navigation möglichst präzise und aussagekräftig sein. Auch eine Suchleiste in der Navigation hat sich bewährt. Das gilt aber nicht nur für Online-Shops sondern auch für andere Webseiten, da User oftmals nach einem bestimmten Produkt oder Begriff suchen wollen, anstatt sich durch die Webseite zu klicken.

Bei der Navigation denken die meisten nur an den Header, den obersten Bereich einer Website. Aber auch der Footer einer Website kann als Teil der Navigation gesehen werden und sollte auf den Unterseiten ebenfalls ein einheitliches Design aufweisen. Hier befinden sich üblicherweise Verweise bezüglich Datenschutz, Impressum, Kontakt und weiterführende Links zu den FAQs oder der “Über uns”-Rubrik. Daher gilt auch für den Footer: einfach und übersichtlich gestalten.

Die Konsistenz

Das Design sollte einheitlich und übersichtlich sein. Das bedeutet, dass das Farbschema, die Schriftarten, die Hintergründe und das Layout über die ganze Webseite hinweg konsistent bleiben sollten. Worauf man außerdem achten sollte, ist die Gestaltung von Buttons oder Links. Links sollten sich vom normalen Text abheben und auf jeder Seite gleich aussehen, damit der User die Links sofort als solche erkennt. Das gleiche gilt für Buttons. Die Buttons sollten vom Design her möglichst gleich bleiben und nicht auf jeder Unterseite komplett anders gestaltet werden. So sollte man sich beispielsweise aus der Auswahl im folgendem Bild für ein Design entscheiden, anstatt zwischen verschiedenen Varianten zu wechseln.

Unterschiedlich_gestaltene_Buttons

Auch bei Icons sollte nicht nur auf die Konsistenz geachtet werden, sondern es sollten am besten Icons verwendet werden, die etabliert und bekannt sind. Als Symbol für eine Telefonnummer sollte man daher bei einem Telefon oder Telefonhörer bleiben, anstatt etwas ausgefallenes zu probieren wie etwa ein Smartphone Icon – Denn das könnte den User verwirren. Das soll natürlich nicht heißen, dass weniger populäre Icons nicht auch funktionieren können. Dennoch ist Vorsicht geboten. Und damit schließen wir auch schon beim nächsten Thema an.

Webdesign-Konventionen

Das Webdesign hat schon viele Trends hinter sich und so haben sich auch im Laufe der Jahre bestimmte Konventionen entwickelt, die für viele User selbstverständlich sind. Ein benutzerfreundliches Webdesign zeichnet sich dadurch aus, dass man sich an diese Konventionen hält und nicht versucht jede einzelne neu zu überdenken und seinen eigenen Weg zu gehen. Denn damit wird man seine Besucher höchstwahrscheinlich nur verwirren. Hier einige Beispiele für etablierte Konventionen im Webdesign:

  • Die Hauptnavigation einer Seite befindet sich oben oder links
  • Ein Logo wird üblicherweise links oben oder mittig der Website platziert
  • Das Logo ist anklickbar und führt zurück zur Startseite
  • Links verändern die Farbe oder das Aussehen, wenn man den Mauszeiger darüber bewegt oder sind unterstrichen
  • Die interne Suchfunktion befindet sich meistens oben
  • Das Icon oder der Text für den Warenkorb befinden sich rechts oben

Die meisten Seiten halten sich an derartige Konventionen. Je nach Bereich können dabei verschiedene Aspekte in den Fokus gerückt werden. So stehen etwa bei Ebay oder Amazon die Suchfunktion im Mittelpunkt, während bei Unternehmenswebseiten beispielsweise das Logo oder Kategorien prominenter dargestellt werden können.

Die Zugänglichkeit einer Website

Immer mehr Menschen benutzen ihr Smartphone, um damit im Web zu surfen. Da der Bildschirm um einiges kleiner ist, als am Desktop, gilt es die eigene Website in Hinsicht auf die Handynutzung zu optimieren. Mit dem responsive Design ist es möglich, dass sich Inhalte und deren Formate automatisch an die Größe des Gerätes, welches der User nutzt, anpasst. Daher ist eine der wichtigsten Regel für benutzerfreundliches Webdesign die Verwendung vom responsive Design.

Im Zusammenhang mit der Zugänglichkeit steht zudem die Barrierefreiheit. Um allen Usern die Bedienbarkeit der Website zu erleichtern, sollten zusätzlich folgende Punkte beachtet werden:

  • Personen mit einer Sehbehinderung sollten den Text vergrößern können
  • Achte auf einen hohen Kontrast zwischen Hintergrund und Text
  • Der Content sollte so gestaltet sein, dass er über die Tastatur zu navigieren ist
  • Inhalte und Formulare sollten von einem Screenreader interpretiert werden können
  • Videos sollten über Untertitel verfügen

Aber auch kleinere Veränderungen wie etwa das Verwenden von Alt-Titeln, Untertiteln oder einem strukturierten und übersichtlichen Aufbau der Website wirken sich positiv auf die Zugänglichkeit aus. Genauso wie kurze Ladezeiten, einem essenziellen Faktor für userfreundliches Webdesign.

Kurze Ladezeiten

Die Pagespeed ist vielleicht nicht das Erste woran man denkt, wenn es um Webdesign geht. Dennoch ist es einer der wichtigsten Faktoren, denn User wollen ihre Informationen schnell und unkompliziert online suchen und finden. Benutzerfreundliches Webdesign bedeutet den User nicht lange warten zu lassen. Wenn das passiert stehen die Chancen nämlich hoch, dass der Besucher den Ladevorgang abbricht und die Seite wieder verlässt. Das belegt auch eine Studie, die von Google durchgeführt wurde.

Zusammenhang_Ladezeit_Absprungrate

Generell sollten leere, weiße Seiten während der Ladezeit vermieden werden. Wenn das Laden aber tatsächlich etwas länger dauern sollte, wären folgende Optionen vorteilhaft:

  • zumindest ein Teil des Contents wird bereits angezeigt und der Rest wird nachgeladen
  • oder visuelles Feedback wie eine Ladeanzeige wird benutzt

Eine sehr häufige Quelle für langsame Ladezeiten sind große Bilder, die beispielsweise für den Hintergrund benutzt werden. Durch das Optimieren solcher Bilder kann die Ladezeit oft merklich verbessert werden.

Die beiden Tools PageSpeed Insights und Think With Google zeigen Ursachen für den langsamen Pagespeed auf und geben zudem Tipps wie man diese beheben kann.

Call-To-Action für benutzerfreundliches Webdesign

Ein weiterer Punkt ist die Gestaltung des Call-To-Actions. Der CTA ist eines der wichtigsten Elemente auf jeder Website. Er soll die Nutzer dazu animieren eine bestimmte Aktion wie einen Klick oder eine Anmeldung durchzuführen. Ein guter CTA erfüllt dabei folgende Aspekte:

  • Call-To-Action above the fold – Der CTA liegt im oberen, sichtbaren Bereich der Website
  • Wenn es mehrere CTAs gibt, sollte der relevanteste auch am auffälligsten sein
  • Der Button bzw. der CTA beschreibt, was er macht
  • Zugleich ist der Text des Buttons kurz und prägnant

Die richtige Farbwahl

Zu guter Letzt noch ein paar Sätze zur Farbwahl. In den vorherigen Kategorien ist das Thema ja bereits angeschnitten worden. So zeichnen sich barrierefreie Seiten etwa durch hohe Kontraste zwischen Text und Hintergrund aus. Dieses Regel gilt aber nicht nur für barrierefreie Webseiten, sondern für alle Webseiten. Vor allem wenn Text in Bildern benutzt wird, sollte er einfach lesbar sein. Leider stößt man aber immer wieder auf Webseiten, die nicht darauf achten. Gerade bei Slidern werden oftmals die Bilder ohne großes Überlegen ausgetauscht, wodurch es zu unleserlichen Text- und Bildkombinationen kommt. Wie man sich bereits denken kann, ist das kein benutzerfreundliches Webdesign und sollte tunlichst vermieden werden.

Der CTA wurde ebenfalls schon erwähnt. Er sollte auffällig gestaltet werden, wobei auch hier bei der Gestaltung die Farbwahl mitspielt. Oftmals wird dabei die Farbe des Logos aufgegriffen.

Ein weiterer interessanter Punkt ist auch der Zusammenhang zwischen den verwendeten Farben und dem Tätigkeitsfelds des Unternehmens. Denn je nach dem in welchem Bereich ein Unternehmen tätig ist und welche Emotionen oder Assoziationen geweckt werden sollen, werden verschiedene Farben verwendet. Auch hier gilt, wie so oft im Design: Ausnahmen bestätigen die Regel.

  • Grün: Viele Webseiten zum Thema Nachhaltigkeit, Umwelt, Natur oder Nahrungsmittel setzen auf diese Farbe.

 

  • Rot: Rot steht für Liebe und Gefahr. Man sagt auch, dass die Farbe den Blutdruck steigert und Emotionen weckt, weshalb oftmals der CTA-Button rot ist.

 

  • Blau: Die Standardfarbe im Webdesign, denn sie steht für Stabilität, Ruhe und wird meist für Businessunternehmen, im Medizinbereich oder wenn es um das Wetter oder Wasser-Themen geht verwendet.

 

 

  • Gelb/Orange: Die Farben stehen für Aktivität, Freude und zieht die Aufmerksamkeit schnell auf sich. Sie ist besonders beliebt bei Baumärkten, Fast Food Ketten aber auch für Lieferdienste oder Logistiker. Zudem ist Orange genauso wie ot eine beliebte Farbe für CTAs.

 

 

Fazit für benutzerfreundliches Webdesign

Userfreundliches Webdesign zeichnet sich dadurch aus, dass die Bedürfnisse des Users im Mittelpunkt stehen. Das bedeutet etwa, dass die Navigation für den User intuitiv ist, hohe Ladezeiten vermieden werden und gewisse Webkonventionen eingehalten werden. Die angeführten Punkte stellen dabei aber nur eine Auswahl von Regeln dar, die positiv zu einer benutzerfreundlichen Website beitragen.

Als Agentur mit langjähriger Erfahrung helfen wir Ihnen gerne dabei, das richtige Design für Ihr Unternehmen zu gestalten und eine passende Online Strategie zu entwickeln. Kontaktieren Sie uns einfach!

© artindustrial & partner GmbH. Alle Rechte vorbehalten. | Impressum | AGB | Datenschutzerklärung | Kontakt | Themen