Was hat eine Website mit einem Staubsauger oder einer Kaffeemaschine gemeinsam?

Auf den ersten Blick natürlich ziemlich wenig, da eine Website ein virtuelles Produkt ist, mit dem man nicht putzen oder Kaffee kochen kann. Trotzdem ist sie auch ein ‘Produkt’ oder besser gesagt: eine Online-Anwendung, die wir vielleicht sogar häufiger benutzen als unseren Staubsauger.

Hinter all diesen Produkten, die wir im Alltag gebrauchen, steckt eine Menge Gedankengut bezüglich des Designs, der Ergonomie und der Funktionen. Gut ist ein Gegenstand dann, wenn er uns effektiv zu einem gewünschten Ziel bringt und sich ohne Umstände benutzen lässt. Das nennt sich dann ‘Usability’.

Usabilty - nur da, wenn sie fehlt

Usability setzt sich zusammen aus dem englischen Verb ‘to use’ (=benutzen) und dem Suffix
‘-able’ (ähnlich wie das deutsche ‘-bar’), also ‘Benutzbarkeit’ oder ‘Benutzerfreundlichkeit’. Sie ist etwas, was wir nur unterbewusst wahrnehmen. Wir bemerken sie erst, wenn sie eben nicht vorhanden ist, d.h. das benutzte Produkt nicht benutzerfreundlich gestaltet ist. Ob man bei einer Kaffeemaschine einen bestimmten Knopf oder auf einer Website die Kontaktseite nicht findet - beides ist gleichermaßen frustrierend.

Ein durchschnittlicher User besucht am Tag viele verschiedene Websites. Wenn er eine Website kompliziert und schlecht bedienbar findet, sind die anderen Google-Ergebnisse nur einen ‘Zurück’-Klick entfernt. Dabei sollte das Ziel einer Firmenwebsite eigentlich sein, den Kunden auf der Seite zu halten und ihn zum Handeln anzuregen. Ein schlechter oder mittelmäßiger Online-Eindruck lassen schnell auf das ganze Unternehmen schließen - manchmal zu Unrecht.

Usability vs. User Experience

Viele Unternehmen wünschen sich eine ‘tolle’ Website, die den Besucher beeindruckt und mit allerlei Features aufwartet. Denn aufwändige Startseiten mit Videos und Animationen können spannend sein - Unternehmen und Webdesigner setzen sich somit ein digitales Denkmal und beim Besucher hinterlassen Sie im Idealfall einen bleibenden Eindruck. Damit bewegt man sich bereits im Bereich der User Experience: die subjektive Nutzererfahrung, das emotionale Erlebnis eines Users beim Bedienen eines Software-Produkts.

Bevor man sein Haus allerdings bunt anstreicht, sollte zunächst das Fundament stimmen. In diesem Sinne ist es wichtig, die Webseite ‘usable’ zu machen und die Basics abzudecken. Im Gegensatz zur User Experience ist die Usability nämlich objektiv messbar.

Willkommen: Die Startseite

Auf der Startseite angekommen, sollte der Besucher relativ zügig wissen, ‘woran er hier ist’. Niemand möchte erst erraten, was eine Website ihm bieten will oder schlimmer noch, den Schließen-Button eines aufdringlichen Pop-Ups oder Videos suchen.
Ein Willkommens-Text oder ein Call-to-Action auf der Startseite sollten Raffinesse, aber auch eine klare Botschaft haben. Das Logo mit aussagekräftigem Claim kann diese Aufgabe sogar schon alleine erfüllen. Selbiges sollte außerdem immer der Ankerpunkt sein und den verlorenen Webseitenbesucher von jeder Seite aus mit einem Klick auf die Startseite zurückbringen.

Wer, Wo, Was: Information

Sind wir mal ehrlich: Die meisten Menschen nutzen Webseiten nicht ‘zum Spaß’, sondern weil sie nach Informationen und nach der Lösung eines Problems suchen. Hat man seine Zielgruppe identifiziert, sollte man im nächsten Schritt überlegen, mit welchem ‘Problem’ ein typischer Besucher auf die Website gelangt. Die Frage sollte lauten: “Biete ich meinem Besucher das, was er erwartet?”

