Das diesem Dokument zugrundeliegende Vorhaben wurde mit ......SmartDraw Beispiel . Wireframe – Beispiel 10/16/2019 Software Design - WPF 59 Android App mit Pencil . Wireframe Tools

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


Überblick


Man gebe

mir einen

Überblick

bitte?

Was ist User Experience (UX)?


UX und Usability


UX & UI



Was sind nun die

Herausforderungen

?

Die Herausforderungen beim UI Design


Usability

Die wichtigsten Eigenschaften von UIs


Funktional sein Ansprechend gestaltet Leicht erlernbar Spaß machen Ermüdungsfreies arbeiten

ermöglichen Barrierefrei sein

HMIs allgemein

Vorgehensweise


Was muss ich

wann tun?

Vorgehensweise


Start

User Analyse


Was muss ich

denn da

machen?

User Analyse


User Analyse (II)


Personas


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?


Personas


Quelle:

http://www.ux-lady.com/diy-

user-personas/

Beispiel

http://www.ux-lady.com/diy-user-personas/










Job Stories


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?


EN

WHEN ______<Situation>____________,

I WANT _____<Motivation>___________,

SO I CAN ____<Expected Outcome>_____

Job Story - Beispiel


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



Was muss ich

denn da

machen?

Was ist IA?




Ausgangspunkt: • Begriffliches

Modell • Datenmodelle

Content Strategy


Was muss ich

denn da

machen?

Content Strategy


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


Content nach Login eines Benutzers

Einflussfaktoren auf die Content Strategy


Navigation Design


Was muss ich

denn da

machen?

Was ist „Navigation Design“?


Welche technischen Möglichkeiten gibt es ?


Was ist die Zielsetzung des Navigation Design genau?


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,..


Navigation & Transition Feedback


Quelle: http://demos.jquerymobile.com/1.4.3/transitions/

Es ist wichtig dem

Benutzer Feedback zu

geben wenn er

navigiert?

Einige

Beispiele

http://demos.jquerymobile.com/1.4.3/transitions/

Randnotiz: Site Map & Pages


Multi- vs.

Single-Page?

Aufteilung Content in HTML Dateien


WEB App Beispiel 1


Web App Beispiel 2


Design Kriterien


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


Was muss ich

denn da

machen?

Die Herausforderungen beim Visual Design


UI Designer

Skills + Technologien

+ Plattformen

Technologien


Aktivitäten des Visual Design


Atomic Design


Was muss ich

denn da

machen?

Basic Controls


UI Controls - Android


Quelle: https://developer.android.com/guide/topics/ui/controls.html

Buttons Text Fields Checkbox

Radio Buttons Toggle Buttons Spinner Date Time Picker

https://developer.android.com/guide/topics/ui/controls.html

JQUERY MOBILE - Controls


Quelle: http://demos.jquerymobile.com/1.4.3/controlgroup/

Buttons Checkbox

Radio Buttons Flip Toggle Spinner Date Time Picker

Slider Table

Select Menu

http://demos.jquerymobile.com/1.4.3/controlgroup/

Weitere Konzepte

• Tooltips

• Keyboard-Short Cuts

• Tab-Sequence (Barriere-Freiheit)

• Icons


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


UI Layout


Was muss ich

denn da

machen?

General Layout


General Layout - Beispiel

• Navigation-Bar

• Header

• Footer

• GRID Layout

• Horizontal / Vertikale Ausrichtung


Layout - Beispiel


Was stört

hier?

Layout - Beispiel


Schon

besser?

UI Visual Design Prozess


Wie gehe ich

in der Praxis

beim UI

Design vor?

UI Design Prozess


Sketching UI – Beispiel-Desktop


Sketching UI- Beispiel Smartphone


Wireframe- Beispiel


SmartDraw

Beispiel

Wireframe – Beispiel


Android App

mit Pencil

Wireframe Tools

Balsamiq Mockups

Axure

Pidoco

Visio

SmartDraw

InDesign CC

Moqups 2 (Online Tool)

::: und viele mehr


http://www.balsamiq.com/products/mockups

http://www.axure.com/

http://pidoco.com/

http://visio.microsoft.com/

https://www.smartdraw.com/

http://www.adobe.com/products/indesign.html

https://moqups.com/

Weitere UI Design Aspekte


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


Wrap Up


Habe den

Überblick

verloren

Wrap Up


UI Design Schritte im Überblick


Wrap Up – Visual Design


Was muss ich wissen?


Was muss ich

mir merken?


• 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.



• 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.



• Ich kann Personas erstellen.

• Ich kann Job Stories erstellen.

• Ich kann einfache Sketchnote und Wireframes für UI entwerfen.


Documents

Das diesem Dokument zugrundeliegende Vorhaben wurde mit ......SmartDraw Beispiel . Wireframe – Beispiel 10/16/2019 Software Design - WPF 59 Android App mit Pencil . Wireframe Tools