RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

48
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

description

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. - PowerPoint PPT Presentation

Transcript of RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Page 1: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

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

Page 2: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

APCS

ContentsIntroduction1

Understanding User’s Behavior3

Automatic Tab Ordering4

Evaluation5

Contribution & Conclusion6

Related Works2

Page 3: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Introduction

Page 4: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Introduction

Problems

Find tabs

Access tabs

Manage opened tabs

Page 5: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Approach

UserCentered

design

Field Study

Online Survey

Most Used TabsInstant Access

Fast Tab Switching

Automatic TabOrdering

Controlled Experiment: 10 participants

Effectiveness: 10 – 14%

Page 6: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Related Work

Tabs

Multitasking

Page 7: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Related Work

Tabs

Multitasking

Web Browsing Activity

Page 8: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Related Work

Tabs

Multitasking

Web Browsing Activity

Webpage Revisitation: 30%

25%

45%

30%

Ratio of selected tabs

Never se-lectedSelected OnceSelected More than once

Page 9: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Related Work

Tabs

Tab GroupingMultitasking

Web Browsing Activity

Webpage Revisitation: 30%

Page 10: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Related Work

Tabs

Tab GroupingMultitasking

Web Browsing Activity

Webpage Revisitation: 30%

Visual Aid

Foxtab: tab preview panel

Page 11: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Related Work

Tabs

Tab GroupingMultitasking

Visual AidWeb Browsing Activity

Webpage Revisitation: 30% Tab Representation

Page 12: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

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

Page 13: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Field Study

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

Page 14: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

APCS

Findings

Page 15: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Semi-structuredInterview

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”

Page 16: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Online Survey

Online Survey

1 Large population. (30 participants).

General tendency of participants2

Participants: knowledgeable workers3

4 Created by Google Spreadsheet Form

Page 17: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Online Survey

Analysis

Page 18: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

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

Page 19: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Automatic Tab Ordering

Most Used Tabs Instant Access

Fast Tab Switching

Page 20: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Automatic Tab Ordering

Page 21: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Common Equation

Page 22: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Most Used Tabs Instant Access

Prototype 1.1: Free Tab Switching.

Page 23: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Most Used Tabs Instant Access

Prototype 1.2: Tab Dummy.

Page 24: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Most Used Tabs Instant Access

Prototype 1.3: Permanent Ranked Tabs.

Page 25: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Most Used Tabs Instant Access

“List all tabs” button.

Page 26: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Fast Tab Switching

Prototype 2.1: Manualmarking Tabs.

Page 27: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Fast Tab Switching

Prototype 2.2: Automarking Tabs.

Page 28: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Evaluation

Pilot Test.Result.

Page 29: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

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.

Page 30: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Feedback & Improvement

Change questionnaires to open more tabs.

Synchronize interaction.Divide participants to smaller group.

Page 31: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Controlled Experiment

Page 32: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Evaluation – Result,

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

Page 33: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Contribution - Impact

Web Browsers

Text EditorsIDEs

AnySerial lists

OS: Taskbar

Page 34: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Future Works

2nd Category

Platforms

Experiment.

Controlled Experiment.

Fast Tab Switching:Continue

developmentControlled

Experiment

Implement in various platforms: Text editors,

IDE.OssExperiment.Platform

differences

Page 35: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Conclusion

Benefits large population

No existingEfficienttechnique

ChallengeTraditionalTab order

AutomaticTab Ordering

Reduce stressUsers’ workload

Problems With TabbedBrowsing

Page 36: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

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.

Page 37: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

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.

Page 38: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Cycle Diagram

Text

TextText

Text

Text

Cycle name

Add Your Text

Page 39: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

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

Page 40: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Diagram

Concept

Add Your Text

Text

Text

Text

Text

Text

Text

Page 41: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

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

Page 42: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

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.

Diagram

Text Text Text

Page 43: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Table

Concept

Concept

concept

Concept

Page 44: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Diagram

Title

Add Your TextAdd Your Text

Add Your Text

Add Your Text

Add Your Text

Add Your Text

Page 45: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

Company Logo

Diagram

Your TextYour Text

Your TextYour Text

Your TextYour Text

Your TextYour Text

2001 2002 2003 2004

Page 46: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

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.

Page 47: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

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

Page 48: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS

APCS

Add your company slogan