A Comparative Usability Evaluation of User Interfaces for Online Product Catalogs

download A Comparative Usability Evaluation of User Interfaces for Online Product Catalogs

of 26

  • date post

    21-Jan-2016
  • Category

    Documents

  • view

    30
  • download

    3

Embed Size (px)

description

A Comparative Usability Evaluation of User Interfaces for Online Product Catalogs. Ewa Callahan Jürgen Koenemann Presented by: Xiaohong Bao. Introduction. A comparative study of the usability of hierarchical structure and Infozoom - PowerPoint PPT Presentation

Transcript of A Comparative Usability Evaluation of User Interfaces for Online Product Catalogs

  • A Comparative Usability Evaluation of User Interfaces for Online Product Catalogs Ewa Callahan Jrgen Koenemann

    Presented by: Xiaohong Bao

    ICS280 Information Visualization

  • IntroductionA comparative study of the usability of hierarchical structure and InfozoomThe increase in electronic commerce creates a need for Electronic Product Catalogs (EPC).Navigation problems are the second most cited reason for not shopping online.

    ICS280 Information Visualization

  • Introduction ---contdThe most common catalog interfaces on the web are hierarchically organized catalogs.Problems:ConfusingItems in dropdown menus are not visibleLengthy result pages force users to scrollSolutions:Recommendation approachInteraction approach

    ICS280 Information Visualization

  • Evaluation of existing online catalogsList of Websites Evaluated (Fall 1999)1. www.autobytel.com2. www.Auto.de3. www.autoinfo.de4. Automarkt5. www.auto-shop.de6. www.autosite.com7. www.autotaal.nl8. carpoint.msn.com9. www.dadb.com10. www.faircar.de11. Lycos Decision Guide Cars12. Mastercar.de13. www.mobile.de14. www.whatcar.co.uk

    ICS280 Information Visualization

  • Evaluation results

    ICS280 Information Visualization

  • Result analysisDatabase sizeSearching modeAttributeSpecifying rangesSearching historyResult pagesSorting search resultsItem comparison

    ICS280 Information Visualization

  • Infozoom introductionBased on dynamic queries and fisheye techniquesAttributes as rows and objects as columnsCompressed mode and overview modeMany ways of searchingEasy to compare, sort and re-order the results

    ICS280 Information Visualization

  • Overview Mode

    ICS280 Information Visualization

  • Compressed mode

    ICS280 Information Visualization

  • Usability studyFrom the feature comparison of Infozoom and the hierarchical interface, Infozoom should be more efficientA comparative usability study to confirm it

    ICS280 Information Visualization

  • MaterialsA database contains 1690 cars with over 20 attributes.The hierarchical interface was implemented with forms in MS Access.

    ICS280 Information Visualization

  • Hierarchical interface-1

    ICS280 Information Visualization

  • Hierarchical interface-2

    ICS280 Information Visualization

  • Hierarchical interface-3

    ICS280 Information Visualization

  • ParticipantsTotally 26 participants15 male and 11 female13 aged 21~30; 9 aged 31~40; one teenager and one over 5116 use computers over 10h/week; 6 3~9 h/week; 4 less than 2h/week

    ICS280 Information Visualization

  • TasksFind Attribute value for given ObjectT1: Does the Jaguar XJR have side airbags?Find Database SubSet Attribute ValueT2: How many different models does the Peugeot class 106 have?T4: How many cars have the following characteristics:convertible, 100-150 HP, front drive, and cost 40.000 DM orless?For given Attribute(s) value(s) Find Object(s)T3: Which middle class car is the cheapest one in the database?T6: Which Funcar has the quickest acceleration?

    ICS280 Information Visualization

  • Tasks-contdCompare Attribute Values for 2 ObjectsT5: Which car has better fuel consumption: the Audi A6 1.8 or the Volvo S70 2.0?Find Database Attribute ValueT7: How many cars are in this catalog?Compare Attribute Values for SubsetT8: What is the price range (from the cheapest to the most expensive model) for the Alfa Romeo 145 series?T9: Is the acceleration of the Mercedes-Benz S430 Automatic slow, normal, or quick for a car of its class?

    ICS280 Information Visualization

  • ProcedureIntroduce the purpose and upcoming tasks briefly5 minutes demo about InfozoomIntroduce 9 tasks. After each task, they answer 3 questions about the satisfaction, perception of the time needed, perceived efficiencySummarizing their experience

    ICS280 Information Visualization

  • ResultsAccuracyCompletion timeAVGIZ = 19.4 min / AVGHI = 27.7 minNavigationEase of use: IZ 5.5 / HI 4.9 over 7Efficiency: IZ 5.0 / HI 4.8SatisfactionComfortable: IZ 5.15 / HI 5.23Fun: IZ 6.3 / HI 5.0Overall satisfaction: IZ 6.38 / HI 5.38

    ICS280 Information Visualization

  • Completion rate and accuracy

    ICS280 Information Visualization

  • ICS280 Information Visualization

  • ICS280 Information Visualization

  • ObservationsUsers strategiesCritical incidents --- breakdown and things that went especially wellUsers comments

    ICS280 Information Visualization

  • Hierarchical interfaceDislike look for desired information from main menuBe lost on pages that looked likeBe annoyed by the long pull-down menus and lengthy result pagesBe confused about the default values and attributes visibleBe inpatient about no car matched

    ICS280 Information Visualization

  • Infozoom InterfaceFeel overload at the first glanceHard to choose appropriate search strategy at the beginningDifficult to double-click on the small sectors if selecting objects on the screen

    ICS280 Information Visualization

  • ConclusionBoth EPCs interfaces were rated highly, but Infozoom was rated higher in overall performanceInfozoom supports choice by attribute searching strategy betterInfozoom interface has easy learnability

    ICS280 Information Visualization