<img height="1" width="1" style="display:none;" alt="" src="https://dc.ads.linkedin.com/collect/?pid=120091&amp;fmt=gif">
Let's Talk

Mar

13

2018

Does Your UX Pass ‘The Grunt Test?’

Website Design

On my daily commute to and from work, I’ve been listening to an audiobook by Donald Miller called Building a StoryBrand: Clarify Your Message So Customers Will Listen. While Miller talks about ways to craft your copy and marketing strategy in a way to be relevant to your audience, I found quite a few of his principles applicable to design as well — especially “The Grunt Test” (which is what I’m going to be talking ­– typing? – about today, hence the title. I know, my title writing skills are blowing your mind right now). 

 

The Grunt Test

First things first: what’s “The Grunt Test” and what does it have to do with design? The Grunt Test is essentially: Could a caveman look at your website and immediately grunt what you offer?



Or, could your viewer answer the following questions within five seconds of looking at your site?

  1. What do you offer?
  2. How will it make my life better?
  3. What do I need to do to buy it?

Seems simple enough, right? But don’t these seem more like questions a writer should follow? How do these questions directly tie in with designing a website experience?  

Before I get into that, I want to talk – type? – about a great lesson about designing a journey-driven user experience by this little company called HubSpot – maybe you’ve heard of them. In the lesson, they outline...

 

The 6 principles of User-Focused Design


Consistency

Use repetition and design patterns to help users quickly learn how your interface works. Think page templates – a user will have less initial stress when visiting a page for the first time if they’ve seen that user flow before. They’ll know exactly where to look to find the page title, meat of the page, and any other elements that are used across the template.


Visibility

Highlight the most important elements of your page quickly by placing them in easily accessible locations. Navigation is a great way to illustrate this – put only your major categories or most vital solutions in the header navigation so that you aren’t overwhelming your audience at the start, and put a full navigation/sitemap in your footer.


Signifiers/Affordances

Ever see a button jumping up and down and been tempted to click it? Any sort of visual cue to teach the user how to use something is a signifier.


Mapping

How about down arrows at the bottom of a website panel indicating scroll or help text on a form? Those little guys are immensely helpful to a user’s experience because they allow the user to draw connections between interface objects and their intended effects.


Feedback

Ever fill out a form multiple times because the page kept refreshing on you? You probably thought the form didn’t complete because of the refreshes and came back to your inbox to multiple copies of the same thank you email with your offer.

Some kind of appropriate feedback letting you know that you did what you need to do – like being redirected to a thank you page – would’ve helped you understand that your action was recognized and completed successfully.


Constraints

Sometimes you’ll want to place purposeful limitations on your website in order to guide the user through your story in a more meaningful way. You could choose to show only relevant content based off of a user’s persona because that’s more meaningful than showing everything you have to offer (which is also the quickest way to get someone to bounce off your site).


Keeping those 6 principles in mind, let’s get back to our original question…

 

What does ‘The Grunt Test’ have to do with design?

Let’s do a quick exercise to tie The Grunt Test and the 6 Principles of User-Focused Design together. Open up your website and see if it passes The Grunt Test (if you’ve got a friend or colleague or – the best option – someone who fits into your ideal buyer profile, have them give it a shot). Below are some possible reasons why they aren’t able to answer certain questions.


Is it difficult to find what you offer?

That could be a consistency problem. Do all of your pages have a different layout that makes finding the most important elements on the page difficult or stressful for the viewer? Templated pages will make life easier for both you, the designer, and your viewer, the ideal buyer. You’ll have less work creating the pages, and your viewer won’t have to search far and wide to find what they’re looking for on your site. They’ll know exactly where to look for your page title, additional resources, image galleries for different topics, and your call-to-action.

Or maybe it’s a visibility problem. Are your products hidden beneath a bunch of company-focused content? You may be overwhelming your viewer with too much information. Instead, organize your content so that the most important information is right at the top.

 

Is it difficult to express how it will make the viewer’s life better?

Adding purposeful constraints to your design (and possibly copy as well) can help answer your ideal buyer’s problem. If the viewer isn’t finding value in what’s already on the page, it very well could be because it’s not relevant to them. Finding a way to cut down (or cut out) what’s on the page and, if relevant, adding content that speaks to their issue at hand better will help express how you can make the viewer’s life better.

 

Is it difficult to answer what they need to do to buy it?

Try adding some mapping elements to your page to make the user’s journey to your call-to-action an easy one. Your page’s CTA should be easy to find and relevant to the content at hand. Guide your user to it logically and naturally by placing it right after relevant content (or even in the middle of it if it doesn’t cause a harsh break in the user’s experience).

What if your CTA is as relevant as possible but you still aren’t getting leads? You may just need some signifiers to help a user understand how to use your website’s elements. A hyperlink that is the same color as your body text and isn’t underlined will be difficult to distinguish. A button that doesn’t look or act – think hover effects – like a button isn’t going to get clicked.

And there you have it. These are just a few of the many ways to tie the 6 Principles of User-Focused Design and The Grunt Test, but the possibilities are endless. Designing a user experience means choosing creative interface elements that are purposeful, not just pretty. It means finding a way to tell a story through hex codes and pixels and positioning. It means focusing on your ideal buyer’s pains and crafting a user flow to convince them (with a lot of help from amazing website copy) that they need what you’re offering.

Interested
In
Joining
Mojo?

Learn More