Presentation

Information presentation (e.g., formatting, selection, visualization) is a critical part of Ontiki. Here are some presentation ideas that might be useful, couched in terms of a trivial inquiry.

Aardvark Inquiry

Joe User is curious about anteaters. So, he browses to the Ontiki web site, starts an inquiry, and enters some initial topics. He knows that some varieties are called aardvarks and live in southern Africa. If he knows the relevant Wikipedia (WP) URLs, he can enter them. If not, Ontiki can help him to look up the topics (e.g., using keywords).

Using Joe's three topics as a starting point, Ontiki looks up a large number of related database nodes (e.g., 10K), calculates a numeric "relevance" score for each one, and displays the "most relevant" (i.e., highest scoring) nodes.

Sorted List

As a casual user, Joe isn't interested in why a node has a high score; he just wants some suggestions. So, we can simply display the top-scoring items as a sorted list, showing Joe's initial topics and some suggested additions. Here is a text-based attempt at such a list:

As the inquiry proceeds, some of the user's priorities can be expected to clarify and/or shift. This will cause assorted changes to the list, eg:

Relevance Feedback

The first six links in each entry (e.g., line) provide explicit relevance feedback:

|<  set score to 0 (reject)
<<  increase score by 2
<   decrease score by 1
>   increase score by 1
>>  increase score by 2
>|  set score to 10 (accept)

The last two links in each entry (e.g., line) are used for navigation, but they also provide Ontiki with implicit relevance feedback. By clicking on them, Joe is showing interest (at least) in the page. The first of these (v) "drills down" into Ontiki's detailed information on the topic; the second (e.g., Aardvark) goes to the named Wikipedia page. See Mockups for some prettier layouts.

Note: Radio buttons, sliders, or other widgets might be used (instead of links) for explicit feedback.

Supplementary Information

Although WP's topic names are pretty clear, some additional information might be helpful. So, based on the user's preferences, we could add supplementary information. Here, we display the first sentence on the WP page, with links:

Score Calculation

Ontiki's relevance scores range from 0 (reject) to 10 (accept). Because it doesn't know Joe's priorities, Ontiki starts his initial topics in the middle (5). After that, things get a bit trickier. Scores could be based on a variety of factors: applicable filters, direction-sensitive relation weighting, path length, etc.

In this example, Animal is redirected from Animalia, the biological Kingdom for both Aardvark and Anteater. So, it gets a very good score (2.34). Afrotheria is the biological Superorder for Aardvarks (which reside natively in Africa), so it also gets a good score (1.23).

Drilling Down

By clicking on a node's "drill down" link (v), the user can select it for detailed examination, editing, etc. S/he can then use more powerful (and complex) tools to make detailed scoring decisions, etc. For example, the use of numeric relevance scores for nodes brings them into the domain of quantitative reasoning. This allows us to make use of small multiples:

Small Multiples

At the heart of quantitative reasoning is a single question: Compared to what? Small multiple designs, multivariate and data bountiful, answer directly by visually enforcing comparisons of changes, of the differences among objects, of the scope of alternatives. For a wide range of problems in data presentation, small multiples are the best design solution.

-- Edward Tufte (Envisioning Information, p. 67)

Here is a (completely fabricated!) example of a possible chart design, using some rather exotic looking glyphs:

  • Histogram bar lengths indicate relevance to some other node.
  • The left and right sides indicate incoming and outgoing relevance.
  • Relevance is dynamic, based on user input (e.g., relation weight).

Interaction Steps

The user interaction is expected to be iterative, based on feedback from the system. So, progress may include a great number of "false starts". That said, here's a simplistic (error-free) scenario:

  • The user selects a node of interest in the Sorted List.
  • The client displays charts for closely connected nodes.
  • The user adjusts filtering criteria, weighting, etc.
  • These changes are dynamically reflected in the display.
  • When the user is satisfied, s/he selects another node.

Other Possibilities

Here are some other possibilities I'm considering. For example, a Circos diagram might be useful as a way to show detailed relationships between nodes of interest.

Circos, etc.

Circos, by Martin Krzywinski, is a graph visualization format based on a circular layout. Nodes are arranged around the circle's circumference; relations (possibly aggregated) are drawn inside the circle. Circos diagrams have many virtues; they can be attractive, dense, interactive, simple, stable, etc. Circos Images in Scientific Literature shows many examples (mostly based on Martin Krzywinski's open source software). Circos variations are also supported by libraries such as D3, eg:

In our use, nodes might be ordered lexicographically and spaced according to frequency. GUI elements (e.g., edges, nodes, sliders) could respond immediately to a variety of user actions (e.g., clicks, hovering, mouseover). This would let the user make common filtering and selection decisions quickly, yet retain the ability to "drill down" into details in subtle cases.


This wiki page is maintained by Rich Morin, an independent consultant specializing in software design, development, and documentation. Please feel free to email comments, inquiries, suggestions, etc!

Topic revision: r4 - 04 Jan 2015, RichMorin
This site is powered by Foswiki Copyright © by the contributing authors. All material on this wiki is the property of the contributing authors.
Foswiki version v2.1.6, Release Foswiki-2.1.6, Plugin API version 2.4
Ideas, requests, problems regarding CFCL Wiki? Send us email