Tragbares Designsprech

„Tragbares“
Designsprech
Benjamin Reimold

by Michael Rose @mmistakes
iOS & Android
@elektrojunge
tausendsassaesk.de
benny.reimold@me.com
Benjamin Reimold
Codenauts
codenauts.de
iOS & Android
Rails
HockeyAppPS:

Tragbares Designsprech Benjamin Reimold
Mobile Maultaschen
Ping me!

tl;dr
Intro
Design (Begriff)
Design (Vorgehensweisen)
Design (Hintergrundwissen)
Design (Praxis)

Apps sind lauwarmer Kaffee!

Appland - das Land der 1000 Kontexte

Appland - das Land der 1000 Kontexte
Apps sind eine ERNSTE Sache

Wir brauchen Designsprech!

Designers to the rescue!

„Spezifikation“ der App

Designerin beauftragen

„tragbares“ Designsprech

alle sind froh

alle sind froh
€€€€€€€€

Nö!

Augenkrebs! NSLog(@“You suck!“);

Die Praxis™ zeigt:

Die Praxis™ zeigt:
Jede Softwareentwicklerin ist auch Designerin.

Kreativität
Nutzungskontext
Hardware
Ökosysteme
Trends
Subjektivität
Wahrnehmung
Psychologie
Schnellebigkeit
Was ist „Design“ überhaupt?
Werkzeuge / Tools
Ich kann doch nicht
„zeichnen“
Erfahrung
Typographie
User Experience
Buzzword-Bingo
...
UX
UI
Farbenlehre

Know your enemy.

Know your enemy.
Design (Begriff)

Know your enemy.
Design (Begriff)
Design (Praxis)

User Experience Design
Interface Design
Interaction Design
Sound Design
Human Factors
Human-
Computer
Interaction
Information Architecture
Design (Begriff)

Namen sind nur Schall und Rauch.

Apps sind Werkzeuge.

Ein Werkzeug erledigt seinen Job.

Ein Werkzeug lässt sich gut in die Hand nehmen.

Ein Werkzeug lässt sich gut in die Hand nehmen.
Keine Nutzerin juckt, wie es dazu kam.

Details &
Überarbeitung
Ideenfindung &
Lösungen
Analyse &
Strukturierung
Erforschung &
Beobachtung
Personas

Personas

Details &
Überarbeitung
Ideenfindung &
Lösungen
Analyse &
Strukturierung
Erforschung &
Beobachtung
Personas
Mentales Modell

Das mentale Modell

App-Design ist KALTER Kaffee.

seit Mitte der 1970er
Gutes Design ist innovativ.
Gutes Design macht ein Produkt brauchbar.
Gutes Design ist ästethisch.
Gutes Design ist verständlich.
Gutes Design ist unaufdringlich.
Gutes Design ist ehrlich.
Gutes Design ist langlebig.
Gutes Design ist konsequent bis in‘s letzte Detail.
Gutes Design ist umweltfreundlich.
Gutes Design ist so wenig Design wie möglich.

seit Mitte der 1970er
Gutes Design ist innovativ.
Gutes Design macht ein Produkt brauchbar.
Gutes Design ist ästethisch.
Gutes Design ist verständlich.
Gutes Design ist unaufdringlich.
Gutes Design ist ehrlich.
Gutes Design ist langlebig.
Gutes Design ist konsequent bis in‘s letzte Detail.
Gutes Design ist umweltfreundlich.
Gutes Design ist so wenig Design wie möglich.
DieterRams:10ThesenfürgutesDesign.

seit ca. 1990
Status
Metapher/Mentales Modell
Freiheit/Kontrolle
Konsistenz/Standards
Fehlervermeidung
Erkennen statt Erinnern
Flexibilität/Effizienz bei der Nutzung
Ästhetik/Minimalismus
Fehlererkennung & Fehlerbehebung
Dokumentation
JacobNielsen:10UsabilityHeuristics

Wieso ist App-Design dann schwierig non-
trivial einfach hart Hexenwerk Teufelszeug
komplex nicht immer einfach?

„Wir haben doch nur Informatik studiert!“

NUI

NUI
Appland, das Land der 1000 Kontexte

NUI
Menschen haben diese...Finger.

NUI
Die Wortwolke von vorhin, ihr erinnert euch...

NUI
Die Wortwolke von vorhin, ihr erinnert euch...
1000 Wege...

Was hilft?

10 Usability Heuristics
Status
Metapher/Mentales Modell
Freiheit/Kontrolle
Konsistenz/Standards
Fehlervermeidung
Erkennen statt Erinnern
Flexibilität/Effizienz bei der Nutzung
Ästhetik/Minimalismus
Fehlererkennung & Fehlerbehebung
Dokumentation
JacobNielsen:10UsabilityHeuristics

MOAR basic knowledge about „design“!

Skeuomorphismen™

Affordances

Feedback

Feedforward

Direct Manipulation Pattern

Fitts‘s Law

Geschwindigkeit

„Persönlichkeit“

Und noch soooooo vieles mehr...

Design (Praxis)

Guidelines™
1996 (!) Zen of Palm

iOS != Android != Windows Phone != ...

iOS != Android != Windows Phone != ...
„So du gestaltest für ein dir
nicht eigen gemachtes
Betriebssystem, nutze es vorab
für einige Zeit.“
Captain Obvious, 2013

cmd + c / ctrl + c

cmd + c / ctrl + c
Was machen „die anderen“?

cmd + c / ctrl + c
Was funktioniert (nicht)?

cmd + c / ctrl + c
Was bringt mir das?

cmd + c / ctrl + c
Was bringt mir das?
cmd + c / ctrl + c mit Stil.

UI-Elemente

Features

Beherrsche dein Werkzeug!

Stift + Papier

Stift + Papier
Photoshop (Pixelmator/Sketch/...)

Stift + Papier
UI-Mockup-Tools (Briefsapp, Sketch ...)

Stift + Papier
„echter“ Prototyp

Stift + Papier
„echter“ Prototyp
...

______________ *
* Schlussstrich™

______________ *
Design (Vorgehensweise)
* Schlussstrich™

______________ *
+
* Schlussstrich™

______________ *
+
+
* Schlussstrich™

______________ *
+
+
Design (Praxis)
* Schlussstrich™

______________ *
+
+
Design (Praxis)
=
* Schlussstrich™

______________ *
+
+
Design (Praxis)
=
Tragbares Designsprech
* Schlussstrich™

Fin. *
* Merci.

Tragbares Designsprech

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (19)

Mehr von Benny Reimold

Mehr von Benny Reimold (9)

Tragbares Designsprech