Benutzerfreundliche Websites: User, bleib bei mir!

Erst das Handling, dann die Optik: Viele Websites missachten diese Regel und verscheuchen ihre Besucher höchst effektiv. Die folgenden Usability-Tipps helfen euch, es besser zu machen.

Das Wort hat zunächst der Erklärbär:

➧ Usability ist der englische Begriff für “Gebrauchstauglichkeit” oder “Benutzerfreundlichkeit”.

➧ Der Begriff Website bezeichnet die Gesamtheit aller Seiten eines einzelnen Online-Auftritts. Eine einzelne Unterseite dagegen bezeichnet man als Webseite (engl. Webpage).

➧ Der Begriff Homepage bezeichnet die Startseite einer Website. Und nicht – wie oft fälschlicherweise angenommen – die gesamte Website.

Website-Gestaltung: Schick allein bringt nix

Benutzer-un-freundliche Websites gibt es viele. Manche davon nenne ich liebevoll “Flash-Monster”:

Es lädt erstmal 30 Sekunden bis überhaupt irgendetwas zu sehen ist. Dann erschlägt eine Bilderflut den User: Hier poppt etwas auf, da fliegt etwas durchs Bild, die Site schreit einen visuell permanent an. Jeden Moment scheinen die opulenten Bilder- und Farbmassen aus dem Monitor zu kippen.

Alles bunt, hübsch und schnieke – aber oftmals immens frustrierend:

"Um was geht es hier eigentlich und was kann ich hier tun?"

Das fragen sich viele User, tun sich das ein paar Sekunden an ... und sind weg. Auch dezentere Websites machen oft den Fehler, zu viele Fragezeichen beim User zu hinterlassen. Mit diesen sieben Tipps macht ihr es besser.

Website-Usability: 7 Tipps für mehr Benutzerfreundlichkeit

1. Bring mich nicht zum Grübeln!
Dieser erste Tipp ist zugleich die goldene Grundregel unseres Themas.

Ein Klassiker der Website-Usability-Literatur heißt “Don’t make me think” von Steve Krug  – “Bring mich nicht zum Grübeln”. Quintessenz des Buches: Gestaltet eure Website so selbsterklärend wie möglich. Innerhalb von maximal zehn Sekunden sollte dem User klar sein, wer ihr seid, um was es auf eurer Website geht und was man dort tun kann.

Eine kleine Empathie-Hilfe: Stellt euch vor, man verbindet euch die Augen, setzt euch in einen Flieger mit unbekanntem Ziel, bringt euch nach der Landung in das Zentrum einer fremden Stadt, nimmt euch die Augenbinde ab und lässt euch stehen...

...richtig: Alles in euch würde nach Orientierung schreien. Und genauso geht es Usern, die erstmals auf eure Website kommen. Sie wissen nicht, wo sie sind, um was es hier geht und was sie machen können. Ihr müsst sie abholen.

2. Nutzt eine Tagline
Eine Tagline ist ein Wort, eine Wortfolge oder ein Satz unterhalb des Website-Logos. Website-Logo und Tagline stehen meist links oben und erscheinen auf jeder einzelnen Seite der gesamten Website.

Wikipedia zum Beispiel nutzt als Tagline "Die freie Enzyklopädie":

Die Tagline am Beispiel von Wikipedia


Das leistet eine Tagline: Kommt ein User über eine Google-Suche auf einer eurer Unterseiten raus, sagt ihm die Tagline, um was es auf eurer Website geht. Er bekommt direkt eine erste Orientierung.

Sehr bekannte Websites wie Wikipedia bräuchten keine Tagline. Zalando zum Beispiel nutzte in seiner Anfangszeit die Tagline "Online Schuhe bestellen". Mittlerweile verzichtet das Unternehmen komplett darauf. Seid ihr nicht so bekannt wie Wikipedia oder Zalando, braucht ihr definitiv eine informative (!) Tagline.

3. Klartext auf der Startseite
Die Startseite/Homepage eurer Website ist die wichtigste Seite eures gesamten Online-Auftritts. Sie erfüllt den gleichen Zweck wie das Schaufenster eines Ladengeschäfts in der analogen Welt: Sie entscheidet darüber, ob der User eure Website/euren Laden betritt oder ob er weiterzieht.

Platziert auf eurer Startseite einen kurzen (!) Text, der knackig euch, euer Unternehmen und euer Angebot vorstellt. Es gilt die 10-Sekunden-Regel: Länger darf der User nicht brauchen, um beim Blick auf eure Homepage euch und euer Angebot zu verstehen. Und zehn Sekunden sind großzügig bemessen.

