Teil 2: Die Bildsprache nutzen

Websites mit Persönlichkeit: Fehlerseiten und Pop-Ups als Highlights
Kommentare

Der Charakter einer Website kann darüber entscheiden, wie gut sie beim Kunden ankommt. Dazu gehört beispielsweise das Erzählen einer guten Story oder die direkte Ansprache des Kunden, wie wir in Teil 1 „Storytelling, FAQs und mehr“ erklärt haben. Es sind aber auch die optischen Details und oft gänzlich missachteten Ecken des Webauftritts, die einen großen Einfluss haben! Deshalb werfen wir heute einen Blick auf Fehlerseiten, Pop-ups und Ladebalken.

„404 – Seite nicht gefunden“-Meldungen kennt man von so gut wie jeder Website. Auch Ladebalken sind ein Feature, das viele Webangebote nutzen. Aber wer macht sich schon Gedanken darüber, wie diese Teile einer Website aussehen? Na klar, ein kleines Bildchen für die 404-Seite ist schon noch drin, aber das war es dann meistens auch schon. Dabei lässt sich gerade mit einer schönen Fehlerseite so richtig Eindruck schinden

404 – Seite nicht gefunden

Es lässt sich nicht vermeiden: Irgendwo versteckt sich immer noch ein veralteter Link, der ins Leere führt. Und der Nutzer ist ja auch nicht doof. Den Klick zurück auf die Hauptseite wird er ja gerade noch selbst hinbekommen. Also wird dieser kleinen Seite, die der Nutzer zu sehen bekommt, wenn er sonst nichts sieht, meist nicht viel Aufmerksamkeit gewidmet.

Da wohl jeder Nutzer irgendwann einmal über eine solche Fehlerseite stolpern wird, sollte sich auch jeder Admin einmal Gedanken darüber machen, wie diese Seite aussieht. Obwohl Nutzer nicht dumm sind, sind sie jedoch meist faul. Und das heißt: Je besser die Fehlerseite gestaltet wird, desto eher bleibt der Nutzer auf der Website. Wird das Suchfeld direkt auf der Error-Page angezeigt, erhöht das die Wahrscheinlichkeit, dass der Nutzer wirklich eine Suche durchführt um ans Ziel zu kommen.

Hilfe anbieten

Auch können zusätzlich weitere nützliche Links dort untergebracht werden. Die Hilfe-Sektion könnte verlinkt werden, bei kleinen Projekten könnte eine Sitemap hilfreich sein. Wer bereit ist, wirklich auf Anfragen zu reagieren, kann außerdem ein Kontaktformular einbauen. Wie wäre es mit ein paar Links zu besonders beliebten Seiten?

Zu überladen sollte eine Fehlerseite ebenfalls nicht sein, sonst verliert der Nutzer den Überblick. Ein klares, ansprechendes Design kann aber durchaus auf verschiedene Arten erreicht werden. Ein kleiner Roboter oder ein einfaches Fragezeichen als Symbol sind inzwischen wohl doch recht verbreitet; wer den Charakter seiner Website durch eine solche Seite beeinflussen möchte, sollte sich darum ein paar mehr Gedanken machen.

Ungewöhnliche Fehlerseiten

Generell gilt für das Design einer außergewöhnlichen 404-Page, dass Emotionen der Schlüssel zum Erfolg sind. Eine spannende Variante stellen beispielsweise die animierten Augen dar, die Hakim El Hattab entworfen hat und die einen eher unheimlichen Eindruck erwecken. Auch der niedliche Hund auf TheMuse.com ist ein Beispiel für diese Art von Error-Page.

