iPhone App UX Review: Urbanspoon vs. Yelp

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

http://www.iphoneuxreviews.com	1056
http://www.slideshare.net	76
http://coolastory.blogspot.com	41
http://traffichoney.com	21
http://www.touchytalk.com	20
https://38one.basecamphq.com	3
http://christophebouten.tumblr.com	2
http://paper.li	1
http://www.lmodules.com	1
http://translate.googleusercontent.com	1
http://74.125.47.132	1
http://localhost	1

iPhone App UX Review: Urbanspoon vs. Yelp

by Ginsburg Design

Accessibility

Categories

Upload Details

Usage Rights

12 Embeds 1,224

Statistics

iPhone App UX Review: Urbanspoon vs. Yelp Presentation Transcript