4. Nutzt Breadcrumbs
Breadcrumbs ist der englische Begriff für "Brotkrümel" oder "Brotkrumen". Hänsel und Gretel streuten sie einst hinter sich, um wieder nach Hause zu finden.

Ganz ähnlich funktionieren Website-Breadcrumbs: Sie zeigen dem User, wo innerhalb der gesamten Website er sich gerade befindet. So haben wir das zum Beispiel bei bytecontent gelöst:


Die Breadcrumb-Navigation am Beispiel von bytecontent.de


Die drei Breadcrumbs findet ihr unterhalb der Haupt-Navigation (unter "Ihr Content-Team"):
  • >> bytecontent: Content-Marketing und Redaktion 
  • // Das können wir 
  • // Suchmaschinenoptimierung

5. Vermeidet Flash
Adobe Flash ist eine Software für multimediale Animationen: Das können grafische Gimmicks bis hin zu ganzen Webseiten sein.

Flash hat einige gravierende Nachteile:

➧ Apple mag kein Flash: iPhones und iPads stellen Flash-Inhalte nicht dar.

➧ Suchmaschinen können Flash-Inhalte schwer bis gar nicht lesen.

➧ Flash war in der Vergangenheit immer wieder ein Sicherheitsrisiko.

➧ Mitunter bläht Flash Webseiten auf und erhöht so ihre Ladezeiten (die eingangs beschriebenen "Flash-Monster").

Als heißester Flash-Konkurrent und sein Nachfolger wird HTML5 gehandelt. Der Kampf zwischen Flash und HTML5 ist noch im vollen Gange.

6. Mobile Optimierung
User surfen immer öfter auf ihren Smartphones. Habt ihr euch schon mal eine nicht-mobiloptimierte Website auf einem Smartphone angeschaut? Richtig: Es ist gruselig. Zoomen, scrollen, verrückt werden und entnervt aufgeben.

Deshalb: Optimiert eure Website für die mobile Nutzung. Das tut ihr am besten mittels Responsive Webdesign:

Responsive Webdesign für mobile Usability

Responsive Webdesign optimiert eure Website
für die Darstellung auf Smartphones.

Responsive Webdesign für die Smartphone-Darstellung

7. Usability Tests
Testet die Benutzerfeundlichkeit euer Website. Unbedingt. Es gibt ganze Usability-Test-Labors und spezialisierte Usability-Test-Dienstleister. Wenn das euer Budget sprengt, hilft alternativ bereits der 5-Freunde-Test:

➧ Bittet mindestens fünf Freunde/Bekannte/Verwandte, eure Website zu testen.

➧ Wählt Personen, die eure Website/euer Unternehmen kaum oder nicht kennen.

➧ Diese fünf Personen sollten repräsentativ, also so unterschiedlich wie möglich sein (Alter, Geschlecht, Web-Affinität, etc.).

➧ Die Tests sollten auf allen gängigen Browsern und Betriebssystemen stattfinden (mobil und stationär): Windows, Mac OS, Android, iOS, Mozilla Firefox, Internet Explorer, Google Chrome, Apple Safari, etc.

➧ Jens Jacobsen bietet einen kostenlosen Website-Usability-Test-Fragebogen.

Ganz wichtig: Der 5-Freunde-Test ersetzt niemals einen professionellen Usability-Test. Das Schlechteste aber, was ihr tun könnt, ist überhaupt nicht zu testen. Der Blick von außen ist immens wichtig und wird bei der Website-Konzeption sehr oft eklatant unterschätzt.

Ob eure Website gut ist, entscheidet nicht ihr, sondern eure User. Der Köder muss dem Fisch schmecken, nicht dem Angler.

Website-Usability, unendliche Weiten...

Das Thema Website-Usability bietet Stoff für eine mindestens zehnteilige Artikelserie. Dabei ist die Usability nur einer von drei Unterpunkten dessen, was man User Experience (UX) nennt. Wenn ihr tiefer einsteigen wollt, empfehle ich euch zwei Bücher:
Soviel zum Einstieg in dieses spannende Thema. Viel Erfolg bei eurer Usability-Optimierung. Bringt eure Website-Besucher nicht zum Grübeln. ;-)

Kommentare

Mathias Sauermann

Mathias Sauermann
...bloggt hier.
>NEWSLETTER: Sichere dir die besten Beiträge meines Blogs >gratis und freibleibend!

Vernetze dich mit mir auf FacebookTwitter Instagram.

Weitere spannende Beiträge dieses Blogs findest du in den Rubriken:
Online-Marketing-Tipps
Digitalisierung

Meinung!
Onliner-Allerlei


Titelbild: Digital Art unter CC0 1.0