This MediaWiki 1.13.5 installation needs to be upgraded. Contact help@csail to schedule.
- Makinde Adeagbo
- Jon Grimm
- Aston Motes
Browsers have included history and bookmarking functionality for many years, but the interface presented to users has much room for improvement. History and bookmarks are seperated in most/all modern browsers, even though they are overlapping concepts for many users. The central goal is to retrieve pages that one has already visited.
The indivudual implementations of bookmarks and favorites are flawed. As one example, bookmarks are currently organized and displayed in folder-like hierarchy. While a familiar paradigm to most users, it makes maintinance more diffucult. Even adding a single bookmark is complicated, as the user needs to know where it goes in the structure. When attempting to retrienve history items, a user can only search through page titles and date of visit. This approach fails to account for the different ways users would like to retrieve content; the name of the site, time of visit, thumbnail of the page, and others.
The current inteface also fails to leverage user statistics like frequency of visitation. By not looking at how often users re-visit pages, the browser throws away a great deal of information that could be used to customize the experience for individuals.
- MIT undergrad students
- New to the institute, potentially unfamiliar with many facilities that MIT offers
- Less likely than grad students to be motivated and experienced in planning for long-term career
- More likely to depend on peers, there are more social elements in their decision making
- More focused on accumulating credits than satisfying personal interests
- Very likely to be computer-savvy and Web-savvy
- MIT grad students
- Some are also new to the institute
- More likely than undergrad students to come from other countries
- Motivated and experienced in planning for long-term career
- More focused on satisfying personal interests and research interests
- Don't have to take many courses in a term
- Visiting students from other schools such as Harvard
- Unfamiliar with MIT's facilities
- The mapping of credits from one school to another can appear adhoc, mysterious; prerequisites are not the same
- Transportation (to classrooms) can be more of an issue (e.g., can't stay too late on campus for group work)
Users utilizing TotalRecall will be doing the following:
- Launching Firefox browser
- Finding a webpage visited in the last 48 hours
- Finding a webpage visited in the last 5 weeeks
- Marking a page for future recollection, via flag or tag / label
- Unmarking a page that has previously been marked
- Removing a label from a previously visited page
- Recalling pages that have been marked
- Sharing a previously / currently viewed page
- Removing information about previously visited page(s)
- Modifying privacy settings
Scenario 1: Labeling pages
Jim, a banker, wants to buy a new widescreen monitor as a gift for his son, so he goes online and searches around for the best price. Jim wants to keep track of all the best prices, but as he is very busy he will have to leave his computer several times in the middle of his search. Since his son is in the house and might see his computer, he has to close his browser whenever he leaves. Luckily, Jim uses TotalRecall. Whenever he finds a prospective monitor, he labels the page as "birthday monitor". After a few days of searching when he has time, Jim opens Firefox and types "birthday monitor" in the TotalRecall search box. As he types the results are updated incrementally, so he only really has to type some of the words. Thumbnails of the top matches are shown along with their titles and URLs (plus titles and URLs of less matching results). Jim sees the pages he has labeled and opens each of them in a new tab. He compares the prices and features, then purchases the best. After he is done, he returns to TotalRecall. He selects his labeled pages and deletes them so his son will not guess the surprise.
Scenario 2: Searching by content
Kim is a high student starting a research project on Ebola virus. She uses Google and other online research engines to find articles and papers on Ebola. In a matter of hours she has visited dozens of sites related to Ebola. She decides that Ebola is too large a topic and narrows her focus to its replication. She remembers that some of the articles mentioned replication, but not exactly which ones. She opens TotalRecall and types "ebola replication" in the search box. Even though none of the page titles or URLs include "replication", she gets several results. Recognizing one page layout from the thumbnail, she clicks on it. The page includes a section on replication, and she is off to a good start on her project.
Scenario 3: Frequently visited pages
When at home, Kim has a small group of websites that she visits much more than others and wants to be able to get to those sites very quickly. The sites include her Gmail account, Facebook, and NYTimes. She has set TotalRecall as her home page, so as soon as she opens Firefox she is presented with thumbnails of a few of her most visited sites. The large picture is quickly recognizable and easy to click. A second later she clicks the picture and is taken to her site.
Scenario 4: Privacy concerns
George is a closet Pokémon fanatic. He browses websites covering the entire gamut of the Pokémon sphere: blogs about the new television shows, review sites on the upcoming video games, and even a site which collects fan art to be used with the table top card game. George also happens to be embarassed by his interest in such a fantasy world; all of his friends think he goes home to read up on the same sorts of things other 65 year-old retired engineers do, namely Seventeen magazine. Due to this situation, george loves using Total Recall for his general browsing, but prefers to switch it off entirely when he's looking up Pikachu's stats so that when his friends visit he leaves no trace of those sites. As an experience technology user with a reasonably good memory, he chose to increase the amount of time pages would stayed remembered in Total Recall to the maximum length knowing the tags he applies will help him easily find content. And when he begins to feel cluttered, he simply clicks to clear out all of the stored content in one fell swoop.
Design 1 - Jonathan Grimm
Main View This is the main view of the interface. It occupies a tab in the Firefox browser. In the upper left is a search box that will search incrementally on the browsing information we have collected. The results for this will be displayed on the right side of the tab. The top five results are shown as thumbnails with URLs. All results are listed in the table below these thumbnails.
Not shown is the toolbar button in Firefox that can be used to open this view. Also present in the toolbar is a button to add a label to the current page.
Settings Dialog This is the dialog users utilize to change the way TotalRecall works. Key parts of this are the enabling / disabling of collecting browsing information and how long that information is kept. Users can also delete all information currently stored about their browsing.
Add Label Dialog This dialog comes up when uses want to add a label to a page.
Design 2 - Makinde Adeagbo
Main View This is the default view that the user sees when they launch TotalRecall. On the left are the thumbnail of visited pages, as well as a list of web searches carried out. On the right is an incremental search box and a series of filters that the user can apply to the thumbnails. All actions, excluding those on the settings view, are seen here. Pages marked as favorites have illuminated stars over them. The user can toggle this mark by clicking directly on the star.
Settings View In this view/mode, the user can change overall plug-in settings, as well as remove specific pages and searches from the history.
Viewing Normal Web Page When the user is browsing the web, the only part of the interface that is visible to the user is the toolbar. Users can click on the star to mark a page as a favorite or unmark it.
Help View All help text and information about the plug-in is located here. Most actions in the plug-in take no more than 2 clicks, so the modal help display isn't a strong negative.
Design 3 - Aston Motes
Main View & Dialogs This shows the default view of TotalRecall as a Firefox toolbar. The drop down menus are both expanded to show example content, though only one would be at a time in the real implementation. The thumb, as noted, goes between colored and grayed as the user toggles the state of their page preference. A sampling of the dialogs (there should be more, but they are minor) is shown as well.
Preview Pane View and Context Menu This is a view very similar to the first, but demonstrating the preview pane that will show thumbnails and snippet text for webpages. Note that the pane is a horizontal scrolling window. The current view is "Page Groups: Videos," but could be any of the page groups, quick links, search results, or a combination thereof. The right-click context menu is also shown. The options specific to TotalRecall are appended to the bottom of what is normally on the menu for Firefox.
Main View: This is the default view of TotalRecall where users can view their history, as well as apply various filters to the information. The TR toolbar, which allows on page actions, is located below the browser chrome.
Settings Pane: Used to adjust privacy settings and configure the application.
Group For Page Dialog: Allows users to add the current page to a particular group.
New Group Dialog : This is the dialog that allows users to create a new group.
TotalRecall is an extension for the Firefox web browser. The aim of the project is to completely replace the built in Bookmark and History functionality of Firefox and to replace it with something more usable and hopefully more useful. With TotalRecall, you should be able to more easily go back to pages you’ve visited often, find pages you’ve been to recently, and recall pages you only vague remember, among other things.
One change to know that TotalRecall makes is that your page history and bookmarks are no longer separated into two different experiences, but instead are presented together. Hopefully after running through the tasks we’ve prepared, you’ll have a sense as to how that combination works within our application.
Like the history feature of the web browser, TotalRecall will keep track of the pages you visit as well as some other, potentially useful information without any need for user action (beyond doing what you normally do on the internet). As this amount of tracking may appear to be invasive, there are privacy controls within TotalRecall that you will also be exposed to in the tasks.
Task 1 - Find a Visited Page
- Look at the provided web page and listen to the information about it
- Imagine that you saw that page 3 days ago
- Using TotalRecall, find the page
- Open the page in the browser
Task 2 - Settings
- View a webpage in the browser
- Clear the data TotalRecall has collected about your browsing
- Set TotalRecall to only keep browsing information for 2 days
Task 3 - Groups
- Add the current webpage to a group called "foo"
- Using Total Recall, find all webpages in the group "classes"
Task 4 - Page Deletion
- Delete your most recently visited webpage from TotalRecall
Computer Prototype Information
- While the prototype should work on Mac OS X, Linux and Windows, we prefer that Windows be used for this evaluation.
- Firefox 2.0.*
Click here to install our Firefox extension.
Note: You will need to restart Firefox after installing the plug-in.
1) We have not yet implemented any of the information capture portion of TotalRecall. When we have a complete implementation, TotalRecall will keep a history of pages visited, with various pieces of information about the visit (time, thumbnail, etc). For now, we have simulated page visits by adding some typical web pages to the database. Because of this, no page thumbnails will be shown. A blank thumbnail will appear instead.
2) We have not implemented help
3) We have not implemented sorting by number of visits or by relevance
4) We have not implemented adding pages to groups, including the "Thumbs Up" group.
5) We have not implemented deleting pages
6) We have not implemented privacy features
1) Incremental Search - we have a complete front-end to back-end implementation of incremental search (though sometimes buggy).
2) Group management - it is possible to create and delete groups, and filter search results by group. Undo of the last deleted group is also possible.
3) Date sort - the only currently implemented (and default) sort is sorting by date
Final Prototype Information
How to install
Our extension is now hosted at https://addons.mozilla.org/firefox/4055/, in the official Firefox extension repository.
TotalRecall's interface is composed of several main sections that help users accomplish their different tasks as quickly and easily as possible. The most commonly visible component is the TotalRecall toolbar. This toolbar is the main access point to the rest of the TotalRecall application. Additions to the 'Tools' menu in Firefox duplicate the functionality of the toolbar for those users wishing to conserve screen space. Most of the TotalRecall user interface is contained in the TotalRecall tab. This tab lets the users interact with their browsing history. TotalRecall's interface also includes a help tab, settings pane, and several other smaller dialogs. All these components are discussed in more depth in the sections that follow.
The toolbar gives users the TotalRecall interaction they need as they surf the web. The final implementation of the toolbar is very simple, containing only three buttons. The first allows users to open the TotalRecall tab to explore their history. The second button, a star, lets a user mark the current page as a favorite. Two visual cues, the depressed state of the button and the star image, show whether a page is a favorite or not. The last button opens a dialog to control the groups to which the current page belongs.
The Tools menu options added by TotalRecall duplicate the functionality of the toolbar as well as making less commonly used features available. It maintains external consistency with other Firefox extensions, most of which provide access to their extension through the Tools menu. The three options that are the same as the toolbar try to use the same wording and images to provide a consistent feel to the user. The first feature available through the Tools menu but not the toolbar is the ability to quickly clear all the information TotalRecall has collected through the 'Clear TotalRecall Data' menu item. This item provides an efficient way to remove all private information, and it is located above the menu item that clears Firefox history so it should be easy to find. Finally, the Tools menu includes access to the TotalRecall help system for users who become stuck.
Most of a user's interaction with TotalRecall is centered around the TotalRecall tab, where a user can interact with pages visited in the past. Users want to be able find pages quickly, and the left pane of the tab provides the search, sorting, and grouping functionality to do this. The search is incremental, providing immediate feedback to users by updating the pages displayed. The search interface itself is consistent with other applications and displays a magnifying glass to easily identify the box. Users can quickly exit a search by clicking the 'x' button in the search box. Users can choose to sort the pages either by the date they were last visited or by the total number of times the pages were visited. It is also possible to only view pages in a particular group by selecting that group in the groups list. Groups can easily be added and removed through this interface. These different methods of finding pages work together as filters to help users find the desired page(s).
The largest portion of the TotalRecall tab is occupied by the pages that a user has visited, possibly filtered by the methods discussed above. TotalRecall displays a collection of items containing information about each of these pages. The most visible part of a page item is a thumbnail image of that page. Web sites have distinctive layouts that are familiar to many uses, and even from a small thumbnail it is easy to distinguish many of these pages. Adding a thumbnail allows users to leverage more information they know about a page for which they are searching. In addition to the thumbnail, the page title is displayed, along with a variable 'blurb' about the page. This 'blurb' is the time of the last visit when a user sorts by Date and the number of visits when sorted by number of visits. After finding a page, users can take several actions to accomplish their task. To simply navigate to a page, a user clicks on the thumbnail and the page opens in a new tab. [design alternatives (selection instead of web app like click, right-click, thumbs up, relevance sort...)]
Groups for page
The groups for page dialog lets users modify the groups to which a particular page belongs. The dialog includes a thumbnail image of the page to help reinforce the page that the user is modifying. A list of groups with checkboxes lets users change the page's groups. To be internally consistent, this list is kept in the same order as in the TotalRecall tab. Anticipating that users might want to create new groups on the fly, the dialog includes a button to create a new group. [design alternatives]
TotalRecall settings give users control over how TotalRecall collects and stores browsing information. The settings are incorporated into the main Firefox options dialog as an extra tab. If a user opens Firefox options through TotalRecall, the TotalRecall settings are presented as the top tab. Through the settings dialog, users can specify to collect information or not by setting the "Collect browsing information" item. They can also specify how long information should be kept. As a final instrument of control over private information, users can remove all data from TotalRecall by pressing the "Clear TotalRecall history" button. TotalRecall warns users that this action cannot be undone, and if a user chooses to continue it shows a message indicating that the data has been removed. [design alternatives (using Firefox settings)]
TotalRecall help is opened in a new tab when the user activates it. This modal functionality was one of the primary choices we made when designing help. While it hides the main interface and requires the user to remember things as opposed to always seeing the interface, it allows us to display more information about the interface. The help section is broken down into tasks. Most common tasks are explained for each interface (main window, settings and groups for page). Screenshots of the interface also guide the user to find appropriate tasks.
As it turns out, choosing to implement the majority of our application in XUL led to some unexpected problems with rendering widgets. In particular, we found that Firefox is lazy to some degree when rendering elements, a property which is helpful in general (especially when adding hundreds of DOM elements all at once), but which has harmful effects if it guesses wrong about when and what to draw. In the end, we wrote in a number of hacks to force these redraws.
We also needed to choose the main metaphor of our application. We could either go with an interface that felt more like a typical windowed application (like Firefox) or an interface that, though created with XUL, was reminiscent of a webpage. We chose the latter, on the assumption that, given we were going to present our application within the browser rather than an auxiliary window, users would expect certain types of actions (like single-clicking) to work the way they work on the web.
However, in choosing the web metaphor, we lost some usability within our application, specifically with regard to bulk operations. In the windowed application style, selecting is a single click, possibly with key modifiers, or perhaps a dragged box around items. Once selected, items can have bulk operations like Delete or Group or Open applied to all of them simultaneously. On the web, single clicks launch, not select, and there’s not really any commonly used bulk selection device beyond checkboxes (which we deemed overly complicated within our design).
Firefox 2.0 included a SQLite implementation which it made accessible to extensions, so we used this lightweight SQL database as our main store of user information (everything other than preferences, which were stored with all of the other Firefox preferences). Each page a user visits is logged into the database, as are all of the user-created groups and the mappings between the two. Each time the user visits a webpage, the page is either added to the database, or its entry is updated to reflect the total number of visits, the last time visited, and a thumbnail picture to be the representation of that page to the user.
The creation of the thumbnails was initially a technical exercise; without the abilities of later Firefox builds to create a canvas, render a webpage onto it, and then obtain the data on the canvas for later recall, we would have been forced to pull thumbnail images from some third party source. Fortunately, we had the ability to take screenshots ourselves, which in the end enhanced the user experience since any site they visited, well-known or not, a screenshot could be created. We did struggle, though, with exactly what the screenshot should contain. Our solution was to take “artistic” screenshots, taking about 800 pixels worth of the page horizontally somewhere between the center of the browser window and the far left of the browser window, virtually guaranteeing that no page is rendered in its entirety (which in the end lends consistency), but still ensuring that pages of varying length and global alignment still had enough of their elements rendered to create pleasing, if not incomplete, screenshots.
Users were briefed with the following text:
TotalRecall is a Firefox extension that functions as a history and bookmarks enhancement (add-on). It records your browsing activity in the background as you surf the web. The extension consists of a toolbar, tools menu items, and the main TotalRecall history tab. The extension allows you to see thumbnails of pages you have visited, and navigate to those pages. To assist you in finding pages, you can search, sort, and group pages. TotalRecall also has privacy features that allow you to control when TotalRecall collects browsing information and allows you to remove that information.
If at any point you get stuck, TotalRecall does have a help section you can refer to. Also, remember that we are trying to test our system, not you, so don't worry if you get stuck. It will help us find problems in the interface and solve them.
We also had a number of tasks we asked users to perform
Task 1 In the past several days, you have visited the Facebook profiles of several of your friends. Find all the Facebook profiles you've visited and mark them as favorites ("starred").
Task 2 For this task, we are going to pretend that you are looking for a Nintendo Wii to buy for a friend for Christmas. Through Google or other means, navigate to three sites that sell the Wii. Add them to a "shopping" group in TotalRecall. Later on, you want to go back and look at these pages to compare them. Navigate to them through TotalRecall.
Task 3 For this task, you want to remove all the pages in the shopping group you created earlier. You don't want your friend to accidentally see the items you were looking at. Also, you are going to continue to do some shopping, so stop TotalRecall from collecting browsing information until you are done.
From the user testing, we found a number of new problems with our interface
- Star outline makes users think a page is starred [MINOR]
- Star symbolizes all favorites in other history applications, so users tried to press star image (in toolbar) to get to groups for page. [MINOR]
- Blank list of groups in "Groups for Page" dialog was confusing. Users tried to click on empty box to add group. [MINOR]
- Menu with delete, manage groups was hard to discover [MAJOR]
- Applying changes to many pages was time consuming because it had to be done individually [MINOR]
- Deletion of group leads users to believe the pages in that group were deleted, not just group [MINOR]
- Users tried to right-click images to get context menu (for deletion) [MINOR]
- Redundant settings with Firefox history made TotalRecall privacy settings hard to find [MAJOR]
- Text still in search box caused mode errors (pages were not in group as expected) [MINOR]
Probably the largest lesson learned across the entire design process is the importance of user testing. Since we fell into the demographic of our target user group, we approached many aspects of our design as if we were the users. Pretty much every time we created a prototype and put it in front of someone else, we found them running into trouble where we hadn’t anticipated or assuming a feature existed that we hadn’t thought to put in (or hadn’t exposed well enough), or some other demonstration that “you are not the user.” Along the same lines, the number of users testing the interface is very important. Even through our final user evaluations, users continued to uncover new issues.
We found that not all of the prototyping we did helped get at the fundamental issues. The paper prototyping, in particular did point out places where our interface was confusing in some places, but after we put the mouse in people’s hands, their willingness to explore the interface, including right-clicking, went up tremendously.
We ended up doing a good job assessing the relative risk of each of our big unknown components (the database layer and incremental search, thumbnailing, and history tracking, in that order). Choosing to build up the database experience proved to be the most difficult of the components since going into the project we had no clue whether we would be using something built in or writing our own external XPCOM object and importing it for the extension to use. We at least knew a general approach for the completion of the other unknowns.
Near the beginning of our design, we made choices for the backend that would easily align with our front end approach. As problems were introduced and addressed, we found that some changes cut across many of the abstractions that we had created. The lesson learned here is to keep a prototype backend as abstract as possible, accounting for many possible data organization techniques.
From a performance standpoint, we attempted to implement our prototype code at the lowest fidelity possible to still achieve functionality at the desired level but still have readable, modifiable code if we needed it in place. We found eventually, though, that a lot of our DOM code was slowing down our application, so we went back in a later iteration and improved the performance there with caching of DOM objects that weren’t changing. The performance still isn’t up to the level that we might like, and will have to be optimized later.