Präsentation iPad. Gehalten an der Design. Kantine. Namics. am 19. Oktober 2010 von Claus Medvesek, Thomas Link begin_of_the_skype_highlighting     end_of_the_skype_highlighting begin_of_the_skype_highlighting     end_of_the_skype_highlighting und Daniel Demel

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

5. Antipasti

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

7. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 7

8. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 8

9. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 9

10. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 10

11. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 11

12. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 12

13. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 13

14. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 14

15. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 15

16. 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 16

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.

18. Primi Piatti

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

31. Secondi Piatti

32. Paper Prototyping Designskizzen. Simulation. Prototyping. 29.5.2009 32 Gestalten für das iPad. Würze. Designkantine.

33. Paper Prototyping 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 33

34. Paper Prototyping 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 34

35. iPad GUI PSD Designskizzen. Simulation. Prototyping. 29.5.2009 35 Gestalten für das iPad. Würze. Designkantine.

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

37. iPad GUI InDesign Designskizzen. Simulation. Prototyping. 29.5.2009 37 Gestalten für das iPad. Würze. Designkantine.

38. iPad GUI – Vorlage und Libraries für InDesign 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 38

39. LiveView Designskizzen. Simulation. Prototyping. 29.5.2009 39 Gestalten für das iPad. Würze. Designkantine.

40. LiveView – Preview vom Desktop auf das iPad 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 40 http://zambetti.com/projects/liveview/

41. Interface HD Designskizzen. Simulation. Prototyping. 29.5.2009 41 Gestalten für das iPad. Würze. Designkantine.

42. Interface HD – Rapid Prototyping auf dem iPad 29.5.2009 Gestalten für das iPad. Würze. Designkantine. 42 http://lesscode.co.nz/interface?p=ipad

43. Hybrid. Native. Programmierung. 29.5.2009 43 Gestalten für das iPad. Würze. Designkantine.

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.

46. Dolci

47. Was würden Sie wählen?

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

50. Was ist eigentlich Kitsch?

51. Some rights reserved by genevieveromier

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.

53. Books oder Lonley Planet

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

55. “Wonderful. Grab it now.” - Gizmodo

56. Warum spricht uns Kitsch so an?

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

58. Drei Überzeugungsmittel der visuellen Rhetorik. Dolci. Kitsch vs. Corporate. Pathos (Emotion) Ethos (Normen & Werte) Logos (Verstand) Emotionale Assoziationen Illusion der Existenz Einladung zum Anfassen Intuitive Interaktion 29.5.2009 58 Gestalten für das iPad. Würze. Designkantine.

59. Bezug zur Realität schafft Kontext. 29.5.2009 59 Gestalten für das iPad. Würze. Designkantine.

60. Kontext ist wichtig. 29.5.2009 60 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.

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.

65. Some rights reserved by jensjeppe

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.

67. Some rights reserved by realblades

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.

69. Some rights reserved by quinn.anya

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

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.

72. Kitsch-O-Meter

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

74. Kitsch-O-Meter Und was kommt jetzt noch?

75. Kitsch-O-Meter

76. Kitsch-O-Meter ON OFF

77. Was ist an einem realen Schalter falsch?

78. Was ist an einem realen Schalter falsch? Dolci. Kitsch vs. Corporate. K 29.5.2009 78 Gestalten für das iPad. Würze. Designkantine.

79. Meta-Information fehlt

80. Vorne Bühne Spots Mitte Hinten Rechts Links Mitte

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

88. Fazit 29.5.2009 88 Gestalten für das iPad. Würze. Designkantine.

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.

95. Fazit Zweckorientiert. Reduziert. Intuitiv. 29.5.2009 95 Gestalten für das iPad. Würze. Designkantine.

96. Single Minded 29.5.2009 96 Gestalten für das iPad. Würze. Designkantine.

97. 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. Würze. Designkantine.