Je nach Unternehmen können diese speziellen Informationen sich auf Leistungsspektrum, Referenzen, Produktdetails oder Preise beziehen. Sei es eine Restaurant-Homepage, auf der Gäste die Wochenkarte downloaden können, oder ein Webshop, der detaillierte Informationen zu Artikeln, Zahlungsinformationen und Versand bereitstellt: Transparenz und gut strukturierte Information schaffen Vertrauen und Interesse.

Texte

Der Boom an Blogs und Online-Magazinen lässt ganz klar auf eine große Lesebereitschaft der Internetnutzer schließen. Gut geschriebene, strukturierte, informative Texte, die Antworten liefern, werden als hilfreich empfunden und sorgen für einen längeren Aufenthalt. Da Online-Leser die Texte oft nur mit den Augen abscannen, ist es außerdem von Vorteil, Keywords zu benutzen. Nach diesen halten nicht nur die Suchmaschinen, sondern auch die echten Menschen Ausschau. Keyword-Stuffing gilt es aber unbedingt zu vermeiden.

Je nach Zielgruppe sollte man sich schon vor der Texterstellung über Tonalität und Stil im Klaren sein: Sollen die Texte seriös, emotional, nüchtern oder locker wirken? Wird der Besucher geduzt? Kann die Zielgruppe mit englischen Begriffen umgehen?

Besonders wichtig sind Webtexte für Artikelbeschreibungen in Online-Shops. Eine absolutes No-Go ist mittlerweile das reine Übernehmen der Texte des Herstellers. Eigene, veredelnde Beschreibungen, ‘unique Content’, geben dem Shop die Chance, aus der Masse herauszustechen, und machen die Produkte umso attraktiver.

Bilder

Bilder sind oft das emotionalste Element auf einer Website und können im Idealfall positive Assoziationen zum präsentierten Unternehmen wecken. Deshalb lohnt es sich, in einen professionellen Fotografen zu investieren. Eine hohe Auflösung ist wichtig, denn vor allem Produktbilder sollten zoombar sein, um Kunden auch haptische Reize transportieren zu können. Da Bilder sehr gerne angeklickt werden, eignen sie sich außerdem gut, um auf andere Seiten zu verlinken. Für den Fall, dass der Browser des Users die Bilder nicht unterstützt, ist es sinnvoll, das alt-Attribut zu benutzen. Im HTML-Code wird dabei ein alternativer Text bereitgestellt, der den Inhalt des Bildes in Sprache ‘übersetzt’.

Der Leitsatz ‘Bilder sagen mehr als Worte’ gilt vor allem für Icons wie ein Warenkorb oder eine Lupe.

Jemand da? - Kommunikation

Eine Website ist sowohl Informationsträger als auch Bindeglied zwischen User und Betreiber. Viele Menschen nutzen Websites vor allem, um Kontakt aufzunehmen. Eine Telefonnummer, ein Ansprechpartner, die Firmenadresse oder die Öffnungszeiten sollten deshalb unbedingt präsent und auffindbar sein.

Vor allem Lagepläne durch Google-Maps-Anbindung gehören bereits zum Service dazu.

Spielt sich der Kundenkontakt nur auf Online-Ebene ab wie bei einem Webshop, ist es wichtig, den Kunden zu begleiten und ihn stets umfassend zu informieren. Eine Bestätigungs-E-Mail über Käufe und Anfragen zeigt, dass man seine Nutzer ernst nimmt.

Solch kurze Texte mit großem Einfluss auf die Usability nennt man Microcopy: Phrasen und Wörter, die beispielsweise das Befüllen von Formularen erklären. Sie kommunizieren mit dem Kunden, indem sie ihm Hilfestellung geben (E-Mail-Adresse hier eintragen) oder rückversichern (Ihre E-Mail-Adresse wird nicht veröffentlicht).

The need for: Speed

