SlideShare a Scribd company logo
1 of 40
Download to read offline
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
iPhone App UX Review: Urbanspoon vs. Yelp

More Related Content

Similar to iPhone App UX Review: Urbanspoon vs. Yelp

Presentation 5 - (AR)ugula MVP2 + User Feedback
Presentation 5 - (AR)ugula MVP2 + User FeedbackPresentation 5 - (AR)ugula MVP2 + User Feedback
Presentation 5 - (AR)ugula MVP2 + User FeedbackDylan Curvey
 
Restaurant Finder Android Application project Presentation
Restaurant Finder Android Application project PresentationRestaurant Finder Android Application project Presentation
Restaurant Finder Android Application project PresentationAbhinav Jain
 
Personalization Palooza 2016
Personalization Palooza 2016Personalization Palooza 2016
Personalization Palooza 2016Pancrazio Auteri
 
Elizabeth Hom's UX Portfolio
Elizabeth Hom's UX PortfolioElizabeth Hom's UX Portfolio
Elizabeth Hom's UX PortfolioElizabeth Hom
 
Howard University Website Assessment
Howard University Website AssessmentHoward University Website Assessment
Howard University Website AssessmentWes Lewis
 
Understand user struggles. Optimize mobile app UX.
Understand user struggles. Optimize mobile app UX.Understand user struggles. Optimize mobile app UX.
Understand user struggles. Optimize mobile app UX.VWO
 
Optimizing Mobile App UX for better engagement & conversions.pdf
Optimizing Mobile App UX for better engagement & conversions.pdfOptimizing Mobile App UX for better engagement & conversions.pdf
Optimizing Mobile App UX for better engagement & conversions.pdfVWO
 
Mobile UX Workshop General Assembly
Mobile UX Workshop General AssemblyMobile UX Workshop General Assembly
Mobile UX Workshop General AssemblyDoralin Kelly
 
Comparing Recipe iPad apps
Comparing Recipe iPad appsComparing Recipe iPad apps
Comparing Recipe iPad appsJohn Walker
 
5 Awesome Hypothesis to A/B test for Improving User Journeys on your Mobile I...
5 Awesome Hypothesis to A/B test for Improving User Journeys on your Mobile I...5 Awesome Hypothesis to A/B test for Improving User Journeys on your Mobile I...
5 Awesome Hypothesis to A/B test for Improving User Journeys on your Mobile I...Tatvic Analytics
 
Optimizing Mobile App UX for better engagement & conversions.pptx
Optimizing Mobile App UX for better engagement & conversions.pptxOptimizing Mobile App UX for better engagement & conversions.pptx
Optimizing Mobile App UX for better engagement & conversions.pptxVWO
 
Leveraging Wechat User Experience for Customer Loyalty Programs
Leveraging Wechat User Experience for Customer Loyalty ProgramsLeveraging Wechat User Experience for Customer Loyalty Programs
Leveraging Wechat User Experience for Customer Loyalty ProgramsVladimir garnele
 
Overall presentation multiplatform_ux_patterns
Overall presentation multiplatform_ux_patternsOverall presentation multiplatform_ux_patterns
Overall presentation multiplatform_ux_patternsStefano Fornari
 
TAPUP_AGNIESZKA_ROGUSKA_A00188976
TAPUP_AGNIESZKA_ROGUSKA_A00188976TAPUP_AGNIESZKA_ROGUSKA_A00188976
TAPUP_AGNIESZKA_ROGUSKA_A00188976Agnieszka Roguska
 
Search engine marketing you are invisible
Search engine marketing   you are invisibleSearch engine marketing   you are invisible
Search engine marketing you are invisibleHans Riemer
 

Similar to iPhone App UX Review: Urbanspoon vs. Yelp (20)

Presentation 5 - (AR)ugula MVP2 + User Feedback
Presentation 5 - (AR)ugula MVP2 + User FeedbackPresentation 5 - (AR)ugula MVP2 + User Feedback
Presentation 5 - (AR)ugula MVP2 + User Feedback
 
Malik Jones Robinson UX Portfolio
Malik Jones Robinson UX PortfolioMalik Jones Robinson UX Portfolio
Malik Jones Robinson UX Portfolio
 
Restaurant Finder Android Application project Presentation
Restaurant Finder Android Application project PresentationRestaurant Finder Android Application project Presentation
Restaurant Finder Android Application project Presentation
 
Personalization Palooza 2016
Personalization Palooza 2016Personalization Palooza 2016
Personalization Palooza 2016
 
