Tragbares Designsprech

ios & Android @elektrojunge tausendsassaesk.de by Michael Rose @mmistakes benny.reimold@me.com Codenauts codenauts.de ios & Android Rails PS: HockeyApp

Mobile Maultaschen Ping me!

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

Apps sind lauwarmer Kaffee!

Apps sind lauwarmer Kaffee! Appland - das Land der 1000 Kontexte

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

Wir brauchen Designsprech!

Designers to the rescue!

Designers to the rescue! Spezifikation der App

Designers to the rescue! Spezifikation der App Designerin beauftragen

Designers to the rescue! Spezifikation der App Designerin beauftragen tragbares Designsprech

Designers to the rescue! Spezifikation der App Designerin beauftragen tragbares Designsprech alle sind froh

Augenkrebs! NSLog(@ You suck! );

Die Praxis zeigt:

Die Praxis zeigt: Jede Softwareentwicklerin ist auch Designerin.

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

Know your enemy.

Know your enemy. Design (Begriff)

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

Know your enemy. Design (Begriff) Design (Vorgehensweisen) Design (Hintergrundwissen)

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

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

Namen sind nur Schall und Rauch.

Namen sind nur Schall und Rauch. Apps sind Werkzeuge.

Namen sind nur Schall und Rauch. Apps sind Werkzeuge. Ein Werkzeug erledigt seinen Job.

Namen sind nur Schall und Rauch. Apps sind Werkzeuge. Ein Werkzeug erledigt seinen Job. Ein Werkzeug lässt sich gut in die Hand nehmen.

Namen sind nur Schall und Rauch. Apps sind Werkzeuge. Ein Werkzeug erledigt seinen Job. Ein Werkzeug lässt sich gut in die Hand nehmen. Keine Nutzerin juckt, wie es dazu kam.

Design (Vorgehensweisen)

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

Personas

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

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

Das mentale Modell

Design (Hintergrundwissen)

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. Dieter Rams: 10 Thesen für gutes Design. 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 ca. 1990 Status Metapher/Mentales Modell Freiheit/Kontrolle Konsistenz/Standards Jacob Nielsen: 10 Usability Heuristics Fehlervermeidung Erkennen statt Erinnern Flexibilität/Effizienz bei der Nutzung Ästhetik/Minimalismus Fehlererkennung & Fehlerbehebung Dokumentation

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

Wir haben doch nur Informatik studiert!

Wir haben doch nur Informatik studiert! NUI

Wir haben doch nur Informatik studiert! NUI Appland, das Land der 1000 Kontexte

Wir haben doch nur Informatik studiert! NUI Appland, das Land der 1000 Kontexte Menschen haben diese...finger.

Wir haben doch nur Informatik studiert! NUI Appland, das Land der 1000 Kontexte Menschen haben diese...finger. Die Wortwolke von vorhin, ihr erinnert euch...

Wir haben doch nur Informatik studiert! NUI Appland, das Land der 1000 Kontexte Menschen haben diese...finger. Die Wortwolke von vorhin, ihr erinnert euch... 1000 Wege...

Was hilft?

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

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 machen die anderen? Was funktioniert (nicht)?

cmd + c / ctrl + c Was machen die anderen? Was funktioniert (nicht)? Was bringt mir das?

cmd + c / ctrl + c Was machen die anderen? Was funktioniert (nicht)? Was bringt mir das? cmd + c / ctrl + c mit Stil.

UI-Elemente

Features

Beherrsche dein Werkzeug!

Beherrsche dein Werkzeug! Stift + Papier

Beherrsche dein Werkzeug! Stift + Papier Photoshop (Pixelmator/Sketch/...)

Beherrsche dein Werkzeug! Stift + Papier Photoshop (Pixelmator/Sketch/...) UI-Mockup-Tools (Briefsapp, Sketch...)

Beherrsche dein Werkzeug! Stift + Papier Photoshop (Pixelmator/Sketch/...) UI-Mockup-Tools (Briefsapp, Sketch...) echter Prototyp

Beherrsche dein Werkzeug! Stift + Papier Photoshop (Pixelmator/Sketch/...) UI-Mockup-Tools (Briefsapp, Sketch...) echter Prototyp...

* * Schlussstrich

* Design (Vorgehensweise) * Schlussstrich

* Design (Vorgehensweise) + * Schlussstrich

* Design (Vorgehensweise) + Design (Hintergrundwissen) * Schlussstrich

* Design (Vorgehensweise) + Design (Hintergrundwissen) + * Schlussstrich

* Design (Vorgehensweise) + Design (Hintergrundwissen) + Design (Praxis) * Schlussstrich

* Design (Vorgehensweise) + Design (Hintergrundwissen) + Design (Praxis) = * Schlussstrich

Fin. * * Merci.