Wenn Du Dich aktiv damit auseinandersetzt eine neue Webseite aufzubauen, kommst Du an dem Thema Usability, also Benutzerfreundlichkeit, nicht vorbei. Hierbei geht es nicht nur um ein ansprechendes und ästhetisches Erscheinungsbild, sondern auch daran Deine Webseiten Besucher an die Hand zu nehmen und sie sicher an ihr Ziel zu lotsen.
In diesem Gastartikel möchte ich Dir einige Tipps mit auf den Web geben, wie Du mit UI/UX-Design einen bleibenden, benutzerfreundlichen und ansprechenden Eindruck bei Deiner Zielgruppe hinterlässt.
Um zu lernen, wie man die Webseitenbesucher zum Ziel führt, musst Du erst verstehen, was UI-Design und UX-Design eigentlich ist. Deswegen starten wir erst einmal mit der Begriffsdefinition:
Ein User Interface, also eine Benutzeroberfläche, ist das Erscheinungsbild einer Webseite, einer App oder auch eines Shops. Im User Interface Design gestalten wir also die Benutzeroberfläche – also das was Du als Besucher und Benutzer einer Webseite siehst. Hierzu gehört neben dem Layout der Webseite auch die Gestaltung von Buttons, Formularen und allem, was Du nutzt um in irgendeiner Form mit der Webseite zu interagieren.
User Experience Design (UXD oder UX) im Webdesign ist der Prozess zur Verbesserung der Benutzererfahrung durch Steigerung der Benutzerfreundlichkeit, Zugänglichkeit und Effizienz der Benutzerinteraktion mit Webseiten. Will heißen: durch die aktive Gestaltung der Nutzererfahrung auf einer Webseite schaffst Du es den Nutzer tatsächlich an die Hand zu nehmen und an sein Ziel zu führen. Das kann eine eine Kontaktaufnahme, oder auch ein Kauf im Onlineshop sein.
Ein ganz einfaches Beispiel:
Angenommen Du besuchst einen Webshop für Kleidung. Du findest eine Hose toll und willst sie kaufen. Du findest die Hose in der Artikelübersicht.
Und schon hier kannst Du erkennen, ob sich jemand mit dem Benutzererlebnis auseinandergesetzt hat oder nicht: Wenn Du die Hose direkt hier aus der Übersicht in passender Größe in den Warenkorb legen kannst und dann auch schon einen Vorschlag mit passenden Oberteilen und Schuhen bekommst, ist die User Experience hier definitiv schon durchdacht. Denn:
- Du musst nicht den Weg über die Produktseite gehen, um den Artikel einzukaufen
- Dir werden schon direkt beim Ablegen in den Warenkorb passende Artikel vorgeschlagen, die Du nicht noch aufwändig suchen musst. Das ist aus unserer Sicht besonders beim Kauf von Kleidung sehr angenehm.
Nachdem Du jetzt eine genauere Vorstellung davon hast, worum es beim UI/UX-Design geht, können wir auch direkt zu den Tipps übergehen.
Kennst Du die Geschichte vom Zauberer von Oz? Durch einen Wirbelsturm wird die kleine Dorothy nach Oz befördert. Natürlich möchte sie wieder nach Hause. Um den Weg nach Hause zu finden, rät ihr die gute Hexe, dass sie dem gelben Ziegelsteinweg in die Smaragdstadt zu folgen, um dort den Zauberer von Oz um Hilfe zu bitten.
Stell Dir Deine Webseite bitte als diesen gelben Ziegelsteinweg vor. Lasse Deine Besucher von Stein zu Stein, also von Element zu Element, von Section zu Section und von Seite zu Seite gehen. Nutzer hierfür die Informationen, die Du zu Deinen Zielgruppen und Personas und über ihre Bedürfnisse hast, um sie zu lotsen.
Vermeide es eine zu tiefe Seitenstruktur zu nutzen, in der sich die Nutzer „verlaufen“. Die goldene Regel lautet: Maximal drei Klicks zum Ziel.
Auf einer Seite ist der Button pink, auf der nächsten Türkis und auf der dritten Seite ist er Lila. Das verwirrt den Webseitenbesucher unnötig. Achte deswegen auf ein konsistentes und einheitliches Design Deiner Webdesign-Elemente. Nutze einheitliche, leicht nutzbare Elemente und maches es dem Besucher so leicht sich zurechtzufinden, sich auf den Inhalt zu konzentrieren und die Webseite einfach nutzen zu können. Lass ihn nicht auf jeder Seite neu lernen müssen, wie sie funktioniert.
Gib Deiner Webseite eine starke visuelle Richtung, damit der Nutzer versteht, dass er scrollen muss, um weitere Informationen zu erhalten. Bedenke dabei, dass die Aufmerksamkeit Deiner Website Besucher abnimmt, je weiter sie herunterscrollen müssen. Platziere die wichtigsten Informationen also im oberen Bereich „Before the fold“ – also dort, wo sie noch nicht gescrollt haben.
Aus diesem Grunde sollten zusätzliche, relevante Informationen immer erst „below the fold“ – also nach dem Scrollen auffindbar sein.
Zwar sind Onepager eine tolle Sache, weil Scrollen schneller geht als Klicken, aber mach die Seiten trotzdem nicht zu lang. Denn je tiefer ein Besucher scrollen muss, desto weniger Spaß hat er daran.
Das Nutzen von guten, nicht zu grellen Farben und starken Kontrasten ist nicht nur gut, um farbenblinde Nutzer zu bedienen. Auch Menschen ohne Beeinträchtigung schätzen es ihre Augen am Bildschirm zu schonen. Nach einem Artikel von „eyebizz“ sind immerhin 180 Millionen Menschen farbenblind und können rot und grün nicht voneinander unterscheiden. Deswegen ist es auch im Webdesign wichtig eine entsprechende Farbwahl zu treffen. Wenn Du eine Webseite gestalten lässt, achte darauf, dass die Kontraste so gut sind, dass auch Farbenblinde sie gut lesen können. Um das zu testen, solltest Du das Webdesign einmal in Graustufen umwandeln lassen und schauen, ob das Design immer noch so gut funktioniert, wie in bunt.
Für Buttons solltest Du eine Farbe reservieren. Kein anderes Element sollte in dieser Farbe erscheinen – so lernt der Besucher unterbewusst, dass alles in der reservierten Farbe klickbar ist.
Um Deine Webseitenbesucher richtig glücklich zu machen, musst Du sicherstellen, dass sie ohne Umwege das erreichen, was sie auf Deiner Webseite vorhaben. Das kann das Erörtern von Öffnungszeiten sein, Recherche nach Informationen oder Ansprechpartnern, das Ausfüllen eines Kontakt- oder Anfrageformulars oder das Kaufen von Produkten und Dienstleistungen. Mach diesen Prozess so einfach und zuvorkommend wie nur möglich.
Es muss sich leicht und schnell anfühlen, sich auf Deiner Webseite zu bewegen. Aus diesem Grunde ist natürlich auch die Ladezeit ein Thema! Achte auf geringe Datenmengen bei Bildern und lasse sie nachladen, damit der Besucher schon mal etwas sehen kann, bevor alles da ist.
Die Wahrnehmung der Webseiten Geschwindigkeit splittet sich auf in Ladezeit, Wartezeit und die Geschmeidigkeit von Animationen und Videos. Ruckeln sie, ist das schon schlecht.
Wenn eine Webseite mehrere Sekunden braucht, um vollständig zu laden, springt der Besucher in der Regel ab, bevor alles da ist.
Wenn man Deine Webseite nur mit dem kleinen Finger bedienen kann, sind die Elemente dort auf jeden Fall zu klein! Achte darauf, dass dem nicht so ist und die Webseite auch bequem nutzbar ist. Die kleinste Größe für ein Element sollte nicht unter 1 cm x 1cm liegen.
Bedenke auch, dass die Seiten und der untere Teil eines mobilen Gerätes mit dem Daumen bedient werden. Auch das sollte problemlos möglich sein. Überhaupt solltest Du darauf achten, dass Deine Webseite auch mit nur einer Hand am Handy bedient werden kann.
Auch der am PC so beliebte Doppelklick, sollte für die Mobilversion zu einem Tippen verwandelt werden.
…denn über sie bewegt sich der Nutzer über Deine Webseite. Achte also darauf gängige Begriffe für die einzelnen Navigationspunkte zu wählen und mach kein Kunstprojekt aus ihr. Wie eine Navigation sowohl am PC, als auch mobil auszusehen hat, ist heutzutage gelernt und wird auch so erwartet – deswegen empfehlen wir Dir hier keine Experimente zu machen. Auch sollte die Navigation auf jeder Seite Deiner Webseite gleich aussehen, um den Besucher nicht zu verwirren.
Achte besonders bei langen Webseiten darauf, dass die Navigation immer ganz einfach zu erreichen ist. Wenn ich bis ganz unten gescrollt habe, will ich nicht erst wieder ganz nach oben scrollen um weiterzukommen.
Auch wenn ein Hamburger-Menü am PC super-cool aussieht, so ist es einfach nicht benutzerfreundlich. Es ist der Mobilversion vorbehalten. Hier müssen wir einfach Platz sparen. Das ist am Desktop-Rechner nicht nötig und würde für den Besucher einen Klick mehr zum Ziel bedeuten.
Wenn Deine Webseite mehr als 3-4 Ebenen in der Navigation hat, sollte sie neu strukturiert werden.
Ich weiß ja nicht, wie es Dir mit Formularen geht, aber ich fülle sie grundsätzlich nicht gerne aus. Es ist Arbeit. Am Schlimmsten finde ich es, wenn Beispielsweise Straße und Hausnummer getrennt ausgefüllt werden müssen. Horror!
Es ist wichtig sich ein paar Gedanken über ein eingesetztes Formular zu machen, weil uns hier – kurz vor der Conversion – auch noch der Lead flöten gehen kann. Hier ist ein bequemes Ausfüllen super wichtig.
Achte darauf, dass die Felder untereinander stehen. So machst Du es dem Besucher möglich schnell zu scannen, was er da ausfüllen muss.
Achte außerdem darauf, dass Fehlermeldungen da stehen, wo sie passieren. Sonst muss der Besucher erstmal lange suchen, bis er das Problem findet. Wenn er gerade zwischen 2 Terminen ausfüllt, kann es sein, dass es ihm dann einfach zu lange dauert. Generell sollten Fehlermeldungen hilfreich, benutzerfreundlich, konsistent und einfach zu verstehen sein.
Bitte denke hier in Lösungen und nicht in Problemen. Sag ihm, was er tun soll!
Ähnlich wie bei Buttons, sollten Links ebenfalls eindeutig erkennbar sein! Darüber hinaus ist es hilfreich, wenn der Linktext bereits erzählt, wohin der Link führt. Nutze unterschiedliche Farben für einen Link, einen besuchten Link und für das Drüberfahren (Hover) über einen Link.
Kleiner Tipp am Rande: Die Leute denken fast immer, dass Bilder klickbar sind. Nutze das für Dich!
Ein zwei Mal haben wir sie schon erwähnt. Buttons müssen immer klickbar aussehen und genug Platz bieten, damit sie es auch sind – besonders mobil. Das Thema Kontrast ist hier nochmal besonders wichtig. Die Schrift auf dem Button muss sich deutlich von der Hintergrundfarbe abheben.
Á Propos Hintergrundfarbe: Rot ist eine Warnfarbe. Ein roter Button animiert nicht wirklich zum Klicken, da er online zumeist für Löschvorgänge genutzt wird. Eine bessere Wahl wäre hier Orange, da diese Farbe Zuversicht, Energie und Optimismus vermittelt. Genau wie rot zieht Orange Aufmerksamkeit auf sich, was die Farbe für Buttons nahezu ideal macht. Allerdings macht dies nur Sinn, wenn diese Farbe auch zum Corporate Design des Unternehmens passt.
Die Lesbarkeit der bereitgestellten Inhalte ist enorm wichtig. Doch hierbei geht es nicht nur, um eine lesbare Schriftgröße.
Wie eingangs schon erwähnt, sollten die wichtigsten Informationen ganz oben stehen. Die 1. Headline einer Webseite muss auf den Punkt aussagen, was den Besucher hier erwartet. Das beistehende Bild sollte diese unterstützen.
Beim Lesen und Betrachten einer Webseite starten die Besucher in Europa oben links und scannen zunächst die ersten Worte. Auch bei längeren Texten wird der Besucher erst scannen wollen, ob das Thema wirklich relevant ist. Arbeite hier mit Überschriften und Zwischenüberschriften.
Schreibe Überschriften nicht in Versalien, also Großbuchstaben. Sie sind einfach schwieriger zu lesen.
Beim Thema Lesbarkeit geht es nicht nur darum einen Text einfach lesbar zu machen, sondern dafür zu sorgen, dass er so gut aufbereitet ist, dass der Besucher ihn lesen möchte.
Dazu gehört eine angemessene Zeilenlänge ebenso wie genügend Abstand zwischen den einzelnen Zeilen.
Ein guter Wert für die Zeilenbreite am PC sind etwa 650px. Bei der Zeilenhöhe schwanken wir oft zwischen 1.3 em und 1.5 em. Da kommt es ganz auf den Schrifttyp an.
Achte außerdem darauf nicht zu lange Textblöcke zu schreiben. Ein Zwischen-Abstand kann die Lesbarkeit deutlich vereinfachen.
Auf mobilen Endgeräten empfiehlt es sich die Schrift etwas größer anzuzeigen. Achte auch hierbei unbedingt auf Deine Zielgruppe. Ältere Menschen bevorzugen größere Schriften. Besonders auf mobilen Geräten.
Hier solltest Du außerdem darauf achten keine condensed-Schriften zu nutzen.
Du merkst zu einer guten und erfolgreichen Webseite gehört deutlich mehr als ein bisschen Grafik und Design. Du musst Dich um Deine Besucher kümmern. Nimm sie an der Hand und hilf ihnen schnell und einfach an ihr Ziel zu kommen. Mach es ihnen so leicht wie möglich Deine Inhalte zu konsumieren und zu kaufen.
Kleiner Tipp zum Schluss: Beobachte Dich einfach mal selbst, wenn Du auf Webseiten unterwegs bist. Wenn Du eine Webseite besonders gut findest: Warum ist das so? Schreib es Dir auf – so wirst Du immer sensibler für alles was User Interface Design und User Experience Design ausmacht und kannst Deine Webseite auch immer weiter verbessern.
Denn eines ist sicher: Mit der Optimierung der eigenen Webseite ist man niemals fertig. Man bekommt immer wieder Feedback von außen, was noch besser werden kann. So auch diesen Artikel hier.
Ich hoffe, dass ich Dir damit ein Stück weiter zu Deiner erfolgreichen Webseite verhelfen konnte.
Hast Du vielleicht auch noch den einen oder anderen Tipp zum Thema UI/UX-Design? Dann hinterlasse ihn hier gerne als Kommentar!
Besuche auch gerne mal das digitallotsen-Blog, um mehr rund um die Themen Webdesign und Content Marketing zu erfahren.
Viel Erfolg beim Verbessern Deiner Webseite!
Deine Kim
Kim Nadine Adamek
Mein Team und ich leben für die Themen Content Marketing, Webdesign, Branding, digitale Markenerlebnisse, Social Media Marketing und Design.
Wir begleiten Unternehmen als Partner beim Aufbau und der Entwicklung einer starken und lebendigen digitalen Marke, der digitalen Marken-Kommunikation und entwickeln Strategien und Konzepte zur Sichtbarkeit einer Marke.
Als Gründerin und Inhaberin der digitallotsen kümmere ich mich in Deutschland, Österreich und in der Schweiz um wirksame Webdesigns und Content Marketing Konzepte.