Tweet
Tweet

Slide 1

Slide 1 text

JÖRG NEUMANN | NeoGeeks GmbH USER EXPERIENCE DESIGN FÜR ENTWICKLER

Slide 2

Slide 2 text

JÖRG NEUMANN THEMEN • Frontend Technologies • Mobile Development • Machine Learning • Consulting, Coaching, Training KONTAKT • Mail: [email protected] • Twitter: @JoergNeumann • Web: https:/ /www.neogeeks.de

Slide 3

Slide 3 text

WAS IST USABILITY?

Slide 4

Slide 4 text

WAS IST USABILITY?

Slide 5

Slide 5 text

WAS IST USABILITY?

Slide 6

Slide 6 text

WAS IST USER EXPERIENCE? Foto: Taylor Herring

Slide 7

Slide 7 text

UX ENGINEERING

Slide 8

Slide 8 text

DIETER RAMS

Slide 9

Slide 9 text

UM WAS ES NICHT GEHT • ES GEHT NICHT UM AUSSEHEN! • ES GEHT NICHT UM TECHNOLOGIE! • ES GEHT NICHT UM DESIGNER! • ES GEHT NICHT UM ENTWICKLER! | | | |

Slide 10

Slide 10 text

ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER!

Slide 11

Slide 11 text

UM WAS ES GEHT • WER IST DER ANWENDER? • WAS IST SEINE PRIMÄRE TÄTIGKEIT? • WAS SIND HERAUSFORDERUNGEN? • WAS KÖNNTE IHM HELFEN?

Slide 12

Slide 12 text

Entwerfen Entwickeln Analysieren VORGEHEN validieren validieren zuhören, beobachten, lernen | > Skizzen, Wireframes, Storyboards | > MVP bauen, | > Gebrachs- tauglichkeit testen

Slide 13

Slide 13 text

Focus | • | | | | | | | | | | | • • • • • Scope Persona ANALYSE Analyse des Anwenders Analyse der primären Tätigkeit Analyse der Umgebung

Slide 14

Slide 14 text

DESIGN PRINCIPLES

Slide 15

Slide 15 text

DESIGN PRINCIPLES ALLGEMEINE GESTALTUNGSREGELN • zum visuellen System • kognitive und psychologische Effekte • Intuition ZWECK • Besseres Verständnis für die Gestaltung • Nicht alle Regeln können eingehalten werden

Slide 16

Slide 16 text

DESIGN PRINCIPLES Visual System • Inattentional Blindness • Gestalt Design Laws (proximity, similarity, …) Cognitive • Hick’s Law • Forgiveness • Gutenberg Diagram Intuitive • Horror Vacui • Contour Bias • Aesthetics Psychological • Status Quo Bias • Expectation Effects • Unconscious Influence

Slide 17

Slide 17 text

INATTENTIONAL BLINDNESS TEST • Du siehst gleich hintereinander drei Bilder mit Tieren • Auf welchem ist ein Schwein abgebildet?

Slide 18

Slide 18 text

INATTENTIONAL BLINDNESS

Slide 19

Slide 19 text

INATTENTIONAL BLINDNESS

Slide 20

Slide 20 text

INATTENTIONAL BLINDNESS

Slide 21

Slide 21 text

INATTENTIONAL BLINDNESS • Wie viele Schweine hast Du gesehen? • Und wie viele Hasen?

Slide 22

Slide 22 text

INATTENTIONAL BLINDNESS Wo ist hier der Hase?

Slide 23

Slide 23 text

HICK‘S LAW

Slide 24

Slide 24 text

PROXIMITY

Slide 25

Slide 25 text

PROXIMITY

Slide 26

Slide 26 text

PROXIMITY My Web App http://www.url.com text Vorname text Nachname text text PLZ/Ort text Straße Abstand > > | text Vorname text Nachname text text PLZ/Ort text Straße

Slide 27

Slide 27 text

CONTOUR BIAS Auf welchem Sessel willst Du sitzen?

Slide 28

Slide 28 text

My Web App http://www.url.com CONTOUR BIAS Auf welchen Button willst Du drücken? Speichern Speichern

Slide 29

Slide 29 text

STATUS-QUO BIAS „Die meisten Anwender würden ‚Ja‘ sagen“

Slide 30

Slide 30 text

Konzentration auf das Wesentliche | > Produkte sehen teuer aus | > HORROR VACUI

Slide 31

Slide 31 text

Was wird hier alles verkauft? | > Produkte sehen billig aus | >

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Vertraust Du dieser Bank? | >

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

ANWENDUNG

Slide 37

Slide 37 text

Window File Insert View Format Home Module text text text text text text text text text text text text text text text text text text text text text text text text text text text Navigation Daten Status text text text text DATEN CHROME NAVIGATION

Slide 38

Slide 38 text

Window Text Text Text Text Text Text Titel Text Text Text Text Text Text Text Text Text Text CHROME NAVIGATION DATEN

Slide 39

Slide 39 text

