ux erklaert 01 / ux overview 01

User Experience

Was ist eigentlichUX Design?

A short introduction

MJK

Definition User Experience Design

Warum UX Design?

Was beinhaltet UX Design?

Bereiche aus denen sich UX zusammensetzt

Die einzelnen Bereiche

Designprozess, wie beginnen?

Personas

Szenario

Use Case

UX Beispiel Visitenkarte

List of Contents

Definition User Experience Design

MJK

Definition User Experience Design

Persönlicher subjektiver „gefühlter“ Eindruck eines

Anwenders von einem Produkt.

Zusammenspiel aus:

Erwartung

Eindruck

Erfahrung

Bewertung

MJK

MJK Definition User Experience Design

Erwartung

MJK

Eindruck

Definition User Experience Design

MJK

Erfahrung

Definition User Experience Design

MJK

Bewertung

Definition User Experience Design

Definition User Experience DesignWikipedia

explains all aspects of a person’s experience with the system or product

generates cohesive, predictive and desirable designs

addressing all aspects of a product or service as perceived by users

is based on holistic considerations

includesInterface

Graphics

Industrial design

Interaction

MJK

User Experience vs. Usability?

Schwer usable

Die Flasche ist mit einem Korken luftdicht verschlossen

Man benötigt ein Werkzeug um den Korken zu entfernen

Das Verschließen ist umständlich

Gute Usability

Die Flasche ist mit einem Schraubverschluss verschlossen

Einfach zu öffnen ohne Werkzeug

Das Verschließen ist einfach

MJK

MJK

User Experience combines Usability

The bottle is well closed

Easy to open

Easy to close

Delivers an experience or when opening it

User Experience includes Usability

Warum User Experience Design?

Beziehung schaffen

Benutzer glücklich machenBenutzer erreicht das Ziel

mühelos

mit Freude

Produkte schaffen, die das Leben einfacher machen

Nicht komplizierter!

MJK

MJK

Dies zu vermeiden Dies zu machen

Warum User Experience Design?

Definition User Experience Design

Warum UX Design?

Was beinhaltet UX Design?

Bereiche aus denen sich UX zusammensetzt

Die einzelnen Bereiche

Designprozess, wie beginnen?

Personas

Szenario

Use Case

UX Beispiel Visitenkarte

User ExperienceMJK

What UX Design involves

Creativity

Prototyping

User Research

Scenarios

Usability Testing

Art

Design Theory

Flow Charts

Marketing

Psychology

Design

Interviews

Empathy

to think for the user

MJK

Definition User Experience Design

Warum UX Design?

Was beinhaltet UX Design?

Bereiche aus denen sich UX zusammensetzt

Die einzelnen UX Bereiche

Designprozess, wie beginnen?

Personas

Szenario

Use Case

UX Beispiel Visitenkarte

User ExperienceMJK

UX Design Disciplines

Entspricht der Zielgruppe oder des Landes

Form, Symbole, Linien, Farbe, Dimensionen..

Musik oder gesprochene Worte, zB. VoIP. VR

Animation, Slides, Bewegung

Informationsaufbereitung, Inhalt, Schrift, Beziehungen,

Berührungspunkte, Gruppierungen, Controls

Abläufe, Systemverhalten, HCI

Bsp. 01

Bsp. 02

Bsp. 03

Bsp. 04

MJK

Definition User Experience Design

Warum UX Design?

Was beinhaltet UX Design?

Bereiche aus denen sich UX zusammensetzt

Die einzelnen Bereiche

Designprozess, wie beginnen?

Personas

Szenario

Use Case

UX Beispiel Visitenkarte

User ExperienceMJK

UX Prozess, wie beginnen?

Was ist das Ziel?

Wer sind die Benutzer? (Personas)

Was ist das Problem?

Wie sieht ein Szenario aus?

Wie sieht ein einzelnes Use Case aus?

Fragen stellen nach:

MJK

UX Process Personas

Name: Klaus BaumwaldAlter: 34Beruf: Außendienstmitarbeiter

für ein Pharmaunternehmen

Ziel: Will seinen Weg zur Arbeit und wieder zurück aufzeichnen.

Person: Hat Familie, ein Kind, macht gerne Sport und ist ein sehr zuverlässiger Mitarbeiter. Er ist regelmäßig im Internet und kommt mit den üblichen Officeprogrammen gut zurecht. Er liebt neue Gimmicks und besitzt privat ein Smartphone und ein iPad.

MJK

MJK UX Process Personas

Persona Geschlecht, Alter Beruf, Situation Hobbies Rolle Ziele/Erwartungen Technik Affinität

UX Process - User Story / Journey

Allgemein verständliche Geschichte erzählen, wie die Zielgruppe das Produkt benutzt.

Der Benutzer agiert zum ersten Mal.

Ein normaler User ist kein Entwickler.

MJK

UX Process - User Scenario

Konkretes Szenario entwerfen.

Sich auf einen kleinen Prozessschritt konzentrieren

Realistische Annahmen treffen

Der Idealfall (Expert Walkthrough) wird skizziert

MJK

Definition User Experience Design

Warum UX Design?

Was beinhaltet UX Design?

Bereiche aus denen sich UX zusammensetzt

Die einzelnen Bereiche

Designprozess, wie beginnen?

Personas

Szenario

Use Case

UX Beispiel Visitenkarte

User ExperienceMJK

MJK UX Process – Example V-Card

Companyname

Name of the Person

Phonenumber

Email

Adress

As usually:

Pharma

Klaus Baumwald

Telefonnummer: 1 2345 6789 E-Mail@Baumwald.dewww.muster.mann12345 MusterstadtMusterstraße 5

User Journey Today

Vcardhandover Purse Get out

Transfer Data

ContactClient

Positive

Negative

„Great, nice talk“

„Why does itbend andfold…?“

„Why does itstick in theslot…? “

„Uh,must transferthe whole data to

outlook…?“

„If work will bethe same…?“

MJK

UX Process Getting the Problem

Was ist das Problem des Benutzers?

Lösung für den Benutzer?

1. Visitenkarten verkanten und

verknicken.

2. Kontaktdaten müssen

umständlich übertragen werden

1. Ohne Ecken kein Verkanten

2. Einpflegen der Daten per

Smartphone und QR-Code

MJK

UX Process Optimized

Schon ein Wireframe

Prototyp Test

Neue Technologie

MJK

MJK UX Process – Example V-Card

Problem solved

Pharma

Klaus Baumwald

Telefonnummer: 1 2345 6789 E-Mail@Baumwald.dewww.muster.mann12345 MusterstadtMusterstraße 5

- Round edges can not stuck in the pocket

- Apps can read the QR-Code, so make itprominent

- Cardreaders can readthe letters, so make it big

QR Reader, Barcode Scanner, Business Card Reader, Camcard

User Journey Tomorrow

Vcardhandover Purse Get out

Transfer Data

ContactClient

Positive

Negative

„Great, nice talk“ „This was easy!“ „Gets out Perfect“

„Cool, with just one scan “

„Work togetherwill be great!“

MJK

WireframingInterface

Information

Layout

GestaltungspsychologieÄsthetik

Look&Feel

Joy-of-Use

User Experience Next

TestmethodenPapertesting

A-B Test

Patterns

BegriffeGlossar

MJK

Thank you!

User Experience IntroductionMJK