User blog:Kjnoren/Five Ways of Looking at an Infobox

The first step towards making a good infobox is neither to code it nor is it to give it a lavish appearance using CSS or other means. It is to decide which information to include in it. In the following I will present my own thoughts and ideas on how to approach that process. As usual with many of my blogs I am focused less on “best practices” and more on providing tools of thought and mental models to understand problems and hopefully find the best ways to solve them for a specific wiki or case.

A stylish infographic


Most wiki pages are rather bare-bones from a design standpoint, containing mainly running text with perhaps a few images. The infobox can serve as a break from the wall of running text, often providing an image, a couple of splashes of colours, and perhaps a border or some form of background. That is, they make the page more interesting from a graphical perspective and play a similar role to the drop capitals of mediaeval manuscripts.

But like all graphical elements, they should not overwhelm the main content of its containing object. If the infobox used as an infographic takes away the focus from the actual text and headlines, then it is too large or too intrusive.

How large is too large? Hard to say, but I’d guess that if it goes much above one screen size in height it is too large. Likewise, the infobox should look like an organic part of the page as a whole, and easily fade into the background when focusing on the text. This means that any colours used should be chosen so they match and fit the other colours used on the page.

It is also possible to use other typographical tools than colours and lines in order to make the infobox stand out from the rest of the text. A different font can be a very effective way to make the infobox stand out and possibly differentiate a group of pages from other pages on a wiki.

My own very personal take: the larger the infobox is expected to be, the less it should stand out from the rest of the page from a graphical standpoint. A small infobox can use a background colour; a large one probably should not, or only a greyscale or shadowed one. A small infobox can use a fancier font than the rest of the page; a large one should use the same font or a simpler font.

A set of key–value pairs
Most infoboxes present their information in the form of key–value pairs, that is one piece of data—the value—paired with a piece of metadata or label describing the data—the key. Named parameters to templates are another example of key–value pairs.

Key–value representations are really popular and powerful. They allow for easy handling by computers, easy means of data extraction, and for clear and unambigious presentation of data. But they have limitations.

One such is that it is tricky to handle data where a specific key is coupled with more than one value. In some cases such data can be described by using multiple keys, like the numbers of hit points a specific in-game enemy has on the levels easy, medium, and hard. Such cases can be handled in an infobox, but the two-dimensional data is not a natural fit—more on that later. Even trickier is when the value is not one value but a list, like the siblings of a character, the other partners in a polyamorous relationship, or the episodes of a TV series an actor or character appears in.

It is possible to represent this in various ways, but it requires expanding the semantics of the key–value list, either by allowing several values to match a single key, or by allowing lists as values. Since Mediawiki parameters are not allowed to be repeated, only the second—using a list—is a workable solution.

Another psychological aspect of the key–value semantic is that it is easy to overdo it with detailed labels. One particular example I have seen is the penchant of some editors to identify not only protagonists but deuterogonists, tritagonists, and antagonists in various works, reducing complex relations and roles to single words.

A presentation of key facts
One of the most common recommendations on infobox usage is to present important facts in an easy-to-digest format. But all of those words merit a closer look.

What is important? Not all facts are of equal value, or interesting to the same number of people. To take a book as an example, its author is usually considered to be of great significance. The audiobook narrator is of large interest to a subset of readers. Any artist involved also tends to be named and presented, even if only on the copyright page. The editor gets hardly a mention at all except for anthologies, where they usually get cover treatment. Deciding which facts are important enough to be placed in the infobox is a key decision when designing an infobox.

What is a fact? It is both a boon and a bane that the infobox provides simple, clear, definitive, firm facts in a prominent way. They make the box and what it says attractive. But facts are not always simple, clear, definitive, and firm. They can be complex, opaque, changing, and malleable. The number of pages in a book will change from edition to edition. The characters in a polyamorous relation or in a family do not necessarily have equal relationships with each other. Values might change with or over time. Again, there needs to be a conscious decision on how to apprach such vague values.

