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!

3

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

4

UX Review Approach

• Brief descriptions of the two companies

(Content & feature audits in Appendix)

• UX review of key product features, primarily based on recognized usabilityheuristics as well as iPhone Human Interface Guidelines.

(Jakob Nielsen’s heuristics in Appendix)

• Best practices & recommendations

5

What is Urbanspoon?

• Urbanspoon is a restaurant directory withreviews 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 theiriPhone application in July 2008. (Versionreviewed is 1.07, November 2008)

• The iPhone app is free but has advertising.

6

What is Yelp?

• Yelp also has restaurant reviews but theyspecialize in user-generated content.

• Yelp’s reviews extend beyond the restaurantworld, covering everything from your localmechanic to nail salons.

• The web site launched in 2004 and coversdozens of cities in the U.S. (also UK & Canada)

• Version 1.10 of their iPhone app was released inSeptember 2008.

• The iPhone app is free.

UX Review

8

Not included in review:

• Friends (Urbanspoon)

• Browse (Urbanspoon)

• Recents (Yelp)

• Bookmarks (Yelp)

Screens Reviewed

Near Me &Nearby views

Maps

Restaurantscreen

List Views

Restaurant Screen

Tools

SearchAdd/Editcontent

Sign In &Register

Plus “shake” for Urbanspoon Urbanspoon only

9

Start Screen: First Time Experience

Shake isengaging

for first timeuser.

Categoriesdominatepage.

Tabs orfilters wouldallow morereviews tobe shown.

10

Start Screen: Branding

Urbanspoonlogo on

everyscreen

No Yelpbrandingthroughoutuserexperience.

11

Near Me: Content

Hours andprice would

be helpfulhere.

Has priceguide but nohours info.

12

Near Me & Bookmarks: Sorting

.

Current sortis shownbelow sortbutton

Sort optionsvisible.

Accuratelytapping

hyperlinksmay be

challenging.

Sort shownin overlay.

Conservesspace &larger taptargets.

13

Restaurant Screen: Layout

.

Restaurantinfo starts

halfwaydown screen

Compactlayoutenablesuser to seenearly allrestaurantinfo abovefold.

14

Search Form: Start State

Both appsstart with tip

in searchbox

Keyboardshown at

start.

Keyboardnot shownat start.

15

Search Form: Suggestions

Suggestionsbased on

neighborhoods,cuisines, and

restaurantnames.

Suggestionsdo notspecify type

16

Search Form: Exit Strategy

No cancelbutton.

Must exitand restart.

Cancelbutton andoption tochangelocation.

17

Search Results: Refine

Must goback to edit

search.

No mapping.

Can editsearchwithincontext andmap results.

18

Search Results: Content

Limited # ofresults canbe shown.

Resultcontent also

limited.

Almosttwice asmanyresults &with moredetail.

19

Map List View: Navigation

Back label isambiguous 3-ways to

navigate:1) Click marker

2) Between results

3) Detail view

Neitherservice

integrateswith Google

Maps fromthis view.

20

Map Restaurant View: Google Navigation

Googlenavigationdifficult to

find.

Clearnavigationto GoogleMaps

21

Add/Edit Restaurant Info: Urbanspoon

22

Sign In: New vs. Existing Users

.

New userscan createan account

on the fly.

Existingusers sign in

below

Better toreverse thetwo options

or offerintermediaryscreen withtwo choices(Pandora).

Existingusers cansign in forcertaintasks.

New usersmust go toweb site.

Best Practices

(caveat: for this domain)

24

Best Practice # 1: Sign In

Ideally, users should have the option toexplore service before registering.

If that’s not possible, Sign In should bein a consistent and easily accessiblelocation.

Users without an account should beable to create one on the device, withinthe context of the app.

Do not letyou createaccounton fly butsign outconsistent.

25

Best Practice # 2: Start Screen

Provide users with rich & relevantcontent from beginning.

Nice to customize experience based onuser preferences (e.g. only show meindependent films or only show mevegetarian restaurants)

Movies arethe focus,as theyshould be.

26

Best Practice # 3: Branding

Ensure that your logo or companyname appears on every screen.

Can be incorporated into bottom“home” navigation, as done on NYTimes.

Logoappears oneveryscreen.

Home haslogo

27

Best Practice # 4: Layout

