RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS
description
Transcript of RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS
![Page 1: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/1.jpg)
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
![Page 2: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/2.jpg)
APCS
Contents
Introduction1
Understanding User’s Behavior3
Automatic Tab Ordering4
Evaluation5
Contribution & Conclusion6
Related Works2
![Page 3: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/3.jpg)
APCS
Contents
Introduction1
Understanding User’s Behavior3
Automatic Tab Ordering4
Evaluation5
Contribution & Conclusion6
Related Works2
![Page 4: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/4.jpg)
Company Logo
Internet Usage Statistics
93%
74%
![Page 5: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/5.jpg)
Popular web browsers
Web Browsers
![Page 6: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/6.jpg)
Introduction
Problems
Find tabs
Access tabs
Manage opened tabs
![Page 7: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/7.jpg)
Clarification
Human Computer Interaction
Problem does not
exist advanced
Research Oriented
Introduce new concept
![Page 8: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/8.jpg)
Clarification
Ways to approach:
HCI
User -Based
![Page 9: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/9.jpg)
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
![Page 10: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/10.jpg)
APCS
Contents
Introduction1
Understanding User’s Behavior3
Automatic Tab Ordering4
Evaluation5
Contribution & Conclusion6
Related Works2
![Page 11: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/11.jpg)
APCS
Related Work
Tabs
Multitasking
![Page 12: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/12.jpg)
APCS
Related Work
Tabs
Multitasking
Web Browsing Activity
![Page 13: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/13.jpg)
APCS
Related Work
Tabs
Multitasking
Web Browsing Activity
Webpage Revisitation: 30%
25%
45%
30%
Ratio of selected tabs
Never selectedSelected OnceSelected More than once
![Page 14: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/14.jpg)
APCS
Related Work
Tabs
Tab GroupingMultitasking
Web Browsing Activity
WebpageRevisitation: 30%
![Page 15: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/15.jpg)
APCS
Related Work
Tabs
Tab GroupingMultitasking
Web Browsing Activity
WebpageRevisitation: 30%
Visual Aid
Foxtab: tab preview panel
![Page 16: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/16.jpg)
APCS
Related Work
Tabs
Tab GroupingMultitasking
Visual AidWeb Browsing
Activity
WebpageRevisitation: 30%
Tab Representation
![Page 17: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/17.jpg)
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 18: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/18.jpg)
APCS
Field Study
Figure 2: One participant in this study. Figure 1: Selab- Software Engineering Lab in University of Science.
![Page 19: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/19.jpg)
APCS
The amount of time using Firefox browserData collected by Personal Vibe)
![Page 20: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/20.jpg)
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”
![Page 21: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/21.jpg)
Online Survey
Online Survey
1 Large population. (30 participants).
General tendency of participants2
Participants: knowledgeable workers3
4 Created by Google Spreadsheet Form
![Page 22: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/22.jpg)
APCS
Online Survey
Analysis
![Page 23: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/23.jpg)
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 24: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/24.jpg)
APCS
![Page 25: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/25.jpg)
Automatic Tab Ordering
Most Used Tabs Instant Access
Fast Tab Switching
![Page 26: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/26.jpg)
Finding a common equation
Rank = α*No.Access + β*ActiveTime + γ*ElapsedTime
![Page 27: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/27.jpg)
FinalEquation
Rank = 1*No.Access + 0.00005*ActiveTime + 0*ElapsedTime
![Page 28: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/28.jpg)
Most Used Tabs Instant Access
Prototype 1.1: Free Tab Switching.
![Page 29: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/29.jpg)
Company Logo
Most Used Tabs Instant Access
Prototype 1.2: Tab Dummy.
![Page 30: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/30.jpg)
Company Logo
Most Used Tabs Instant Access
Prototype 1.3: Permanent Ranked Tabs.
![Page 31: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/31.jpg)
Company Logo
Most Used Tabs Instant Access
“List all tabs” button.
![Page 32: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/32.jpg)
Company Logo
Fast Tab Switching
Prototype 2.1: Manualmarking Tabs.
![Page 33: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/33.jpg)
Company Logo
Fast Tab Switching
Prototype 2.2: Automarking Tabs.
![Page 34: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/34.jpg)
Company Logo
Evaluation
Pilot test
Evaluation
Result
![Page 35: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/35.jpg)
APCS
Independent Variables
Firefox with installed Tab Dummy Prototype.
Default Firefox.Firefox with installed Permanent Ranked Tabs Prototype.
Condition 1 Condition 2 Condition 3
![Page 36: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/36.jpg)
Company Logo
Dependent Variables
Performance Measures
Number of scroll buttons clicked
Time spent switching tabs
Attitudinal Measures
Self-reported workload (NASA
TLX)
Subjective feedbacks
![Page 37: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/37.jpg)
Company Logo
Hypotheses
1Number of scroll buttons clicked decreases in condition 2-3.
2Time spent switching tabsdecreases in condition 2-3.
3User workload & stressdecreases.
![Page 38: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/38.jpg)
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 39: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/39.jpg)
Company Logo
Feedback & Improvement
Change questionnaires to open more tabs. Synchronize interaction. Divide participants to smaller group.
![Page 40: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/40.jpg)
Company Logo
Controlled Experiment
![Page 41: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/41.jpg)
Evaluation – Result
Overall result: Mental’s stress and workload decreases: Tab Dummy: 10%. Permanent Ranked Tabs: 14%.
![Page 42: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/42.jpg)
Contribution - Impact
Web Browsers
Text EditorsIDEs
AnySerial lists
OS: Taskbar
![Page 43: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/43.jpg)
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 44: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/44.jpg)
Conclusion
Benefits large population
No existingEfficienttechnique
ChallengeTraditionalTab order
AutomaticTab Ordering
Reduce stressUsers’ workload
Problems With TabbedBrowsing
![Page 45: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/45.jpg)
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 46: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/46.jpg)
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 47: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/47.jpg)
Company Logo
Cycle Diagram
Text
TextText
Text
Text
Cycle name
Add Your Text
![Page 48: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/48.jpg)
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 49: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/49.jpg)
Company Logo
Diagram
Concept
Add Your Text
Text
Text
Text
Text
Text
Text
![Page 50: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/50.jpg)
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 51: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/51.jpg)
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
![Page 52: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/52.jpg)
Company Logo
Table
Concept
Concept
concept
Concept
![Page 53: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/53.jpg)
Company Logo
Diagram
Title
Add Your TextAdd Your Text
Add Your Text
Add Your Text
Add Your Text
Add Your Text
![Page 54: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/54.jpg)
Company Logo
Diagram
Your TextYour Text
Your TextYour Text
Your TextYour Text
Your TextYour Text
2001 2002 2003 2004
![Page 55: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/55.jpg)
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 56: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/56.jpg)
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 57: RETHINKING THE TABBAR:INTRODUCING AUTOMATIC TAB ORDERING INTO WEB BROWSERS](https://reader036.fdocuments.in/reader036/viewer/2022081604/56815f62550346895dce508c/html5/thumbnails/57.jpg)
THESIS PROJECT
APCS