8. Clarity

People can’t buy what they can’t find. Clarity or “findability” is fundamental when it comes to turning consumers into conversions but it’s often overlooked during the process of mobile design. In part 8 of the Win on Mobile series we look at the importance of mobile clarity.  

Clarity

Video course

Infographic

Why clarity is so important

When building digital experiences, aesthetics is often favoured over clarity and speed. But the most important factor for consumers is finding what they're looking for fast. Shift your focus to clarity in navigation and site search and customers will most likely respond positively.

 

Clarity

Help customers find what they’re looking for in a hurry by focusing your efforts on mobile site search and navigation. Remember the mobile mantra: faster, findable, user friendly.

How visitors find what they're looking for

Placeholder
Navigation

• NAVIGATION •

Search

• SEARCH •


 

Improve site navigation and search

💡 A/B test placing top categories on the homepage

The homepage is often focused on campaigns instead of findability. Test adding popular categories at the upper part of the page so consumers on the go quickly can find what they need.

Categories 1
Categories 2
Categories 3
Categories 4

💡 A/B test removing automated sliders

Images can take a long time to load, so a slider with several images risk making visitors stare at a blank screen. It's also difficult to read messaging on a slide – further reducing clarity.

Placeholder
Adam fellowes
Edu stats

💡 A/B test reducing text and increasing clarity with bullet lists, subheadings and icons

Most consumers don’t read web pages — they scan and connect words with icons and images. Test replacing large paragraphs of text with easily digestible icons, bullets lists and imagery.

Edit Edit Edit

Remove all unnecessary words.

Bullet lists

Use bullet lists to improve clarity.

Clear headings

Use clear headings and subheadings.

Icons

Use icons to get your message across.


 

Steve Krug

Get rid of half the words on each page, then get rid of half of what’s left.

Steve Krug,
Don't Make Me Think: A Common Sense Approach to Web Usability


 

Placeholder
Before mobile

• BEFORE •

After mobile

• AFTER •

💡 A/B test adding labels to icons

Don’t take it for granted that everybody will understand the icons in your site’s header. Test adding labels to the most important icons.

Top menu phone

💡 A/B test adding functionality to your search

Users looking for specific products usually turn to site search. And visitors who search are on average four times more likely to convert. With that in mind, it’s easy to understand why great search functionality is vital for websites.

Four times

Make life easier to valuable customers by testing these site search functions…

Auto-complete
Spelling suggestions
Relevancy ranking so that the first search results are the strongest
Alternative suggestions when no results are found
Previous searches are saved without log in
Search results can be easily scanned
Fold out search bar
Work on a list of synonyms, as “no results” will make visitors think you don’t have the product

 


 

💡 A/B test optimising search filters

Search and product categories can deliver endless results. Speed up conversion by providing filters that allow customers to get what they want from search.

Improve your search filters by...

✓   Implement advanced filtering with the ability to select several options

✓   Provide sticky filters so they are easy to find

✓   Usability tests can reveal the kinds of filters your customers want

Improve search filters

Search success stories

Mango improved search by adding spelling suggestions and alternatives when no results were found. This plus a few other alterations increased the mobile conversion rate by 4.5%.

Read the complete success story here.

Mobile conversion
Mobile revenue
Mango before

• BEFORE •

Mango after

• AFTER •

Placeholder

Lyst replaced a search icon with a search bar in the header and increased usage by 13%.

Read the complete success story here.

Mobile usage
Lyst before

• BEFORE •

Lyst after

• AFTER •

Matalan replaced a search icon with a search bar and increased mobile searches by 32%.

Read the complete success story here.

Searches on mobile
Searches on tablet
Matalan Before

• BEFORE •

Matalan after

• AFTER •


 

Exercise: The UX battle

Improve your mobile site’s clarity by getting together with your team and going through these UX checklists. Do the same with a competitor’s site and award a point for each box ticked — let’s see who comes out on top in the UX battle.


 

Placeholder

Start A/B testing your mobile site today

Google Optimize is a free tool that will help you begin A/B testing today. Get testing to start delivering more mobile conversions.

Google optimize

 

Let’s keep going and discover how to use Urgency, relevance and reduce distraction in chapter 9.

Next episode 

Urgency, relevance and reducing distraction

Urgency, Relevance, Distraction