Keep UI elements compact so that keycontent and functionality is above fold.(e.g. Yelp’s list and detail views)

Primarycontent andfeatures are“above fold”

28

Best Practice # 5: Tap Targets

Ensure that tap targets are largeenough and far enough away enoughfrom other tap targets. (e.g. Yelp’sdetail view has large targets for calls& maps)

Large taptargets forkey features

29

Best Practice # 6: Contextual Interactions

Where possible, allow user to completetasks within context. (Urbanspoon’sinline rating, Yelp’s inline bookmarking)

Facebookcommentscan be doneinline.

30

Best Practice # 7: Navigation

Provide informative labels andconsistent positions for navigationelements. (e.g. More specific than“Back” when possible)

Always provide a way out.

Label is “MyFlights”instead ofambiguous“Back”.

Name of app:FlightTrack

31

Best Practice # 8: Search

• Provide tip in query field (e.g. taco,salon).

• Offer search suggestions

• Display keyboard at start to expedite

search.

• Offer refine search on results page.

Searchsuggestionscoverprimaryquery types.

32

Best Practice # 9: List Views

Display key information for eachresult; will vary depending on domainand context of use. (e.g. “open” ishelpful for restaurants, “show starts inx mins” is helpful for movies.)

Provide sort & filter options whenrelevant.

Show current state (e.g. Yelp showscurrent sort on search results).

Filter & mapoptionsprovided.

33

Best Practice # 10: Map List Views

Enable navigation between items in listand to the detail view.

Link to individual results.

34

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.

Appendix: Heuristics & Audit

36

Ten Usability Heuristics

From Jakob Nielsen, 1994:

• Visibility of system status: The system should always keep users informed about what is goingon, through appropriate feedback within reasonable time.

• Match between system and the real world: The system should speak the users' language, withwords, 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 aclearly marked "emergency exit" to leave the unwanted state without having to go through anextended 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 aproblem from occurring in the first place. Either eliminate error-prone conditions or check for themand present users with a confirmation option before they commit to the action.

37

Ten Usability Heuristics (continued)

• Recognition rather than recall: Minimize the user's memory load by making objects, actions, andoptions visible. The user should not have to remember information from one part of the dialogue toanother. Instructions for use of the system should be visible or easily retrievable wheneverappropriate.

• Flexibility and efficiency of use: Accelerators -- unseen by the novice user -- may often speed upthe interaction for the expert user such that the system can cater to both inexperienced andexperienced users. Allow users to tailor frequent actions.

• Aesthetic and minimalist design: Dialogues should not contain information which is irrelevant orrarely needed. Every extra unit of information in a dialogue competes with the relevant units ofinformation and diminishes their relative visibility.

• Help users recognize, diagnose, and recover from errors: Error messages should be expressedin 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 withoutdocumentation, it may be necessary to provide help and documentation. Any such informationshould be easy to search, focused on the user's task, list concrete steps to be carried out, and notbe too large.

38

Content Audit

✓✓✓Cuisine category

✓✓User reviews

✓Critic reviews

✓Distance from me

✓

✓

✓

✓

✓

✓

✓

Urbanspoon

(detail view)

✓

✓

✓

✓

✓

✓

✓

✓

✓

Yelp

(detail view)

✓User photos

Restaurant photo

Menu

Phone

✓Address

Hours

✓✓User ratings

✓Price range

✓Neighborhood

✓✓Name

Yelp

(nearby view)

Urbanspoon

(near me view)

Overall content richer on Yelp; important content missing from Urbanspoon “near me” view includesprice & hours.

39

Feature Audit

✓✓Recently visited

✓✓Near me/Nearby

✓✓Search

✓Find me

✓✓Bookmark

✓✓Browse

✓Shake

YelpUrbanspoon

1. Restaurant finding features

✓Tweet restaurant

✓Add new restaurant

✓Add menu

✓Rate restaurant

✓Mark as closed

✓Bookmark

Review restaurant

Go to web site

✓✓Call

✓Edit restaurant info

✓✓Add photo

✓Get directions

✓✓Map restaurant

YelpUrbanspoon

2. Restaurant features

✓Invite/view friends

✓Create profile

YelpUrbanspoon

3. Community features

Restaurant & community features (2 & 3 below) are richer on Urbanspoon; differences are less striking forthe “find restaurant” features (1 below).