Transcript of "iPhone App UX Review: Urbanspoon vs. Yelp"
Urbanspoon vs. Yelp:
iPhone app UX review
Suzanne Ginsburg, Principal
Thanks for your interest in this
Please switch to full-screen for best
• More than twelve years of experience designing software
• Six years in the Communities & Communications group at Yahoo!
• Three years consulting on my own (startups, in-house, design agencies)
• M.S. in Information Management from UC Berkeley’s iSchool
• Relatively new to iPhone design
UX Review Approach
• Brief descriptions of the two companies
(Content & feature audits in Appendix)
• UX review of key product features, primarily based on recognized usability
heuristics as well as iPhone Human Interface Guidelines.
(Jakob Nielsen’s heuristics in Appendix)
• Best practices & recommendations
What is Urbanspoon?
• Urbanspoon is a restaurant directory with
reviews from critics, food bloggers, and users.
• The web site covers restaurants across the U.S.
as well as select locations in Canada, the UK,
• The company launched the first version of their
iPhone application in July 2008. (Version
reviewed is 1.07, November 2008)
• The iPhone app is free but has advertising.
What is Yelp?
• Yelp also has restaurant reviews but they
specialize in user-generated content.
• Yelp’s reviews extend beyond the restaurant
world, covering everything from your local
mechanic to nail salons.
• The web site launched in 2004 and covers
dozens of cities in the U.S. (also UK & Canada)
• Version 1.10 of their iPhone app was released in
• The iPhone app is free.
List Views Tools
Near Me & Add/Edit Sign In &
Nearby views content Register
Plus “shake” for Urbanspoon Urbanspoon only
Not included in review:
• Friends (Urbanspoon)
Restaurant • Browse (Urbanspoon)
• Recents (Yelp)
• Bookmarks (Yelp)
Start Screen: First Time Experience
Shake is Categories
for first time page.
Start Screen: Branding
Urbanspoon No Yelp
logo on branding
Near Me: Content
be helpful Has price
here. guide but no
Near Me & Bookmarks: Sorting
. Sort shown
Accurately larger tap
Restaurant Screen: Layout
user to see
info starts info above
Search Form: Start State
start with tip
shown at not shown
start. at start.
Search Form: Suggestions
based on Suggestions
neighborhoods, do not
restaurant specify type
Search Form: Exit Strategy
No cancel Cancel
button. button and
Must exit option to
Search Results: Refine
Must go Can edit
back to edit search
No mapping. context and
Search Results: Content
Limited # of
results can Almost
be shown. twice as
content also results &
limited. with more
Map List View: Navigation
Back label is 3-ways to
1) Click marker
2) Between results
3) Detail view
Map Restaurant View: Google Navigation
Sign In: New vs. Existing Users
on the fly.
Existing users can
users sign in sign in for
Better to tasks.
reverse the New users
two options must go to
or offer web site.
Best Practice # 1: Sign In
Ideally, users should have the option to
explore service before registering. Do not let
If that’s not possible, Sign In should be on fly but
in a consistent and easily accessible consistent.
Users without an account should be
able to create one on the device, within
the context of the app.
Best Practice # 2: Start Screen
Provide users with rich & relevant
content from beginning.
Nice to customize experience based on
user preferences (e.g. only show me
independent films or only show me
vegetarian restaurants) the focus,
Best Practice # 3: Branding
Ensure that your logo or company
name appears on every screen. Logo
Can be incorporated into bottom
“home” navigation, as done on NY
Best Practice # 4: Layout
Keep UI elements compact so that key
content and functionality is above fold. Primary
(e.g. Yelp’s list and detail views) content and
Best Practice # 5: Tap Targets
Ensure that tap targets are large
enough and far enough away enough
from other tap targets. (e.g. Yelp’s
detail view has large targets for calls
Best Practice # 6: Contextual Interactions
Where possible, allow user to complete
tasks within context. (Urbanspoon’s
inline rating, Yelp’s inline bookmarking)
can be done
Best Practice # 7: Navigation
Provide informative labels and
consistent positions for navigation
Label is “My
elements. (e.g. More specific than Flights”
“Back” when possible) ambiguous
Name of app:
Always provide a way out. FlightTrack
Best Practice # 8: Search
• Provide tip in query field (e.g. taco,
• Offer search suggestions
• Display keyboard at start to expedite
• Offer refine search on results page. primary
Best Practice # 9: List Views
Display key information for each
result; will vary depending on domain Filter & map
and context of use. (e.g. “open” is provided.
helpful for restaurants, “show starts in
x mins” is helpful for movies.)
Provide sort & filter options when
Show current state (e.g. Yelp shows
current sort on search results).
Best Practice # 10: Map List Views
Enable navigation between items in list
and to the detail view.
Link to individual results.
Best Practices Summary
• Sign in: Display in a consistent location, ideally accessible at all times; enable new users to create
an account on the device.
• Start screen: Provide users with rich & relevant content from beginning.
• Branding: Ensure that the logo or company name appears on every screen; can be incorporated
into bottom “home” navigation as done on NY Times.
• Layout: Keep UI elements compact so that key content and functionality is above fold.
• Tap targets: Ensure that tap targets are large enough and far enough away from other tap targets.
• Contextual interactions: Where possible, allow user to complete tasks within context.
• Navigation: Provide informative labels and consistent positions for navigation elements; always
provide a way out.
• Search: Provide tool tip in query field; offer comprehensive search suggestions; display keyboard
at start to expedite search; offer refine search directly on results page.
• List views: Provide sort & filter options when relevant; show current sort or filter state.
• Map list views: Enable navigation between items in list and to the detail view; link to Google maps
for interactive functionality.
Ten Usability Heuristics
From Jakob Nielsen, 1994:
• Visibility of system status: The system should always keep users informed about what is going
on, through appropriate feedback within reasonable time.
• Match between system and the real world: The system should speak the users' language, with
words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-
world conventions, making information appear in a natural and logical order.
• User control and freedom: Users often choose system functions by mistake and will need a
clearly marked quot;emergency exitquot; to leave the unwanted state without having to go through an
extended dialogue. Support undo and redo.
• Consistency and standards: Users should not have to wonder whether different words, situations,
or actions mean the same thing. Follow platform conventions.
• Error prevention: Even better than good error messages is a careful design which prevents a
problem from occurring in the first place. Either eliminate error-prone conditions or check for them
and present users with a confirmation option before they commit to the action.
Ten Usability Heuristics (continued)
• Recognition rather than recall: Minimize the user's memory load by making objects, actions, and
options visible. The user should not have to remember information from one part of the dialogue to
another. Instructions for use of the system should be visible or easily retrievable whenever
• Flexibility and efficiency of use: Accelerators -- unseen by the novice user -- may often speed up
the interaction for the expert user such that the system can cater to both inexperienced and
experienced users. Allow users to tailor frequent actions.
• Aesthetic and minimalist design: Dialogues should not contain information which is irrelevant or
rarely needed. Every extra unit of information in a dialogue competes with the relevant units of
information and diminishes their relative visibility.
• Help users recognize, diagnose, and recover from errors: Error messages should be expressed
in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
• Help and documentation: Even though it is better if the system can be used without
documentation, it may be necessary to provide help and documentation. Any such information
should be easy to search, focused on the user's task, list concrete steps to be carried out, and not
be too large.
Overall content richer on Yelp; important content missing from Urbanspoon “near me” view includes
price & hours.
Urbanspoon Yelp Urbanspoon Yelp
(near me view) (nearby view) (detail view) (detail view)
Name ✓ ✓ ✓ ✓
Neighborhood ✓ ✓ ✓
Cuisine category ✓ ✓ ✓
Distance from me ✓
Price range ✓ ✓ ✓
User ratings ✓ ✓ ✓ ✓
User reviews ✓ ✓
Critic reviews ✓
Address ✓ ✓ ✓
Phone ✓ ✓
Restaurant photo ✓
User photos ✓ ✓
Restaurant & community features (2 & 3 below) are richer on Urbanspoon; differences are less striking for
the “find restaurant” features (1 below).
1. Restaurant finding features 2. Restaurant features
Urbanspoon Yelp Urbanspoon Yelp
Shake ✓ Map restaurant ✓ ✓
Browse ✓ ✓ Get directions ✓
Near me/Nearby ✓ ✓ Rate restaurant ✓
Search ✓ ✓ Review restaurant
Bookmark ✓ ✓ Add photo ✓ ✓
Recently visited ✓ ✓ Add menu ✓
Find me ✓ Edit restaurant info ✓
Mark as closed ✓
3. Community features Bookmark ✓
Urbanspoon Yelp Call ✓ ✓
Create profile ✓ Go to web site
Invite/view friends ✓ Tweet restaurant ✓
Add new restaurant ✓
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.