Designing for attention

Where’s Wally? Source: http://bit.ly/3KlTNwc

While reading this you might have push notifications flashing, cookie policies popping up, and see recommended articles appear. We have different stimuli fighting for our attention and we have a limited capacity.

Attention is a cognitive function we use all the time. It helps us focus and complete tasks amongst all the stimuli around. We pay attention to finding the information we need to achieve our goals.

Designers can guide people’s attention by showing and highlighting relevant information at the right time. In this post, I will provide suggestions to grab people’s attention.

Visual popout

As soon as people gaze at your interface they’re looking to get their goal completed. You should highlight important landmarks, such as headings, links and buttons, through shape, size, orientation, motion, weight, position, colour or contrast. Doing this will guide people to the landmarks as they will stand out on the interface.

B&Q have an online marketplace and the basket separates items sold by B&Q and verified sellers using cards with clear headings. This is to callout to customer products are being sold by different vendors.

Information presentation

Present information well by having a clear hierarchy. Avoid presenting a wall of text because people will get overwhelmed. You can also use clear headings, bullet points, good formatting, grouping and alignment. People will be able to filter out information that matters to them better. No one reads when they need a task completed. People tend to scan pages.

B&Q’s product details sections provides information in bullet points and there is table for specifications.

Avoid disorientating error messages

Do not shift people's attention by presenting static alerts and error messages that are nowhere near the error. Sometimes you will see error messages that appear at the top of a page instead of near the error. This moves people away from completing the task.

Error message when people enter an invalid postcode on diy.com (B&Q’s website).

Understand your user’s goals

Work with your design researchers, service designers, product owners and managers and see what your user’s goals are. Create an experience map showing people’s goals, and then design to help them.

Screenshot of a map Service Designers created for our colleagues’ journey as they fulfill an order for customers. They also listed opportunities below steps as user stories like user story mapping.

Remove useless components

Consider removing ‘noise’ that doesn’t solve any problems. Sometimes removing is design. You can do a scavenger hunt task to find out how people go through your product and probe what people used in their journey. You may even find out that you might not have the signals needed by your end-users! As Xinyi Chen says:

‘In an ideal world (from an HCI perspective, at least), we should remove any content or UI elements that are not relevant for any of the tasks supported’ (Chen, 2018).

Learn scanning patterns

Through eye-tracking research The Nielson Norman Group have identified patterns in which people scan information. It’s worth seeing the different types of patterns and designing your UI to conform to those findings if you see fit, or you can research this yourself.

During our observations of picks for Click and Collect orders we learned store colleagues look at the price and product photos to verify their pick.

Want to learn more? Further reading

I found these books useful when learning about attention and its implications on product design:

• Design for How People Think by John Whalen
• Interaction Design by Helen Sharp, Yvone Rogers and Jennifer Preece
• Bottlenecks: Aligning UX Design with User Psychology by David C. Evans

I love connecting with and learning from others. Let’s connect — you can add me on LinkedIn.