Hide Notes 

Slide 1: Urbanspoon vs. Yelp: iPhone app UX review Suzanne Ginsburg, Principal suzanne@ginsburg-design.com
Slide 2: Thanks for your interest in this presentation. Please switch to full-screen for best viewing. Enjoy!
Slide 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 3
Slide 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 usability heuristics as well as iPhone Human Interface Guidelines. (Jakob Nielsen’s heuristics in Appendix) • Best practices & recommendations 4
Slide 5: 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
Slide 6: 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
Slide 7: UX Review
Slide 8: Screens Reviewed List Views Tools Near Me & Nearby views Maps Search Add/Edit content Sign In & Register Plus “shake” for Urbanspoon Urbanspoon only Restaurant Screen Not included in review: • Friends (Urbanspoon) Restaurant screen • Browse (Urbanspoon) • Recents (Yelp) • Bookmarks (Yelp) 8
Slide 9: Start Screen: First Time Experience Shake is engaging for first time user. Categories dominate page. Tabs or filters would allow more reviews to be shown. 9
Slide 10: Start Screen: Branding Urbanspoon logo on every screen No Yelp branding throughout user experience. 10
Slide 11: Near Me: Content Hours and price would be helpful here. Has price guide but no hours info. 11
Slide 12: Near Me & Bookmarks: Sorting Current sort is shown below sort button . Sort options visible. Accurately tapping hyperlinks may be challenging. Sort shown in overlay. Conserves space & larger tap targets. 12
Slide 13: Restaurant Screen: Layout Restaurant info starts halfway down screen Compact layout enables user to see nearly all restaurant info above fold. . 13
Slide 14: Search Form: Start State Both apps start with tip in search box Keyboard shown at start. Keyboard not shown at start. 14
Slide 15: Search Form: Suggestions Suggestions based on neighborhoods, cuisines, and restaurant names. Suggestions do not specify type 15
Slide 16: Search Form: Exit Strategy No cancel button. Must exit and restart. Cancel button and option to change location. 16
Slide 17: Search Results: Refine Can edit search within context and map results. Must go back to edit search. No mapping. 17
Slide 18: Search Results: Content Limited # of results can be shown. Result content also limited. Almost twice as many results & with more detail. 18
Slide 19: Map List View: Navigation Back label is ambiguous 3-ways to navigate: 1) Click marker 2) Between results 3) Detail view Neither service integrates with Google Maps from this view. 19
Slide 20: Map Restaurant View: Google Navigation Clear navigation to Google Maps Google navigation difficult to find. 20
Slide 21: Add/Edit Restaurant Info: Urbanspoon 21
Slide 22: Sign In: New vs. Existing Users New users can create an account on the fly. . Existing users sign in below Better to reverse the two options or offer intermediary screen with two choices (Pandora). Existing users can sign in for certain tasks. New users must go to web site. 22
Slide 23: Best Practices (caveat: for this domain)
Slide 24: Best Practice # 1: Sign In Ideally, users should have the option to explore service before registering. If that’s not possible, Sign In should be in a consistent and easily accessible location. Users without an account should be able to create one on the device, within the context of the app. Do not let you create account on fly but sign out consistent. 24
Slide 25: 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) Movies are the focus, as they should be. 25
Slide 26: Best Practice # 3: Branding Ensure that your logo or company name appears on every screen. Can be incorporated into bottom “home” navigation, as done on NY Times. Logo appears on every screen. Home has logo 26
Slide 27: Best Practice # 4: Layout Keep UI elements compact so that key content and functionality is above fold. (e.g. Yelp’s list and detail views) Primary content and features are “above fold” 27
Slide 28: 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
Slide 29: 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
Slide 30: Best Practice # 7: Navigation Provide informative labels and consistent positions for navigation elements. (e.g. More specific than “Back” when possible) Always provide a way out. Label is “My Flights” instead of ambiguous “Back”. Name of app: FlightTrack 30
Slide 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. Search suggestions cover primary query types. 31
Slide 32: Best Practice # 9: List Views Display key information for each result; will vary depending on domain and context of use. (e.g. “open” is 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). Filter & map options provided. 32
Slide 33: Best Practice # 10: Map List Views Enable navigation between items in list and to the detail view. Link to individual results. 33
Slide 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. 34
Slide 35: Appendix: Heuristics & Audit
Slide 36: 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 realworld 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
Slide 37: 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
Slide 38: Content Audit Overall content richer on Yelp; important content missing from Urbanspoon “near me” view includes price & hours. Urbanspoon (near me view) Name Neighborhood Cuisine category Distance from me Price range User ratings User reviews Critic reviews Hours Address Phone Menu Restaurant photo User photos ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ Yelp (nearby view) ✓ ✓ ✓ Urbanspoon (detail view) ✓ ✓ ✓ Yelp (detail view) ✓ ✓ ✓ 38
Slide 39: 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 Urbanspoon Shake Browse Near me/Nearby Search Bookmark Recently visited Find me 3. Community features Urbanspoon Create profile Invite/view friends ✓ ✓ Yelp ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ Yelp Map restaurant Get directions Rate restaurant Review restaurant Add photo Add menu Edit restaurant info Mark as closed Bookmark Call Go to web site Tweet restaurant Add new restaurant ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ 2. Restaurant features Urbanspoon ✓ Yelp ✓ ✓ 39