FARBEN Palette von Helligkeiten/ Sättigungen dieser Farbtöne 1 bis max. 3 Hauptfarbtöne im Interface | >

Slide 40

Slide 40 text

FARBEN Sehr klares Design. Schnell verständlich Aber: Dekoration und Interaktion haben dieselbe Farbe!

Slide 41

Slide 41 text

FARBEN ÜBERSCHRIFT Erstellen Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Abbrechen Erstellen primäres Kommando sekundäres Kommando | > Rahmen/ Header | > Schrift | > Hintergrund | >

Slide 42

Slide 42 text

LAYERING So schön ist der Königssee Wichtige Information partieller Overlay vollständiger Overlay Buchen Schatten- wurf

Slide 43

Slide 43 text

Wichtiges groß Unwichtiges klein Wichtiges oben Unwichtiges unten

Slide 44

Slide 44 text

BEISPIELE

Slide 45

Slide 45 text

My Web App http://www.url.com text Vorname text Nachname text text PLZ/Ort text Straße Was ist primär, was sekundär? Was ist das Standard- kommendo? Speichern Verwerfen Löschen Hilfe

Slide 46

Slide 46 text

My Web App http://www.url.com text Vorname text Nachname text PLZ/Ort text Straße sekundäre Kommendos primäre Kommendos Hilfe Löschen Verwerfen Speichern text

Slide 47

Slide 47 text

My Web App http://www.url.com text Vorname text Nachname text PLZ/Ort text Straße Speichern Verwerfen Hilfe Löschen primäre Aktion | > text

Slide 48

Slide 48 text

My Web App http://www.url.com text Vorname text Nachname text PLZ/Ort text Straße Speichern Verwerfen Hilfe Löschen text | | | | | | | | | > > von links nach rechts

Slide 49

Slide 49 text

My Web App http://www.url.com text Vorname text Nachname text PLZ/Ort text Straße Speichern Verwerfen Hilfe Löschen text | | | | | | | > | | > von oben nach unten

Slide 50

Slide 50 text

My Web App http://www.url.com text Vorname text Nachname text text PLZ/Ort text Straße Speichern Verwerfen eine Spalte = leichter lesbar | > Hilfe Löschen

Slide 51

Slide 51 text

My Web App http://www.url.com text Vorname text Nachname text text PLZ/Ort text Straße Speichern Verwerfen Account löschen Hilfe für die Eingabe Sekundäre Kommandos als Link | > Wofür? | >

Slide 52

Slide 52 text

My Web App http://www.url.com text Vorname text Nachname text text PLZ/Ort text Straße Account löschen Hilfe für die Eingabe Runde Formen Speichern

Slide 53

Slide 53 text

My Web App http://www.url.com Profil anlegen Speichern Hilfe für die Eingabe Vorname Nachname Ort PLZ Straße abgesetzter Aktionsbereich Kontext Card Design bildet einen Rahmen für den Kontext | >

Slide 54

Slide 54 text

My Web App http://www.url.com Profil anlegen Speichern Hilfe für die Eingabe Vorname Nachname Ort PLZ Straße Wasserzeichen- text ersetzt Labels | > Direkte Interaktion ersetzt Button | >

Slide 55

Slide 55 text

My Web App http://www.url.com Profil anlegen Speichern Hilfe für die Eingabe Mark Müller Pinneberg 25421 Hauptstraße 4 Kontext- abhängige Kommandos Editier Modus

Slide 56

Slide 56 text

My Web App http://www.url.com Profil Vorname Nachname Ort PLZ Straße Speichern Justin Small Web Developer @justinsmall Ändern Account löschen Kontext- abhängige Kommandos Lese Modus

Slide 57

Slide 57 text

My Web App http://www.url.com Speichern Verwerfen Löschen Hilfe text Vorname text Nachname text text PLZ/Ort text Straße VORHER / NACHHER My Web App http://www.url.com Profil anlegen Speichern Hilfe für die Eingabe Mark Müller Pinneberg 25421 Hauptstraße 4

Slide 58

Slide 58 text

UI vs. UX Farbe Interaktion Form Typografie Fähigkeit Verhalten | >

Slide 59

Slide 59 text

BEHAVIOR

Slide 60

Slide 60 text

FAZIT UX DESIGN • UX ist nicht nur ein Thema für Designer • Jeder kann UX Design lernen! • UX in den Entwicklungsprozess integrieren DESIGN PRINCIPLES • Ein gutes Verständnis von Design Principles hilft! • Reviews und Tests sind wichtig! ERGEBNIS • Deine Anwender werden dich lieben!

Slide 61

Slide 61 text

Q & A

Slide 62

Slide 62 text

RESSOURCEN OPEN SOURCE COLLECTION OF DESIGN PRINCIPLES • https:/ /principles.design/ GOOGLE MATERIAL COLOR PICKERS • https:/ /materialuicolors.co/ SKETCH2CODE • https:/ /sketch2code.azurewebsites.net/