Elizabeth Hom's UX Portfolio
Elizabeth Hom's UX PortfolioElizabeth Hom's UX Portfolio
Elizabeth Hom's UX Portfolio
 
Portfolio
PortfolioPortfolio
Portfolio
 
Howard University Website Assessment
Howard University Website AssessmentHoward University Website Assessment
Howard University Website Assessment
 
Applico mobile company
Applico mobile companyApplico mobile company
Applico mobile company
 
Understand user struggles. Optimize mobile app UX.
Understand user struggles. Optimize mobile app UX.Understand user struggles. Optimize mobile app UX.
Understand user struggles. Optimize mobile app UX.
 
Optimizing Mobile App UX for better engagement & conversions.pdf
Optimizing Mobile App UX for better engagement & conversions.pdfOptimizing Mobile App UX for better engagement & conversions.pdf
Optimizing Mobile App UX for better engagement & conversions.pdf
 
Mobile UX Workshop General Assembly
Mobile UX Workshop General AssemblyMobile UX Workshop General Assembly
Mobile UX Workshop General Assembly
 
Comparing Recipe iPad apps
Comparing Recipe iPad appsComparing Recipe iPad apps
Comparing Recipe iPad apps
 
5 Awesome Hypothesis to A/B test for Improving User Journeys on your Mobile I...
5 Awesome Hypothesis to A/B test for Improving User Journeys on your Mobile I...5 Awesome Hypothesis to A/B test for Improving User Journeys on your Mobile I...
5 Awesome Hypothesis to A/B test for Improving User Journeys on your Mobile I...
 
Optimizing Mobile App UX for better engagement & conversions.pptx
Optimizing Mobile App UX for better engagement & conversions.pptxOptimizing Mobile App UX for better engagement & conversions.pptx
Optimizing Mobile App UX for better engagement & conversions.pptx
 
Leveraging Wechat User Experience for Customer Loyalty Programs
Leveraging Wechat User Experience for Customer Loyalty ProgramsLeveraging Wechat User Experience for Customer Loyalty Programs
Leveraging Wechat User Experience for Customer Loyalty Programs
 
Overall presentation multiplatform_ux_patterns
Overall presentation multiplatform_ux_patternsOverall presentation multiplatform_ux_patterns
Overall presentation multiplatform_ux_patterns
 
TAPUP_AGNIESZKA_ROGUSKA_A00188976
TAPUP_AGNIESZKA_ROGUSKA_A00188976TAPUP_AGNIESZKA_ROGUSKA_A00188976
TAPUP_AGNIESZKA_ROGUSKA_A00188976
 
LX Mobile Web Teardown
LX Mobile Web TeardownLX Mobile Web Teardown
LX Mobile Web Teardown
 
Search engine marketing you are invisible
Search engine marketing   you are invisibleSearch engine marketing   you are invisible
Search engine marketing you are invisible
 
Prototyping + User Journeys
Prototyping + User JourneysPrototyping + User Journeys
Prototyping + User Journeys
 

More from Ginsburg Design

Improving Discoverability
Improving DiscoverabilityImproving Discoverability
Improving DiscoverabilityGinsburg Design
 
Wrangling Apps in the Smartphone Wild West (January 2011)
 Wrangling Apps in the Smartphone Wild West (January 2011) Wrangling Apps in the Smartphone Wild West (January 2011)
Wrangling Apps in the Smartphone Wild West (January 2011)Ginsburg Design
 
Wrangling Apps in the Smartphone Wild West
Wrangling Apps in the Smartphone Wild WestWrangling Apps in the Smartphone Wild West
Wrangling Apps in the Smartphone Wild WestGinsburg Design
 
Upfront User Research for iPhone/iPad Apps: Why bother?
Upfront User Research for iPhone/iPad Apps: Why bother?Upfront User Research for iPhone/iPad Apps: Why bother?
Upfront User Research for iPhone/iPad Apps: Why bother?Ginsburg Design
 
6 ways to refine iPhone and iPad Apps
6 ways to refine iPhone and iPad Apps6 ways to refine iPhone and iPad Apps
6 ways to refine iPhone and iPad AppsGinsburg Design
 
iPad eReader UX Review: iBooks, Kindle, Kobo
iPad eReader UX Review: iBooks, Kindle, KoboiPad eReader UX Review: iBooks, Kindle, Kobo
iPad eReader UX Review: iBooks, Kindle, KoboGinsburg Design
 
iPhone App Design: A user-centered approach
iPhone App Design: A user-centered approachiPhone App Design: A user-centered approach
iPhone App Design: A user-centered approachGinsburg Design
 
