Mach dich nützlich und sieh gut aus dabei! Wie digitale Branded Services nach...
Gestalten für das iPad. Design. Kantine. Namics.
1. Gestalten für das iPad.Design. Kantine. Namics. Zürich, 19. Oktober 2010
2. „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.
3. …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 Gestalten für das iPad. Würze. Designkantine. 29.5.2009 3
4. 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 Gestalten für das iPad. Würze. Designkantine. 4
6. User-Interface Prinzipien und Häppchen Delight People Enhance Interactivity Simplicity is powerful Pay attention to patterns Make it self-explanatory 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 6
17. 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 Gestalten für das iPad. Würze. Designkantine.
19. Morphologischer Kasten. Lecker. Primi Piatti . Zutaten und Gewürze. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 19 some rights reserved by andreajoseph's illustrations
20. Morphologischer Kasten. Lecker. Primi Piatti . Zutaten und Gewürze. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 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
21. Morphologischer Kasten. Lecker. Primi Piatti . Zutaten und Gewürze. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 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
22. Full Service. Website. Primi Piatti . Zutaten und Gewürze. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 22
23. Single Minded. iPad App. Primi Piatti . Zutaten und Gewürze. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 23
24. Single Minded. iPad App. Primi Piatti . Zutaten und Gewürze. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 24
25. Morphologischer Kasten. Lecker. Primi Piatti . Zutaten und Gewürze. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 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
26. Full Service. Website. Primi Piatti . Zutaten und Gewürze. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 26
27. Single Minded. iPad App. Primi Piatti . Zutaten und Gewürze. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 27
28. Morphologischer Kasten. Lecker. Primi Piatti . Zutaten und Gewürze. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 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. Full Service. Website. Primi Piatti . Zutaten und Gewürze. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 29
30. iPad optimiert. Website. Primi Piatti . Zutaten und Gewürze. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 30
44. Hybrid. Native. Programmierung. 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 Gestalten für das iPad. Würze. Designkantine.
45. Sencha Touch Hybrid. Native. Programmierung. 29.5.2009 45 Gestalten für das iPad. Würze. Designkantine.
48. Was würden Sie wählen? Dolci. Kitsch vs. Corporate. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 48 Keine Originaldarstellung möglich
49. Nach der Stimmabgabe „Browser-Back“. http://www.surveymonkey.com/s/8Z8G269 Dolci. Kitsch vs. Corporate. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 49
52. 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… Dolci. Kitsch vs. Corporate. 29.5.2009 52 Gestalten für das iPad. Würze. Designkantine.
61. Kontext ist verantwortlich für: EmotionaleAssoziation Ein Ort an dem man gernewäre Dinge, die einfachschönsind Eintolles Fest Dolci. Kitsch vs. Corporate. 29.5.2009 61 Gestalten für das iPad. Würze. Designkantine.
62.
63.
64. Kontext ist verantwortlich für: EmotionaleAssoziation Illusion derExistenz EindigitalesBuchRealitätwerdenlassen MeineNotiz auf Papierfesthalten Dolci. Kitsch vs. Corporate. 29.5.2009 64 Gestalten für das iPad. Würze. Designkantine.
66. Kontext ist verantwortlich für: EmotionaleAssoziation Illusion derExistenz EinladungzumAnfassen Objekte die auch “in echt” benutztwerden Oberflächen, die man gernberührt Dolci. Kitsch vs. Corporate. 29.5.2009 66 Gestalten für das iPad. Würze. Designkantine.
68. Kontext ist verantwortlich für: EmotionaleAssoziation Illusion derExistenz 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 Dolci. Kitsch vs. Corporate. 29.5.2009 68 Gestalten für das iPad. Würze. Designkantine.
71. Ethos (Normen & Werte) Logos (Verstand) Wo viel Licht ist, ist viel Schatten ;-). Dolci. Kitsch vs. Corporate. 29.5.2009 71 Pathos (Emotion) Vorsicht Stolperfallen Gestalten für das iPad. Würze. Designkantine.
82. Das sind iPad Schalter. Dolci. Kitsch vs. Corporate. Raumsteuerung Vordere Lichtleiste Bühne Spots am Fenster Spots für Bilder Raumlicht Gestalten für das iPad. Würze. Designkantine. 29.5.2009 82
83. Zurück zum Beispiel. Dolci. Kitsch vs. Corporate. Some rights reserved by HoriaVarlan Gestalten für das iPad. Würze. Designkantine. 29.5.2009 83
84. Morphologischer Kasten. Raiffeisen iPad. Dolci. Kitsch vs. Corporate. 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 Gestalten für das iPad. Würze. Designkantine. 29.5.2009 84
85. 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 Dolci. Kitsch vs. Corporate. Gestalten für das iPad. Würze. Designkantine. 29.5.2009 85
86. Raiffeisen iPad Prototyp 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 86 Keine Originaldarstellung
87. Und was ist Ihre Wahl? http://www.surveymonkey.com/s/8Z8G269 Dolci. Kitsch vs. Corporate. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 87
89. Delight People “Delight People withStunning Graphics – One way to increasetheperceivedvalue of yourapplicationis to replicatethelook of high- qualityorpreciousmaterials. For example, iftheeffect 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 Gestalten für das iPad. Würze. Designkantine.
90. 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 Gestalten für das iPad. Würze. Designkantine.
91. Simplicityispowerful Simplicityfuelsmanyelements of good design, includingease of use, speed, visualappeal, and accessibility. Butsimplicitystartswiththedesign of a product‘s fundamental functions. Googleyuserexperience 29.5.2009 91 Gestalten für das iPad. Würze. Designkantine.
92. 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 Gestalten für das iPad. Würze. Designkantine.
93. 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 Gestalten für das iPad. Würze. Designkantine.
94. 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 Gestalten für das iPad. Würze. Designkantine.
…der Rechner für Oma & Opa – Experiment in DE im Altersheim sehr erfolgreich.
Kitsch ist eine – eher abwertende – Beschreibung für Dinge, die meist intensiv dekoriert sind und dabei einen niedrigen Nutzwert haben. Man könnte meist auch Staubfänger dazu sagen.Das interessante – für Designer Erschreckende – daran: Diese Dinge werden von vielen Menschen geliebt und beim Kauf sind sie sogar bereit viel Geld dafür auszugeben.(An dem Punkt werden die Mitarbeiter aus dem Business typischerweise hellhörig)Und: User Adoption istfür den Erfolgentscheidend!
Und natürlich, weil Apple in den Richtlinien für die Bedienoberfläche Mobiler Geräte (Human User Interface Guidelines) zur Nutzung von Metaphern aufruft:http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/PrinciplesAndCharacteristics/PrinciplesAndCharacteristics.html#//apple_ref/doc/uid/TP40006556-CH7-SW1
Hand hoch: Wer denkt hierbei nicht unweigerlich an Sonnencreme und seine Badehose oder Bikini?
Hand hoch: Wer denkt hierbei nicht unweigerlich an Oktoberfest?
…eine gut gemachte Illusion zieht die Blicke automatisch in Ihren Bann.
Es gibt Dinge, wie diesen Füller, den wir in einem Meeting scheinbar nicht aus der Hand legen können – oder die Ledersitze in einem Porsche, deren Geruch und Haptik uns erwartungsvoll einsteigen lassen.
Ein Lenkrad kann jeder Kind bedienen – ein Grund Metaphern realer „Controller“ für Interaktionen auf dem iPad zu verwenden.Ein weiterer Punkt ist die Tatsache, dass wir diese Controller sowohl in Realität als auch auf dem iPad mit den HÄNDEN BEDIENEN!!!
Gefahr von „schlampiger“ UmsetzungDer Aufwand zur Erstellung, Sammlung und Optimierung von realitätsnahen Texturen ist nicht zu Unterschätzen. Hier sind professionelle – am besten eigene – Fotos von Material.Bei Nutzung von Material (Assets) aus Bildkatalogen gibt es die Herausforderung der einheitlichen Farbabstimmung und Lichtquellen.
Kitsch zeigt falsche, irreführende Information an.
Kitsch zeigt falsche, irreführende Information an.
Achtung, der Deko-PacMan kommt… denn Kitsch frisst den Inhalt auf!Auf diesem Screen wird weniger als die Hälfte der verfügbaren Fläche für Inhalt genutzt.
Stellen Sie sich vor sie wollen in den Urlaub fliegen… Wenn Sie wüssten, dass das der entscheidende Schalter ist, um einen Flugzeug-Absturz zu vermeiden. Steigen Sie trotzdem ein?Ach ja – und nach dem Absturz ist der Grund dann menschliches Versagen des Piloten.Ganz davon abgesehen fehlt jedem dieser Drehknopf auf dem Screen das nötige mechanische Feedback von Anschlag links und rechts.
Mach doch mal das Licht an… Kein Problem, oder?
Den meisten physischen Interaktionsmetaphern versagen auf dem Screen, sobald man sich nicht auf ein EINZIGES Objekt beschränkt.Warum? Den Objekten fehlt meist die entsprechende Meta-Information – z.B. an welcher Wand sich der Schalter befindet.
Wo ist der Vorteil der Lichtschalter, wenn der Kontext im Raum notdürftig mit der Beschriftung korrigiert werden muss?
Die Standard-Schalter des iOS (Betriebssystem iPhone/iPad) zeigen, wie viel mehr sie im Vergleich leisten:Beschriftung klar zugeordnetZustand Ein und Aus visuell klar unterscheidbarEin und Aus kann nicht verwechselt werdenInteraktion verständlich und konsistent zu anderen Programmen
Das CD Manual sagt wohl nichts über diesen Taschenrechner oder iPads. Und die Schrift auf den Tasten eines Raiffeisen-Rechners würde vermutlich auch nicht dem Designguidelines entsprechen
Unsere Entscheidung im Kampf zwischen Konventionen und Begehrlichkeit