A good example of facts not being easy is historical battles, and the number of people involved. It is not unusual that different accounts differ between each other with up to a magnitude, both in number of total combatants and in number of casualties. The veracity of the various figures is also highly variable. The additon of references or different numbers means that the infobox is moving away from its purpose of presentation of key facts.

What makes an infobox easy-to-digest? The more values are presented, the more effort is needed to read it through rather than simply identifying the right label and value. A good typographical structure with headings can help, but only as long as they themselves are readily discernable and easy to find. Again, if the infobox is over a single screen in length its value as a presenter of key facts is very diminished.

Based on my own limited reading on literature of human cognition, there is an upper limit of about five to seven objects that can be accessed at one glance rather than being scanned individually. Using sections with headings can up this limit, but only to a limit, and pushing figures down below the first screen is also a hard limit for accessing with a glance.

A collection of structured data
With their emphasis on key–value notation and prominent location, infoboxes quickly became popular as hosts for various forms of structured data; in fact their origin on Wikipedia was apparently to present taxonomic information about animals. The emphasis here is not on carefully chosen data, but rather on carefully labelled and sometimes structured comprehensive data within a field.

Bibliography-like wikis, like the Filk Discography wiki, can make great use of this, as a way to store and present facts in a clear, concise, and machine-parsable manner. Books can be presented with data less suitable for running text, such as ISBN numbers, numbers of pages per edition, name of the editor, and so on. A discography can show names of the recording engineer, catalog numbers, running time, and so on. Game wikis often use this to present and store game stats. It is not unusual that this type of infobox is dominated by numerical data in various forms.

At the same time, infoboxes have some limitations in this area. They earn their prominent location partly through being limited to two columns—label and data—and many forms of data benefit from a more table-like and two-dimensional approach. Some structured data is best presented using graphical elements like tables or graphs, which there is little room for in the relatively narrow infobox.

In such cases—large amounts of data, the need for graphical presentations, or two-dimensional data sets—it is better to look into tables and similar structures. In the case of term lists, glossaries, and similar the HTML definition list can also be an option, which can be created in a simple manner using wikitext. Especially tables are very powerful, since they can also be expanded with third-party expansions for sorting, filtering, and data extraction.

If the infobox is used for structured data, then it probably contains a relatively large number of data values. That means there is a greater need for subdivisions and that the infobox is quite large. It should probably be approached more as a relatively simple table rather than as an infographic at that point. Its job is to hold reference data rather than to present the object in question.

A navigational aid


An infobox is placed in a prominent, predetermined, and permanent location. It often includes names of people, characters, episodes, locations, events, and so on that are of significance to the subject of the page it is placed on and has pages of their own. That makes it a natural location for links to those pages as well: the infobox serves as a navbox.

The use of the infobox in this way is so interesting and full of potential that I have written a separate blog on only that topic: A Reconsideration of the Navbox as a Portable and Modular Infobox.

When thinking of the infobox as a navigational aid I recommend approaching it as an infobox rather than as a navbox, that is, the focus should be on presenting a limited number of links specifically curated for the page in question. Placing too many links in it only causes it to become large and hard to digest, especially since the links may not be independently labelled. Adding links not specifically tailored to the page will only add cruft and make the relevant links less apparent.

To take a practical example: a wiki for an author has a page for the author, overview pages for the various series by the writer, and individual pages for the books in each series. A link-oriented infobox for each series would likely include links to the author, links to the other series, and to the constituent books in the particular series. It should not include links to the books of the other series.

But a navigation-oriented infobox need not look as a navbox. The regular texts and values in a “normal” infobox can also serve as the basis for navigation, and they can be combined with more navbox-like elements.

In conclusion: the care and curation of infoboxes
The infobox has become an expected and important part of many wikis. But as a prominent part of the page it should be approached with great care and deliberation. The infobox can serve different roles on different types of pages, and by identifying the specific role one also gains a greater understanding of how to design the infobox for those pages.

But for most infoboxes, the important decision is often not so much which fields to include, but which information which should be excluded—either for the infobox as a template or on a specific page using the infobox. Information overload is a thing, and it is our job as editors to not only add information but choose which information to include and exclude for each different part of the wiki.