View
2
Download
0
Category
Preview:
Citation preview
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
Recommended