Designing for Mobile.

7 guidelines for mobile UI / UE.

Ryan Spoon: ryanspoon.com Polaris Venture Partners: polaris.vc Rob Abbott: EGG HAUS & CRITIQ.org

About Us

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

Design for Mobile

- Mobile is its own environment & web. - Mobile web is different than traditional web. - Users have different desires, needs, and expectations! Mobile design has to be more than a repurposed experience. And it s capable of being something brand new and achieving different goals

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 human interface design principles that are based on the way people users think and work, not on the capabilities of the device.

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 Guidelines

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 all at once. Optimize for *your* user base, their usage patterns & environments. -

1. Designing for Platform

Kindle: access & read anywhere. From web to device, entirely consistent treatment, design and behavior.

1. Designing for Platform

Seesmic: three platforms, entirely different appearances

1. Designing for Platform

Fandango: no platform left unturned, from iOS to Tivo to web.

2. Designing for Device

Mobile or Tablet? Well, that depends on: 1. your goals: product, business 2. your users: demographic, patterns 3. their usage: current, desired; today, tomorrow The difference is more than real-estate and available pixels: Different utilities, mindsets, usage patterns, etc. For instance, tablet real estate can support multiple onscreen tasks at once, while mobile is single task.

2. Designing for Device

Flipboard: same brand and concept but intentionally, entirely different treatments for mobile vs. tablet. Even evident in promotion.

2. Designing for Device

955 Dreams: different apps require different experiences and therefore appear on different devices.

2. Designing for Device

Zynga: sometimes is it as simple as more real estate!

3. Designing for Experience

A 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 publish universally but: must still design for specific environment, functionalities. Users do not want apps that merely house a web browser they want tailored experiences.

3. Designing for Experience

Yelp: content accessible in every format and solves different needs. Mobile web offering is fast, relevant. Applications are bigger, richer. Consistent across all environments.

3. Designing for Experience

ESPN: ESPN s mobile web is so good that it renders the Scorecenter app relatively useless. It s a compliment to their mobile web but a reminder that apps need to be differentiated. Can you tell the difference below?

3. Designing for Experience

HBO GO: And then there are experiences that can only be delivered via application. HBO GO is magical.

4. Designing for Conversion

Users evaluate an app within the first 30 seconds, so first impressions are crucial. Think of your app icon, default screen, and initial experience as a 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-engagement are more important. Convert users along funnel of: download >> first experience >> registration >> routine usage

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

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

5A. Designing for Engagement

How 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 on your first page Keeping users engaged is incredibly difficult. Puts emphasis on first impressions, perceived value, utility and focus on engagement. Notifications help communicate to and nudge users about events in your app. Use these mechanisms strategically, carefully.

5B. Designing for Virality

Twitter, Facebook, SMS and email are fantastic tools that empower people to share events, experiences, and content they deem worthy sharing with friends and others. If sharing is appropriate for your app or game, then take advantage of the opportunity to implement these services into your product. Often overlooked: ability to leverage the phone s core: contacts, calendar, SMS, etc.

5. Designing for Engagement

Zynga: Why is Scramble with Friends so much more popular than Wurdle? Same game but Zynga s is social from the first experience and actionable / sharable at every point. Notice screenshot: immediately after game completion, only action is to Play Again.

5. Designing for Engagement

Path: Notifications, within reason, are immensely powerful. Path s notifications are: - relevant: people I care about - crisp: short and to the point - good looking: the use of icons is fun, visual and enticing

5. Designing for Engagement

Xobni s Smartr: Supplements core phone features like Contacts, SMS, Phone, and Email.

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?

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

6. Designing for Usability

Fab, Groupon & Path: action items are clear but nonintrusive. Well designed and fun to visually explore.

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.

7. Designing for Awareness

Take advantage of your users. Promote other applications in relevant, clean way.

7. Designing for Awareness

Connect the dots between mobile web and mobile apps again, within reason.

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.

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.

Learn more. Connect with us.

polaris.vc @polarisvc fb.com/polarisventures

dogpatchlabs.com @dogpatchlabs fb.com/dogpatchlabs

ryanspoon.com @ryanspoon fb.com/ryanspoon

EGGHAUS.com @egghaus @abbott

CRITIQ.org @critiqd fb.com/critiq