The document viewers display a visualization that corresponds to an individual doc- ument. However, as shown in Section 2.2, one of the main advantages of paper is that one can lay out multiple sheets and documents on the desk. This provides for a better overview on documents and their relations. We designed a digital visu- alization that corresponds to an augmented view on the entire desk. This so-called ecological view integrates all documents into one single interactive visualization. Its focus is on the relations between documents and the activities that users performed on them.
This view is basically a digital equivalent to the arrangement of multiple docu- ments in the physical workspace. However, in contrast to related work (e.g. [Wel93]), it does not aim at simply mirroring the physical arrangement. Instead, it details on the logical relations between documents. Documents are not visualized near each other because their physical locations are close but because they are connected by a hyperlink, tagged with the same tag concept or used by the same user. This pro- vides for a structured access to the information of document collections.
Scenario 4 (Structured Access to Information). During the last few weeks, Sally has frequently met her learning partners. Together, they have revised the lecture handouts, have read a lot of further documents and have written some new documents. Now that the final exam is arriving, Sally wants to review all information that is related to Molières comedies, which is one of the topics of the exam. She selects the tag “Molière” and has direct access to all information that was tagged with this label. Moreover, she seeks a document of which she does not remember the contents. But she knows that Dan has extensively worked on it during one of their first meetings. She therefore selects all documents which Dan has worked on and restricts the time period. Of the three remaining documents, she quickly finds the one she was looking for.
Elements of the Visualization
Due to the focus on relations, we opted for an interactive graph visualization. A screenshot of the view is given in Fig. 5.9 and will be explained in the following. Documents and document pages are represented by thumbnail images. Folders, tags and users are represented by icons. These nodes are connected by edges that visualize links, tags and user activities. We now provide more details on these ele- ments:
• Hybrid documents (Fig. 5.9 (1)) are displayed with a thumbnail image of their first page and have a shadow that corresponds to their number of pages. For a
5.2 Integrating Printed and Digital Documents 125
Figure 5.9: The ecological view
more detailed view, users can expand a document to thumbnails of its individ- ual pages. Double clicking/two pen taps on a document or page thumbnail opens it the corresponding document viewer.
• Printed-only documents (2) are visualized by a thumbnail of the cover.
• Folders (3) are indicated with an icon in their color containing a handwritten label. A shadow corresponds to the number of pages of all documents con- tained in the folder. Like hybrid documents, folders can be “unfolded” to view the individual documents.
• Tags (4) are displayed as oval concept cards covered with the tag label. • Each user (5) is represented by a personal icon.
An edge expresses:
• A link between two documents or folders. When clicking on the edge, the scope of the link is highlighted in yellow in the document thumbnail(s).
• Tags of documents or folders are indicated by an edge between the tag concept card and the document or folder.
• User activities are expressed by an edge from a user icon to all documents this user has annotated, linked, or tagged.
This graph provides a quick overview for example on how the collection of docu- ments is structured by hyperlinks, on which user has worked on which documents or on which documents are tagged with a specific tag concept.
Navigation and Filtering
A collaborative graph which contains the documents and activities of several users can quickly become complex. This makes high demands both on navigation and on appropriate reduction of the complexity. For this reason, the interactive visualiza- tions enables users to navigate through a large graph by panning as well as to focus on various levels of details by zooming in and out and by collapsing or expand- ing documents and folders. In order to focus on an individual element, this can be automatically centered or moved by dragging it with the mouse or with the pen.
Moreover, the ecological view offers comprehensive filter options on five dimen- sions that can be intuitively manipulated:
• Temporal filter: A dual-end time slider (Fig. 5.10 (1)) enables to hide all items that have not been created or modified in a given period. To further allow a quick temporal overview of all items, a time mode varies the size of the nodes. Larger nodes represent items that have been created or modified re- cently while smaller nodes correspond to older items.
• Global filter: Hides or displays all links, all tags or all users. These filters are activated by modal buttons (Fig. 5.10 (2)).
• Filter an individual user or an individual tag concept: All documents which are modified only by this user (or tagged with only this concept) are hidden. This filter is activated by dragging the corresponding node and dropping it on a list of filtered elements which is displayed in a filter panel beneath the graph (Fig. 5.10 (3)). The user or the tag is then added to this list. By tapping or clicking on it, the documents are displayed again. It is important to note that not only one user or one tag can be filtered, but an arbitrary number of them. • Focus on one node: Only this node and all directly adjacent nodes are displayed.
One or more hidden nodes can be re-displayed by tapping or clicking on one or more entries in the filter panel.
• Full-text search: An arbitrary query string can be entered in a text input field (Fig. 5.10 (4)). All users, tags and documents that do not contain this string are hidden from the view.
5.2 Integrating Printed and Digital Documents 127
Figure 5.10: Filter options of the ecological view