Tabbed Web Browser History
A new and easier way to view your browser history through each opened tab
A new and easier way to view your browser history through each opened tab
Figure No. 1 - A curent view of the Google Chrome "linear style" web-browsing history feature. Note how there is no indication of different tabs, causing a lack of organization and a rather confusing list of sites in a mass-chronological order.
The Idea
In order to view your web browser past links, everyone knows to simply click on the button displaying History. This brings up a new page displaying a linear recollection of the last pages visited, with a timestamp displaying exactly when they were visited. However, with the new application of Tabbed - Browsing in todays most popular web browsers, there is no way to view which tab they came from. Instead, users must manually navigate through serious clutter issues if they viewed multiple pages in multiple tabs at the same time. This mistake can easily be corrected through a redesign of web browser history with tabbed - browsing in mind, allowing users to select which pages were viewed in each specific tab instead of one constant "group tab".
In order to view your web browser past links, everyone knows to simply click on the button displaying History. This brings up a new page displaying a linear recollection of the last pages visited, with a timestamp displaying exactly when they were visited. However, with the new application of Tabbed - Browsing in todays most popular web browsers, there is no way to view which tab they came from. Instead, users must manually navigate through serious clutter issues if they viewed multiple pages in multiple tabs at the same time. This mistake can easily be corrected through a redesign of web browser history with tabbed - browsing in mind, allowing users to select which pages were viewed in each specific tab instead of one constant "group tab".
Figure No. 2 - the Welcome Screen to tabbed browsing history. Note that users are provided with step by step instruction on how to use the new interface, as well as a description of the new features provided.
New Features
The newly designed web browser history would be able to navigate through current browser paths in three different manners. Firstly, a linear display similar to the current browser history would be utilized in each tab. Secondly, a Mapped View displaying the order in which tabs and links were opened. Thirdly, a Geometric view providing the user with insightful data and organizational charts and graphs depicting how much time was spend on each tab and website as compared to others in a given amount of time.
The newly designed web browser history would be able to navigate through current browser paths in three different manners. Firstly, a linear display similar to the current browser history would be utilized in each tab. Secondly, a Mapped View displaying the order in which tabs and links were opened. Thirdly, a Geometric view providing the user with insightful data and organizational charts and graphs depicting how much time was spend on each tab and website as compared to others in a given amount of time.
Linear View
The first Linear View would allow users to view a linear time-stamped progression of the previous pages currently visited by the viewer. However, unlike the current web browser history data, the user would be able to actively and manually select which tab he / she would like to view the data report from. This would allow the viewer to actively manage the data viewed in each tab, not providing a large conglomeration of data which often causes clutter and confusion when viewed at once. Essentially, this view is an easy to use re-creation of the current web browser history we all know and appreciate, in tabbed form.
The first Linear View would allow users to view a linear time-stamped progression of the previous pages currently visited by the viewer. However, unlike the current web browser history data, the user would be able to actively and manually select which tab he / she would like to view the data report from. This would allow the viewer to actively manage the data viewed in each tab, not providing a large conglomeration of data which often causes clutter and confusion when viewed at once. Essentially, this view is an easy to use re-creation of the current web browser history we all know and appreciate, in tabbed form.
Figure No. 3 - the "Linear View" setting. Note each "Browser Tab" selected on the left of the viewer-options.
Mapped View
The second display would be a Mapped View, linking each tab together at the same time, in order to form a certain of "tree-diagram" timeline, branching out each page from each linked tab, showing the user the order that pages were visited. In other words, the user would see in which tab each link was opened from and in what order, allowing him / her to determine the exact order and link each tab opened from. This would provide a useful feature for those wishing to see what tab and link inspired a new tab and link to be reached, which would be exceptionally useful for students and researchers to keep track of progress.
The second display would be a Mapped View, linking each tab together at the same time, in order to form a certain of "tree-diagram" timeline, branching out each page from each linked tab, showing the user the order that pages were visited. In other words, the user would see in which tab each link was opened from and in what order, allowing him / her to determine the exact order and link each tab opened from. This would provide a useful feature for those wishing to see what tab and link inspired a new tab and link to be reached, which would be exceptionally useful for students and researchers to keep track of progress.
Figure No. 4 - the "Mapped View" option, allowing users to view the chronological order of which tabs were opened in a graph form. Note each Tab starts in its own window on top, preventing a cascade of each item in order of time viewed, preventing a colossal buildup of data in no-apparent order.
Geometric View
The third and perhaps most innovated view would be a logistical map, showing the user how much time / work was developed in each tab. This "Geometric View" would allow users to view graphs and charts showing how much time was spent per tab, as well as how many links and visits were provided in each specific tab. Ideal for managing time, this would allow users to keep track of distractions (if any), providing a chart showing how much time was actually spent on each website as compared to others. The user would select the start and end time to organize through, allowing for customizable views and insight.
The third and perhaps most innovated view would be a logistical map, showing the user how much time / work was developed in each tab. This "Geometric View" would allow users to view graphs and charts showing how much time was spent per tab, as well as how many links and visits were provided in each specific tab. Ideal for managing time, this would allow users to keep track of distractions (if any), providing a chart showing how much time was actually spent on each website as compared to others. The user would select the start and end time to organize through, allowing for customizable views and insight.
Figure No. 5 - the "Geometric View" option, showin in "Graph Analysis" Mode. Note the Menu Bar, allowing users to select through each available tab. Once each tab is selected, users may view "Analytical Data", "Graph Analysis", and "Statistical Data", each providing a new viewpoint for the user to analyze information.
The Design Process of Tabbed Browser History
Personally, I use browser history almost daily. It tends to be a very useful tool for students and researching looking to re-track where data was located, and allows students to keep a mock-timeline of their progress throughout a project. I have frequently considered NOT using tabbed browsing when doing research, and simply opening new windows , in order to prevent the constant chaos which ensues after I click the Command + Y button (how to access history in a mac).
The first step to my redesign of browser history was data collection. I went up and down my dorm floor at Cornell University and asked students if they were pleased with todays current forms of history recollection, and if there was anything they would change if possible. Feedback from this data collection showed that nearly every student I asked mentioned how history often gets cluttered and confusing with the huge array of open tabs and multiple documents viewed at a time. "If only there was a new - organizational method of viewing tabbed browsing history" - replied an interviewee.
My second step was a brainstorming and series of sketches, which resulted in my final sketch (Figure No. 6). I decided I wanted to have three possible views for user availability, and that the user should manually be able to decipher between each step. After sketching this step, I decided to map out my design using the Balsamiq prototyping tool. I looked at the current design, and decided how VISIBILITY should play a roll in my new mock-up. Users should be able to clearly decipher between which mode they wish to select at the time, with proper FEEDBACK from the interface following instantly. Lastly, I needed to make sure that Mapping (a users logical connection between two entities) was clear and decise in the interface. Users should not be caught off - guard by an unexpected result from clicking on a specific button, so I categorized each "sub-level" into its own area, allowing for only one of the three options to ever be chosen at once (Linear, Mapped, and Geometric views)
In order to accurately understand my design process, and with more in-depth evaluations and design protocol, please visit the attached link at the bottom of this portfolio piece.
Personally, I use browser history almost daily. It tends to be a very useful tool for students and researching looking to re-track where data was located, and allows students to keep a mock-timeline of their progress throughout a project. I have frequently considered NOT using tabbed browsing when doing research, and simply opening new windows , in order to prevent the constant chaos which ensues after I click the Command + Y button (how to access history in a mac).
The first step to my redesign of browser history was data collection. I went up and down my dorm floor at Cornell University and asked students if they were pleased with todays current forms of history recollection, and if there was anything they would change if possible. Feedback from this data collection showed that nearly every student I asked mentioned how history often gets cluttered and confusing with the huge array of open tabs and multiple documents viewed at a time. "If only there was a new - organizational method of viewing tabbed browsing history" - replied an interviewee.
My second step was a brainstorming and series of sketches, which resulted in my final sketch (Figure No. 6). I decided I wanted to have three possible views for user availability, and that the user should manually be able to decipher between each step. After sketching this step, I decided to map out my design using the Balsamiq prototyping tool. I looked at the current design, and decided how VISIBILITY should play a roll in my new mock-up. Users should be able to clearly decipher between which mode they wish to select at the time, with proper FEEDBACK from the interface following instantly. Lastly, I needed to make sure that Mapping (a users logical connection between two entities) was clear and decise in the interface. Users should not be caught off - guard by an unexpected result from clicking on a specific button, so I categorized each "sub-level" into its own area, allowing for only one of the three options to ever be chosen at once (Linear, Mapped, and Geometric views)
In order to accurately understand my design process, and with more in-depth evaluations and design protocol, please visit the attached link at the bottom of this portfolio piece.
Figure No. 6 - the final sketch before implementation on Balsamiq Prototyping
Additional Files can be accessed below:
Balsamiq Mockups (Click each image to enlarge):
-
https://www.dropbox.com/sh/8ya3gu24pe2ovi2/gT0RN9Nbkp
Written Report (View in Dropbox)
-
https://www.dropbox.com/s/czrhod2egt41nmo/info3450PP1.docx
Balsamiq Mockups (Click each image to enlarge):
-
https://www.dropbox.com/sh/8ya3gu24pe2ovi2/gT0RN9Nbkp
Written Report (View in Dropbox)
-
https://www.dropbox.com/s/czrhod2egt41nmo/info3450PP1.docx
Design by Frank Romano, Cornell University 2015
