© 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?
Bedeut...
© 2015 HYVE AG
3
THE HYVE GROUP
HYVE
Innovation Research
HYVE
Innovation Design
HYVE
Innovation Community
Innovations- und...
© 2015 HYVE AG
4
Einführung HYVE
© 2015 HYVE AG
5
Dr. Michael Bartl
CEO
Michael Schmidt
CEO
Prof. Dr. Johann Füller
CEO
Vorstand:
Kompetenzen:
HYVE – the i...
© 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
Platform
IdeaNet
Co-Creation
Study
Innov...
© 2015 HYVE AG
8
HYVE Innovation Community
Solutions
© 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.
...
© 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?
Diskussion
5-10 Minuten
© 2015 HYVE AG
21
Was ist User Experience?
Gedanken & Anregungen
5-10 Minuten
© 2015 HYVE AG
22
Was ist User Experience nicht?
Gedanken & Anregungen
5-10 Minuten
© 2015 HYVE AG
23
Usability vs. User Experience
Nach der NutzungWährend der NutzungVor der Nutzung
Verarbeitung der erlebt...
© 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 e...
© 2015 HYVE AG
31
Usability & Design Regeln
8. Mit dem Nutzer kommunizieren
1. Rückmeldungen anzeigen
2. Nächste Schritte ...
© 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
Marketing
Spiel &
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...
© 2015 HYVE AG
64
Glifo (PS plugin)
Benefits
 schnell eigene Icon Font generieren
 Davor:
 Icons rausspeichern
 Icons ...
© 2015 HYVE AG
65
Jetpack (PS plugin)
Benefits
 Icons designen
 Raster -> Vektor
 Icons anordnen (für Sprites)
 Dual V...
© 2015 HYVE AG
66
Catalist (PS plugin)
Benefits
 alle Projektinformationen verknüpfen
 E-Mails, Ordner, Word Dokumente, ...
© 2015 HYVE AG
67
Specctr (PS plugin)
Benefits
 Bemassung: Höhe, Breite, Abstand zwischen Objekten,
Koordinaten, Abstand ...
© 2015 HYVE AG
68
Ink (PS plugin)
Benefits
 Ebenen-Stile: Schatten, Kontur, Verläufe,…
 Text: Schriftart, Größe, Farbe,…...
© 2015 HYVE AG
69
UX Pin
Benefits
 Wireframe
 Mockup
 Prototype
 UI Patterns, Elemente, Icons
