© 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