SDS*15: Kristin Lewitzka on UX-Design

WWW: Was, wie & warum?

User Experience

Kristin LewitzkaLinz, 29. Juni 2015

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?

THE HYVE GROUP

HYVEInnovation Research

HYVEInnovation Design

HYVEInnovation Community

Innovations- und Marketing-Forschung

Virtueller KundendialogIndustriedesign und

Kreativberatung

Interne & externe Innovation Communities und Social

HYVE [hei:f]engl. hive: Bienenstockengl. hype: im Trend liegendfinnisch hyve: die gute Tugend

Einführung HYVE

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)

HYVE Referenzen

aller deutschen DAX-Unternehmen

nutzen Produkte & Services von HYVE.60%ÜBER

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

HYVE Innovation CommunitySolutions

Was ist gutes Design & was macht es aus?

Schreiben Sie ihre Antwort auf!5-10 Minuten

Mit Diskussion

Design & Typografie

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.

Design: Entwicklung

Design Stile

SKEUMORPHISM

METRO DESIGN

FLAT DESIGN

MATERIAL DESIGN

Design Stile

SKEUMORPHISM

Seit 1991

Design Stile

METRO DESIGN

Design Stile

FLAT DESIGN

Design Stile

MATERIAL DESIGN

Was ist der Unterschied zwischen gutem Design und nutzer-zentriertem Design?

Diskussion5-10 Minuten

Was ist User Experience?

Gedanken & Anregungen5-10 Minuten

Was ist User Experience nicht?

Gedanken & Anregungen5-10 Minuten

Usability vs. User Experience

Nach der NutzungWährend der NutzungVor der Nutzung

Verarbeitung der erlebten Nutzung

Aufgabenerledigung„Kopfkino“

Versprechen & Erwartung

Erwartung Versprechen

Erfüllung?

„gut“ UX „schlecht“

Virtual Reality

UX – Look, Feel, Usability

Was macht gute UX aus?

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

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

Let‘s draw „How to make toast“

5-10 Minuten allein

15 Minuten in Gruppenarbeit

Warum?

Bedeutung von UX in verschiedenen Bereichen

UX: Automobilbranche - Werbung

UX: Automobilbranche - Ausstellung

UX: Automobilbranche - IAA

UX: Automobilbranche - Apps

UX: Automobilbranche - Service

Gesamt UX innerhalb der Marke Audi

Service

AutohausAusstellung

Online

UX im Bereich Videospiele

UX & Videospiele

UX innerhalb von Videospielen

Website

MarketingSpiel & Editionen

Videos (Trailer & Demos)

Messen

UX im Bereich VR

Virtual Reality

UX als Markenerlebnis

UX & Markenerlebnisse

Design - Tools

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/

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/

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/

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/

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

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/

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/

Usability – Ansätze & Methoden

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, %)

AgeStatusOccupationEducationLocation

47SingleFinancial ServiceBWL: LMU Munich *82Munich

ADJECTIVES(PERSONALITY)

MOTIVATIONS(PERSONALITY)

TECHNOLOGY(SKILLS)

Extrovert

Sensing

Thinking

Judging

Creative

Incentive

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

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

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

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

Vielen Dank!

Kristin Lewitzka

HYVE Innovation Community GmbH

Schellingstraße 45

80799 München

Final Dreams

3D, Virtual Reality & Digital Video

www.finaldreams.de

SDS*15: Kristin Lewitzka on UX-Design

Design

Transcript of SDS*15: Kristin Lewitzka on UX-Design

Gelelektrophoreseam Isas SDS-Page 2D. SDS-PAGE Natrium – Dodecyl – Sulfat – Polyacrylamid Gelelektrophorese Kontinuierliche PAGE Diskontinuierliche PAGE.

UX User Experience ... Mobile Apps - UI & UX

Functional Analysis of Barley MLA-triggered Disease ... · 2.2.4. Protein analysis 2.2.4.1. Denaturing SDS-polyacrylamide gel electrophoresis All denaturing SDS-polyacrylamide gel

Tutorial Agile UX

Optimierte UX durch Nutzerbeiräte

UX Controlling

„Die Magnetresonanztomographie, abgekürzt MRT oder MR, ist ... · Die Lösung wird mittels eines LEAN UX Workshops erarbeitet Aber was ist LEAN UX? Was ist LEAN UX? Vorgehensmodell

UX im Smart Home

Lexus UX Preisliste...1 Erster Wert für UX 250h mit Frontantrieb (FWD). Zweiter Wert in Klammern für UX 250h mit E-FOUR Antrieb. Zweiter Wert in Klammern für UX 250h mit E-FOUR

UX & Design: UX-Optimierungen in SharePoint umsetzen

Kanban und UX

Digitale Medien, UX-UI Design > Social Media · Digitale Medien, UX-UI Design > Social Media Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 31.08.2016

Foto: Carsten Kottke Foto: Kristin Laukamp Foto: Kristin ... · Foto: Kristin Laukamp, Freilichtbühne Coesfeld • Greven-Reckenfeld Oelde- • Stromberg • Billerbeck • Coesfeld

Maestro UX - library.e.abb.com · PDF fileMaestro UX Übersicht Merkmale und Nutzen Maestro UX ist ein leistungsstarkes Mensch-System-Interface (MSI) speziell für das unternehmensweite

UX User Experience

Inhalt Theorie Einleitung SDS-PAGE SDS-PAGE Probenvorbereitung Coomassie Gelfärbung Versuchsdurchführung Ergebnisse Literatur [1] 2 SDS-PAGE Meike Flentje.

2_block 1.3 Erna Kristin 2

Kristin Sassen's Portfolio

STARK UND ZUVERLÄSSIG. - Elektrowerkzeuge€¦ · beton bohrer und meissel sds-max hammerbohrer sds-plus hammerbohrer meissel www. .de stark und zuverlÄssig.

Inbetriebnahme SDS MDG1