Designing iPhone Apps

  • View

  • Download

Embed Size (px)


Brian Fling is a certified genius when it comes to strategy, design, and development of apps for the world of mobile devices. Here's the deck from his recent SVC workshop on the subject.



2. DESIGNING & BUILDINGMOBILE APPS by Brian Fling 3. Available SOON 4. WHO AM I? 5. How I got here... 1975 Born ...some time passed 1993 Graduated High School 1993 Trained as a Barista 1994 Started at Starbucks 1995 Married my wife 1996 My Jerry McGuire moment 1997 Quit Starbucks 1998 Made an animated series 1999 My first web & mobile job 2000 Lost my job. 2000 Got my first mobile phone 2001 September 11 6. How I got here... 2002 Started at Childrens Hospital 2004 Started at Classmates 2004 Started at Dwango 2005 Fired then sued 2005 Cameron Molls articles 2005 Mobile or Web? 2006 Created Blue Flavor 2007 Wrote dotMobi Guide 2008 Created Leaflets 2008 Focused on iPhone 2009 Started my Book 2009 Created pinch/zoom 2009 Here today 7. AGENDA Why Mobile? Types of Mobile Apps New Rules Context Exercise Design Process Designing for Context 8. AGENDA Mobile IAiPhone Web Apps Mobile DesignSupporting Devices(maybe?) Web Apps vs. Native Apps Mobile 2.0 Mobile Web Dev 9. HOUSEKEEPING These slides are available upon request (available on Slideshare around 9/5) @fling 10. What do you want to learn? 11. What is Mobile Design? 12. JARGON ALERTMobile Design The creation of user experiences for the mobile context. 13. It doesnt start with Photoshop 14. Part 1:Why Mobile? 15. Whats Next? 16. Generation Y 97% own a computer 94% own a mobile phone 76% use Instant Messaging 69% use Facebook 56% own an iPod 17. Generation ZBorn in the modern digital age. Technology is infused atbirth. The iPhone is to them as the Macintosh was to us. 18. The Mobile Generation 2009 2010 2011 2012 2013 2014 2015Everyone Else source: us census bureau 19. In less ve years, the mobile generationcould have more buying power than allother demographics 20. Part 2: New Rules 21. Rule Forg #1et WYouhatThin You k Kno w 22. Rule Belie #2ve W Youhat See, Wha Nott You Read 23. RuleCon #3 strai Nev ntser C ome First 24. Rule #4 Focus onCon text, Goals anNee dds 25. Rule You #5Can Supp t Everortythin g 26. Rule#6 Don Contvert Crea,te 27. Rule#7Keep SimpItle 28. Part 3: Design Process 29. IDEA The rst thing we need is an idea that inspires us. 30. NEED Identify a basic need with our desired user. 31. CONTEXT The circumstances where information can add value. 32. STRATEGY How we can add value to the business. 33. DEVICESChoose the devices to support that best serves our audience. 34. DESIGNCreate a compelling user experience based around needs. 35. DEV Put all the pieces together. 36. TEST And test, and test, and test some more. 37. OPTIMIZE Reduce all assets to its lowest possible size. 38. PORT Adapt for other devices that t our strategy. 39. Part 4: Context 40. Context with a capital C Context is how the user will deriveBIG Cvalue from something they are currently doing. In other words, the understanding of circumstance. It is the mental model they will establish to form understanding. 41. context with a lowercase context c is the mode, medium,little c or environment in which we perform a task or the circumstances of understanding. our present location our device of access our state of mind 42. My present location. PhysicalMy physical context will Contextdictate how I accessinformation and thereforehow I derive value from it. 43. My device of access.Media The media context isnt Context just about the immediacy of the information we receivebut also how to engage people in real time. 44. Our present state ofModalmind. Context Where should I eat? Should I buy it now or later? Is this safe or not? 45. Example 46. Exercise: Defining the Context 47. Lunch 48. DESIGNING & BUILDINGIPHONE APPS by Brian Fling 49. Part 5:Types of Apps 50. Types Appof Apps licatMedion ium 51. SMS Experiences where the goal is to alert users of new information. 52. WEBSITE Experiences that provide the user with simple informational data. 53. WIDGETS Experiences that are based on an existing multi-platform framework. 54. WEB APPSWhen you want to employ a cross-platform application strategy. 55. NATIVE APPSExperiences that take advantage of the native features of the device. 56. GAMES Experiences that entertain. 57. MEDIUM MATRIXDevice UserOfflineDevice Long Term ComplexityLanguage Initial Cost SupportExperienceSupportFeatures Cost SMS All SimpleLimitedN/A NoNone Low High Mobile All SimpleLimited HTML NoNone Low Low Websites Mobile WebSomeMediumGreatHTML LimitedLimited Low Low WidgetsMobile HTML, CSS, WebSomeMediumGreat LimitedLimited Mid LowJS Application Native AllComplexExcellentVarious YesYes HighMid Application Games AllComplexExcellentVarious YesYesVery HighHigh 58. Types Appof Apps licatConiontext 59. UTILITY 60. LOCALE 61. INFORMATIVE 62. PRODUCTIVITY 63. IMMERSI VE 64. CONTEXT MATRIXUser Experience Type Task TypeTask Duration Combine with Utility At-a-GlanceInformation RecallVery ShortImmersiveLocaleLocation-basedContextual InformationQuick ImmersiveInformative Content-based Seek InformationQuick LocaleProductivityTask-basedContent Management LongUtilityImmersive Full Screen EntertainmentLongUtility, Locale 65. Part 6: MobileIA 66. KEEP IT SIMPLE 67. SITEMAPS 68. CLICKSTREAMS 69. Start ?No ViewOption ViewOptionYes Action Yes ?No Action Action Maybe?No ?No Yes Yes No Action ViewView NoNo View? Yes ? YesView View Finish 70. WIREFRAMES 71. PROTOTYPING 72. DIFFERENT IA FORDIFFERENT DEVICES? 73. THE DESIGNMYTH 74. BackTitle NewContentNavigation 75. Exercise:IA Critique 76. Part 7: Mobile Design 77. The Tent Pole The business goal of a tent-pole production is to support or prop up the losses from other productions. However, to create a tent-pole production, the creators involved must make an artistic work that they know will appeal to the largest possible audience, providing something for everyone. 78. vs. 79. Best Possible Experience In mobile development, the risks and costs of creating that tent- pole product are just too high. This lesson is so easily seen through bad or just plain uninspired mobile design. Asking creative people to create uninspiring work is a fast track to mediocrity. 80. vs. iPhone The Rest 81. Elements of Mobile Design| CONTEXT | MESSAGE | LOOK & FEEL | LAYOUT | COLOR | TYPE | GRAPHICS 82. Context Who are the users?Where are the users? What do you know about them?Are they in a public space or a private space? Are they inside or outside? What type of behavior can you assume or predict about the users? Is it day or is it night? What is happening?Why will they use your app? What are the circumstances in which What value will they gain from your the users will best absorb the contentcontent or services in their present you intend to present?situation? When will they interact?How are they using their mobile Are they at home and have large device? amounts of time? Are they at work Is it held in their hand or in their where they have short periods of time?pocket? Will they have idle periods of time How are they holding it? while waiting for a train, for example? Open or closed? Portrait or landscape? 83. Message What you are trying to say about your site or application visually? Your message is the overall mental impression you create explicitly through visual design. How someone will react to your design? If you take a step back, and look at a design from a distance, what is your impression? 84. Look & Feel Look & Feel is used to describe the appearance As in I want a clean look and feel or I want a usable look and feel. The problem is: As a mobile designer, what does it mean? 85. Layout How the user will visually process the page The structural and visual components of layout often get merged together, creating confusion and making your design more dicult to produce. 86. Color The most common obstacle you encounter when dealing with color is mobile screens. When complex designs are displayed on dierent mobile devices, the limited color depth on one device can cause banding, or unwanted posterization in the image. 87. Typography How type is rendered on mobile screens: subpixel-based screens A subpixel is the division of each pixel into a red, green, and blue (or RGB) unit at a microscopic level, enabling for a greater level of antialiasing for each font character or glyph. 88. Typography How type is rendered on mobile screens: pixel density or greater pixels per inch (PPI) The pixel density is determined by dividing width of the display area in pixels, by width of the display area in inches. 89. Graphics Use of images that are used to establish or aid a visual experience. Graphics can be used to supplement the look and feel, or as content displayed inline with the text. Iconography Photos & Images 90. Different Screen Sizes Mobile devices come in all shapes and sizes. Choice is great for consumers, but bad for design. It can be incredibly dicult to create that best possible experience for a plethora of dierent screen sizes. 91. The Right Device The truly skilled designer doesnt create just one productthey translate ideas into experiences. The spirit of your design should be able to be adapted to multiple devices. The days of tent-poles are gone. 92. Exercise:Design Critique 93. Part 8: Web Apps vs. Native Apps 94. The Ubiquity Principle 95. JARGON ALERTUbiquity Principle The easiest it is to produce quality content and services for the largest available market will always win. 96. Reas Fragon # 1mentat ion 97. Getting your application on one platform is a snap,but getting it on two is a challenge, ve a costly headache, and supporting fty virtually impossible. 98. Reason # The2 W