Post on 06-Aug-2015
transcript
© 2015 HYVE AG 1
WWW: Was, wie & warum?
User Experience
Kristin LewitzkaLinz, 29. Juni 2015
© 2015 HYVE AG 2
Agenda
Was ist UX und aus welchen Komponenten besteht UX?
Was macht eine gute User Experience aus?
Bedeutung von UX in verschiedenen Bereichen
Welche Methoden & Ansätze gibt es?
© 2015 HYVE AG 3
THE HYVE GROUP
HYVEInnovation Research
HYVEInnovation Design
HYVEInnovation Community
Innovations- und Marketing-Forschung
Virtueller KundendialogIndustriedesign und
Kreativberatung
Interne & externe Innovation Communities und Social
Media
HYVE [hei:f]engl. hive: Bienenstockengl. hype: im Trend liegendfinnisch hyve: die gute Tugend
© 2015 HYVE AG 4
Einführung HYVE
© 2015 HYVE AG 5
Dr. Michael BartlCEO
Michael SchmidtCEO
Prof. Dr. Johann FüllerCEO
Vorstand:
Kompetenzen:
HYVE – the innovation company
Fakten:Gegründet: 2000 Büros: München (Hauptsitz), Wien, JakartaMitarbeiter: 70 (Wissen: Market Research, Social Media, Innovation Management, Consultancy, Business
Administration, IT & Design, Public Administration)
© 2015 HYVE AG 6
HYVE Referenzen
aller deutschen DAX-Unternehmen
nutzen Produkte & Services von HYVE.60%ÜBER
© 2015 HYVE AG 7
HYVE – ausgewählte Methoden
Idea Contests
Ideation Workshop
Idea PlatformIdeaNet
Co-CreationStudy
Innovation Design
ConceptTest
Innovation Marketing
LeadUserMethod
NetnographyInsights
Community Snapshot
Online Research
Community
Technology Scouting
© 2015 HYVE AG 8
HYVE Innovation CommunitySolutions
© 2015 HYVE AG 9
© 2015 HYVE AG 10
© 2015 HYVE AG 11
Was ist gutes Design & was macht es aus?
Schreiben Sie ihre Antwort auf!5-10 Minuten
Mit Diskussion
© 2015 HYVE AG 12
Design & Typografie
© 2015 HYVE AG 13
Dieter Rams über gutes Design
1. Gutes Design ist innovativ
2. Gutes Design macht ein Produkt nützlich.
3. Gutes Design ist ästhetisch.
4. Gutes Design macht ein Produkt verständlich.
5. Gutes Design ist unaufdringlich.
6. Gutes Design ist ehrlich.
7. Gutes Design ist langanhaltend.
8. Gutes Design ist genau.
9. Gutes Design ist umweltfreundlich.
10. Gutes Design ist minimalistisch.
© 2015 HYVE AG 14
Design: Entwicklung
© 2015 HYVE AG 15
Design Stile
SKEUMORPHISM
1991
METRO DESIGN
2012
FLAT DESIGN
2013
MATERIAL DESIGN
2014
© 2015 HYVE AG 16
Design Stile
SKEUMORPHISM
Seit 1991
© 2015 HYVE AG 17
Design Stile
METRO DESIGN
2012
© 2015 HYVE AG 18
Design Stile
FLAT DESIGN
2013
© 2015 HYVE AG 19
Design Stile
MATERIAL DESIGN
2014
© 2015 HYVE AG 20
Was ist der Unterschied zwischen gutem Design und nutzer-zentriertem Design?
Diskussion5-10 Minuten
© 2015 HYVE AG 21
Was ist User Experience?
Gedanken & Anregungen5-10 Minuten
© 2015 HYVE AG 22
Was ist User Experience nicht?
Gedanken & Anregungen5-10 Minuten
© 2015 HYVE AG 23
Usability vs. User Experience
Nach der NutzungWährend der NutzungVor der Nutzung
Verarbeitung der erlebten Nutzung
Aufgabenerledigung„Kopfkino“
© 2015 HYVE AG 24
Versprechen & Erwartung
Erwartung Versprechen
Erfüllung?
„gut“ UX „schlecht“
© 2015 HYVE AG 25
© 2015 HYVE AG 26
Virtual Reality
© 2015 HYVE AG 27
© 2015 HYVE AG 28
UX – Look, Feel, Usability
© 2015 HYVE AG 29
Was macht gute UX aus?
© 2015 HYVE AG 30
Usability & Design Regeln
1. Alle Nutzer ausreichend bedienen (Accessibility)
2. Einfache Orientierung ermöglichen
1. Logische Seitenstruktur
2. Klare Navigation
3. Einheitliche Struktur
4. Suchfunktion
5. Alles klar kennzeichnen
6. Logo verlinken
7. Konventionen einhalten
3. Inhalte optimal präsentieren
1. USP hervorheben
2. Präsize und knapp
3. Content strukturieren
4. Darstellung prüfen
4. Angenehme Atmosphäre
1. Visuelles Rauschen vermeiden
2. Unaufdringliche Atmosphäre
3. Farben dezent und einheitlich
4. Whitespace & Simplicity
5. Nutzer nicht irritieren
1. Vermeiden von Pop-Up Elementen
2. Keine Kontrollverluste
6. Nutzer nicht warten lassen
1. Lange Ladezeiten vermeiden
2. Datei- & Abspielgröße angeben
7. Nicht aufdringlich werden
1. Nur nötige Infos & Knappe Formulare
2. Präzise Bezeichnungen
3. Folgeschritte angeben
© 2015 HYVE AG 31
Usability & Design Regeln
8. Mit dem Nutzer kommunizieren
1. Rückmeldungen anzeigen
2. Nächste Schritte anzeigen
3. Fehlermeldungen anzeigen
4. Hilfestellungen & Lösungen anbieten
9. Vertrauen aufbauen
1. Hilfsbereit zeigen
2. Kontaktaufnahmemöglichkeit
3. Transparenz zeigen
10. Nutzer wieder bedienen
1. Bookmarking Möglichkeit
2. Newsletter
3. Benutzer auf dem Laufenden halten
4. Möglichkeit zur Weiterempfehlung
© 2015 HYVE AG 32
Let‘s draw „How to make toast“
5-10 Minuten allein
15 Minuten in Gruppenarbeit
Warum?
© 2015 HYVE AG 33
Bedeutung von UX in verschiedenen Bereichen
© 2015 HYVE AG 34
UX: Automobilbranche - Werbung
© 2015 HYVE AG 35
UX: Automobilbranche - Werbung
© 2015 HYVE AG 36
UX: Automobilbranche - Werbung
© 2015 HYVE AG 37
UX: Automobilbranche - Ausstellung
© 2015 HYVE AG 38
UX: Automobilbranche - Ausstellung
© 2015 HYVE AG 39
UX: Automobilbranche - Ausstellung
© 2015 HYVE AG 40
UX: Automobilbranche - IAA
© 2015 HYVE AG 41
UX: Automobilbranche - IAA
© 2015 HYVE AG 42
UX: Automobilbranche - Apps
© 2015 HYVE AG 43
UX: Automobilbranche - Apps
© 2015 HYVE AG 44
UX: Automobilbranche - Service
© 2015 HYVE AG 45
Gesamt UX innerhalb der Marke Audi
UX
Auto
Service
AutohausAusstellung
Apps
Werbung
Online
© 2015 HYVE AG 46
UX im Bereich Videospiele
© 2015 HYVE AG 47
UX & Videospiele
© 2015 HYVE AG 48
UX & Videospiele
© 2015 HYVE AG 49
UX & Videospiele
© 2015 HYVE AG 50
UX & Videospiele
© 2015 HYVE AG 51
UX & Videospiele
© 2015 HYVE AG 52
UX innerhalb von Videospielen
UX
Website
MarketingSpiel & Editionen
Videos (Trailer & Demos)
Messen
© 2015 HYVE AG 53
UX im Bereich VR
© 2015 HYVE AG 54
Virtual Reality
© 2015 HYVE AG 55
Virtual Reality
© 2015 HYVE AG 56
Virtual Reality
© 2015 HYVE AG 57
Virtual Reality
© 2015 HYVE AG 58
UX als Markenerlebnis
© 2015 HYVE AG 59
UX & Markenerlebnisse
© 2015 HYVE AG 60
UX & Markenerlebnisse
© 2015 HYVE AG 61
UX & Markenerlebnisse
© 2015 HYVE AG 62
Design - Tools
© 2015 HYVE AG 63
WebZap (PS plugin)
Benefits 960 grid Layouts mit einem Klick
Generiert formatierten Lorem Ipsum Text
UI Kits
Vorschau im iPad od. iMac Template mit einem Klick
Preis 1x WebZap PS plugin, $19
10 x Webzap PS plugin, $99
http://webzap.uiparade.com/
© 2015 HYVE AG 64
Glifo (PS plugin)
Benefits schnell eigene Icon Font generieren
Davor:
Icons rausspeichern Icons auf icomoon.io hochladen Icons benennen Icon Font generieren und herunterladen
Preis 1x Glifo, $19
10 x Glifo, $99
http://glifo.uiparade.com/
© 2015 HYVE AG 65
Jetpack (PS plugin)
Benefits Icons designen
Raster -> Vektor
Icons anordnen (für Sprites)
Dual View
Preis 1x Glifo, $19
10 x Glifo, $99
http://jetpack.uistore.io/
© 2015 HYVE AG 66
Catalist (PS plugin)
Benefits alle Projektinformationen verknüpfen
E-Mails, Ordner, Word Dokumente, Notes, Adobe CC,..
Preis 1x Catalist, $19
10 x Catalist, $99
http://catalist.uiparade.com/
© 2015 HYVE AG 67
Specctr (PS plugin)
Benefits Bemassung: Höhe, Breite, Abstand zwischen Objekten,
Koordinaten, Abstand zwischen Text Objekten,…
Smart Objects: Füllfarbe, Effekte, Transparenz, Filter
Text: Schriftart, Größe, Farbe, Kerning, Absatz,…
Preis Specctr Lite FREE (Text, Höhe & Breite)
Single User (Ps), $49
Single User (Ps + Ai + Id + Fw), $99
10 Seat License (Version Ps + Ai + Id + Fw), $ 890 statt $990
https://www.specctr.com
© 2015 HYVE AG 68
Ink (PS plugin)
Benefits Ebenen-Stile: Schatten, Kontur, Verläufe,…
Text: Schriftart, Größe, Farbe,…
Ebenen Bemassung
„Ink“-Ordner für Dokumentation
Preis FREE
http://ink.chrometaphore.com/
© 2015 HYVE AG 69
UX Pin
Benefits Wireframe
Mockup
Prototype
UI Patterns, Elemente, Icons (iOS, Android, Bootsrap, Smart Watch uvm.
Usability Test
Present & Collaborate
Preis Basic $15 per user / month
Pro $25 per user / month
Pro+ $40 per user / month (incl. Usability Testing beta)
http://www.uxpin.com/
© 2015 HYVE AG 70
Usability – Ansätze & Methoden
© 2015 HYVE AG 71
JANINEHOFER
admired, ambitious, creative
“I really would like to get professional feedback on my ideas from experts and have
the chance to directly implement it.”
ABOUT(PROFILE)
EVERYDAY WEB USE(AVERAGE, %)
30%
50%
15%
5%
AgeStatusOccupationEducationLocation
47SingleFinancial ServiceBWL: LMU Munich *82Munich
ADJECTIVES(PERSONALITY)
MOTIVATIONS(PERSONALITY)
TECHNOLOGY(SKILLS)
Extrovert
Sensing
Thinking
Judging
Creative
Incentive
Fear
Achievement
Growth
Social
IT and Internet
Software
Mobile Apps
Social Networks
Innovative
Introvert
Intution
Feeling
Perceiving
Formative
GOALS & MUST DOES
FRUSTRATIONS & NO GOS
REFERENCES & INFLUENCES
Traveling the worldPaintingFinding BoyfriendClean Design
Slow download timesGetting tracked unknownWasting time
Dog „Buddy“
Gaming
Surfing & social media
Working
Gaming
© 2015 HYVE AG 72
Use Cases & User Stories
Definition der Nutzungsumgebung
• Welche Hardware steht zur Verfügung?
• Welche technischen Interfaces werden genutzt?
• Gibt es besondere räumliche Anforderungen?
• Gibt es bestimmte Einschränkungen für die Nutzung?
(Handschuhe, Umwelteinflüsse, Sichtverhältnisse, etc.)
Definition der Nutzungsziele der Anwender
• Welche Aufgaben sind durch den Nutzer zu erledigen?
• Welche Ziele verfolgt der Nutzer mit der Anwendung?
• Welche Funktionalität ist seitens des Anwenders
gefordert/gewünscht?
Definition der Software-Anforderung
• Kurz gehalten & In zwei Sätzen definiert
• Schreiben auf sogenannte Story-Cards
• Kunde ist Autor
• z.B. „Als <Rolle> möchte ich <Ziel/Wunsch>, um <Nutzen>.“
• „Als Teilnehmer des Summer Design Summits möchte ich mich in Sachen Design Thinking fortbilden, um in Zukunft fokussierter arbeiten zu können.“
Unterschied zu Use Cases
• User Story ist ein konkretes Szenario
• Use Cases beinhaltet mehrere Szenarien
© 2015 HYVE AG 73
User Experience Tests
Design Test
• Gutes Design ist die halbe Miete für die Akzeptanz eines Mediums
• Testen der Entwürfe anhand von mehreren Designentwürfen (A/B-Testing)
• Zufällige Zuweisung von einem Entwurf an einen Probanden
Usability Test
• Testen der Bedienbarkeit und des Nutzererlebnisses
• User sollen reale Use Cases lösen
• Beobachtung durch UX Spezialisten
• Durch Kontakt & Gespräche mit dem Nutzer während der Nutzung können Schwächen identifiziert werden
Experten Evaluation
• Anhand von definierten Use Cases schlüpfen Experten in die Rolle der Nutzer
• Suche nach Usability-Problemen
• Vorschläge für Verbesserungen
Eye Tracking
• Analyse von Blickverläufen
• Visualisierung anhand einer Heatmap
• Entscheidung welche Inhalte aufgerufen werden & welche nicht
• Kann während einem Usability- oder Designtest mitlaufen
© 2015 HYVE AG 74
Literaturempfehlung
Don‘t make me thinkBy Steve Krug
Smashing UX DesignBy Jesmond Allen and James Chudley
100 Things Every Designer needs to know about peopleBy Susan M. Weinschenk, Ph.D.
Usable UsabilityBy Eric Reiss
Measuring the User Experience: Collecting, Analyzing, and presentingusability metricsBy Tom Tullis and Bill Albert
© 2015 HYVE AG 79
Vielen Dank!
Kristin Lewitzka
HYVE Innovation Community GmbH
Schellingstraße 45
80799 München
Final Dreams
3D, Virtual Reality & Digital Video
www.finaldreams.de