By Daniel Holbourn
Posted on 8/11/23
The age of convenience means that users move on to the next website as soon as they become puzzled by an online experience. Users want an intuitive and straightforward online interaction with you and your brand and one that supports them all the way through to a product or piece of information.
The age of convenience means users not just expect, but demand intuitive and straightforward digital interactions with you and your brand, one that supports them all the way through to their desired outcome, a product purchase or a piece of information.
One aspect of digital design, called information hierarchy, refers to designing digital environments for optimum effectiveness. Below we outline the top six principles you can follow to ensure your user journey is as logical and smooth as possible.
1. Understand the user intent
First and foremost, prioritise understanding the users intent before you plan your information hierarchy. All users come to a site or app to find something they need. They have a goal and want to achieve that goal as quickly as possible. Understanding what that is exactly can provide you with the blueprint to base all of your other decisions.
Visitors can come to your site to learn something through blog posts, they can come to buy what you’re selling or maybe they visit you as they’re comparing the market. Each intent (goal) calls for a considered design that will enhance your end goal and bottom line, so determining user intent is critical to enhancing user interaction.
2. Reading patterns
How do you read a page? It’s something we don’t need to think about often; we just start reading. But the way our eyes interact with a page and text, where they begin and where they go, are critical to planning an information hierarchy.
All cultures read from the top down, and most from left to right, which is easy enough to design for, but things get more complex when we throw scannability and scanning patterns into the mix. Scanning patterns take two main shapes, represented by the letters ‘F’ and ‘Z’. When reviewing the reading patterns below, consider that the areas eyes travel first are where you should aim to place the most important and directive information.
F-Patterns
Users commonly read in F-patterns when reading text-heavy pages, like articles or blogs. Readers scan down the left of the page looking for words that grab their attention, either in headings or first words of paragraphs, and then from left to right when they’ve found something interesting. Designers and writers can perform UI wizardry by carefully cropping the page and positioning words to hold your readers’ attention for longer and build engagement.
Z-patterns
Z-patterns apply to less content-heavy pages, like website or product pages where information isn’t typically in block paragraphs but more scattered. Tracing the shape of a ‘Z’, readers’ eyes start at the top left and move right, then travels diagonally down from top right to bottom left, and finally move from left to right at the bottom of the page. An experienced designer will be able to organise menus, images and text in an optimal structure to unconsciously guide users to where you want them to end up – ‘Buy Now’ seems like a pretty great spot for many of us!
3. Optimising size, composition and colour
Designing your website or app allows you to flex your creativity muscles and get your brand message across, but this task can feel a bit daunting without guidelines and limits. Size, composition and colour are all about making essential navigation information stand out or sit back to make website browsing easier. You can utilise the size, composition and colour of text and images on your site to enhance user engagement and get the information across as succinctly as possible.
Size
It’s easy to read something when it’s large, just like it’s easier to hear something when it’s loud. The larger an image or piece of text is, the more likely it is that users will read it, which means large text is more valuable and should highlight the topic of the webpage. Large text and image size is high on the visual hierarchy as it guides users effectively, helping them understand your website. Though, it’s no exaggeration to say that knowing the size to make items without conflicting which other is an art, one which a good designer can help you master.
Composition
Effective composition helps our mind understand patterns. When elements come together on your webpage or app, they create shapes that users’ minds can unconsciously trace, and in the tracing, can neatly guide them with minimised friction, and build trust. Creating the right composition is high on the list for UI/UX designers as it streamlines the user experience and opens up new realms of convenience for your users.
Colour
Another way to make critical elements stand out is through colour and contrast, instantly attracting the eyes to a single point. Highlight your most important information, like menus or “Add to Basket” buttons, in a colour that pops out from the background, and from other colours on the page. You’ll want to make sure the colours work within your design theme and that you don’t overuse eye-grabbing colours which may confuse the users.
Well-organised web pages optimise size, composition and colour to effectively guide the user effortlessly. Next time you browse one of your favourite websites, consider how they use size, composition and colour throughout their pages and what draws you in the most – it might show you why they’re one of your faves.
4. White space
White space is as valuable as the information itself . White space allows your design elements and site information to breathe, so users’ eyes can float towards the information without too much noise crowding the message.
Like much of UI, the optimisation of white space is not formulaic and can’t be applied generically to websites. Applying the principle of white space is the art of considering the items on your webpage, as well as the characteristics of these elements and the user intent. Typically, designers use their experience to implement white space intuitively in a way that consolidates the entire page.
5. Golden rule
The golden ratio stems from Fibonacci’s sequence that outlines the naturally occurring spiral found anywhere in nature. So what you ask! Well, it just so happens that good design is based on universal principles, one of which is the golden ratio.
Leveraging the golden ratio in your design is key to building trust by creating a visually appealing user interaction that draws user attention to what matters most. Many designers learn the golden ratio in art school and continue the trend into everything they design, which can include not only the webpages as a whole but each separate element, even small icons, too.
The golden ratio is especially effective when designers face the challenge of managing content and element-heavy pages. Applying the golden ratio can unite a busy page and create a pleasant composition that helps users feel comfortable and guided.
6. Typography to guide the user
Pleasing the user is all about avoiding any blockages on your page that unconsciously deter them, which means we want to make the site as aesthetically pleasing as possible and make it feel like home. Typography is another key feature to guide users through your site, so defining titles, headings, subheadings, body text, and captions are critical. Different sizes, fonts, weights, and styles define separate text areas to make your site more user-friendly.
Depending on the project, we use various tools to do this. For example, when building custom apps, you could utilise tried and tested tools such as Material Design System and Developer by Apple to organise your type styles (and other graphical elements for that matter).
Keep it simpl.
Information hierarchy for performance can become a sprawling world of knowledge and advice. Still, as long as you understand the user intent and follow the key principles that apply to you, you’ll have a great shot at enhancing your user interaction. Helping your users make sense of your website and pages is critical to your brand and sales, so professional help can ensure your site is set up to succeed.