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

Contents

Introduction1

Understanding User’s Behavior3

Automatic Tab Ordering4

Evaluation5

Contribution & Conclusion6

Related Works2

Contents

Introduction1

Understanding User’s Behavior3

Automatic Tab Ordering4

Evaluation5

Contribution & Conclusion6

Related Works2

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

User

Centered

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

Contents

Introduction1

Understanding User’s Behavior3

Automatic Tab Ordering4

Evaluation5

Contribution & Conclusion

6

Related Works2

Related Work

Tabs

Multitasking

D.Am, A.Spink and M.Park, “Information and non-information multitasking interplay”.

Related Work

Tabs

Multitasking

Web Browsing Activity

M.Kellar, C.Watters, K.M.Inkpen “An exploration of web-based monitoring:Implications for design” (CHI 2007)

Related Work

Tabs

Multitasking

Web Browsing Activity

Webpage Revisitation: 30%

25%

45%

30%

Ratio of selected tabs

Never se-lected

Selected Once

Selected More than once

L.Tauscher and S.Greenberg “Revisitation patterns in world wide web navigation” in CHI 97

Related Work

Tabs

Tab GroupingMultitasking

Web Browsing Activity

WebpageRevisitation: 30%

Related Work

Tabs

Tab GroupingMultitasking

Web Browsing Activity

WebpageRevisitation: 30%

Visual Aid

Foxtab: tab preview panel

Related Work

Tabs

Tab GroupingMultitasking

Visual AidWeb Browsing

Activity

WebpageRevisitation: 30%

Tab Representation

Contents

Introduction1

Understanding User’s Behavior3

Automatic Tab Ordering4

Evaluation5

Contribution & Conclusion6

Related Works2

Field Study

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

Figure 2: One participant in this study. Figure 1: Selab- Software Engineering Lab in University of Science.

The amount of time using Firefox browserData collected by Personal Vibe)

Semi-structured Interview

“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”

“I want to put related tabs in same groups.”

“It takes me a lot of time to find and switch when

opened many tabs. I am really uncomfortable!”

Number of opened tabs?

Number of worked tabs?

When open many tabs?

8 questions

Problems with tabs?

Order of tabs?

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.

Online Survey

Online Survey

1 Large population. (30 participants).

General tendency of participants2

Participants: knowledgeable workers3

4 Created by Google Spreadsheet Form(Include 17 questions)

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

25% users open >= 15 tabs

Contents

Introduction1

Understanding User’s Behavior3

Automatic Tab Ordering4

Evaluation5

Contribution & Conclusion6

Related Works2

Concept

Most Used Tabs Instant Access• Free Tab Switching• Tab Dummy• Permanent Ranked Tabs

Automatic Tab OrderingImplement on Firefox

Fast Tab Switching• Manualmarking Tabs• Automarking Tabs

Finding a common equation

Rank = α*No.Access + β*ActiveTime + γ*ElapsedTime

• Domain (α,β,γ ) = R• Number of Access: number of clicks to access the tab• ActiveTime: time when the tab is active (miliseconds)• ElapsedTime: time when the tab is opened (miliseconds).

Final Equation

Rank = 1*No.Access + 0.00005*ActiveTime + 0*ElapsedTime

In this particular case: web browsing:

• Favor Number of Access.• ElapsedTime does not contribute weight.• Many zeros: time is calculated in miliseconds

Prototypes

Develop 5 in total, evaluate 2.

No concerning about optimization, memory management, etc.

Implement in Firefox (result from online survey).Use JavaScript & XUL.

A tool for demonstration.

Most Used Tabs Instant Access

Prototype 1.1: Free Tab Switching.

Most Used Tabs Instant Access

Prototype 1.2: Tab Dummy.

Most Used Tabs Instant Access

Prototype 1.3: Permanent Ranked Tabs.

Most Used Tabs Instant Access

“List all tabs” button.

Fast Tab Switching

Prototype 2.1: Manualmarking Tabs.

Fast Tab Switching

Prototype 2.2: Automarking Tabs.

Contents

Introduction1

Understanding User’s Behavior3

Automatic Tab Ordering4

Evaluation5

Contribution & Conclusion6

Related Works2

Evaluation

Pilot test

Evaluation

Result

Independent Variables

Firefox with installed Tab Dummy Prototype.

Default Firefox.Firefox with installed Permanent Ranked Tabs Prototype.

Condition 1 Condition 2 Condition 3

Dependent Variables

Performance Measures

Number of scroll buttons clicked

Time spent switching tabs

Attitudinal Measures

Self-reported workload (NASA

TLX)

Subjective feedbacks

Hypotheses

1Number of scroll buttons clicked decreases in condition 2-3.

2Time spent switching tabsdecreases in condition 2-3.

3User workload & stressdecreases in condition 2-3.

Pilot Test

PurposePurpose QuestionnairesQuestionnairesTask DescriptionTask Description

-2 specific keywords : one text, one image.- Keywords must

be unpopular.- One question/

page. Require to open many tabs and multitasking.

- Perform searching tasks.- 45 minutes.- 14

participants.- 3 conditions.

Get first impression of users in real context.

Feedback & Improvement

Change questionnaires to open more tabsChange questionnaires to open more tabs

Synchronize interactionSynchronize interaction

Divide participants to smaller group.Divide participants to smaller group.

Improvement for control experiment

Improvement for control experiment

Controlled Experiment

1 10 participants.

Same configurations2

3 conditions. 45 minutes each.3

4 Searching task and answer questionnaires proposed by us.

Evaluation – Result

Overall result: Mental’s stress and workload decreases: Tab Dummy: 10%. Permanent Ranked Tabs: 14%.

Contents

Introduction1

Understanding User’s Behavior3

Automatic Tab Ordering4

Evaluation5

Contribution & Conclusion6

Related Works2

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

APCS

Q & A