(iOS, Android, Bootsrap,...
© 2015 HYVE AG
70
Usability – Ansätze & Methoden
© 2015 HYVE AG
71
JANINE
HOFER
admired, ambitious, creative
“I really would like to get
professional feedback on my
ideas ...
© 2015 HYVE AG
72
Use Cases & User Stories
Definition der Nutzungsumgebung
• Welche Hardware steht zur Verfügung?
• Welche...
© 2015 HYVE AG
73
User Experience Tests
Design Test
• Gutes Design ist die halbe Miete für die Akzeptanz eines
Mediums
• T...
© 2015 HYVE AG
74
Literaturempfehlung
Don‘t make me think
By Steve Krug
Smashing UX Design
By Jesmond Allen and James Chud...
© 2015 HYVE AG
79
Vielen Dank!
Kristin Lewitzka
HYVE Innovation Community GmbH
Schellingstraße 45
80799 München
Final Drea...
Nächste SlideShare
Wird geladen in …5
×

SDS*15: Kristin Lewitzka on UX-Design

1.621 Aufrufe

Veröffentlicht am

Kristin Lewitzka on UX-Design at SUMMER DESIGN SUMMIT * 2015

Veröffentlicht in: Design

SDS*15: Kristin Lewitzka on UX-Design

  1. 1. © 2015 HYVE AG 1 WWW: Was, wie & warum? User Experience Kristin LewitzkaLinz, 29. Juni 2015
  2. 2. © 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?
  3. 3. © 2015 HYVE AG 3 THE HYVE GROUP HYVE Innovation Research HYVE Innovation Design HYVE Innovation Community Innovations- und Marketing-Forschung Virtueller Kundendialog Industriedesign und Kreativberatung Interne & externe Innovation Communities und Social Media HYVE [hei:f] engl. hive: Bienenstock engl. hype: im Trend liegend finnisch hyve: die gute Tugend
  4. 4. © 2015 HYVE AG 4 Einführung HYVE
  5. 5. © 2015 HYVE AG 5 Dr. Michael Bartl CEO Michael Schmidt CEO Prof. Dr. Johann Füller CEO Vorstand: Kompetenzen: HYVE – the innovation company Fakten: Gegründet: 2000 Büros: München (Hauptsitz), Wien, Jakarta Mitarbeiter: 70 (Wissen: Market Research, Social Media, Innovation Management, Consultancy, Business Administration, IT & Design, Public Administration)
  6. 6. © 2015 HYVE AG 6 HYVE Referenzen aller deutschen DAX-Unternehmen nutzen Produkte & Services von HYVE.60%ÜBER
  7. 7. © 2015 HYVE AG 7 HYVE – ausgewählte Methoden Idea Contests Ideation Workshop Idea Platform IdeaNet Co-Creation Study Innovation Design Concept Test Innovation Marketing LeadUser Method Netnography Insights Community Snapshot Online Research Community Technology Scouting
  8. 8. © 2015 HYVE AG 8 HYVE Innovation Community Solutions
  9. 9. © 2015 HYVE AG 9
  10. 10. © 2015 HYVE AG 10
  11. 11. © 2015 HYVE AG 11 Was ist gutes Design & was macht es aus? Schreiben Sie ihre Antwort auf! 5-10 Minuten Mit Diskussion
  12. 12. © 2015 HYVE AG 12 Design & Typografie
  13. 13. © 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.
  14. 14. © 2015 HYVE AG 14 Design: Entwicklung
  15. 15. © 2015 HYVE AG 15 Design Stile SKEUMORPHISM 1991 METRO DESIGN 2012 FLAT DESIGN 2013 MATERIAL DESIGN 2014
  16. 16. © 2015 HYVE AG 16 Design Stile SKEUMORPHISM Seit 1991
  17. 17. © 2015 HYVE AG 17 Design Stile METRO DESIGN 2012
  18. 18. © 2015 HYVE AG 18 Design Stile FLAT DESIGN 2013
  19. 19. © 2015 HYVE AG 19 Design Stile MATERIAL DESIGN 2014
  20. 20. © 2015 HYVE AG 20 Was ist der Unterschied zwischen gutem Design und nutzer-zentriertem Design? Diskussion 5-10 Minuten
  21. 21. © 2015 HYVE AG 21 Was ist User Experience? Gedanken & Anregungen 5-10 Minuten
  22. 22. © 2015 HYVE AG 22 Was ist User Experience nicht? Gedanken & Anregungen 5-10 Minuten
  23. 23. © 2015 HYVE AG 23 Usability vs. User Experience Nach der NutzungWährend der NutzungVor der Nutzung Verarbeitung der erlebten Nutzung Aufgabenerledigung„Kopfkino“
  24. 24. © 2015 HYVE AG 24 Versprechen & Erwartung Erwartung Versprechen Erfüllung? „gut“ UX „schlecht“
  25. 25. © 2015 HYVE AG 25
  26. 26. © 2015 HYVE AG 26 Virtual Reality
  27. 27. © 2015 HYVE AG 27
  28. 28. © 2015 HYVE AG 28 UX – Look, Feel, Usability
  29. 29. © 2015 HYVE AG 29 Was macht gute UX aus?
  30. 30. © 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
  31. 31. © 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
  32. 32. © 2015 HYVE AG 32 Let‘s draw „How to make toast“ 5-10 Minuten allein 15 Minuten in Gruppenarbeit Warum?
  33. 33. © 2015 HYVE AG 33 Bedeutung von UX in verschiedenen Bereichen
  34. 34. © 2015 HYVE AG 34 UX: Automobilbranche - Werbung
  35. 35. © 2015 HYVE AG 35 UX: Automobilbranche - Werbung
  36. 36. © 2015 HYVE AG 36 UX: Automobilbranche - Werbung
  37. 37. © 2015 HYVE AG 37 UX: Automobilbranche - Ausstellung
  38. 38. © 2015 HYVE AG 38 UX: Automobilbranche - Ausstellung
  39. 39. © 2015 HYVE AG 39 UX: Automobilbranche - Ausstellung
  40. 40. © 2015 HYVE AG 40 UX: Automobilbranche - IAA
  41. 41. © 2015 HYVE AG 41 UX: Automobilbranche - IAA
  42. 42. © 2015 HYVE AG 42 UX: Automobilbranche - Apps
  43. 43. © 2015 HYVE AG 43 UX: Automobilbranche - Apps
  44. 44. © 2015 HYVE AG 44 UX: Automobilbranche - Service
  45. 45. © 2015 HYVE AG 45 Gesamt UX innerhalb der Marke Audi UX Auto Service AutohausAusstellung Apps Werbung Online
  46. 46. © 2015 HYVE AG 46 UX im Bereich Videospiele
  47. 47. © 2015 HYVE AG 47 UX & Videospiele
  48. 48. © 2015 HYVE AG 48 UX & Videospiele
  49. 49. © 2015 HYVE AG 49 UX & Videospiele
  50. 50. © 2015 HYVE AG 50 UX & Videospiele
  51. 51. © 2015 HYVE AG 51 UX & Videospiele
  52. 52. © 2015 HYVE AG 52 UX innerhalb von Videospielen UX Website Marketing Spiel & Editionen Videos (Trailer & Demos) Messen
  53. 53. © 2015 HYVE AG 53 UX im Bereich VR
  54. 54. © 2015 HYVE AG 54 Virtual Reality
  55. 55. © 2015 HYVE AG 55 Virtual Reality
  56. 56. © 2015 HYVE AG 56 Virtual Reality
  57. 57. © 2015 HYVE AG 57 Virtual Reality
  58. 58. © 2015 HYVE AG 58 UX als Markenerlebnis
  59. 59. © 2015 HYVE AG 59 UX & Markenerlebnisse
  60. 60. © 2015 HYVE AG 60 UX & Markenerlebnisse
  61. 61. © 2015 HYVE AG 61 UX & Markenerlebnisse
  62. 62. © 2015 HYVE AG 62 Design - Tools
  63. 63. © 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/
  64. 64. © 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/
  65. 65. © 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/
  66. 66. © 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/
  67. 67. © 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
  68. 68. © 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/
  69. 69. © 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/
  70. 70. © 2015 HYVE AG 70 Usability – Ansätze & Methoden
  71. 71. © 2015 HYVE AG 71 JANINE HOFER 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% Age Status Occupation Education Location 47 Single Financial Service BWL: LMU Munich *82 Munich 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 world Painting Finding Boyfriend Clean Design Slow download times Getting tracked unknown Wasting time Dog „Buddy“ Gaming Surfing & social media Working Gaming
  72. 72. © 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
  73. 73. © 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
  74. 74. © 2015 HYVE AG 74 Literaturempfehlung Don‘t make me think By Steve Krug Smashing UX Design By Jesmond Allen and James Chudley 100 Things Every Designer needs to know about people By Susan M. Weinschenk, Ph.D. Usable Usability By Eric Reiss Measuring the User Experience: Collecting, Analyzing, and presenting usability metrics By Tom Tullis and Bill Albert
  75. 75. © 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

×