1. ICS280 Information Visualization A Comparative Usability Evaluation of User Interfaces for Online Product Catalogs Ewa Callahan Jürgen Koenemann Presented by: Xiaohong Bao

2. ICS280 Information Visualization Introduction A comparative study of the usability of hierarchical structure and Infozoom The increase in electronic commerce creates a need for Electronic Product Catalogs (EPC). Navigation problems are the second most cited reason for not shopping online.

3. ICS280 Information Visualization Introduction ---cont’d The most common catalog interfaces on the web are hierarchically organized catalogs. Problems: 1. Confusing 2. Items in dropdown menus are not visible 3. Lengthy result pages force users to scroll Solutions: 1. Recommendation approach 2. Interaction approach

4. ICS280 Information Visualization Evaluation of existing online catalogs List of Websites Evaluated (Fall 1999) 1. www.autobytel.com2. www.Auto.dewww.autobytel.com 3. www.autoinfo.de4. Automarktwww.autoinfo.de 5. www.auto-shop.de6. www.autosite.comwww.auto-shop.de 7. www.autotaal.nl8. carpoint.msn.comwww.autotaal.nl 9. www.dadb.com10. www.faircar.dewww.dadb.com 11. Lycos Decision Guide Cars12. Mastercar.de 13. www.mobile.de14. www.whatcar.co.ukwww.mobile.de

5. ICS280 Information Visualization Evaluation results

6. ICS280 Information Visualization Result analysis Database size Searching mode Attribute Specifying ranges Searching history Result pages Sorting search results Item comparison

7. ICS280 Information Visualization Infozoom introduction Based on dynamic queries and fisheye techniques Attributes as rows and objects as columns Compressed mode and overview mode Many ways of searching Easy to compare, sort and re-order the results

8. ICS280 Information Visualization Overview Mode

9. ICS280 Information Visualization Compressed mode

10. ICS280 Information Visualization Usability study From the feature comparison of Infozoom and the hierarchical interface, Infozoom should be more efficient A comparative usability study to confirm it

11. ICS280 Information Visualization Materials A database contains 1690 cars with over 20 attributes. The hierarchical interface was implemented with forms in MS Access.

12. ICS280 Information Visualization Hierarchical interface-1

13. ICS280 Information Visualization Hierarchical interface-2

14. ICS280 Information Visualization Hierarchical interface-3

15. ICS280 Information Visualization Participants Totally 26 participants 15 male and 11 female 13 aged 21~30; 9 aged 31~40; one teenager and one over 51 16 use computers over 10h/week; 6 3~9 h/week; 4 less than 2h/week

16. ICS280 Information Visualization Tasks Find Attribute value for given Object T1: Does the Jaguar XJR have side airbags? Find Database SubSet Attribute Value T2: 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 or less? 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?

17. ICS280 Information Visualization Tasks-cont’d Compare Attribute Values for 2 Objects T5: Which car has better fuel consumption: the Audi A6 1.8 or the Volvo S70 2.0? Find Database Attribute Value T7: How many cars are in this catalog? Compare Attribute Values for Subset T8: 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?

18. ICS280 Information Visualization Procedure 1. Introduce the purpose and upcoming tasks briefly 2. 5 minutes demo about Infozoom 3. Introduce 9 tasks. After each task, they answer 3 questions about the satisfaction, perception of the time needed, perceived efficiency 4. Summarizing their experience

19. ICS280 Information Visualization Results Accuracy Completion time AVG IZ = 19.4 min / AVG HI = 27.7 min Navigation Ease of use: IZ 5.5 / HI 4.9 over 7 Efficiency: IZ 5.0 / HI 4.8 Satisfaction Comfortable: IZ 5.15 / HI 5.23 Fun: IZ 6.3 / HI 5.0 Overall satisfaction: IZ 6.38 / HI 5.38

20. ICS280 Information Visualization Completion rate and accuracy

21. ICS280 Information Visualization

23. Observations Users’ strategies Critical incidents --- breakdown and things that went especially well Users’ comments

24. ICS280 Information Visualization Hierarchical interface Dislike look for desired information from main menu Be lost on pages that looked like Be annoyed by the long pull-down menus and lengthy result pages Be confused about the default values and attributes visible Be inpatient about no car matched

25. ICS280 Information Visualization Infozoom Interface Feel overload at the first glance Hard to choose appropriate search strategy at the beginning Difficult to double-click on the small sectors if selecting objects on the screen

26. ICS280 Information Visualization Conclusion Both EPC’s interfaces were rated highly, but Infozoom was rated higher in overall performance Infozoom supports choice by attribute searching strategy better Infozoom interface has easy learnability