Prototype: Link Types and Link Endpoints (Round 3)

In this entry, the view modes are renamed and redesigned.

• Lateral View is renamed Zoomed-In View
• Inventory View is renamed Zoomed-Out View

The main challenges in redesigning Zoomed-In View involve color coding and how cursor events change the display states of different categories of information. Those different categories of information are:

1. Link endpoints: whether a link points to an entire document or a content item within a document.
2. Link direction.
3. Link type; whether it is a transclusion or taglink.
4. Taglink labels.

Questions are:

• How should these be visualized?
• When should they be shown or hidden?
• How should they animate between a shown and hidden state?

Link Endpoints

To distinguish between a link that points to an entire document or a content item within a document, the link’s endpoint is either bracketed or pointed. Additionally, if a link points to a content item within a document, the linked content is emphasized, and if a link points to an entire document, its title is emphasized. These distinctions are demonstrated in the image below.

Link Types

In the two images below, the version with the colored border is compared to the version with the underlined title. In both cases, the dashed line indicates a transclusion type link, and the solid line indicates a taglink.

Position and Visualization of Taglink Labels

In the examples below, the taglink points from a particular content item in the open document (middle) to the entire side document. Specifically, the word modality is linked to the document titled Defining Modality and Medium. The direction of the taglink is visually indicated by the label Definition. The three images below show variations of the position of the label.

In the image above, while not hovering shows whether the link points to a particular content item within a document or the entire document. While hovering shows the label combined with the link direction.

In the image above, all information categories are shown while not hovering. Only the display state of the expand icon is toggled on the two different cursor events.

In the image above, while not hovering shows whether the link points to a particular content item within a document or the entire document, and while hovering hides the previous information and shows the label combined with the link direction.

In the next entry, the design of Zoomed-In View is explored further.

Discarded Attempts

As seen below, one of the problems with the color border is the awkward transition animation effects.

Other variations of the color-coding system are seen in the following images.