Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 23

Praxistipps: Onlineshops intuitiver und visueller gestalten

Das Nutzerverhalten hat sich online stark gewandelt. Nutzer sind anspruchsvoller und wählerischer. Außerdem bewegen sie sich schneller, selbstverständlicher und visueller durch das Netz. Der E-Commerce muss dieser Entwicklung Rechnung tragen und die Nutzerführung so gestalten, dass sie auf die Bedürfnisse der Kunden eingeht. Die folgenden Tipps helfen dabei, Onlineshops intuitiver und visueller zu gestalten.

Das Text-Bild-Verhältnis

Die grundsätzliche Frage „Lesen Nutzer beim Besuch von Webauftritten gerne Texte?“ kann man nicht pauschal beantworten. Man muss hier zwischen „Text als Inhalt“ und „Text zur Nutzerführung“ unterscheiden. Gerne lesen Nutzer zum Beispiel einen Artikel, einen Beitrag in einem Expertenblog oder eine hilfreiche Nutzermeinung. Nicht gerne arbeiten sich Besucher aber lesend zu den interessanten Inhalten durch.

Zu viel Text. Bei designers-heaven.de wird dem Nutzer lediglich vermittelt: Hier muss ich lesen.
Zu viel Text. Bei designers-heaven.de wird dem Nutzer lediglich vermittelt: Hier muss ich lesen.
Untersuchungen haben sogar ergeben, dass Nutzer die Navigationspunkte oder auch die ersten Wörter eines Teasers lediglich scannen. Danach entscheiden sie in Sekundenbruchteilen, ob es sich um einen interessanten Inhalt beziehungsweise Zugang handelt oder nicht. Für eine visuelle Nutzerführung ist es daher wichtig, Text entsprechend einzusetzen. Dient ein Text hauptsächlich der Nutzerführung, sollte er so kurz wie möglich sein.

Oft sagt ein Bild allein mehr als tausend Worte, denn noch wesentlich schneller als einen kurzen Text können Nutzer die Aussage eines passenden Bilds erfassen. Der Onlineshop designers-heaven.de möchte den Nutzern auf der Startseite mitteilen, dass hier wirklich tolle Design- und Geschenkartikel in einem sicheren Shop mit tollem Service zu haben sind. Diese Botschaft vermittelt der Shop hauptsächlich über viel Text, der dem Nutzer visuell allerdings nur eines vermittelt: „Hier muss ich lesen.“

Die gleichen Informationen vermittelt auch myfab.com, jedoch hauptsächlich visuell. Der Nutzer sieht sofort, dass der Shop Designermöbel und Accessoires anbietet. Er sieht außerdem dank professionellem Design, dass es sich um einen seriösen Onlineshop handelt.

Mit Farbe führen

Der Einsatz von Farbe spielt bei der Gestaltung von Webseiten seit jeher eine große Rolle. Die Bedeutung von Farbe hat sogar weiter zugenommen. Der Grund dafür liegt im veränderten Nutzerverhalten: Anwender wollen schnell und visuell ans Ziel gelangen.

Visuelle Kommunikation ist zur Nutzerführung besser geeignet als bloßer Text. Bei myfab.com sagen Bilder mehr als tausend Worte.
Visuelle Kommunikation ist zur Nutzerführung besser geeignet als bloßer Text. Bei myfab.com sagen Bilder mehr als tausend Worte.
Farbe hilft dabei, weil Menschen Farbe und die damit verbundene Bedeutung blitzschnell erfassen können. Farbe teilt etwas mit und das unschlagbar schnell. Ob es eine rote Fehlermeldung ist oder grüne Häkchen bei einer Vorteilskommunikation – in beiden Fällen unterstützt der adäquate Einsatz von Farbe visuell die Aussage und Funktion des entsprechenden Moduls.

Rote Häkchen beispielsweise in einer Vorteilskommunikation wirken einfach falsch.

Auch grüne Fehlermeldungen verwirren den Nutzer.

Farbe kann aber auch grundsätzlich kommunizieren: „Hier geht’s lang.“ Daher ist es unerlässlich, den wesentlichen Call-to-Action, wie zum Beispiel den „In den Warenkorb“-Button, schön auffällig und unbedingt farbig zu gestalten. Ein Button in Hellgrau – Designer sagen auch gern Silber dazu – wirkt eben leider wie ausgegraut, also wie inaktiv. Besonders im E-Commerce orientieren sich Anwender stark an der Farbe und lernen deren Funktion sehr schnell.

Shopbetreiber sollten Farbe gemäß ihrer Bedeutung und Funktion einsetzen und nicht wahllos, weil es zum Beispiel „einfach gut aussieht“. Die Theorie „Wenn wir unsere Rubriken unterschiedlich einfärben, helfen wir dem Nutzer bei der Orientierung“ ist zwar klar und erfrischend einfach, sie scheitert aber in der Praxis. Ein Farbcode ist sicher nicht grundsätzlich schlecht oder störend. Allerdings macht er eine Seite vor allem bunt – und das ohne wirklichen Nutzen.

Warum bleibt dieser Nutzen aus? Wie beschrieben, haben unterschiedliche Farben eine unterschiedliche Wirkung und Bedeutung. Blau steht zum Beispiel für Verlässlichkeit und Seriosität, aber nicht für Kindermoden; Gelb macht Besucher ganz automatisch auf ein tolles Sonderangebot aufmerksam und steht nicht für Möbel; Grün sagt „Alles bestens“, aber nicht „Hier gibt’s Schuhe“. Wenn Shopbetreiber also die intuitive Grundbedeutung der Farbe bei ihrem Einsatz mit einbeziehen, helfen sie dem Nutzer wirklich.

In allen anderen Fällen muss der Nutzer den neuen, willkürlich definierten Farbcode eines Shops erst lernen – und zwar auf jeder Seite, die einen spezifischen Farbcode beinhaltet, aufs Neue. Das verschärft das Problem: Viele Shops implementieren Farbcodes vor allem dann, wenn ein Angebot besonders umfangreich ist. Wenn jede Rubrik ihre eigene, willkürliche Farbe bekommt, erschlägt die Komplexität des Farbcodes den Nutzer. Statt klarer Gliederung nimmt der potenzielle Kunde dann nur noch Buntheit wahr.

Heine bietet jedem Nutzer einen passenden Einstieg: klassische Navigation, prominente Suche und visuelle Teaser.
Heine bietet jedem Nutzer einen passenden Einstieg: klassische Navigation, prominente Suche und visuelle Teaser.

Bitte beachte unsere Community-Richtlinien

3 Reaktionen
Faber

Nochmals danke, unsere Webseite wird zukünftiger noch besser :)

Felix

jep, das Gleiche hab ich auch vor bei 3 privaten Projekten, herzlichen Dank für den Artikel! :)

Achja und danke für die t3n-Magazine und das T-Shirt, das Angebot war so genial, das ich mich den Monat sogar um die 35 Euro verschuldet habe :D

Faber

Vielen Dank für die interessanten Anregungen, wir werden uns daran ein Beispiel nehmen!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst