Gestalten für das iPad. Design. Kantine. Namics.

Gestalten für das iPad.Design. Kantine. Namics.
Zürich, 19. Oktober 2010

„We see the iPad as the Mac for the masses.“
Wall Street Analyst Gene Munster von Piper Jaffray im September 2010
29.5.2009
2
Gestalten für das iPad. Würze. Designkantine.

…more than 50 percent of the Fortune 100 are deploying or testing the iPad.
Wall Street Analyst Gene Munster von Piper Jaffray im September 2010
29.5.2009
3

Das Menü.
Antipasti
User-Interface Prinzipien und Häppchen
PrimiPiatti
Zutaten und Gewürze
SecondiPiatti
Kochutensilien und Zubereitungshinweise
Dolci
Kitsch vs. Corporate
Menü.
29.5.2009
4

Antipasti

User-Interface Prinzipien und Häppchen
Delight People
Enhance Interactivity
Simplicity is powerful
Pay attention to patterns
Make it self-explanatory
29.5.2009
6

29.5.2009
7

29.5.2009
8

29.5.2009
9

29.5.2009
10

29.5.2009
11

29.5.2009
12

29.5.2009
13

29.5.2009
14

29.5.2009
15

29.5.2009
16

Weitere Beispiel.
Wilmaa TV
Memonic
Photoshop Express
Sleep
Vogue Deutschland
Datum
Wired
Twitter
Cool Hunting (News & Gadgets)
Marvel Comics
Associated Press
Tap Tap Radiation (Interaktion & Sound)
iDeskLite
Das Foto-Kochbuch
Antipasti. User-Interface Prinzipien und Häppchen.
29.5.2009
17

Primi Piatti

Morphologischer Kasten. Lecker.
Primi Piatti . Zutaten und Gewürze.
29.5.2009
19
some rights reserved by andreajoseph's illustrations

29.5.2009
20
Online
Strategie
Marken-
kommunikation
Online
Marketing
Social
Application
Web Content
Management
Intranet/
E-Collaboration
Marktthema
E-Commerce
Industrie/
Transport
Konsum-
güter
Medien/
Verlage
Pharma/
Chemie
...
NGO
Automobil
Energie
Finanz
Nahrung
Branche
Verfügbarkeit
offline
Mobiles Netz
ISDN
Breitband
Jahre
Wochen
Tage
Stunden
Minuten
Nutzungsdauer
oft
einmalig
immer
selten
regelmässig
Häufigkeit
spielen
erkunden
suchen
arbeiten
lernen
unterhalten
Nutzungskontext
iOS Standard
Kitsch
Physikalisch
Brand
Infografik
Designkonzept
Desktop

29.5.2009
21
Online
Strategie
Marken-
kommunikation
Online
Marketing
Social
Application
Web Content
Management
Intranet/
E-Collaboration
Marktthema
E-Commerce
Industrie/
Transport
Konsum-
güter
Medien/
Verlage
Pharma/
Chemie
...
NGO
Automobil
Energie
Finanz
Nahrung
Branche
Verfügbarkeit
offline
Mobiles Netz
ISDN
Breitband
Jahre
Wochen
Tage
Stunden
Minuten
Nutzungsdauer
oft
einmalig
immer
selten
regelmässig
Häufigkeit
spielen
erkunden
suchen
arbeiten
lernen
unterhalten
Nutzungskontext
iOS Standard
Kitsch
Physikalisch
Brand
Infografik
Designkonzept
Desktop

Full Service. Website.
29.5.2009
22

Single Minded. iPad App.
29.5.2009
23

29.5.2009
24

29.5.2009
25
Online
Strategie
Marken-
kommunikation
Online
Marketing
Social
Application
Web Content
Management
Intranet/
E-Collaboration
Marktthema
E-Commerce
Industrie/
Transport
Konsum-
güter
Medien/
Verlage
Pharma/
Chemie
...
NGO
Automobil
Energie
Finanz
Nahrung
Branche
Verfügbarkeit
offline
Mobiles Netz
ISDN
Breitband
Jahre
Wochen
Tage
Stunden
Minuten
Nutzungsdauer
oft
einmalig
immer
selten
regelmässig
Häufigkeit
spielen
erkunden
suchen
arbeiten
lernen
unterhalten
Nutzungskontext
iOS Standard
Kitsch
Physikalisch
Brand
Infografik
Designkonzept
Desktop

29.5.2009
26

29.5.2009
27

29.5.2009
28
Online
Strategie
Marken-
kommunikation
Online
Marketing
Social
Application
Web Content
Management
Intranet/
E-Collaboration
Marktthema
E-Commerce
Industrie/
Transport
Konsum-
güter
Medien/
Verlage
Pharma/
Chemie
...
NGO
Automobil
Energie
Finanz
Nahrung
Branche
Verfügbarkeit
offline
Mobiles Netz
ISDN
Breitband
Jahre
Wochen
Tage
Stunden
Minuten
Nutzungsdauer
oft
einmalig
immer
selten
regelmässig
Häufigkeit
spielen
erkunden
suchen
arbeiten
lernen
unterhalten
Nutzungskontext
iOS Standard
Kitsch
Physikalisch
Brand
Infografik
Designkonzept
Desktop

29.5.2009
29

iPad optimiert. Website.
29.5.2009
30

Secondi Piatti

Paper Prototyping
Designskizzen. Simulation. Prototyping.
29.5.2009
32

Paper Prototyping
29.5.2009
33

Paper Prototyping
29.5.2009
34

iPad GUI PSD
29.5.2009
35

iPad GUI PSD für Photoshop
29.5.2009
36
http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/

iPad GUI InDesign
29.5.2009
37

iPad GUI – Vorlage und Libraries für InDesign
29.5.2009
38

LiveView
29.5.2009
39

LiveView – Preview vom Desktop auf das iPad
29.5.2009
40
http://zambetti.com/projects/liveview/

Interface HD
29.5.2009
41

Interface HD – Rapid Prototyping auf dem iPad
29.5.2009
42
http://lesscode.co.nz/interface?p=ipad

Hybrid. Native. Programmierung.
29.5.2009
43

Apple Software Development Kit
Objective-C Programmierung
Flash CS5
Flash CS5 Professional
Adobe Digital Publishing Tools
InDesign CS5 + Digital Content Builder 
PhoneGap
HTML + JavaScript
Sencha Touch (HTML Framework)
HTML + JavaScript
29.5.2009
44

Sencha Touch
29.5.2009
45

Was würden Sie wählen?

Was würden Sie wählen?
Dolci. Kitsch vs. Corporate.
29.5.2009
48
Keine Originaldarstellung möglich

Nach der Stimmabgabe „Browser-Back“.
http://www.surveymonkey.com/s/8Z8G269
29.5.2009
49

Was ist eigentlich Kitsch?

Some rights reserved by genevieveromier

Auch auf Deinem iPad ist Kitsch…
Unnötige Texturen
Material-Imitat
Reale Objekte oder Interfaces
Unsere tägliche Umgebung wird zitiertDer Nutzen ist meist fraglich…
29.5.2009
52

Books oder Lonley Planet

“A graphically rich look at a wide variety of trips.” - New York Times

“Wonderful. Grab it now.”  - Gizmodo

Warum spricht uns Kitsch so an?

Pathos
(Emotion)
Ethos
(Normen & Werte)
Logos
(Verstand)

Drei Überzeugungsmittel der visuellen Rhetorik.
Pathos
(Emotion)
Ethos
(Normen & Werte)
Logos
(Verstand)
Emotionale Assoziationen
Illusion der Existenz
Einladung zum Anfassen
Intuitive Interaktion
29.5.2009
58

Bezug zur Realität schafft Kontext.
29.5.2009
59

Kontext ist wichtig.
29.5.2009
60

Kontext ist verantwortlich für:
EmotionaleAssoziation
Ein Ort an dem man gernewäre
Dinge, die einfachschönsind
Eintolles Fest
29.5.2009
61

Illusion derExistenz
EindigitalesBuchRealitätwerdenlassen
MeineNotiz auf Papierfesthalten
29.5.2009
64

Some rights reserved by jensjeppe

EinladungzumAnfassen
Objekte die auch “in echt” benutztwerden
Oberflächen, die man gernberührt
29.5.2009
66

Some rights reserved by realblades

EinladungzumAnfassen
Intuitive Interaktion
InteraktionohneNeueszulernen
KeineHürdefürungeübte Beginner
Steuer-Elemente zum Drehen, Schieben, Bewegen
Schalter oder Hebel zum Tippen, Drücken, Umlegen
Griffe zum Festhalten und Bewegen
29.5.2009
68

Some rights reserved by quinn.anya

Pathos
(Emotion)
Ethos
(Normen & Werte)
Logos
(Verstand)

Ethos
(Normen & Werte)
Logos
(Verstand)
Wo viel Licht ist, ist viel Schatten ;-).
29.5.2009
71
Pathos
(Emotion)
Vorsicht Stolperfallen

Kitsch-O-Meter

Kitsch-O-Meter
Was steht vor der ersten Seite?

Kitsch-O-Meter
Und was kommt jetzt noch?

Kitsch-O-Meter

Kitsch-O-Meter
ON
OFF

Was ist an einem realen Schalter falsch?

Was ist an einem realen Schalter falsch?
K
29.5.2009
78

Meta-Information fehlt

Vorne
Bühne
Spots
Mitte
Hinten
Rechts
Links
Mitte

Das sind iPad Schalter.
Raumsteuerung
Vordere Lichtleiste
Bühne
Spots am Fenster
Spots für Bilder
Raumlicht
29.5.2009
82

Zurück zum Beispiel.
Some rights reserved by HoriaVarlan
29.5.2009
83

Morphologischer Kasten. Raiffeisen iPad.
Online
Strategie
Marken-
kommunikation
Online
Marketing
Social
Application
Web Content
Management
Intranet/
E-Collaboration
Marktthema
E-Commerce
Industrie/
Transport
Konsum-
güter
Medien/
Verlage
Pharma/
Chemie
Branche
...
NGO
Automobil
Energie
Finanz
Nahrung
Verfügbarkeit
offline
Mobiles Netz
ISDN
Breitband
Nutzungsdauer
Jahre
Wochen
Tage
Stunden
Minuten
Häufigkeit
oft
einmalig
immer
selten
regelmässig
Nutzungskontext
spielen
erkunden
suchen
arbeiten
lernen
unterhalten
iOS Standard
Kitsch
Physikalisch
Brand
Infografik
Designkonzept
Desktop
29.5.2009
84

Unsere Entscheidung.
Corporate Design vor Kitsch
Markenkommunikation: Eine Raiffeisen Welt – emotional ausreichend
Lernen: Finanzierung eines Eigenheims
Intuitive Bedienung
Intensive Nutzung in einem kurzen Zeitraum
Regelmässige, seltene Nutzung auf Dauer
Touch-Steuerung für Geldbeträge
29.5.2009
85

Raiffeisen iPad Prototyp
29.5.2009
86
Keine Originaldarstellung

Und was ist Ihre Wahl?
http://www.surveymonkey.com/s/8Z8G269
29.5.2009
87

Fazit
29.5.2009
88

Delight People
“Delight People withStunning Graphics – One way to increasetheperceivedvalue of yourapplicationis to replicatethelook of high- qualityorpreciousmaterials. For example, iftheeﬀect of wood, leather, or metal isappropriate in yourapplication, takethe time to makesurethe material looksrealistic and valuable.”
iPad Human Interface Guidelines p.24
29.5.2009
89

EnhanceInteractivity
“The best iPadapplicationsgivepeople innovative ways to interactwithcontentwhiletheyperform a clearlydefined, finite task. Resistthetemptation to fillthe large screenwithfeaturesthatarenotdirectlyrelated to themaintask.”
iPad Human Interface Guidelines p.19
29.5.2009
90

Simplicityispowerful
Simplicityfuelsmanyelements of good design, includingease of use, speed, visualappeal, and accessibility. Butsimplicitystartswiththedesign of a product‘s fundamental functions.
Googleyuserexperience
29.5.2009
91

Payattention to patterns
Users spend themajority of their time on interfacesotherthanyourown. Thereis no need to reinventthewheel. Thoseinterfacesmaysolvesome of thesameproblemsthatusersperceivewithintheoneyouarecreating. Byusingfamiliar UI patterns, you will helpyourusersfeel at home.
Think Vitamin – 10 User Interface Guidelines
29.5.2009
92

Makeitself-explanatory
Good designmakes a productunderstandable. Itclarifiestheproduct’sstructure. Better still, itcanmaketheproducttalk. At best, itisself-explanatory.
Dieter Rams: ten principlesfor good design.
29.5.2009
93

Designprinzipien.
iPad User Experience Guidelines (Apple)
http://www.lukew.com/ff/entry.asp?995
10 User Interface Design Fundamentals (Think Vitamin)
http://thinkvitamin.com/design/10-user-interface-design-fundamentals/
10 Heuristicsfor User Interface Design (Jakob Nielsen)
http://www.useit.com/papers/heuristic/heuristic_list.html
TheGoogley User Experience Principles (Google)
http://www.google.com/corporate/ux.html
Ten Principles of Good Design (Dieter Rams)
http://www.vitsoe.com/en/re/about/dieterrams/gooddesign
Design PrinciplesGlossary
http://www.usabilityfirst.com/glossary/design-principles/
Fazit.
29.5.2009
94

Fazit
Zweckorientiert. Reduziert. Intuitiv.
29.5.2009
95

Single Minded
29.5.2009
96

Vielen Dank für Ihre Aufmerksamkeit.
claus.medvesek@namics.comdaniel.demel@namics.comthomas.link@namics.com
© Namics
29.5.2009
97

Gestalten für das iPad. Design. Kantine. Namics.

by Daniel Demel on Oct 21, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

Gestalten für das iPad. Design. Kantine. Namics. — Presentation Transcript