• Keine Ergebnisse gefunden

27_Appendix.002-Software Design-UI

N/A
N/A
Protected

Academic year: 2022

Aktie "27_Appendix.002-Software Design-UI"

Copied!
71
0
0

Wird geladen.... (Jetzt Volltext ansehen)

Volltext

(1)

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.

(2)

Software Engineering I

Appendix:

User Interface Design

Am besten ist es, die Weisheit von den Erfahrungen der anderen zu lernen.

lateinischen Sprichwort

(3)

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

(4)

Überblick

Man gebe mir einen Überblick

bitte?

(5)

Was ist User Experience (UX)?

(6)

UX und Usability

(7)

UX & UI

(8)

Was sind nun die Herausforderungen

?

(9)

Die Herausforderungen beim UI Design

(10)

Usability

Die wichtigsten Eigenschaften von UIs

 Funktional sein

 Ansprechend gestaltet

 Leicht erlernbar

 Spaß machen

 Ermüdungsfreies arbeiten ermöglichen

 Barrierefrei sein

HMIs

allgemein

(11)

Vorgehensweise

Was muss ich

wann tun?

(12)

Vorgehensweise

Start

(13)

User Analyse

Was muss ich denn da

machen?

(14)

User Analyse

(15)

User Analyse (II)

(16)

Personas

1 2

(17)

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?

(18)

Personas

Quelle:

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

Beispiel

(19)

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.

(20)

Wie sehen Job Stories aus?

EN

WHEN ______<Situation>____________,

I WANT _____<Motivation>___________,

SO I CAN ____<Expected Outcome>_____

(21)

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

(22)

Information Architecture

Was muss ich denn da

machen?

(23)

Was ist IA?

(24)

Information Architecture

Ausgangspunkt:

• Begriffliches Modell

• Datenmodelle

(25)

Content Strategy

Was muss ich denn da

machen?

(26)

Content Strategy

2 1

(27)

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

Content nach Login eines Benutzers

(28)

Einflussfaktoren auf die Content Strategy

(29)

Navigation Design

Was muss ich denn da

machen?

(30)

Was ist „Navigation Design“?

(31)

Welche technischen Möglichkeiten gibt

es ?

(32)

Was ist die Zielsetzung des Navigation Design genau?

Werden oft

auch als

Sections

bezeichnet.

(33)

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

(34)

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

(35)

Randnotiz: Site Map & Pages Multi- vs.

Single-Page?

(36)

Aufteilung Content in HTML Dateien

(37)

WEB App Beispiel 1

(38)

Web App Beispiel 2

(39)

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

(40)

Visual Design

Was muss ich denn da

machen?

(41)

Die Herausforderungen beim Visual Design

UI Designer Skills

+ Technologien

+ Plattformen

(42)

Technologien

(43)

Aktivitäten des Visual Design

(44)

Atomic Design

Was muss ich denn da

machen?

(45)

Basic Controls

(46)

UI Controls - Android

Buttons Text Fields Checkbox

Radio Buttons Toggle Buttons Spinner Date Time Picker

(47)

JQUERY MOBILE - Controls

Buttons Checkbox

Radio Buttons Flip Toggle Spinner Date Time Picker

Slider Table

Select Menu

(48)

Weitere Konzepte

Tooltips

Keyboard-Short Cuts

Tab-Sequence (Barriere-Freiheit)

Icons

CTRL-C,

SHIFT+CTRL-X

(49)

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

(50)

UI Layout

Was muss ich denn da

machen?

(51)

General Layout

(52)

General Layout - Beispiel

Navigation-Bar

Header

Footer

GRID Layout

Horizontal / Vertikale Ausrichtung

(53)

Layout - Beispiel

Was stört

hier?

(54)

Layout - Beispiel

Schon

besser?

(55)

UI Visual Design Prozess

Wie gehe ich in der Praxis

beim UI

Design vor?

(56)

UI Design Prozess

(57)

Sketching UI – Beispiel-Desktop

(58)

Sketching UI- Beispiel Smartphone

(59)

Wireframe- Beispiel

SmartDraw

Beispiel

(60)

Wireframe – Beispiel

Android App

mit Pencil

(61)

Wireframe Tools

Balsamiq Mockups

Axure

Pidoco

Visio

SmartDraw

InDesign CC

Moqups 2 (Online Tool)

::: und viele mehr

(62)

Weitere UI Design Aspekte

Muss ich noch

mehr wissen?

(63)

Weiter Design Aspekte - Überblick

Generelle Design Aspekte

Farben

Ausrichtung der Elemente

Fehlermeldungen

Prüfung der

Eingabedaten Konsistenz

Branding Internationalisierung

User Feedback

/Progress

(64)

Wrap Up

Habe den

Überblick

verloren 

(65)

Wrap Up

(66)

UI Design Schritte im Überblick

(67)

Wrap Up – Visual Design

(68)

Was muss ich wissen?

Was muss ich

mir merken?

(69)

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.

(70)

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.

(71)

Was muss ich wissen?

• Ich kann Personas erstellen.

• Ich kann Job Stories erstellen.

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

Referenzen

ÄHNLICHE DOKUMENTE

Gerade, was den digitalen Zugang zu Scans be- trifft, wäre eine rechtliche Regelung hier hilfreich – wenn das Ausgangsmaterial gemeinfrei ist, sollte auch die digitale Re-

Der Hype um die Luftreiniger hat aber auch Produkte auf unseren Markt gespült, die nicht unter diesen Bedingungen gefertigt werden und dann durchaus eine Gefahr darstellen.. Ganz

Auflage im Überblick Strukturierte Erfassung von Symptomen und Exazerbationen Um eine geeignete Therapie bei Men- schen mit COPD angemessen begin- nen und steuern zu können,

Woche: Das Gehör Ihres Kindes ist jetzt schon so weit entwickelt, dass Ihr Baby erste Geräusche wie das Rauschen Ihres Blutes und Ihren Herzschlag wahr- nehmen kann.. Außerdem

Re- präsentativ bedeutet dabei, dass die Umfrageergebnisse nicht nur die Meinung der beispielsweise 1000 Be- fragten wiedergeben, sondern die Meinung der gesamten Zielgruppe, für

Nach diesem vergleichsweise milden Winter, halten sich die Heizkosten in der Betriebsko- stenabrechnung für die meisten Hauseigentümer wahrschein- lich in Grenzen. Doch um ernst-

• Einfache Anwendung für Ihre Kunden: kein Anrühren, keine Aktivierungszeit, keine Kühlung nötig. • Nur 1

tägliche Umgebung angepasst werden soll, damit sich die betroffene Person möglichst lange zu Hause zurechtfindet und wohlfühlt..