Wie süß! Emotionale Fehler-Seite auf TheMuse. (Quelle: https://www.themuse.com/alksjfdklj)

Wie süß! Emotionale Fehlerseite auf TheMuse. (Quelle: https://www.themuse.com/alksjfdklj, Screenshot: Entwickler.de)

Es ist aber auch möglich, mit dem Thema der eigenen Website zu spielen. Lego zeigt eine Reihe von Lego-Figuren, eine davon hat eine Kabelverbindung durchtrennt. Dropbox greift den typischen blauen Karton auf, der allerdings in einen unmöglichen Quader verwandelt wurde. Ganz anders geht hingegen Blue Fountain Media vor: Statt einer klassischen Fehlermeldung kann der Nutzer hier Pacman spielen.  Unterhalb des Spiels finden sich dann aber doch noch ein paar nützliche Links.

Eine Dropbox? Nicht ganz! (Quelle:  https://www.dropbox.com/404)

Eine Dropbox? Nicht ganz! (Quelle: https://www.dropbox.com/404, Screenshot: Entwickler.de)

Ladebalken

Auf ähnliche Weise kann auch ein Ladesymbol individualisiert werden. Ein gutes Design lohnt sich, um Kunden bei Laune zu halten, gerade wenn mit längeren Ladezeiten gerechnet werden muss. Dabei spiegeln solche Balken regelmäßig nicht den aktuellen Stand eines Ladeprozesses wider. Stattdessen werden sie eingesetzt, um dem Besucher ein Feedback zu geben und ihm grafisch zu signalisieren, dass gerade etwas passiert.
Anstelle eines einfachen Balkens kann so ziemlich jedes Symbol benutzt werden. Bevorzugt sollten natürlich solche eingesetzt werden, die zum eigenen Angebot passen. Auch kann der Ladevorgang kommentiert werden, ernsthaft oder eher humorvoll. Dieses Prinzip ist bereits aus Spielen wie The Sims bekannt. Auf der Website NASA: Prospect wird davon gesprochen, dass das Universum erst noch entpackt werden muss.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

Die Website der Fluggesellschaft Ryanair zeigt beispielsweise ein kleines Flugzeug an, während die Website geladen wird. Auf der Seite des Animationsfilms „Mary und Max“ ist ein kleines, altes Fernsehgerät zu sehen, auf dessen Bildschirm bis Null heruntergezählt wird.

Pop-Ups

Wer mag schon Pop-Up-Fenster? Auch sie sind eigentlich nicht besonders beliebt, werden aber häufig verwendet, um Nutzer beispielsweise auf Newsletter oder Social-Media-Sites aufmerksam zu machen. Mit ein wenig Aufwand lassen sie sich aber ebenfalls zu einem wichtigen Bestandteil des Website-Charakters machen.

Hier lässt sich einerseits wieder mit Sprache arbeiten. Ein kurzer, eingängiger Slogan, vielleicht ein Witz weckt die Aufmerksamkeit des Nutzers und wird eher wahrgenommen als lange Textsegmente. Auch eine persönliche Ansprache kann dabei helfen, den Nutzer zur Interaktion zu bewegen.

Vorteile durchs Hinsehen

Andererseits lässt sich hier aber auch mit besonderen Angeboten arbeiten – so versucht es Stick in a Box, ein Anbieter von Beef Jerky Abo Boxen damit, sich die Freundschaft seiner Websitebesucher zu erkaufen.

Freundschaft gegen Vorteile bei Stick in a Boy (Quelle:  http://stickinabox.co/, Screenshot: Entwickler.de)

Freundschaft gegen Vorteile bei Stick in a Boy (Quelle: http://stickinabox.co/, Screenshot: Entwickler.de)

Für die Personalisierung von Pop-Up-Boxen gilt im Weiteren alles vorher gesagte ebenfalls: Ein gutes Design macht sich bezahlt, es muss der Zielgruppe angepasst werden und zur Website passen. Daneben ist aber auch wichtig, dass die Menge solcher Einblendungen nicht zu hoch ist. Egal wie gelungen sie sind, gibt es zu viele davon, wird der Nutzer eher abgeschreckt.

Saisonal und dem Trend folgend

Für all diese Einblendungen gilt außerdem, dass es den Nutzer freut, wenn sie sich hin und wieder einmal verändern. Es ist nicht besonders aufwändig, ein neues Bild in eine Error-Page einzufügen, lohnt sich aber durchaus. So könnte im Sommer beispielsweise ein anderes Bild erscheinen als im Winter; Pop-Ups könnten hin und wieder im Stil eines neuen Memes gestaltet werden. Oder gleich mit einem Dauerbrenner spielen und beispielsweise im Grumpy Cat Layout gestaltet werden! Die Aufmerksamkeit der Nutzer erregen solche Bilder mit Sicherheit.

Der Charakter einer Website hängt also von vielen Kleinigkeiten ab. Ein gutes Layout mit Wiedererkennungswert ist natürlich die Basis aller weiteren Überlegungen zu Layout und Co; alleine damit ist es allerdings noch nicht getan. Die Sprache, Fehlerseiten, Pop-Ups, das Ladeverhalten: All diese Faktoren können dazu beitragen, dass eine Website sich von der Konkurrenz abhebt und den Nutzern in Erinnerung bleibt.

Lesen Sie Teil 1: Websites mit Persönlichkeit: Storytelling, FAQs und mehr

Aufmacherbild: computer error concept via Shutterstock / Urheberrecht: Georgejmclittle

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -