Overview Widget

Discussion

This idea came from my MSc. Project, where I explored the design and test of a better dialog for opening files from the current application.

The main idea of the proposed interface was that the list of files would be tailored to the application that launched the dialog; the user could apply more filters (e.g. search, type, origin) to further restrict the displayed files and hone in on the desired document.

This dialog used a file list as the main element of its interface, which may be ordered by useful date (e.g. last edit for a text document, date a picture was taken, etc.), file name and title.

In this case, sorting lead quite naturally to the creation of subsets of data which could be used to structure the list. For instance, the first letter in the case of file name and title sorting, or suitable periods (e.g. months) for date sorting.

This is an example of grouping a list of files by the month when they were created/edited:

https://github.com/felipeerias/sketches/raw/master/overview/groupings.png

The file list could be extremely long, so some kind of visual summary was needed to ease orientation by giving the user a visual indication of the part of the list that was currently being displayed. The visual metaphor was a fish-eye widget that linked the currently displayed subset of results with their position on the list.

This widget was annotated using the same subsets as the list, thus providing a quick graphical summary of the structure of the list. It even allowed for shortcuts: clicking on a point of the overview scrolled the list to that position. Some of the literature that we reviewed pointed that users tend to prefer to navigate through long lists of results rather than refine the search terms, and this widget provided a way to accelerate these strategies and put the results in context.

The overview widget in action, displaying a summary of the whole list of results, giving context to the currently displayed items and allowing for quick movement to any point of the list:

https://github.com/felipeerias/sketches/raw/master/overview/overview_widget.png

The original prototype included a combobox on top of the visual summary to change the sorting criteria.

Concepts

This is a possible route to adapt these ideas to the current GNOME design, in this case with the current list view:

https://github.com/felipeerias/sketches/raw/master/overview/overview_mockup.png

Comments

Design/Whiteboards/Overview (last edited 2012-02-20 17:18:51 by FelipeEriasMorandeira)