7 guidelines to great mobile design. http://www.ryanspoon.com

1. 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. 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, 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…

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

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 Guidelines

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 all
at once. Optimize for *your* user base, their
usage 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 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. 2. Designing for Device
Flipboard: same brand and concept but intentionally, entirely
different 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 Device
Zynga: sometimes is it as simple as
more real estate!

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

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

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

19. 3. Designing for Experience
HBO GO: And then there are experiences that can only be
delivered via application. HBO GO is magical.

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

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

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

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

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

27. 5. Designing for Engagement
Xobni’s Smartr: Supplements core phone features like
Contacts, 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,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. 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. 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 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. 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.
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. 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.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