Benjamin Reimold | Codenauts

$foo-design basics for (iOS-)developers

Mittwoch, 5. September 12

This presentation is licenced underCC BY-NC-SA 3.0

visit www.creativecommons.orgfor more information

Mittwoch, 5. September 12

Benjamin Reimold@elektrojunge

tausendsassaesk.de

Mittwoch, 5. September 12

“Challenge accepted!“

Mittwoch, 5. September 12

You make my eyes water!

NSLog(@“You suck!“)

Kommunikation

Kommunikation

Mittwoch, 5. September 12

Mittwoch, 5. September 12

Design-Grundlagen

Mittwoch, 5. September 12

$foo-Design

Mittwoch, 5. September 12

$foo-Design

User Experience Design

Interface Design

Interaction Design

Sound Design

Human FactorsHuman-

ComputerInteraction

Information Architecture

Mittwoch, 5. September 12

Interaction Design

Mittwoch, 5. September 12

Interaction Design

Mittwoch, 5. September 12

Interaction Design

Mittwoch, 5. September 12

Interaction Design

Mittwoch, 5. September 12

Interaction Design

Mittwoch, 5. September 12

Die Idee

Mittwoch, 5. September 12

Die Idee

App

Mittwoch, 5. September 12

Die Idee

M-PaymentApp

Mittwoch, 5. September 12

Die Idee

M-Payment EssenApp

Mittwoch, 5. September 12

Die Idee

M-Payment EssenApp Nerd

Mittwoch, 5. September 12

Die Idee

M-Payment EssenApp Nerd

Mittwoch, 5. September 12

Interaction Design

Mittwoch, 5. September 12

Interaction Design

Mittwoch, 5. September 12

Interaction Design

Mittwoch, 5. September 12

Interaction Design

Mittwoch, 5. September 12

Interaction Design

Mittwoch, 5. September 12

Vorgehensweise

Mittwoch, 5. September 12

Erforschung & Beobachtungen

# Beobachten# Interviews# Aktivitäten

Mittwoch, 5. September 12

Analysierung & Strukturierung

# Visualisierung# Diagramme / Listen# Konzeptionelles Modell# Personas

Mittwoch, 5. September 12

Mittwoch, 5. September 12

Mittwoch, 5. September 12

Mittwoch, 5. September 12

Ideenfindung & Lösung

# Konzepte# Brainstorming-Techniken# Design-Prinzipien

Mittwoch, 5. September 12

Details & Überarbeitung

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Details & Überarbeitung

Ideenfindung & Lösung

# Konzepte# Brainstorming-Techniken# Design-Prinzipien

Analysierung & Strukturierung

Forschen & Beobachtungen

# Beobachten# Interviews# Aktivitäten

# Visualisierung# Diagramme / Listen# Konzeptionelles Modell# Personas

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

„Und was is‘ mit Tee Entwicklung?“

Mittwoch, 5. September 12

Details & Überarbeitung

Ideenfindung & Lösung

# Konzepte# Brainstorming-Techniken# Design-Prinzipien

Analysierung & Strukturierung

Forschen & Beobachtungen

# Beobachten# Interviews# Aktivitäten

# Visualisierung# Diagramme / Listen# Konzeptionelles Modell# Personas

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Ich bin nur das Erinnerungs-Lama

Mittwoch, 5. September 12

Details & Überarbeitung

Ideenfindung & Lösung

# Konzepte# Brainstorming-Techniken# Design-Prinzipien

Analysierung & Strukturierung

Forschen & Beobachtungen

# Mentales Modell# $foo-Design Grundlagen

# Beobachten# Interviews# Aktivitäten

# Visualisierung# Diagramme / Listen# Konzeptionelles Modell# Personas

Mittwoch, 5. September 12

Grundprinzipien

Mittwoch, 5. September 12

Grundprinzipien

Status

Mittwoch, 5. September 12

Grundprinzipien

Status

Metapher

Mittwoch, 5. September 12

Grundprinzipien

Status

Metapher

Freiheit/Kontrolle

Mittwoch, 5. September 12

Grundprinzipien

Status

Metapher

Freiheit/Kontrolle

Konsistenz/Standards

Mittwoch, 5. September 12

Grundprinzipien

Status

Metapher

Freiheit/Kontrolle

Konsistenz/Standards

Fehler

vermeid

ung

Mittwoch, 5. September 12

Grundprinzipien

Status

Metapher

Freiheit/Kontrolle

Konsistenz/Standards

Fehler

vermeid

ungEr

kenn

en s

tatt

eri

nner

n

Mittwoch, 5. September 12

Grundprinzipien

Status

Metapher

Freiheit/Kontrolle

Konsistenz/Standards

Fehler

vermeid

ungEr

kenn

en s

tatt

eri

nner

nFle

xibilit

ät/E

ffizie

nz

Mittwoch, 5. September 12

Grundprinzipien

Status

Metapher

Freiheit/Kontrolle

Konsistenz/Standards

Fehler

vermeid

ungEr

kenn

en s

tatt

eri

nner

nFle

xibilit

ät/E

ffizie

nz

Ästethik/Minimalismus

Mittwoch, 5. September 12

Grundprinzipien

Status

