Das diesem Dokument zugrundeliegende Vorhaben wurde mit Mitteln des Bundesministeriums für Bildung und Forschung
unter dem Förderkennzeichen 16OH22005 gefördert. Die Verantwortung für den Inhalt dieser Veröffentlichung liegt
beim Autor/bei der Autorin.
Software Engineering I
Appendix:
User Interface Design
10/16/2019 Software Design - WPF 1
Am besten ist es, die Weisheit von den Erfahrungen der anderen zu lernen.
lateinischen Sprichwort
Inhalt
Überblick UX
Herausforderungen beim UI Design
Überblick über die Vorgehensweise bei der UI Erstellung
User Analyse / Personas / Job Stories
Information Architecture
Content Strategy
Navigation Design
Visual Design
Visual Design Prozess
10/16/2019 Software Design - WPF 2
Überblick
10/16/2019 Software Design - WPF 3
Man gebe
mir einen
Überblick
bitte?
Was ist User Experience (UX)?
10/16/2019 Software Design - WPF 4
UX und Usability
10/16/2019 Software Design - WPF 5
UX & UI
10/16/2019 Software Design - WPF 6
10/16/2019 Software Design - WPF 7
Was sind nun die
Herausforderungen
?
Die Herausforderungen beim UI Design
10/16/2019 Software Design - WPF 8
Usability
Die wichtigsten Eigenschaften von UIs
10/16/2019 Software Design - WPF 9
Funktional sein Ansprechend gestaltet Leicht erlernbar Spaß machen Ermüdungsfreies arbeiten
ermöglichen Barrierefrei sein
HMIs allgemein
Vorgehensweise
10/16/2019 Software Design - WPF 10
Was muss ich
wann tun?
Vorgehensweise
10/16/2019 Software Design - WPF 11
Start
User Analyse
10/16/2019 Software Design - WPF 12
Was muss ich
denn da
machen?
User Analyse
10/16/2019 Software Design - WPF 13
User Analyse (II)
10/16/2019 Software Design - WPF 14
Personas
10/16/2019 Software Design - WPF 15
1 2
Personas -Leitfaden
Foto
Geschlecht
Alter
Zitat(e)
Gibt es physische oder sonstige Einschränkungen?
Was ist die Aufgabe/Ziele hat die Person?
Welche Erwartungen hat die Person?
Wie oft werden diese Aufgaben ausgeführt?
Welche fachlichen Kenntnisse besitzt die Person?
Wie gut ist die Person mit der Aufgabe vertraut?
10/16/2019 Software Design - WPF 16
Personas
10/16/2019 Software Design - WPF 17
Quelle:
http://www.ux-lady.com/diy-
user-personas/
Beispiel
Job Stories
10/16/2019 Software Design - WPF 18
Was ist das? Warum brauche ist das?
Situation, Motivation und Ziel einer Aufgabe
zu beschreiben, die erledigt werden soll.
Beschreibung WAS das System leisten soll.
Wie sehen Job Stories aus?
10/16/2019 Software Design - WPF 19
EN
WHEN ______<Situation>____________,
I WANT _____<Motivation>___________,
SO I CAN ____<Expected Outcome>_____
Job Story - Beispiel
10/16/2019 Software Design - WPF 20
Wenn ich im Internet einen interessanten Artikel finde und ich keine Zeit habe ihn zu lesen, möchte ich mir den Link merken können, damit ich ihn später lesen kann.
Situation
Motivation
Erwartung
Information Architecture
10/16/2019 Software Design - WPF 21
Was muss ich
denn da
machen?
Was ist IA?
10/16/2019 Software Design - WPF 22
Information Architecture
10/16/2019 Software Design - WPF 23
Ausgangspunkt: • Begriffliches
Modell • Datenmodelle
Content Strategy
10/16/2019 Software Design - WPF 24
Was muss ich
denn da
machen?
Content Strategy
10/16/2019 Software Design - WPF 25
1 2
Content Strategy – Beispiel SRCUM Tool
Content Wichtigkeit
Name des aktuellen Benutzers Sehr wichtig
Liste der von neuen User Stories für den Benutzer
Sehr wichtig
Liste der abgeschlossenen User Stories des Benutzers
wichtig
Liste der User Stories, an denen der Benutzer aktuell arbeitet
Weniger wichtig
Welche User Stories sind so ähnlich Weniger wichtig
Wurde eine User Stories schon bewertet Weniger wichtig
Ist der Benutzer eingelogged Sehr wichtig
Zu welchem Sprint gehört eine User Stories Wichtig
10/16/2019 Software Design - WPF 26
Content nach Login eines Benutzers
Einflussfaktoren auf die Content Strategy
10/16/2019 Software Design - WPF 27
Navigation Design
10/16/2019 Software Design - WPF 28
Was muss ich
denn da
machen?
Was ist „Navigation Design“?
10/16/2019 Software Design - WPF 29
Welche technischen Möglichkeiten gibt es ?
10/16/2019 Software Design - WPF 30
Was ist die Zielsetzung des Navigation Design genau?
10/16/2019 Software Design - WPF 31
Werden oft
auch als
Sections
bezeichnet.
Was hat alles Einfluss auf das Navigation Design?
• Welche Informationen sind am wichtigsten? siehe Content Strategy
• In welchen Schritten arbeitet der Anwender? siehe Job Stories
• Wie kann ich die Information am leichtesten zugreifbar machen? Was erwartet der Anwender?
• Was macht dem Anwender am meisten Spaß? Click, Geste,..
10/16/2019 Software Design - WPF 32
Navigation & Transition Feedback
10/16/2019 Software Design - WPF 33
Quelle: http://demos.jquerymobile.com/1.4.3/transitions/
Es ist wichtig dem
Benutzer Feedback zu
geben wenn er
navigiert?
Einige
Beispiele
Randnotiz: Site Map & Pages
10/16/2019 Software Design - WPF 34
Multi- vs.
Single-Page?
Aufteilung Content in HTML Dateien
10/16/2019 Software Design - WPF 35
WEB App Beispiel 1
10/16/2019 Software Design - WPF 36
Web App Beispiel 2
10/16/2019 Software Design - WPF 37
Design Kriterien
10/16/2019 Software Design - WPF 38
Kriterien
Kann ich den ganzen Inhalt auf einer Seite darstellen?
ja ja nein nein
Wie hoch ist die Schachtelungstiefe der Informationen?
gering mittel gering sehr hoch
SEO ist notwendig?
nein ja ja ja
Design Ansatz
Single Page Ansatz x
Hybrid Page Ansatz x x
Pure Multi Page Ansatz x
Visual Design
10/16/2019 Software Design - WPF 39
Was muss ich
denn da
machen?
Die Herausforderungen beim Visual Design
10/16/2019 Software Design - WPF 40
UI Designer
Skills + Technologien
+ Plattformen
Technologien
10/16/2019 Software Design - WPF 41
Aktivitäten des Visual Design
10/16/2019 Software Design - WPF 42
Atomic Design
10/16/2019 Software Design - WPF 43
Was muss ich
denn da
machen?
Basic Controls
10/16/2019 Software Design - WPF 44
UI Controls - Android
10/16/2019 Software Design - WPF 45
Quelle: https://developer.android.com/guide/topics/ui/controls.html
Buttons Text Fields Checkbox
Radio Buttons Toggle Buttons Spinner Date Time Picker
JQUERY MOBILE - Controls
10/16/2019 Software Design - WPF 46
Quelle: http://demos.jquerymobile.com/1.4.3/controlgroup/
Buttons Checkbox
Radio Buttons Flip Toggle Spinner Date Time Picker
Slider Table
Select Menu
Weitere Konzepte
• Tooltips
• Keyboard-Short Cuts
• Tab-Sequence (Barriere-Freiheit)
• Icons
10/16/2019 Software Design - WPF 47
CTRL-C, SHIFT+CTRL-X
Interaktion mit Gesten – Möglichkeiten
Ein Finger
Zwei Finger
Einfach Tip
Doppel Tip
Drei Finger
Finger Dauer
festhalten
Scroll down Spreizen (zoom +)
Auswählen Auswählen Drehen Auswählen
Scroll up Zusammenziehen
(zoom -)
10/16/2019 Software Design - WPF 48
UI Layout
10/16/2019 Software Design - WPF 49
Was muss ich
denn da
machen?
General Layout
10/16/2019 Software Design - WPF 50
General Layout - Beispiel
• Navigation-Bar
• Header
• Footer
• GRID Layout
• Horizontal / Vertikale Ausrichtung
10/16/2019 Software Design - WPF 51
Layout - Beispiel
10/16/2019 Software Design - WPF 52
Was stört
hier?
Layout - Beispiel
10/16/2019 Software Design - WPF 53
Schon
besser?
UI Visual Design Prozess
10/16/2019 Software Design - WPF 54
Wie gehe ich
in der Praxis
beim UI
Design vor?
UI Design Prozess
10/16/2019 Software Design - WPF 55
Sketching UI – Beispiel-Desktop
10/16/2019 Software Design - WPF 56
Sketching UI- Beispiel Smartphone
10/16/2019 Software Design - WPF 57
Wireframe- Beispiel
10/16/2019 Software Design - WPF 58
SmartDraw
Beispiel
Wireframe – Beispiel
10/16/2019 Software Design - WPF 59
Android App
mit Pencil
Wireframe Tools
Balsamiq Mockups
Axure
Pidoco
Visio
SmartDraw
InDesign CC
Moqups 2 (Online Tool)
::: und viele mehr
10/16/2019 Software Design - WPF 60
Weitere UI Design Aspekte
10/16/2019 Software Design - WPF 61
Muss ich noch
mehr wissen?
Weiter Design Aspekte - Überblick
Generelle Design
Aspekte
Farben Ausrichtung der
Elemente
Fehlermeldungen
Prüfung der Eingabedaten
Konsistenz
Branding
Internationalisierung
User Feedback /Progress
10/16/2019 Software Design - WPF 62
Wrap Up
10/16/2019 Software Design - WPF 63
Habe den
Überblick
verloren
Wrap Up
10/16/2019 Software Design - WPF 64
UI Design Schritte im Überblick
10/16/2019 Software Design - WPF 65
Wrap Up – Visual Design
10/16/2019 Software Design - WPF 66
Was muss ich wissen?
10/16/2019 Software Design - WPF 67
Was muss ich
mir merken?
Was muss ich wissen?
• Ich kenne die allgemeine Vorgehensweise beim Design eines User Interfaces.
• Ich kenne die Herausforderungen beim Visual Design.
• Ich kann erklären was User Experience ist?
• Ich kann den Zusammenhang zwischen User Experience und Usability erklären.
• Ich kenne die wichtigsten Eigenschaften von UIs.
10/16/2019 Software Design - WPF 68
Was muss ich wissen?
• Ich kann erklären, was User Analysis ist.
• Ich kann erklären, warum User Analyse wichtig ist.
• Ich kann erklären was eine Job Story ist.
• Ich kann erklären, was Information Architecture ist.
• Ich kann erklären, was Content Strategy ist.
• Ich kann erklären, was Navigation Design ist.
• Ich kann erklären, was Visual Design ist.
• Ich kann erklären, was Wireframes sind.
• Ich kann erklären was UI-Sketching ist.
10/16/2019 Software Design - WPF 69
Was muss ich wissen?
• Ich kann Personas erstellen.
• Ich kann Job Stories erstellen.
• Ich kann einfache Sketchnote und Wireframes für UI entwerfen.
10/16/2019 Software Design - WPF 70