Internetuser sind ungeduldig. Wurde es in den 90ern noch in Kauf genommen, sich einige Sekunden zu gedulden, bis sich die Seite ‘aufbaut’, liegt die Erwartungshaltung heute bei ca. zwei Sekunden. Auf mobilen Endgeräten ist die Geduld zur Zeit noch etwas höher, doch auch hier wird der Pagespeed bald zum Faktor, der die Absprungsrate stark beeinflusst.

Um die Ladezeiten zu verbessern, muss man im Backend ansetzen: dazu gehört die Reduzierung der http-Requests sowie die Optimierung der Bilddateien hinsichtlich Format und Auflösung.

Mobile Optimierung

Schon jetzt erhält Google mehr Suchanfragen über mobile Endgeräte als über stationäre. Responsives Webdesign bedeutet nichts anderes, als dass das Design mit Bildern und Breiten flexibel auf Bildschirmgrößen reagiert. Eine Website sollte sich dem Nutzer auf Smartphone, Tablet oder PC immer freundlich präsentieren und dynamisch mit dem Endgerät schrumpfen bzw. wachsen.

Optimalerweise erhält der Besucher eine Weiterleitung auf eine mobile Webseite oder die App, die speziell auf die mobilen Bedürfnisse angepasst wird. Ein intuitives, einfaches Navigationskonzept ist bei einer Website-to-go noch wichtiger. Außerdem bedeutet mobile Optimierung der Usability auch die Anpassung der Bildergalerien, Buttons und Menüs.
Für die mobile Website gilt außerdem ‘weniger ist mehr’. Man sollte hier eventuell genau überlegen, welche Funktionen so essentiell sind, dass sie nicht weggelassen werden können und sich auf die optimale Darstellung dieser konzentrieren.

Was Hänsel und Gretel mit Navigation zun tun haben...

Die Menüpunkte einer Website sind die Wegweiser für den Besucher. Ähnliche Inhalte sollten unter verständlichen Oberbegriffen gruppiert werden. Wenige Unterpunkte können sichtbar erscheinen, jedoch sind Dropdown-Menüs oft sinnvoller, um den User nicht gleich zu überfordern.

Eine gut durchdachte Struktur und Hierarchie der Unterseiten zeigt sich durch ein einfach verständliches Menü. Es erspart dem User Zeit und Energie, wenn er nicht erst lange suchen oder gar Formulare ausfüllen muss, um seine Information zu finden.

Märchenhaft wird es mit sogenannten Breadcrumbs: In Anlehnung an Hänsel und Gretels Brotkrumenspur zeigt man so dem Nutzer, in welcher Verzweigung der Seite er sich gerade befindet. Er kann so ganz einfach von der spezifischen zur allgemeinen Kategorie gelangen.

URLs

Die URLs sollten mit der Navigation Hand in Hand gehen und diese widerspiegeln. Statische URLs eignen sich dabei besser als dynamische: Beispielsweise garantiert "www.domain.de/spielzeug/kuscheltiere/teddybär" weit mehr Orientierung als das Ungeheuer "www.domain.de/artikel_id=58463". Das erste Beispiel spricht mit dem User und stellt direkten Bezug zum Inhalt her. Auch Off-Page wird eine empathische, lesbare URL viel eher geklickt und verlinkt.

Webdesign & Layout

Das Layout einer Website hat sehr starken Einfluss auf die Usability. In nur wenigen Sekunden entsteht der erste Eindruck, der am meisten vom Design abhängt. Die Herausforderung besteht dabei darin, eine gute Mischung zwischen User-Gewohnheit und Innovation zu finden. Eine Website kann verspielt, aber trotzdem übersichtlich sein. Minimalistisches Webdesign muss nicht langweilig aussehen, sondern kann sehr edel wirken.

Wichtig ist, dass bei der Anordnung von Bildern, Grafiken, Trennlinien und Textblöcken Gesetze der ästhetischen Wahrnehmung eingehalten werden. So kann der User in seinem Nutzererlebnis unterbewusst beeinflusst werden. Selbst kleine Details wie Schriftgröße und -farbe im Kontrast zum Hintergrund können über den Gesamteindruck entscheiden.