SDS*15: Kristin Lewitzka on UX-Design

1.215 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design
0 Kommentare
5 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.215
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
7
Aktionen
Geteilt
0
Downloads
59
Kommentare
0
Gefällt mir
5
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×