Urbanspoon vs. Yelp:
iPhone app UX review
Suzanne Ginsburg, Principal
suzanne@ginsburg-design.com

Thanks for your interest in this
presentation.
Please switch to full-screen for best
viewing. Enjoy!

About Me
• 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
3

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
4

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,
and Australia.
• 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.
5

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
September 2008.
• The iPhone app is free.
6

UX Review

Screens Reviewed
List Views Tools
Near Me & Add/Edit Sign In &
Maps Search
Nearby views content Register
Plus “shake” for Urbanspoon Urbanspoon only
Restaurant Screen
Not included in review:
• Friends (Urbanspoon)
Restaurant • Browse (Urbanspoon)
screen
• Recents (Yelp)
• Bookmarks (Yelp)
8

Start Screen: First Time Experience
Shake is Categories
engaging dominate
for first time page.
user.
Tabs or
filters would
allow more
reviews to
be shown.
9

Start Screen: Branding
Urbanspoon No Yelp
logo on branding
every throughout
screen user
experience.
10

Near Me: Content
Hours and
price would
be helpful Has price
here. guide but no
hours info.
11

Near Me & Bookmarks: Sorting
Current sort
is shown
below sort
button
. Sort shown
in overlay.
Sort options
visible. Conserves
space &
Accurately larger tap
tapping targets.
hyperlinks
may be
challenging.
12

Restaurant Screen: Layout
Compact
layout
enables
user to see
nearly all
Restaurant restaurant
info starts info above
halfway fold.
down screen
.
13

Search Form: Start State
Both apps
start with tip
in search
box
Keyboard Keyboard
shown at not shown
start. at start.
14

Search Form: Suggestions
Suggestions
based on Suggestions
neighborhoods, do not
cuisines, and
restaurant specify type
names.
15

Search Form: Exit Strategy
No cancel Cancel
button. button and
Must exit option to
and restart.
change
location.
16

Search Results: Refine
Must go Can edit
back to edit search
search. within
No mapping. context and
map results.
17

Search Results: Content
Limited # of
results can Almost
be shown. twice as
Result many
content also results &
limited. with more
detail.
18

Map List View: Navigation
Back label is 3-ways to
ambiguous navigate:
1) Click marker
2) Between results
3) Detail view
Neither
service
integrates
with Google
Maps from
this view.
19

Map Restaurant View: Google Navigation
Clear
navigation
to Google
Maps
Google
navigation
difficult to
find.
20

Add/Edit Restaurant Info: Urbanspoon
21

Sign In: New vs. Existing Users
New users
can create
an account
on the fly.
.
Existing
Existing users can
users sign in sign in for
below certain
Better to tasks.
reverse the New users
two options must go to
or offer web site.
intermediary
screen with
two choices
(Pandora).
22

Best Practices
(caveat: for this domain)

Best Practice # 1: Sign In
Ideally, users should have the option to
explore service before registering. Do not let
you create
account
If that’s not possible, Sign In should be on fly but
sign out
in a consistent and easily accessible consistent.
location.
Users without an account should be
able to create one on the device, within
the context of the app.
24

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
Movies are
vegetarian restaurants) the focus,
as they
should be.
25

Best Practice # 3: Branding
Ensure that your logo or company
name appears on every screen. Logo
appears on
every
screen.
Can be incorporated into bottom
“home” navigation, as done on NY
Times.
Home has
logo
26

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
features are
“above fold”
27

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
& maps)
Large tap
targets for
key features
28

Best Practice # 6: Contextual Interactions
Where possible, allow user to complete
tasks within context. (Urbanspoon’s
inline rating, Yelp’s inline bookmarking)
Facebook
comments
can be done
inline.
29

Best Practice # 7: Navigation
Provide informative labels and
consistent positions for navigation
Label is “My
elements. (e.g. More specific than Flights”
instead of
“Back” when possible) ambiguous
“Back”.
Name of app:
Always provide a way out. FlightTrack
30

Best Practice # 8: Search
• Provide tip in query field (e.g. taco,
salon).
• Offer search suggestions
• Display keyboard at start to expedite
Search
search. suggestions
cover
• Offer refine search on results page. primary
query types.
31

Best Practice # 9: List Views
Display key information for each
result; will vary depending on domain Filter & map
options
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
relevant.
Show current state (e.g. Yelp shows
current sort on search results).
32

Best Practice # 10: Map List Views
Enable navigation between items in list
and to the detail view.
Link to individual results.
33

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

Appendix: Heuristics & Audit

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 \"emergency exit\" 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.
36

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
appropriate.
• 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.
37

Content Audit
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 ✓
Hours ✓
Address ✓ ✓ ✓
Phone ✓ ✓
Menu ✓
Restaurant photo ✓
User photos ✓ ✓
38

Feature Audit
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 ✓
39