iPhone App UX Review: NY Times vs. USA Today
iPhone App UX Review: NY Times vs. USA TodayiPhone App UX Review: NY Times vs. USA Today
iPhone App UX Review: NY Times vs. USA TodayGinsburg Design
 
An agile approach to iPhone design: Paper prototyping + user testing
An agile approach to iPhone design:  Paper prototyping + user testingAn agile approach to iPhone design:  Paper prototyping + user testing
An agile approach to iPhone design: Paper prototyping + user testingGinsburg Design
 

More from Ginsburg Design (9)

Improving Discoverability
Improving DiscoverabilityImproving Discoverability
Improving Discoverability
 
Wrangling Apps in the Smartphone Wild West (January 2011)
 Wrangling Apps in the Smartphone Wild West (January 2011) Wrangling Apps in the Smartphone Wild West (January 2011)
Wrangling Apps in the Smartphone Wild West (January 2011)
 
Wrangling Apps in the Smartphone Wild West
Wrangling Apps in the Smartphone Wild WestWrangling Apps in the Smartphone Wild West
Wrangling Apps in the Smartphone Wild West
 
Upfront User Research for iPhone/iPad Apps: Why bother?
Upfront User Research for iPhone/iPad Apps: Why bother?Upfront User Research for iPhone/iPad Apps: Why bother?
Upfront User Research for iPhone/iPad Apps: Why bother?
 
6 ways to refine iPhone and iPad Apps
6 ways to refine iPhone and iPad Apps6 ways to refine iPhone and iPad Apps
6 ways to refine iPhone and iPad Apps
 
iPad eReader UX Review: iBooks, Kindle, Kobo
iPad eReader UX Review: iBooks, Kindle, KoboiPad eReader UX Review: iBooks, Kindle, Kobo
iPad eReader UX Review: iBooks, Kindle, Kobo
 
iPhone App Design: A user-centered approach
iPhone App Design: A user-centered approachiPhone App Design: A user-centered approach
iPhone App Design: A user-centered approach
 
iPhone App UX Review: NY Times vs. USA Today
iPhone App UX Review: NY Times vs. USA TodayiPhone App UX Review: NY Times vs. USA Today
iPhone App UX Review: NY Times vs. USA Today
 
An agile approach to iPhone design: Paper prototyping + user testing
An agile approach to iPhone design:  Paper prototyping + user testingAn agile approach to iPhone design:  Paper prototyping + user testing
An agile approach to iPhone design: Paper prototyping + user testing
 

Recently uploaded

Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 

Recently uploaded (19)

Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 

iPhone App UX Review: Urbanspoon vs. Yelp

  • 1. Urbanspoon vs. Yelp: iPhone app UX review Suzanne Ginsburg, Principal suzanne@ginsburg-design.com
  • 2. 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 3
  • 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
  • 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
  • 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
  • 8. 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
  • 9. 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
  • 10. Start Screen: Branding Urbanspoon No Yelp logo on branding every throughout screen user experience. 10
  • 11. Near Me: Content Hours and price would be helpful Has price here. guide but no hours info. 11
  • 12. 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
  • 13. Restaurant Screen: Layout Compact layout enables user to see nearly all Restaurant restaurant info starts info above halfway fold. down screen . 13
  • 14. Search Form: Start State Both apps start with tip in search box Keyboard Keyboard shown at not shown start. at start. 14
  • 15. Search Form: Suggestions Suggestions based on Suggestions neighborhoods, do not cuisines, and restaurant specify type names. 15
  • 16. Search Form: Exit Strategy No cancel Cancel button. button and Must exit option to and restart. change location. 16
  • 17. Search Results: Refine Must go Can edit back to edit search search. within No mapping. context and map results. 17
  • 18. Search Results: Content Limited # of results can Almost be shown. twice as Result many content also results & limited. with more detail. 18
  • 19. 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
  • 20. Map Restaurant View: Google Navigation Clear navigation to Google Maps Google navigation difficult to find. 20
  • 21. Add/Edit Restaurant Info: Urbanspoon 21
  • 22. 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
  • 24. 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
  • 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 Movies are vegetarian restaurants) the focus, as they should be. 25
  • 26. 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
  • 27. 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
  • 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
  • 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
  • 30. 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
  • 31. 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
  • 32. 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
  • 33. Best Practice # 10: Map List Views Enable navigation between items in list and to the detail view. Link to individual results. 33
  • 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
  • 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 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
  • 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
  • 38. 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
  • 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 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