Map

Example of the Map UX pattern.

Problem

People need to find or navigate information by theme or to understand the relation between pieces of information that are not related in a hierarchical structure.

Solution

Display pieces of information (e.g. web sites) as nodes on a Map and the relation between these pieces of information as arcs.

Context

  • Pieces of information cannot be displayed as a list or in tree because of the non-hierarchical nature of their relations.
  • The relation between pieces of information adds additional value to understand each piece of information.

Rationale

Representing pieces of information on a map using nodes and arcs allows completing the information by highlighting their relations. Three elements can then be used to provide information: nodes, arcs and the spatial position.

Nodes contain the most important information and people are naturally attracted to them. They should be the elements you want people to notice, for instance other pages in a website, products or ideas. Using text, node size, color schemes or images to provide additional hints can be very efficient.

Arcs are the second most important source of information. They highlight a strong relation between two nodes. This relation can be explicit, using text or colors for instance or implicit, as the mere presence of an arc hints at a relation that can be intuitive depending on the context. Text should not be used too much in the case where there are too many arcs.

Space is harder to use but can provide a more general understanding of the whole Map, whereas nodes and arcs focus on a more detailed view. Grouping spatially nodes can be used to convey a similarity. For instance, nodes from a same category could be grouped close to each other while other groups are placed further away. Space should be used for simpler relations, to highlight differences between general groups but should not be abused as this could have a negative impact on arcs.

 

Implementation

The objective of a map is to help people find what they are looking for by using all elements of the map: nodes, arcs and space.

Space should be considered first. Space has a limited usage but can be powerful in simple situations when one was to convey the idea of similarity or opposition. If such a categorization is not possible or irrelevant, space should not be used as conveyor of meaning.

Too many nodes on the same screen have a negative impact on legibility. If too many nodes have to be displayed, the following approaches can be used. The first approach is to display all nodes on the Map but to have the size of the map be much bigger than the monitor itself; people have then to navigate through the map to find the node they're looking for. In this case, arcs are critical to help people's orientation. The second approach is to display only major nodes at first but to provide the ability to zoom on the map, which would then display nodes that are less important. The third approach is to show a subset of the nodes at once and allow showing next set of nodes through pagination for instance.

Nodes can convey information in several ways: size and color are powerful media to show importance or categorize. Text or images can be added to provide information about each node, if used concisely. Too many can prevent good legibility.

Arcs are the last aspect of the map. Even though colors can be used for categorization, their usage should be limited to a few colors at most. If the objective of arcs is directly to convey meaning about the relation, adding text can be helpful. One should avoid having intersecting arcs as they may impact the legibility and navigation.

 

Examples

The primary example is Kartoo search engine. The results of a search are displayed as a Map: the nodes represent website matching the search and arcs represent links between these web sites. Notice how text can be added to arcs to give a meaning to the relation and helping people find the most relevant result for their search.

http://quince.infragistics.com/1146

Example of the Map UX Pattern Example of the Map UX Pattern

This example is a map of the blogosphere during US elections in 2008. Nodes represent blogs, their size being proportional to their popularity. The usage of colors is used to show political affiliation. Arcs show connections between websites. Even though the sheer number of links prevents from seeing individual relations, it conveys the successfully the view of interconnected aggregates of blogs. In this example, space is also used very efficiently to display the opposition of the different political groups: left and right being separated in the middle by independents.

http://quince.infragistics.com/11gm

Example of the Map UX Pattern Example of the Map UX Pattern

Tag relation view used in Quince uses nodes as center of information whereas arcs highlight the relation between these different nodes. The usage of a Map here makes the navigation easier and helps people finding the information they are looking for by naturally travelling through the map.

http://quince.infragistics.com/10zs

Example of the Map UX Pattern Example of the Map UX Pattern