Tragbares Designsprech

„Tragbares“ Designsprech

Benjamin Reimold

by Michael Rose @mmistakes

iOS & Android

@elektrojunge

tausendsassaesk.de

[email protected]

Benjamin Reimold

Codenauts

codenauts.de

iOS & Android

Rails

HockeyAppPS:

mailto:[email protected]

mailto:[email protected]

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?

Psychologie

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)



Know your enemy.

Design (Begriff)




Know your enemy.

Design (Begriff)



Design (Praxis)


User Experience Design

Interface Design

Interaction Design

Sound Design

Human FactorsHuman-

ComputerInteraction

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







Personas






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.

Dieter

Rams:

10 Th

esen für

gutes D

esig

n.


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

Jacob

Nielsen:

10 Usab

ility He

uristi

cs


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

Jacob

Nielsen:

10 Usab

ility He

uristi

cs


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 gemachtesBetriebssystem, 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!


Beherrsche dein Werkzeug!Stift + Papier



Photoshop (Pixelmator/Sketch/...)




UI-Mockup-Tools (Briefsapp, Sketch ...)





„echter“ Prototyp





„echter“ Prototyp

...


______________ *

* Schlussstrich™


______________ *

Design (Vorgehensweise)

* Schlussstrich™


______________ *

Design (Vorgehensweise)+

* Schlussstrich™


______________ *



* Schlussstrich™


______________ *


Design (Hintergrundwissen)+

* Schlussstrich™


______________ *



Design (Praxis)

* Schlussstrich™


______________ *



Design (Praxis)=

* Schlussstrich™


______________ *



Design (Praxis)=

Tragbares Designsprech

* Schlussstrich™


Fin. *

* Merci.

Technology

Tragbares Designsprech