Truc Nguyen

Visual Bookmarking

Using information gathered from users through design studies and surveys, we developed a prototype bookmarking application that captures important media elements and site metadata to make it easier to save bookmarks. Content on the web has changed, but default bookmark applications have made little progress. Traditionally, bookmarks have consisted simply of a title and small icon, or favicon, and are sorted into folders. Our line of research involved trying to determine deficiencies in current bookmark applications and opportunities for new design by incorporating metadata and visual elements in bookmarks.

Benchmarking

We studied the most common tools that people use for saving links to webpages they wish to revisit, including: email, Pinterest, browser extensions, and the default browser bookmarking application. We found that while the default bookmarking system is used by everyone, they are insufficient for users to be reminded of about the visual and semantic content of their bookmarks. What results is a clutter of unorganized bookmarks that users tend to not re-visit due to the difficulty of relocating the page in their bookmarks tool.

Preliminary Studies

We conducted two preliminary studies to determine what elements of a page people best remembered. Participants were asked to browse a page for 2 to 4 minutes, close their computer and recreate the page from memory using colored pencils and paper. After this recall task, we would then give the users a short survey to indicate their preferences about when they would like to be reminded of this bookmark, how they would save/categorize it, what elements they find most important. We found the elements of a page people best remember are: title, images, section headings, navigational elements and short quotes.

userstudy1 userstudy2

This design study was supplemented by a larger survey conducted with the help of Google Survey and the subreddit /r/samplesize on Reddit. Some highlights from our survey include the following:
45% Do not regularly return to their bookmarks
40% Do not regularly bookmark pages they intend to revisit
59% Do not regularly save bookmarks into designated folders
45% Do not find bookmarks easy to organize

The survey results caused a shift in our proposed design. Current bookmarking tools force the user to commit too early to organizing their bookmarks. When they do not spend the effort into curating bookmarks up-front, the utility of bookmarks is diminished. We thought users can benefit from a tool that allows them to save bookmarks for later organization. We changed our focus to create a lightweight application to store temporary bookmarks using ‘queue’ metaphor. Our tool allows for creation of speedy, ad-hoc categories with tagging.

Design and Prototyping

From these results, a set of core features were determined. We decided to create a prototype system that captures the information people best recall according to our studies. The prototype automatically extracts title, URL, largest image on page, time of interaction, and media types (.gif/.jpeg/youtube.com). Users organize their bookmarks through drag-and-drop tagging, which is not required for a bookmark.

While our application should capture more information than current bookmarks do, the interaction should be as lightweight as possible. Visual Bookmarks serves as a temporary queue of bookmarks: a running list of pages of interest. Tagging is the main way of organizing bookmarks. The advantage of using tags over folders is that a bookmark can have multiple tags applied to it. In a traditional bookmarking system, it would be forced to reside in one location in a folder system which a user might not remember. Additionally, tagging is not a requirement so users do not have to prematurely commit to putting their bookmarks in a particular category.

notfiltered filtered
User Testing

We conducted a user test with 5 participants to assess the usability and desirability of the extension. Overall, participants thought the tool had promising functionality they felt was lacking in their existing systems. One participant said “My current bookmarks is really unorganized. It’s just a bunch of links in the main folder”.

However, they did not think the system provided enough feedback upon user actions. The main difficulties users had were in understanding how the functionality of the tagging system. Mainly they felt that there was a lack of an affordance for the drag-and-drop interaction – the only method to tag in our system. Instead they tried clicking on a tag (which is the filter action) or typing into the new tag input field (which is the action for creating a new tag) would tag the current page.

Redesign

Following the user tests, we gathered the responses and feedback in order to consider the redesign of the Chrome extension prototype. Once we pooled together the results, we compared them based on usability issues, ability to recall previously visited web pages and styling criticisms.

MJ_snippet cats_snippet

Data Extraction
In our redesign, we wanted to display more extraction of data from the web-page in order to provide better recall of the web page based on the visual summary that we are providing. In our previous iteration of our visual bookmarking Chrome extension, we displayed the largest image on the page, the title of the page and the tags that the bookmark is associated with. In the browser extension, we designed it to extract information that we didn’t snow in the visual summary of the bookmark, such as the time of interaction and URL of the page. In the redesign, we wanted to add more information to the snippet. We included the meta-data on the page, in the form of keywords and relevant snippets of text. We also included section headers, if any, in order to provide proper context towards the visual bookmark.

Tagging & Search
In the first iteration of the Chrome extension bookmarking tool, we allowed the users to be able to tag their bookmarks from a list of predefined tags or tags created by themselves. In the redesign, we want to add value to organization and develop a way for them to parse through their queue of bookmarks with filtering options. The ability to select multiple tags would give users better search and recognition experiences. Currently, they are able to give a certain bookmark multiple tags but only one filter can be selected at a time. Another functionality we added to the re-design was the ability to text search the bookmarks via keywords and URL.

We hope to embed the extension into the user’s browser rather than an overlay. An issue we discovered during the user tests was that the tool would sometimes block off content on the web page. When the user clicks on the icon in the browser bar, a pop-up would appear, revealing the queue of visual bookmarks that have been collected by the user.

New Functionality
A problem we noticed with currently available bookmarking systems is the inability to save pages temporarily. The current solution is to open up tabs, however, this always ends up cluttering up the tabs bar and the individual tabs become so small and condensed that the title is illegible. Our solution to this is to add the functionality of saving sessions during browsing. By allowing users to sort their browsing up into sections, the fast adding of web pages to that session’s collection would improve their searching speed when looking for the right collection of resources. For example, when researching articles for a history paper, a user may want to open up several pages from their Google search query that they think might be relevant. Later on, they may want to come back and filter the results and delete duplicates or irrelevant pages.

snippets

My Contribution

User Research: I conducted some of the preliminary studies, wrote survey questions and conducted the user test sessions with five participants using the prototype.

Design: I created sketches and wireframes of the prototype and the flow for tagging items. From user test results, I came up with concrete changes to the product and interaction flows.

Development: I worked with Michael to create the Chrome extension. I instrumented the tagging functionality in the extension worked on the styling of extension.

Methods Used

Task-Based Needfinding

Observational Study

Survey

Paper Prototyping

Wireframing

Usability Testing

Front-End Development

Collaborators

Michael Bove

Shannon Chen

Senna Parsa