Different senders, recipients and types of content usually require different structures. This is hardly a surprising conclusion. But how can we best structure content? Which building blocks can be used for this purpose?

Some general principles are suggested below:

ALPHABETICAL: This is perhaps the most common form of sorting. We learn at an early age to relate to large quantities of information in alphabetical sequence. But this is a rather blunt sorting method. Alphabetic sorting does not take into account the nature or meaning of the content; it’s really just an arbitrary label that presumes we are able to identify content by its assigned title or name.

NUMERIC: Equally common is numeric sorting, where content entries are assigned a more or less arbitrary number-based order. Like alphabetical sorting, this is an abstract system that in itself does not help the user understand or decode the content.

TEMPORAL: It’s very common on news sites in particular to sort content using time references. This can either be done according to timeliness, i.e. with the latest content item at the top of the structure, or chronologically, i.e. with the very first content item at the top.

SPATIAL: Content pieces can also be arranged after spatial conditions, i.e. their spatial relationship to each other. Perhaps the clearest example here is structuring based on maps, drawings or schematics. The examples may seem obvious, but they are not leveraged as often as one might wish. Imagine, for example, a medical dictionary where the information is sorted by body location, or a car instruction manual where the content is sorted by the spatial placement of the components in the car itself.

CATEGORIES: A useful form of sorting is categorization, i.e. grouping the information into subject categories, genres or themes. However, this often requires a very in-depth knowledge of the content, otherwise the categories can be misleading, as they are typically based on subjective assessment and opinion. The method may also require a lot of prior knowledge of the user, depending on how detailed and fragmented the categories become. For a person unfamiliar with popular music, for example, the conceptual difference between trash metal and speed metal may be impossible to discern, while separating heavy metal from, let’s say, country music may be significantly easier.

NEED: An optimal but sometimes unattainable sorting method is a needs-based one, where the user’s needs and purposes are taken into account. Imagine, for example, a gaming site, where the user can read about games, play games, download games, comment on games, etc.

SCOPE: Sorting can also be performed based on scope, where for example the volume of information in each content item, the number of subcategories, the physical dimensions of the content, or the time span are considered.

MEDIA PROPERTIES: Considering the properties of the Internet as a digital medium, it may in some cases be relevant to sort content based on media properties and meta data, e.g. text / image / moving image, file type (HTML, DOC, PDF, PNG, JPG, MP4), its technical quality, or its file size.

COMPLEXITY: In an informative context, it can sometimes be purposeful to structure content according to complexity. Although the assessment of the degree of difficulty in assimilating each content item is of course subjective, even a small hint can be useful in the right context. Education can, for example, be a suitable area of application: Basic, Intermediate, Advanced, etc.

DRAMATURGY: Since websites need to not only be informative, but can also constitute some form of narrative experience, it is conceivable that the structure of a website may be dramaturgically based, although this must be considered rather unusual.

RANDOM: Structure is not always necessary, or even purposeful. Experiences such as games and interactive narratives may even require some degree of structural randomness to tickle the user’s curiosity.

Visual structure

Applying graphic design for sorting purposes is at the very core of information design. This discipline deals in making the structure visible and navigable to the user. The designer uses all the tools in his toolbox to separate content units from each other, clarify their relationships, and sometimes visualize their external context.

But what are these tools and how can they be applied?

SIZE: Structure can be emphasized by the aspect ratio of visual components. Generally, the basic principle is that large objects are structurally superior to small objects, but in exceptional cases, a single smaller object among many large objects can actually be perceived as more prominent due to its uniqueness.

COLOR: Using color to rank and separate graphic objects from each other is a very simple and useful method. Some colors, such as red and yellow, are perceived by the brain as more prominent than others, making them structurally ”superior”. This is obviously one of the reasons why warning signs in traffic are red and yellow, as drivers have limited attention to devote to visual impressions.

TYPOGRAPHY: Although the possibilities for advanced typography on the Internet are still somewhat limited, you don’t necessarily need a plethora of typographic features to achieve good results. The difference between basic styles – e.g. italic, bold and regular – can be sufficient to indicate structural differences, and alignment (left, centered or right) can be used to suggest structural relationships.

PLACEMENT: The actual placement of texts and graphic objects can indicate structural conditions. An object placed high up on a page is generally considered to be superior to an object further down, and the same relationship applies to objects placed in a horizontal sequence, from left to right.

SHAPE: By giving a structurally superior graphic object a different shape, a distinction from other content is achieved in a very effective way. Round, triangular, polygonal and asymmetrical objects have a tendency to attract attention and therefore take on an overriding structural role over, for example, square and symmetrical objects.

QUANTITY: A larger number of aggregated visual content items usually occupy a higher hierarchical position compared to a smaller quantity.

CONTRAST: Highlighting contrasts, such as different shades of color or grays, often works as a good way to distinguish content structurally. This method may compromise legibility and clarity however, so it is best used with caution.

PATTERNS: Textures and patterns can be useful for suggesting ranking, although it may be difficult to interpret one type of pattern as superior to another. Usually, you would choose to only apply patterns to that which you want to emphasize.

MOVEMENT: Perhaps the most obvious visual method for marking structural dominance is to add movement. An animated graphic object basically always attracts the user’s attention and thus has a greater perceived importance than the static, immovable content.

COMBINATION: In general, all of the above methods are used in combination in one way or another. Three structural levels can, for example, be distinguished by using size (for example using three differently sized text boxes). At the same time, two hierarchical sub-levels within the top level (in the largest text box) can be visually separated by bold and regular style.

NOTE: It is very easy to exaggerate proportions when using all the above visual segmentation methods. This often results in a busy, jumbled whole. Often, only small, subtle visual differences are needed to clarify the relative structural relationships of content items. Designers are usually better off using a certain amount of restraint in working with these tools.