Metapher

Freiheit/Kontrolle

Konsistenz/Standards

Fehler

vermeid

ungEr

kenn

en s

tatt

eri

nner

nFle

xibilit

ät/E

ffizie

nz

Ästethik/Minimalismus

Fehlererkennung

Mittwoch, 5. September 12

Grundprinzipien

Status

Metapher

Freiheit/Kontrolle

Konsistenz/Standards

Fehler

vermeid

ungEr

kenn

en s

tatt

eri

nner

nFle

xibilit

ät/E

ffizie

nz

Ästethik/Minimalismus

Fehlererkennung

Dokumentation/Hilfe

Mittwoch, 5. September 12

Grundprinzipien

Status

Metapher

Freiheit/Kontrolle

Konsistenz/Standards

Fehler

vermeid

ungEr

kenn

en s

tatt

eri

nner

nFle

xibilit

ät/E

ffizie

nz

Ästethik/Minimalismus

Fehlererkennung

Dokumentation/HilfeGeschw

indigkeit

Mittwoch, 5. September 12

Grundprinzipien

Status

Metapher

Freiheit/Kontrolle

Konsistenz/Standards

Fehler

vermeid

ungEr

kenn

en s

tatt

eri

nner

nFle

xibilit

ät/E

ffizie

nz

Ästethik/Minimalismus

Fehlererkennung

Dokumentation/HilfeGeschw

indigkeitPers

önlic

hkei

t

Mittwoch, 5. September 12

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

# Mentales Modell# $foo-Design Grundlagen

Das mentale Modell

Mittwoch, 5. September 12

# Mentales Modell# $foo-Design Grundlagen

Das mentale Modell

Das UI-Modell

Mittwoch, 5. September 12

# Mentales Modell# $foo-Design Grundlagen

Das mentale Modell

Das UI-Modell

Das Implementierungsmodell

Mittwoch, 5. September 12

Mittwoch, 5. September 12

Mittwoch, 5. September 12

Mittwoch, 5. September 12

Realismus

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Skeuomorphismen

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Mittwoch, 5. September 12

1 Tuna 1,112. Sake 2.223. Avocado 3.33.4. Tomate 4.445. Gurke 5.551 Tuna 1,112. Sake 2.223. Avocado 3.33.4. Tomate 4.445. Gurke 5.551 Tuna 1,112. Sake 2.223. Avocado 3.33.4. Tomate 4.445. Gurke 5.551 Tuna 1,112. Sake 2.223. Avocado 3.33.4. Tomate 4.445. Gurke 5.551 Tuna 1,11

1 Tuna 1,112. Sake 2.223. Avocado 3.33.4. Tomate 4.445. Gurke 5.551 Tuna 1,112. Sake 2.223. Avocado 3.33.4. Tomate 4.445. Gurke 5.551 Tuna 1,112. Sake 2.223. Avocado 3.33.4. Tomate 4.445. Gurke 5.551 Tuna 1,112. Sake 2.223. Avocado 3.33.4. Tomate 4.445. Gurke 5.551 Tuna 1,11

Mittwoch, 5. September 12

Gestaltgesetz der…

# Mentales Modell# $foo-Design Grundlagen

…Prägnanz

…Nähe

…Ähnlichkeit

…Kontinuität

…Geschlossenheit

…gem. Bewegung

…fortgesetzt durchgehenden Linie

…gemeinsamen Region

…Gleichzeitigkeit

…verbundenen Elemente

Mittwoch, 5. September 12

Affordances

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Mittwoch, 5. September 12

Feedback

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Mittwoch, 5. September 12

Mittwoch, 5. September 12

Feedforward

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Mittwoch, 5. September 12

Mittwoch, 5. September 12

vs

Mittwoch, 5. September 12

vs

Mittwoch, 5. September 12

Direkte Manipulation

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Mittwoch, 5. September 12

Indirekte Manipulation

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Mittwoch, 5. September 12

Fitts‘s Law

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Die Wurstfinger-Regel

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Poka-Yoke

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Mittwoch, 5. September 12

Hierarchie

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Mittwoch, 5. September 12

Mittwoch, 5. September 12

Animationen

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Mittwoch, 5. September 12

Konsistenz

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Konsistenz

Animationen

Hierarchie

Poka-Yoke

Die Wurstfinger-Regel

Fitts‘s Law

Indirekte Manipulation

Direkte Manipulation

Feedforward

Feedback

Affordances

Realismus

Mittwoch, 5. September 12

Habt eine Meinung!

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Features

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Mittwoch, 5. September 12

Design-Prozess

Mittwoch, 5. September 12

Design-Prozess+

Mittwoch, 5. September 12

Design-Prozess+

$foo-Design basics

Mittwoch, 5. September 12

Design-Prozess+

$foo-Design basics=

Mittwoch, 5. September 12

Design-Prozess+

$foo-Design basics=

einfachere Kommunikation

Mittwoch, 5. September 12

Design-Prozess+

$foo-Design basics=

einfachere Kommunikation+

Mittwoch, 5. September 12

Design-Prozess+

$foo-Design basics=

einfachere Kommunikation+

bessere Apps

Mittwoch, 5. September 12

Mittwoch, 5. September 12