7 mobile ui prns

7/29/2019 7 Mobile Ui Prns

1/36

Designing for Mobile.7 guidelines for mobile UI / UE.

Ryan Spoon: ryanspoon.com

Polaris Venture Partners:polaris.vc

Rob Abbott: EGG HAUS & CRITIQ.org


2/36

About Us


3/36

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/36

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 its capable of being somethingbrand new and achieving different goals


5/36

Intro: Basic Interface Guidelines

A great user interface follows human

interface design principles that are

based on the way peopleusers

think and work, not on the capabilitiesof the device.

- 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.


6/36

Fun Stats from Mobile Leaders

Facebook had 845m monthly active users (Dec 2011)

and 483m daily active usersMore than half (425m!) used Facebook Mobile products

55% of Twitter users access via mobile (Sept. 2011)


7/36

7Guidelines


8/36

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, their

usage patterns & environments.


9/36


Kindle: access & read anywhere. From web to device, entirely

consistent treatment, design and behavior.


10/36


Seesmic: three platforms, entirely different appearances


11/36


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


12/36

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 on-

screen tasks at once, while mobile is single task.


13/36


Flipboard: same brand and concept but intentionally, entirely

different treatments for mobile vs. tablet. Even evident in promotion.


14/36


955 Dreams: different apps require different experiences

and therefore appear on different devices.


15/36


Zynga: sometimes is it as simple as

more real estate!


16/36

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 aweb browser they want tailored experiences.


17/36


Yelp: content accessible in every format and solves different

needs. Mobile web offering is fast, relevant. Applications are

bigger, richer. Consistent across all environments.


18/36


ESPN: ESPNs mobile web is so good that it renders the

Scorecenter app relatively useless. Its a compliment to their

mobile web but a reminder that apps need to be differentiated.

Can you tell the difference below?


19/36


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


20/36

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 doesnt 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


21/36


Leverage 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/36


Whats the users first experience? Is there an introduction?Is there content accessible for non logged in users?

Clean, simple, easy Usable for new users.

Registration prompt after usage.

Good-looking progress screen

while app activates


23/36

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 isnt many more than whats 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.


24/36

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 thephones core: contacts, calendar, SMS, etc.


25/36

5. Designing for Engagement

Zynga: Why is Scramble with

Friends so much more

popular than Wurdle?

Same game but Zyngas issocial from the first

experience and actionable /

sharable at every point.

Notice screenshot:

immediately after game

completion, only action is to

Play Again.


26/36


Path: Notifications, within

reason, are immensely powerful.

Paths notifications are:

- relevant: people I care about- crisp: short and to the point

- good looking: the use of icons is

fun, visual and enticing


27/36


Xobnis Smartr: Supplements core phone features like

Contacts, SMS, Phone, and Email.


28/36

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 its 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/36


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/36


Fab, Groupon & Path: action items are clear but

nonintrusive. Well designed and fun to visually explore.


31/36

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 downloadconversion.

- 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/36


Take advantage of your users. Promote other applications in

relevant, clean way.


33/36


Connect the dots between mobile web and mobile apps

again, within reason.


34/36


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.Terrificin the river marketing .


35/36


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

@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

7 mobile ui prns

Documents