7 Guidelines to Mobile Design


Published on

7 guidelines to great mobile design.

Published in: Technology, Business

7 Guidelines to Mobile Design

  1. 1. Designing for Mobile. 7 guidelines for mobile UI / UE.Ryan Spoon: ryanspoon.comPolaris Venture Partners: polaris.vcRob Abbott: EGG HAUS & CRITIQ.org
  2. 2. About Us
  3. 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. 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 it’s capable of being somethingbrand new and achieving different goals…
  5. 5. Intro: Basic Interface Guidelines- Start by reading Apple’s 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 people—users—think and work, not on the capabilitiesof the device.”
  6. 6. Fun Stats from Mobile Leaders Facebook had 845m monthly active users (Dec 2011) and 483m daily active users More than half (425m!) used Facebook Mobile products 55% of Twitter users access via mobile (Sept. 2011)
  7. 7. 7 Guidelines
  8. 8. 1. Designing for Platform- Each mobile platform has a unique interface components, capabilities and requirements. - If your product spans multiple platforms (and it eventually should!), it should function and look as consistently as possible. - But: must also respect platform constraints, and inherit its own unique design and interaction paradigms.Advice: start with one platform rather than allat once. Optimize for *your* user base, theirusage patterns & environments.
  9. 9. 1. Designing for Platform Kindle: access & read anywhere. From web to device, entirely consistent treatment, design and behavior.
  10. 10. 1. Designing for Platform Seesmic: three platforms, entirely different appearances
  11. 11. 1. Designing for Platform Fandango: no platform left unturned, from iOS to Tivo to web.
  12. 12. 2. Designing for DeviceMobile or Tablet? Well, that depends on: 1. your goals: product, business 2. your users: demographic, patterns 3. 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. 13. 2. Designing for DeviceFlipboard: same brand and concept but intentionally, entirelydifferent treatments for mobile vs. tablet. Even evident in promotion.
  14. 14. 2. Designing for Device 955 Dreams: different apps require different experiences and therefore appear on different devices.
  15. 15. 2. Designing for DeviceZynga: sometimes is it as simple asmore real estate!
  16. 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. 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. 18. 3. Designing for ExperienceESPN: ESPN’s mobile web is so good that it renders theScorecenter app relatively useless. It’s a compliment to theirmobile web but a reminder that apps need to be differentiated.Can you tell the difference below?
  19. 19. 3. Designing for ExperienceHBO GO: And then there are experiences that can only bedelivered via application. HBO GO is magical.
  20. 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 doesn’t 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. 21. 4. Designing for Conversion Leverage Facebook authentication where the FB app is almost universally installed and typing emails & passwords is harder.One click login / reg Authenticates in background Phone # login > email address
  22. 22. 4. Designing for Conversion What’s the user’s first experience? Is there an introduction? Is there content accessible for non logged in users?Clean, simple, easy Usable for new users. Good-looking ‘progress’ screen Registration prompt after usage. while app activates
  23. 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 isn’t many more than what’s onyour first page…Keeping 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. 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 thephone’s core: contacts, calendar, SMS, etc.
  25. 25. 5. Designing for EngagementZynga: Why is Scramble withFriends so much morepopular than Wurdle?Same game but Zynga’s issocial from the firstexperience and actionable /sharable at every point.Notice screenshot:immediately after gamecompletion, only action is toPlay Again.
  26. 26. 5. Designing for EngagementPath: Notifications, withinreason, are immensely powerful.Path’s notifications are:- relevant: people I care about- crisp: short and to the point- good looking: the use of icons isfun, visual and enticing
  27. 27. 5. Designing for Engagement Xobni’s Smartr: Supplements core phone features like Contacts, SMS, Phone, and Email.
  28. 28. 6. Designing for Usability- One of the most ignored factors of mobile design is usability.- Available real estate puts paramount focus on ease,speed and simplicity. Always ask yourself: What is essential? What can be removed?- While it’s possible to be too simple, it is important to always balance product features against ease of use. Better to add than remove! Is the workflow fluid? Is the UI intuitive?
  29. 29. 6. Designing for Usability Facebook Messages: Facebook’s 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. 30. 6. Designing for Usability Fab, Groupon & Path: action items are clear but nonintrusive. Well designed and fun to visually explore.
  31. 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 a product overview, and a call-to-action for download conversion.- Advertise app updates, and market pricing sales in-app and on the web via social platforms and related industry blogs that opt to write about your app.- Drive reviews. Turn happy users into 5-star reviews.
  32. 32. 7. Designing for Awareness Take advantage of your users. Promote other applications in relevant, clean way.
  33. 33. 7. Designing for Awareness Connect the dots between mobile web and mobile apps… again, within reason.
  34. 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. Facebook’s app is among the most cluttered – but they took over all real estate to ‘announce’ Facebook Places. Terrific ‘in the river’ marketing.
  35. 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. 36. Learn more. Connect with us. polaris.vc dogpatchlabs.com ryanspoon.com @polarisvc @dogpatchlabs @ryanspoon fb.com/polarisventures fb.com/dogpatchlabs fb.com/ryanspoon EGGHAUS.com CRITIQ.org @egghaus @critiqd @abbott fb.com/critiq