Boxes and Arrows: The Arrows

Just as the boxes on an information architect’s diagrams have a variety of different meanings, so too do the arrows between them.  And once again, the distinction between deep and surface structure is worth exploring.

In a diagram representing DEEP structure, arrows represent a named relationship between two information components. The arrow has meaning, semantics. For example, in a library system, an arrow between BOOK and PATRON might have the meaning borrowed-by (or has-borrowed in the other direction).  As another example, we can draw an arrow between EMPLOYEE and BRANCH OFFICE labelled works-in.

In a diagram representing SURFACE structure, such as a site map, arrows represent a transition that we as IAs think will be useful to the user.  The arrow itself does not have meaning; the meaning is established by its label and its context. But we may hit the mark or miss the mark for a number of reasons.  As we browse the web, we see examples of where links work well, and where they do not.  Here are some examples.

Example 1: Links that leverage a deep structure relationship.

Consider a bank customer with multiple accounts, each account having multiple transactions.  In this case, the deep structure, the surface structure, and the customer’s mental model all align, and the customer is not surprised to see a link from their MyBank page saying View Accounts, or a link saying View Transactions for a given account, and the IA does not need to do any additional work to establish meaning.

Example 2: Links aligned with a familiar pattern.

Consider a blog.  We expect to find static pages, postings, and comments, with the ability to choose subsets based on category and a way to add comments.  Regardless of the countless different themes that blog providers offer for styling a site, once users know that it is a blog, they can usually apply pattern recognition against their mental model of a blog, and get oriented very quickly.  By the way, the deep structure of a blog has a number of complexities, for example a structure for menus and metadata for getting items in the right order.

Example 3: Links organized into navigation structure.

Menu structures consist of a set of links, and as IAs, we want the user to be able to (a) find the link that they want, and (b) understand where they will go when they click it. Some techniques for establishing context are: labelling, providing a gloss (additional explanatory text), providing alt text, grouping the links into meaningful categories, etc.  This is old school IA: for instance, we use card sorting and usability testing to ensure that the structures we build and the terminology we use are recognizable by the user with minimal cognitive effort.  This is supported by some conventional placement of navigation, for example main categories in a top navigation bar, and the immediate context of the page being viewed in the left navigation.

Example 4: Related links.

Many web pages contain a list of links, entitled Related Links.  This title implies that there are no semantics associated with the list (although often there is, and a change of title gives better orientation).  There is no semantic structure, and the user has to scan the links in order and establish their relevance.

Example 5: Links within text.

Consider a Wikipedia page, typically bristling with in-text links. The semantics of these links is very problematical, as anyone can attest who has found themselves in unfamiliar content twenty pages and twenty minutes after clicking their first link from a Wikipedia page.

Let us look at the Wikipedia example in a bit more detail, to see what would be needed to improve Wikipedia from a user-centred design / information architecture point of view. We will take as an example the featured article at the time of writing, entitled HMS Eagle (1918). The page contains the text

“She was transferred to the Mediterranean in May 1940, where she escorted multiple convoys to Malta and Greece.”

If we didn’t know the meaning of the linked words, we could make some guesses from the entire text. We might guess that a convoy is a boat that needs protection, probably from enemy attack. We might guess that Malta and Greece are places, but we can’t infer from the text whether they are ports, cities, regions, or countries.

What we might want to know is:

What is the definition of convoy?
What kind of entity is Malta?
Where is Malta?

and we might want this information to presented in a lightweight fashion without disrupting our focus.

What we actually get when we click the links is a page refresh and an encyclopedia entry about Convoys, Malta or Greece, which we can scan and be distracted by.  More is less.  We are given everything that we could possibly want to know, but more than we probably want to know.  This is not too surprising given Wikipedia’s billing as the free encyclopedia.

But it is worth thinking about how we would have to structure Wikipedia pages and the links within them in order to meet user requests for information in a more granular fashion.  We will talk about this in the next lesson.

The Information Artichoke Home Page   |  Modern IA Course Table of Contents

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>