57
THESIS PROJECT APCS 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
THESIS PROJECT
APCS
RETHINKING THE TABBAR:INTRODUCING
AUTOMATIC TAB ORDERING INTO WEB BROWSERS
Nguyen Ngoc Dan Vy – 0612755Tran Thi Hong Diem – 0612701
Instructor: Do Lenh Hung Son
APCS
Contents
Introduction1
Understanding User’s Behavior3
Automatic Tab Ordering4
Evaluation5
Contribution & Conclusion6
Related Works2
APCS
Contents
Introduction1
Understanding User’s Behavior3
Automatic Tab Ordering4
Evaluation5
Contribution & Conclusion6
Related Works2
Company Logo
Internet Usage Statistics
93%
74%
Popular web browsers
Web Browsers
Introduction
Problems
Find tabs
Access tabs
Manage opened tabs
Clarification
Human Computer Interaction
Problem does not
exist advanced
Research Oriented
Introduce new concept
Clarification
Ways to approach:
HCI
User -Based
Approach
UserCentered
design
Evaluation• Controlled
experiment:10 participants• Effectiveness: 10-
14%
User behavior analysis
• Field study• Online survey
Prototyping• Most Used Tabs Instant Access• Fast Tab
Switching
Introducing concept
Automatic TabOrdering
APCS
Contents
Introduction1
Understanding User’s Behavior3
Automatic Tab Ordering4
Evaluation5
Contribution & Conclusion6
Related Works2
APCS
Related Work
Tabs
Multitasking
APCS
Related Work
Tabs
Multitasking
Web Browsing Activity
APCS
Related Work
Tabs
Multitasking
Web Browsing Activity
Webpage Revisitation: 30%
25%
45%
30%
Ratio of selected tabs
Never selectedSelected OnceSelected More than once
APCS
Related Work
Tabs
Tab GroupingMultitasking
Web Browsing Activity
WebpageRevisitation: 30%
APCS
Related Work
Tabs
Tab GroupingMultitasking
Web Browsing Activity
WebpageRevisitation: 30%
Visual Aid
Foxtab: tab preview panel
APCS
Related Work
Tabs
Tab GroupingMultitasking
Visual AidWeb Browsing
Activity
WebpageRevisitation: 30%
Tab Representation
Understanding User’s Behavior
7 users: 3F 4M. Age:22-25 Position:
developer, designer, officer, researcher.
Explore how users work with browser.
Interview: usage trend& difficulties.
Purpose Participants Location Set Up
PersonalVibe.2 week duration.Run in background.Collect data:
Software Interview
Selab- Software Engineering Lab in University of Science.
Field Study
APCS
Field Study
Figure 2: One participant in this study. Figure 1: Selab- Software Engineering Lab in University of Science.
APCS
The amount of time using Firefox browserData collected by Personal Vibe)
Semi-structured Interview
A Most users opened many tabs( over 15 tabs).
B Searching requires open a lot of tabs
C Lost tabs' trace when opening too many tabs.
D Remark the order of tabs.
“I need a tool to support me in managing tabs automatically.”
“I think if I can arrange tabs in many rows, it
would be better”
Online Survey
Online Survey
1 Large population. (30 participants).
General tendency of participants2
Participants: knowledgeable workers3
4 Created by Google Spreadsheet Form
APCS
Online Survey
Analysis
APCS
Findings
1
User spend a lot of time for web browsers.
2
Searchingrequires a lot of tabs.
3
Finding & switching tabs waste time.
4
Difficulties in managing opened tabs
Automatic Tab Ordering
APCS
Automatic Tab Ordering
Most Used Tabs Instant Access
Fast Tab Switching
Finding a common equation
Rank = α*No.Access + β*ActiveTime + γ*ElapsedTime
FinalEquation
Rank = 1*No.Access + 0.00005*ActiveTime + 0*ElapsedTime
Most Used Tabs Instant Access
Prototype 1.1: Free Tab Switching.
Company Logo
Most Used Tabs Instant Access
Prototype 1.2: Tab Dummy.
Company Logo
Most Used Tabs Instant Access
Prototype 1.3: Permanent Ranked Tabs.
Company Logo
Most Used Tabs Instant Access
“List all tabs” button.
Company Logo
Fast Tab Switching
Prototype 2.1: Manualmarking Tabs.
Company Logo
Fast Tab Switching
Prototype 2.2: Automarking Tabs.
Company Logo
Evaluation
Pilot test
Evaluation
Result
APCS
Independent Variables
Firefox with installed Tab Dummy Prototype.
Default Firefox.Firefox with installed Permanent Ranked Tabs Prototype.
Condition 1 Condition 2 Condition 3
Company Logo
Dependent Variables
Performance Measures
Number of scroll buttons clicked
Time spent switching tabs
Attitudinal Measures
Self-reported workload (NASA
TLX)
Subjective feedbacks
Company Logo
Hypotheses
1Number of scroll buttons clicked decreases in condition 2-3.
2Time spent switching tabsdecreases in condition 2-3.
3User workload & stressdecreases.
Pilot Test
Purpose Task descriptionMethod
- Receive questionnaires.- Searching and answer.
Get first impression of user in real context.
- Perform searching tasks.- 45 minutes.- 14
participants.- 3 conditions.
Company Logo
Feedback & Improvement
Change questionnaires to open more tabs. Synchronize interaction. Divide participants to smaller group.
Company Logo
Controlled Experiment
Evaluation – Result
Overall result: Mental’s stress and workload decreases: Tab Dummy: 10%. Permanent Ranked Tabs: 14%.
Contribution - Impact
Web Browsers
Text EditorsIDEs
AnySerial lists
OS: Taskbar
Future Works
2nd Category
Platforms
Experiment.
Controlled Experiment.
Fast Tab Switching:Continue
developmentControlled
Experiment
Implement in various platforms: Text editors,
IDE.OssExperiment.Platform
differences
Conclusion
Benefits large population
No existingEfficienttechnique
ChallengeTraditionalTab order
AutomaticTab Ordering
Reduce stressUsers’ workload
Problems With TabbedBrowsing
Company Logo
1
Challenge traditional tab order
2
ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.
3
ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.
Company Logo
Diagram
ThemeGalleryis a Design Digital Content & Contents mall developed by Guild Design Inc.
TitleAdd your text
ThemeGalleryis a Design Digital Content & Contents mall developed by Guild Design Inc.
Company Logo
Cycle Diagram
Text
TextText
Text
Text
Cycle name
Add Your Text
Company Logo
Diagram
Text
Text
Text
Add YourTitle Text
• Text 1• Text 2• Text 3• Text 4• Text 5
Add YourTitle Text
• Text 1• Text 2• Text 3• Text 4• Text 5
Text
Text
Company Logo
Diagram
Concept
Add Your Text
Text
Text
Text
Text
Text
Text
Company Logo
Diagram
Add Your Text
Add Your Text
Add Your Text
Add Your Text
Add Your Text
Add Your Text
Add Your Text
Add Your Text
Company Logo
Diagram
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.
Text Text Text
Company Logo
Table
Concept
Concept
concept
Concept
Company Logo
Diagram
Title
Add Your TextAdd Your Text
Add Your Text
Add Your Text
Add Your Text
Add Your Text
Company Logo
Diagram
Your TextYour Text
Your TextYour Text
Your TextYour Text
Your TextYour Text
2001 2002 2003 2004
Company Logo
Diagram
TitleThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.
TitleThemeGalleryis a Design Digital Content & Contents mall developed by Guild Design Inc.
TitleThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.
Company Logo
Table
Title Title Title Title Title
Title O O O O O
Title O O O O O
Title O O O O O
Title O O O O O
Title O O O O O
Title O X O X O
THESIS PROJECT
APCS
