K u n d e n o r i e n t i e r t e We b s i t e

1 7 . 1 0 . 2 0 1 9

Content User Interface User Experience

Worauf es ankommt Das Werkzeug Der „Genuss“ (Konsum)

Content: Inhalt

User Interface

User Experience: Nutzererlebnis

Der UserEine Geschichte voller Missverständnisse

Der User ist faul.

Der User hat einenSpieltrieb.

Der User ist meist

abgelenkt.

User soll sich auf Ihrer Website wiederfinden

Was also tun?

Fokussierung

• Inhalte fokussiert anbieten• Besonderes Produkt vorstellen

> LANDINGPAGE

Landingpage

• User zum Kaufen, Downloaden oder Kontaktieren animieren

• Call-To-Action Button• Gute Möglichkeit für

Suchmaschinenoptimierung• Einfach URL (www.einfache-url.de)• Microsoft.com• Office.com• Windows.com

Interaktion

• Spielerischer Einstieg in ein Thema oder Produkt

> KONFIGURATOR> STORYTELLING> HOT SPOTS

HotSpots

Merkzettel

ü User First

ü Content + User Interface

ü User Experience

ü Potentielle Kunden auf die Website bringen

Simple

• Einfaches und schnelles zurechtfinden

> GESCHWINDIGKEIT> STRUKTUR> VERTRAUEN

10 – 40 Sekunden

• Der erste Eindruck zählt• Durchschnittliche Verweildauer• Die Zeit, den User zu überzeugen

Wie kann man den User überzeugen?

Vertrauen

Bauen Sie Vertrauen zwischen Ihrer Website und dem User auf

1. Navigation

Strukturierte User

• Systematisch• User geht strukturiert vor• Navigiert mit Menü

> KLARE NAVIGATION

Navigation

• Klare Struktur• Max. 3 Klicks zum Ziel• Pfadhistorie (Breadcrumb)

Flyout Menü

Emotionale User

• Kontext geführt• User lässt sich treiben• Nutzt Verlinkungen innerhalb des

Contents

> INHALTSBEZOGENENAVIGATION

Inhaltsbezogene Navigation

Merkzettel

ü 10 – 40 Sekunden

ü Vertrauen zwischen Website und User

ü Strukturierte Navigation

ü Inhaltsbezogene Navigation

2. Gute Benutzerführung

Call-To-Action

• Entscheidungen abnehmen• Aktion anbieten

> EIN CTA-BUTTON

Viel Kontrast zur übrigen Seite: Auffällige Farbe

Call-To-Action Button

Wiederholt anbieten

Aufforderung in der Benennung

Fokus behalten

Icon Labels

• Eindeutige Benennung• Den User nicht rätseln lassen

3. Einfacher Aufbau

Übersichtlichkeit

• Layout mit Struktur• Keine überladenen Seiten• Zielgruppen-Einstiege anbieten

> VISUELLE HIERARCHIE

Inhalte gliedern in Blöcke

Visuelle Hierarchie

4. Schnelle Ladezeiten

Ladeverzögerung

½ Sekunde20% Umsatzrückgang

• Bildmaterial und Code optimieren• Ladebalken anzeigen, um Feedback zu geben

Website optimieren

Ladebalken nicht bei 0 beginnen

Fortschritt zeigen

5. Feedback geben

InteraktivesFeedback• Kommunizieren• Feedback geben

> MICROINTERACTIONS

6. Assistenz

Assistenz

• Schritte bei Formulare (Wizard)• Validierung (unterstützend)• Info Tooltips• Kontaktmöglichkeit

> FORMULAR

Formulare

• Nur nötigste Informationen verlangen• Bei zu vielen Feldern die Gefahr, dass User abbricht

Formularfelder

• Benutzerfreundliche Gestaltung von Formularen• sinnvolle Unterteilungen in wichtige Abschnitte (Fieldsets)• Erklärungen / Tooltipps / Assistent• ‚Live-Feedback‘ (Häkchen)

Ratgeber

7. Konsistenz

Konsistenz

• Mensch ist ein Gewohnheitstier• Gutes geografisches Gedächtnis

> KONSISTENTES UI

• Ein konsistentes UI ist einfacher zu bedienen• Elemente sind gelernt: Buttons, Links• Positionierung von Elementen, Benennung von Labels

Konsistentes UI

• Klickbare Elemente (Buttons, Links, Menü)• Gewählte Elemente (aktueller Menüpunkt)

Klickbare Elemente

8. Erwartungshaltung erfüllen

User Experience

• Erwartungen des Users erfüllen• Vertrauen zur Oberfläche• Vertrauen zum Unternehmen

> NUR EIN GLÜCKLICHERUSER KANN EIN KUNDE WERDEN

Merkzettel

ü Call-To-Action Buttons

ü Einfacher Aufbau

ü Schnelle Ladezeiten

ü Feedback (Microinteractions)

ü Assistenz

ü Konsistenz

ü Hochwertige Inhalte

Soziale Netzwerke

• Persönlichkeit• Nicht für jedes Unternehmen sinnvoll• Muss regelmäßig gepflegt werden

> VERSCHIEDENE KANÄLE

Kundenbereich

• Für Downloads• Exklusive Inhalte• Austausch

> KUNDENSERVICE

Merkzettel

ü Verbindung schaffen zwischen • Newsletter• Blog• Website

ü Social Media Kanäle nutzen

ü Self Service (Kundenbereich)

Endgeräte

SmartphoneTablet & Desktop

eyeworkers gmbhHübschstr. 2376135 Karlsruhe t

f

Adressekontakt@eyeworkers.de+49 721 18396-0www.eyeworkers.de

Telefon + Mail social media

@eyeworkers_ka

eyeworkersKONTAKT