1. Designing for Mobile.7 guidelines for mobile UI / UE.Ryan Spoon: ryanspoon.comPolaris Venture Partners: polaris.vcRob Abbott: EGG HAUS & CRITIQ.org

2. About Us 3. Good Design Good design should be innovative. Good design should make a product useful. Good design is aesthetic design. Good design will make a product understandable. Good design is honest. Good design is unobtrusive. Good design is long lived. Good design is consistent in every detail. Last but not least, good design is as little design as possible.Dieter Rams, Braun 4. Design for Mobile- Mobile is its own environment & web.- Mobile web is different than traditional web.- Users have different desires, needs, andexpectations!Mobile design has to be more than a repurposedexperience. And its capable of being somethingbrand new and achieving different goals 5. Intro: Basic Interface Guidelines- Start by reading Apples iOS Human Interface Guidelines.- Provides the best design and interaction principles.- Applicable for any platform, focus and function:product and design folks alike should read.A great user interface follows humaninterface design principles that arebased on the way peopleusersthink and work, not on the capabilitiesof the device. 6. Fun Stats from Mobile LeadersFacebook had 845m monthly active users (Dec 2011)and 483m daily active usersMore than half (425m!) used Facebook Mobile products55% of Twitter users access via mobile (Sept. 2011) 7. 7 Guidelines 8. 1. Designing for Platform- Each mobile platform has a unique interfacecomponents, capabilities and requirements. - If your product spans multiple platforms(and it eventually should!), it should functionand look as consistently as possible. - But: must also respect platformconstraints, and inherit its own uniquedesign and interaction paradigms.Advice: start with one platform rather than allat once. Optimize for *your* user base, theirusage patterns & environments. 9. 1. Designing for Platform Kindle: access & read anywhere. From web to device, entirely consistent treatment, design and behavior. 10. 1. Designing for Platform Seesmic: three platforms, entirely different appearances 11. 1. Designing for Platform Fandango: no platform left unturned, from iOS to Tivo to web. 12. 2. Designing for DeviceMobile or Tablet? Well, that depends on:1. your goals: product, business2. your users: demographic, patterns3. their usage: current, desired; today, tomorrowThe difference is more than real-estate and availablepixels: Different utilities, mindsets, usage patterns, etc.For instance, tablet real estate can support multiple on-screen tasks at once, while mobile is single task. 13. 2. Designing for DeviceFlipboard: same brand and concept but intentionally, entirelydifferent treatments for mobile vs. tablet. Even evident in promotion. 14. 2. Designing for Device 955 Dreams: different apps require different experiences and therefore appear on different devices. 15. 2. Designing for DeviceZynga: sometimes is it as simple asmore real estate! 16. 3. Designing for ExperienceA single web app can reach multiple platforms at once,while a native app is tied to only a single platform.If a web app is deployed within a native platform app(wrapper), it can be published to its respective app store.These are called hybrid-apps. Netflix is a great example of this.Advice: wrappers are efficient ways to build and publishuniversally but: must still design for specificenvironment, functionalities. Users do not want apps thatmerely house a web browser they want tailored experiences. 17. 3. Designing for ExperienceYelp: content accessible in every format and solves differentneeds. Mobile web offering is fast, relevant. Applications arebigger, richer. Consistent across all environments. 18. 3. Designing for ExperienceESPN: ESPNs mobile web is so good that it renders theScorecenter app relatively useless. Its a compliment to theirmobile web but a reminder that apps need to be differentiated.Can you tell the difference below? 19. 3. Designing for ExperienceHBO GO: And then there are experiences that can only bedelivered via application. HBO GO is magical. 20. 4. Designing for ConversionUsers evaluate an app within the first 30 seconds, so firstimpressions are crucial.Think of your app icon, default screen, and initial experience asa basic landing page that must be optimized for conversion.Otherwise, the remainder of your app doesnt matter!Downloads are just first step. Driving usage and re-engagementare more important. Convert users along funnel of:download >> first experience >> registration >> routine usage 21. 4. Designing for ConversionLeverage Facebook authentication where the FB app is almostuniversally installed and typing emails & passwords is harder.One click login / reg Authenticates in background Phone # login > email address 22. 4. Designing for Conversion Whats the users first experience? Is there an introduction? Is there content accessible for non logged in users?Clean, simple, easyUsable for new users. Good-looking progress screenRegistration prompt after usage.while app activates 23. 5A. Designing for EngagementHow many apps have you downloaded?How many are currently on your phone?Now how many do you actually use?It probably isnt many more than whats onyour first pageKeeping users engaged is incredibly difficult.Puts emphasis on first impressions, perceivedvalue, utility and focus on engagement.Notifications help communicate to and nudgeusers about events in your app. Use thesemechanisms strategically, carefully. 24. 5B. Designing for ViralityTwitter, Facebook, SMS and email are fantastictools that empower people to shareevents, experiences, and content they deemworthy sharing with friends and others.If sharing is appropriate for your app orgame, then take advantage of the opportunityto implement these services into your product.Often overlooked: ability to leverage thephones core: contacts, calendar, SMS, etc. 25. 5. Designing for EngagementZynga: Why is Scramble withFriends so much morepopular than Wurdle?Same game but Zyngas issocial from the firstexperience and actionable /sharable at every point.Notice screenshot:immediately after gamecompletion, only action is toPlay Again. 26. 5. Designing for EngagementPath: Notifications, withinreason, are immensely powerful.Paths notifications are:- relevant: people I care about- crisp: short and to the point- good looking: the use of icons isfun, visual and enticing 27. 5. Designing for EngagementXobnis Smartr: Supplements core phone features likeContacts, SMS, Phone, and Email. 28. 6. Designing for Usability- One of the most ignored factors of mobile design is usability.- Available real estate puts paramount focus on ease,speedand simplicity. Always ask yourself:What is essential?What can be removed?- While its possible to be too simple, it is important to alwaysbalance product features against ease of use. Better to addthan remove!Is the workflow fluid?Is the UI intuitive? 29. 6. Designing for Usability Facebook Messages: Facebooks core app is cluttered and bulky. I use Facebook Messages daily because it is does one thing (messages) really well and really quickly. or 30. 6. Designing for Usability Fab, Groupon & Path: action items are clear but nonintrusive. Well designed and fun to visually explore. 31. 7. Designing for Awareness- Target your audience using app store keywords and titling.Optimize timing, targeting, competition.- Every app also needs an effective website landing page with aproduct overview, and a call-to-action for downloadconversion.- Advertise app updates, and market pricing sales in-app andon the web via social platforms and related industry blogsthat opt to write about your app.- Drive reviews. Turn happy users into 5-star reviews. 32. 7. Designing for Awareness Take advantage of your users. Promote other applications in relevant, clean way. 33. 7. Designing for Awareness Connect the dots between mobile web and mobile apps again, within reason. 34. 7. Designing for Awareness And remember to drive awareness of your own features and to convert happy users into great app store reviews! This is my favorite example. Facebooks app is among the most cluttered but they took over all real estate to announce Facebook Places. Terrific in the river marketing. 35. 7. Designing for Awareness Leverage the web to promote downloads. Obviously the experience is less efficient than a web download, but places like Gilt and Groupon creatively leverage SMS, email, etc. 36. Learn more. Connect with us. polaris.vc dogpatchlabs.comryanspoon.com @polarisvc @dogpatchlabs @ryanspoon fb.com/polarisventures fb.com/dogpatchlabs fb.com/ryanspoon EGGHAUS.comCRITIQ.org @egghaus @critiqd @abbottfb.com/critiq