Why do websites look linear?

Do you still read news in print or digitally? Probably both! Have you noticed that the digital edition doesn’t look much different from the printed one? Sure, instead of turning pages, we scroll or click. We click on individual articles and news items, from which we then return to the home page. But the design, structure and use is almost the same as on paper.

What does linearity mean? In the blogpost “Stories in all directions” we talked about linear stories. Linearity means there is a beginning, a middle, and an end. Similar to a book – or this blog post. But actually, it only refers to the form and presentation, because texts have lines, and we read from left to right, from top to bottom. In terms of content, stories don’t always follow a line at all.

Patterns of reading

When we talk about linearity as form, what does that mean for websites? Look around here in this blogpost. Where did your gaze go first? According to the typical reading pattern, the Gutenberg rule, you looked first to the top left – whether you were searching, reading, or just skimming the post. The rules describe the pattern of reading in our western language and culture. In cultures where people do not read from left to right but from right to left or from top to bottom, other rules apply. However, researchers found as early as the mid-1980s that Chinese people now feel more comfortable with horizontal reading than with vertical reading.

And how do you read?

Eye tracking research investigates how we perceive websites and content on screens. We use these research results when we develop new pages or write articles. We place content in the areas where it is best perceived.

Tschneidr, CC, Wikimedia

We read according to the Gutenberg scheme when we have a lot of text in front of us (a book, a newspaper) that is only barely interrupted by headlines, interstitial lines or images. Our main focus is at the top left. After that, our gaze moves to the right, with somewhat less interest. The area at the bottom left is often described as the “blind area”. On the other hand, the last part, bottom right, is more present again and the appropriate point for a call-to-action to other links, videos, products, argues developer Mário Andrade. Important elements and information should be placed along this gravity path: a logo, a headline in the top left, an image in the middle, a call to action or contact information in the bottom right.

Zig-zag!

The reading direction for the “Z” scheme is quite similar: we start at the top left, move our eyes to the right, then diagonally to the bottom left and finally to the right corner. The difference to the Gutenberg diagram: as readers, we perceive all four areas, there are no blind spots. The diagram is particularly suitable when we use a simple design with few key elements that need to be seen. So-called landing pages or start pages often like to follow the scheme “Z”. For example, take facebook: At the top left, the logo catches our eye. To the right is the “Login” field – if we don’t have an account yet, we continue to the lower left area, where we find some information about the network. On the bottom right, it says “Call to Action”: here we could register.

For pages that are a little longer than Facebook’s homepage, but that are structured in the same way, we simply continue according to the “Z” pattern – it becomes a zigzag movement.

Picture by Josh Withers

Everything according to a F-pattern?

The third reading pattern also has a letter in its name: Scheme “F” describes how our eye movements resemble an “F” when we read. The first studies on this pattern were done with search results and web designs that were overloaded with text. The result: as with the other patterns, we start at the top left and move to the right corner. We come back to the left edge and move to the right again – but this time not quite as far to the right edge.

For the design and text structure, this means: important information should be placed in the left margin. Most people don’t read online, they scan. And for us as scanners, we are most likely to be interested in information along the “F”. If we are interested in what we scan here, we also read the right margin.

Picture by ux for email

Be kind to your readers!

Why is eye tracking research important at this point? Because for websites in particular, design matters. Form follows function. Good design ensures that we as users find information quickly, and that we might read the whole text instead of just scanning it. As authors, we want our texts and content to be read – and for users not to leave the page with a simple click…unless you write terms and conditions, which are unfortunately often kept reader- and thus customer-unfriendly. Perhaps because the content is too?

Engaging the user is a problem, and linear design is the solution, argued web designer Ben Gremillion in 2012. Simple, intuitive, clean and especially appealing for mobile devices. By scrolling, we as users should determine the speed and interactivity ourselves. This is supposedly also a way to extend the attention span. However, the success of a website also depends on how closely it matches the user’s experience. After all, we are now trained to use websites and have a certain expectation of where we will find which information.

All the same?

Been there, done that: many websites now look very, very similar. Boris Müller, Professor of Interaction Design at Potsdam University of Applied Sciences, cites economic and pragmatic reasons for this. Designing individual websites is time-consuming and requires expertise in programming. And that is expensive. It’s easier to use pre-designed templates, such as those offered by blogging platforms. Websites are no longer created individually here, but are combined using different templates for headlines, images, text bodies and videos. Müller writes in a blog post: “Templates are not designs. Rather, they are rules for combining related data types.” But this also makes them interchangeable, boring – the content almost doesn’t matter.

Linear design, non-linear structure

Gremillion is not alone in thinking that linear design is the solution – nor is it new. On 6 August 1991, the first website went online. Jeff Groff, who worked with Tim Berners-Lee on the code, told the BBC that there was a simple idea behind the web. Information that was only accessible via computers was to be networked and accessible from anywhere. The user should have nothing to do with the complex technology – “simplicity” served here also as a principle of design. In other words, a conscious decision was made early on in favour of a linear design. Although the structure of knowledge is fundamentally interconnected, the initial aim was to make information points accessible. The reason was the technical limitations and the pragmatic concentration on displaying individual pieces of information. But the Internet, the World Wide Web, is at its core a hypertext system. A system of texts with a net-like, dynamic structure, with cross-references to other text passages and documents in the network.

Linear websites are therefore not necessarily linear. We have to distinguish here between design, frontend, and structure, backend, of the website. What looks linear in the frontend can be non-linear in the backend. Let’s take an example: Wikipedia. It looks pretty linear, doesn’t it? You have a beginning and an end, and you always come back to the main menu. But in a single article, there are a lot of links that take you to other articles within the Wikipedia website, or to other expanses of the internet. So there is a much more complex structure behind it. And this structure represents knowledge – the individual articles are points of information that have very little value on their own. They only make sense in a larger context.

Picture by Omar Flores

The structure of a website is determined by the navigation within the website. Linear navigation is technically the simplest. Here, each page links to the previous one – like a blog with chronologically ordered entries. A linear structure works well if the website has few pages and few cross-links.

If the website has more pages, it needs a multi-level structure. This can be hierarchical, network or composite. A hierarchical structure resembles a tree, with the homepage at the very beginning, broken up into pages and sub-pages, the branches. Each page and sub-page links back to the homepage. The composite structure links linear and hierarchical structures. This is particularly suitable for multimedia websites with many topics and their sub-topics.

Kontext-map: The network

In the network structure, individual pages, each depicting individual pieces of information, are linked to each other – even crosswise, as required by the content. The user can click back and forth between the pages, there is no beginning and no end. The aim of web structures is to recreate associative thoughts and ideas, the overall context of the larger theme should be represented. This allows users to pursue their interests in an individual, interest-driven way. The strength of the internet to link information and put it in context is used in the best possible way. Individual information becomes knowledge. And it becomes possible to pass on knowledge, not just individual points of information. However, network structures also require users to engage with them. That is why they are particularly well suited to give interested people a deeper insight into a topic. That is the goal and the advantage of knowledge maps. With one important advantage: here the network structure is visible and thus literally tangible – they show a knowledge space. We have already described why this is important in the blog post “Welcome to the memory palace”.

 

Cover photo: from Jon Tyson
Other images: Eyetracking – Tschneidr, Wikimedia, Z – Josh Withers, Schema F – ux for email, Bunte Garnknoten – Omar Flores