An Introduction to Visual Hierarchy
As a User Experience designer, it is very important to always consider the placement of information around the screen. Whatever the device, there must be design principles set in place to help the user differentiate sections of information. Without the application of visual organisation guidelines, digital service designs can look unattractive, incoherent and confusing.
Visual Hierarchy on the Web
In these two examples, I have included annotated screenshots to point out the key areas in which effective visual hierarchy has been integrated. The main areas I have concentrated on are:
- Code-breaking – The user should not have to try and figure out how the website works. The site should be obvious and intuitive from start to finish.
- Grouping of visual information – Lists, paragraphs, sections of information, among other types of visual information, should be grouped well and easily differentiable.
- Use of space – Space all around the page and especially around elements should be utilised beneficially.
- Colour – Use of colour is to be applied for use of branding, grouping, alerts etc…
- The position of key elements – The most important elements, pieces of information and call-to-action should be positioned in a place where users are more likely to engage with them.
- Overlap – Overlapping of elements can bring emphasis to one or all of them.
- Visual treatments -Buttons/icons
Annotations of the Evernote homepage
Annotations of Soundcloud homepage
Z and F Patterns
Using layout patterns in design can draw users’ attention towards vital elements in the page. On the homepage of the Canon website example below, the Z formation is used to take advantage of space across the whole page. Consumers’ eyes start at the top left where the main logo is. Following this, attention is brought across the menu bar to the right-hand side to choose which part of the site they would like to view. After this, they view the main image advertising the main product on sale at this present time, and then across to the products described on the right-hand side. This includes a call-to-action to start a user journey through the site.
Canon website showing the Z pattern
In this next example of The Sun website, the F formation is used, as is very common with news websites. Viewing starts at the top left of the page, much like the Z formation example, and travels across the top bar of the page. In most cases, this includes the menu bar. Then, attention is brought back over to the left to the main news article, and then over to the right to smaller, less significant headlines. This technique ensures that all aspects of the website, in this case, the news stories, are being scanned by the user.
The Sun website showing the F pattern
Having said this, there is considerable doubt within the industry about whether or not this technique works or even really exists. In an article written by Kurtis Morrison for Eyequant, he states that during an experiment of 157, 498 scans of 99 web pages by 46 participants, the most viewed area of the screen was in the middle in a ‘blob’ shape. (Morrison, 2018) Morrison clearly explains his belief that it would make more sense to place important content in the middle of the page.
Screenshot showing the results of the eye-tracking experiment.
Screenshot showing that viewers do not automatically scan websites in an F formation.
With this in mind, the set of examples above are not all designed in an F formation. This counteracts Morrison’s theory and it can be argued that these do not adhere to accurate testing conditions as users eyes can be diverted elsewhere if the content is not explicitly laid out in the F formation.
Subversion Of The Z Pattern
Subversion of these patterns appears in the Evernote homepage, as annotated above. In the third section, images and text have been placed in opposing zig-zag formations, but the call-to-action at the bottom has been placed it center. The cycle has been broken to draw more attention to a click-through link, potentially spurring a user journey.
Z Pattern subversion on the Evernote homepage
Other Scanning Patterns
Neilson and Norman Group, one of the most highly regarded experts in the usability field, feature an online article on their website about the F scan pattern. Within this article written by Kara Pernice, several other alternative patterns are mentioned. These are:
- “Layer-cake pattern – occurs when the eyes scan headings and subheadings and skip the normal text below. A gaze plot or heat map of this behaviour will show horizontal lines, reminiscent of a cake with alternating layers of cake and frosting.
- Spotted pattern – consists of skipping big chunks of text and scanning as if looking for something specific, such as a link, digits, a particular word or a set of words with a distinctive shape (such as an address or signature).
- Marking pattern – involves keeping the eyes focused in one place as the mouse scrolls or finger swipes the page, like a dancer, fixates on an object to keep balance as she twirls. Marking happens more on mobile than on desktop.
- Bypassing pattern – occurs when people deliberately skip the first words of the line when multiple lines of text in a list start all with the same word(s).
- Commitment pattern – consists of fixating on almost everything on the page. If people are highly motivated and interested in content, they will read all the text in a paragraph or even an entire page. (Don’t count on this to happen frequently, though. Assume that most users will be scanning.)” (Pernice, 2018).
Text Structuring
As well as icons and symbols, the arrangement of text on the page is also important. To strengthen our organisational skills and think about the way we write, we were each given a paragraph of text to reassemble and convert into HTML and CSS code. This task required taking text size and arrangement into consideration.
My unorganised paragraph
I read through it, picked it apart and split lists into bullet points. This was the finished project:
My text structured in a web page
The accompanying code uses HTML5 and inline CSS:
<DOCTYPE! html>
<html lang="en-GB">
<head>
<title>Visual Hiearchy - Internal Consistency</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<style>
body {
background-color: #D7BDE2
}
h1, h2, h3, h4, p, ul {
font-family: 'Monserrat', sans-serif;
}
.container {
padding: 30px;
}
</style>
<body>
<div class="container">
<h1><strong>Internal Consistency</strong></h1>
<p>Internal consistency is when the application’s design and behaviour remain largely the same within screens and features. Having an internally consistent application is a big part of avoiding common mistakes and is also crucial to usability.</p>
<p>No one wants to learn a new language on every screen. No one wants to guess whether they must tap or swipe to see more information, and then have to guess again on the next screen. What they want is to use what they already know to get things done as quickly as possible.</p>
<br>
<br>
<h2>How to Achieve Internal Consistency</h2>
<p>Internal consistency is achieved when the visual usability tools in an application such as:</p>
<ul>
<li>Layout</li>
<li>Type</li>
<li>Colour</li>
<li>Imagery</li>
<li>Treatments</li>
<li>Controls and Affordances</li>
</ul>
<p>are applied consistently at the screen and widget level. If the application is available across platforms (e.g., desktop/laptop, mobile phone, tablet), the tools should be applied as consistently as possible while still taking platform-specific user interface (UI) conventions into account.</p>
<br>
<br>
<h2>The Importance of Internal Consistency</h2>
<p>Internal consistency is why selecting appropriate paradigms is so important; ideally, once you decide on a convention, you can use it over and over again, and users won’t think twice. If you choose a paradigm based on one case and then find it doesn’t apply to others, it’s time to rework it.</p>
</div>
</body>
</html>
References
Morrison, K. (2018). Eye Tracking Studies: Does the Famous F-shape Pattern Really Exist?. [online] Eyequant.com. Available at: http://www.eyequant.com/blog/eye-tracking-f-shape-pattern-data [Accessed 29 Sept. 2018].
Pernice, K. (2018). F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile). [online] Nielsen Norman Group. Available at: https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ [Accessed 29 Sept. 2018].