1 / 48

RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS. Nguyen Ngoc Dan Vy – 0612755 Tran Thi Hong Diem – 0612701 Instructor: Do Lenh Hung Son . 1. 3. 4. 5. 6. 2. Introduction. Understanding User’s Behavior. Automatic Tab Ordering. Evaluation.

dugan
Download Presentation

RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS Nguyen Ngoc Dan Vy – 0612755 Tran Thi Hong Diem – 0612701 Instructor: Do Lenh Hung Son

  2. 1 3 4 5 6 2 Introduction Understanding User’s Behavior Automatic Tab Ordering Evaluation Contribution & Conclusion Related Works APCS Contents

  3. Company Logo Introduction

  4. Find tabs Access tabs Introduction Problems Manage opened tabs

  5. Company Logo Approach Most Used Tabs Instant Access Field Study Online Survey Prototyping User’s behaviour analysis Fast Tab Switching User Centered design Evaluation Introducing Concept Controlled Experiment: 10 participants Automatic Tab Ordering Effectiveness: 10 – 14%

  6. Company Logo Related Work Multitasking Tabs

  7. Company Logo Related Work Multitasking Web Browsing Activity Tabs

  8. Company Logo Related Work Multitasking Web Browsing Activity Tabs Webpage Revisitation: 30%

  9. Company Logo Related Work Multitasking Tab Grouping Web Browsing Activity Tabs Webpage Revisitation: 30%

  10. Company Logo Related Work Tab Grouping Multitasking Visual Aid Web Browsing Activity Tabs Webpage Revisitation: 30% Foxtab: tab preview panel

  11. Company Logo Related Work Multitasking Tab Grouping Web Browsing Activity Tabs Visual Aid Webpage Revisitation: 30% Tab Representation

  12. Understanding User’s Behavior Field Study Location Set Up Purpose Participants • Explore how users work with browser. • Interview: usage trend& difficulties. • 7 users: 3F 4M. • Age:22-25 • Position: developer, designer, officer, researcher. Selab- Software Engineering Lab in University of Science. • PersonalVibe. • 2 week duration. • Run in background. • Collect data: • Software • Interview

  13. Company Logo Field Study Figure 1: Selab- Software Engineering Lab in University of Science. Figure 2: One participant in this study.

  14. APCS Findings

  15. B A C Semi-structuredInterview “I need a tool to support me in managing tabs automatically.” Most users opened many tabs( over 15 tabs). “I think if I can arrange tabs in many rows, it would be better” Searching requires open a lot of tabs Lost tabs' trace when opening too many tabs. D Remark the order of tabs.

  16. Large population. (30 participants). 1 General tendency of participants 2 Online Survey Participants: knowledgeable workers 3 4 Created by Google Spreadsheet Form Online Survey

  17. Company Logo Online Survey • Analysis

  18. 4 1 2 3 Difficulties in managing opened tabs User spend a lot of time for web browsers. Searchingrequires a lot of tabs. Finding & switching tabs waste time. APCS Findings Automatic Tab Ordering

  19. Automatic Tab Ordering • Most Used Tabs Instant Access • Fast Tab Switching

  20. Automatic Tab Ordering

  21. Common Equation

  22. Most Used Tabs Instant Access • Prototype 1.1: Free Tab Switching.

  23. Company Logo Most Used Tabs Instant Access • Prototype 1.2: Tab Dummy.

  24. Company Logo Most Used Tabs Instant Access • Prototype 1.3: Permanent Ranked Tabs.

  25. Company Logo Most Used Tabs Instant Access • “List all tabs” button.

  26. Company Logo Fast Tab Switching • Prototype 2.1: Manualmarking Tabs.

  27. Company Logo Fast Tab Switching • Prototype 2.2: Automarking Tabs.

  28. Evaluation • Pilot Test. • Result.

  29. Pilot Test Purpose Method Task description Get first impression of user in real context. • - Perform searching tasks. • 45 minutes. • 14 participants. • 3 conditions. - Receive questionnaires. - Searching and answer.

  30. Company Logo Feedback & Improvement • Change questionnaires to open more tabs. • Synchronize interaction. • Divide participants to smaller group.

  31. Company Logo Controlled Experiment

  32. Evaluation – Result, • Overall result: Mental’s stress and workload decreases: • Tab Dummy: 10%. • Permanent Ranked Tabs: 14%.

  33. Text Editors IDEs Web Browsers Any Serial lists OS: Taskbar Contribution - Impact

  34. Experiment. Controlled Experiment. Future Works Platforms • Implement in various platforms: • Text editors, IDE. • Oss • Experiment. • Platform differences 2nd Category • Fast Tab Switching: • Continue development • Controlled Experiment

  35. Problems With Tabbed Browsing No existing Efficient technique Conclusion Benefits large population Reduce stress Users’ workload Automatic Tab Ordering Challenge Traditional Tab order

  36. 1 2 3 Challenge traditional tab order ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc. ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc. Company Logo

  37. Company Logo Diagram Title Add your text ThemeGalleryis a Design Digital Content & Contents mall developed by Guild Design Inc. ThemeGalleryis a Design Digital Content & Contents mall developed by Guild Design Inc.

  38. Add Your Text Text Text Cycle name Text Text Text Company Logo Cycle Diagram

  39. Text • Add Your • Title Text • Text 1 • Text 2 • Text 3 • Text 4 • Text 5 • Add Your • Title Text • Text 1 • Text 2 • Text 3 • Text 4 • Text 5 Text Text Text Text Company Logo Diagram

  40. Text Text Concept Text Text Text Text Add Your Text Company Logo Diagram

  41. Add Your Text Add Your Text Add Your Text Add Your Text Company Logo Diagram Add Your Text Add Your Text Add Your Text Add Your Text

  42. Company Logo Diagram Text Text Text ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc. ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc. ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.

  43. Concept Concept concept Concept Company Logo Table

  44. Company Logo Diagram Add Your Text Add Your Text Title Add Your Text Add Your Text Add Your Text Add Your Text

  45. 2004 2001 2002 2003 Company Logo Diagram Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text

  46. ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc. Title ThemeGalleryis a Design Digital Content & Contents mall developed by Guild Design Inc. Title ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc. Title Company Logo Diagram

  47. Company Logo Table

  48. Thank You ! Add your company slogan

More Related