Websites donâ€™t always work.
You create them with one thing in mind. And then the opposite happens.
People are supposed to click-through. And yet they stall.
The worst part, is that you donâ€™t always know why.
Itâ€™s hard to explain to bosses. Itâ€™s difficult to justify to clients.
Thankfully, there are a few techniques to look â€˜under the hood.â€™ To voyeuristically view viewers when they least expect it.
In order to figure out whatâ€™s broken, why, and how to fix it.
Hereâ€™s how you can find out, and then use â€˜visual cluesâ€™ to help improve it.
Why People Shouldnâ€™t Have to â€˜Thinkâ€™ When on Your Website
Thatâ€™s all it takes. Thatâ€™s as long as youâ€™ve got.
The overwhelming majority of the time â€“ 94% according to one study â€“ first impressions come down to your design.
If itâ€™s good (or not). If itâ€™s easy to navigate (or not). And if itâ€™s easy to find what theyâ€™re looking for. Or not.
Thatâ€™s not a very long window of time. 50 milliseconds is likeâ€¦ fractions of a second, dude! So youâ€™re up against it from the beginning. The odds are stacked against you.
Thatâ€™s why, in a nutshell, making people think is bad. Simply put: thereâ€™s not enough processing time. By that point, the subconscious has already taken over and forced them to click the Back button on their browser.
It makes sense, then, that some of the best UX and conversion principles are contained in a brilliant little book called Donâ€™t Make Me Think.
Itâ€™s chock full of brilliant little nuggets of wisdom. Practical, actionable stuff that can make an immediate impact.
Like naming conventions. You know how
egotistical â€˜professionalâ€™ consultants try to get all clever with their website navigation text? Things like: â€œOur Insightsâ€ instead of just â€œBlogâ€.
Turns out, not everyoneâ€™s privy to your insightfulness. So dropping insight bombs on the primary nav goes undetected. Unnoticed. And therefore, unclicked.
Thatâ€™s a problem. Because if no one checks out your blog, they wonâ€™t see how smart you are. They wonâ€™t share those blog posts. So they wonâ€™t be indexed. Which means fewer people still will find them. Which translates into fewer leads generated or sales closed.
For example, take a look at this image.
First pass it looks fine, right? The reason it looks like someone dimmed the lights is because thereâ€™s a heatmap analysis over the web page.
Butâ€¦ donâ€™t heatmaps typically show little â€˜hotâ€™ areas on the page where the majority of people are clicking?
Why yes! Yes, they do! And therein lies the problem. There ainâ€™t no hotspots on this image!
That page is for a portfolio section. You know, the page on your site which shows off your past work so that new people like it and reach out to you.
However, if no one is clicking and viewing those pages, no oneâ€™s going to be blowing up your email inbox about new services, either.
So thatâ€™s where we begin. Accepting our current deficiencies. And setting out to find a solution. Here goes.
Step #1. Start by Identifying Whatâ€™s NOT Happening (that Should Be)
The previous example is a good place to start. Itâ€™s incredibly important. And yet somethingâ€™s missing.
Specifically, people arenâ€™t clicking on it. So thatâ€™s the first step: figure out whatâ€™s not happening (but should be) with basic user behavior tools.
Option #1. is something simple and straightforward like CrazyEgg. No frills. Not many bells and whistles. But it gets the job done (as weâ€™ll see in the next section). Itâ€™s got your basic heatmaps, scrollmaps, and a few advanced features to see how unique traffic segments interact with pages differently.
HotJar helps you record website behavior as itâ€™s happening. So you can do a lot of the same, basic heat mapping analysis. But instead of viewing data in aggregate, you can zoom in to see whatâ€™s happening within an individual session.
Kissmetricsâ€™ Funnel Report lets you see where those â€˜conversion roadblocksâ€™ are popping up; preventing people from taking that â€˜next stepâ€™ required to put money in your pocket.
Last but not least thereâ€™s UserTesting. Thankfully another literal brand name that helps you find users to test your website, checkout flow, or app. It even lets you pre-screen people. So the only ones allowed to take your test meet a number of criteria (like men between the ages of 18 – 32 who own an iPhone and graduated from college).
The point? Thereâ€™s no shortage of tools that will give you feedback on whatâ€™s working, and whatâ€™s not. Hell â€“ even the free version of Sumo will hook you up with some of these basic features.
Once youâ€™ve got them locked and loaded, take a look to see whatâ€™s not happening. The action that you want people to take, but for whatever reason, they arenâ€™t.
For example, a landing page scrollmap should look something like this:
Lots of yellows, oranges, and reds. Lots of heat coming off that thing. It means people are scrolling the entire way down. Theyâ€™re consuming the information on that page. And theyâ€™re sticking around long enough to hit the bottom.
Now contrast that with this one:
More than half the page resembles the deep, dark, blue, murky waters of the Pacific. And similar to those uncharted depths, nobody goes to the bottom of this page, either.
Start there. And then start brainstorming.
Step #2. Hypothesize Why People Arenâ€™t Doing What Theyâ€™re Supposed to Be Doing
Ok. Back to the first example.
A portfolio section on a website. Looks like a ghost town because no oneâ€™s checking out the past work.
Yup. Thatâ€™s the one.
People are supposed to be clicking on those two images. Theyâ€™re supposed to be checking out the work. But theyâ€™re not.
Hereâ€™s a similarly bad example of clicks happening almost every single other place on this Services page, except where they should be happening.
Ok. Letâ€™s brainstorm.
The first example kinda just looks like stock photos. Good ones. But stock photos nonetheless. Itâ€™s not very obvious that people should be clicking in the first place.
And the second? Thereâ€™s maybe too much stuff. Thereâ€™s little icons and text all over the place. Thereâ€™s also no â€˜hierarchyâ€™ of information. So people donâ€™t know where to focus or click first.
The table-like design isnâ€™t working. Itâ€™s not getting people to click on what theyâ€™re supposed to be clicking.
Now letâ€™s compare that with a good example.
A landing page thatâ€™s simple in layout, but focused on getting people to interact with one thing and one thing only.
Perfect. The primary button is all lit up.
â€˜Click distributionâ€™ should back this up. The page elements with the highest percentage of interactions (or clicks) should be those one or two (tops) page features. For example, a button that brings you to a form. Or a link that brings you to another page thatâ€™s one step deeper in your online sales funnel.
Each page then should slowly lead visitors from one step to the next. The previous example brings people to this next page. And the same pattern should repeat: the majority of user behavior is happening on exactly the stuff you want it to.
But what if thatâ€™s not happening? How do you correct course before itâ€™s too late?
Step #3. Now Use â€˜Visual Cuesâ€™ to Tell People What they Should be Doing
â€˜Visual cuesâ€™ are exactly what they sound like. Theyâ€™re design elements used to direct a viewerâ€™s eyeline. To direct their attention to something specific.
They can be overt, like a big arrow. Or they can be subtle. They can be intentional. Or unintentional mistakes that distract users.
For example, a ConversionXL study found that a person looking away from a form resulted in the shortest visitor time spent looking at the form, too. Instead, theyâ€™re looking at the person. Theyâ€™re looking at what they personâ€™s looking at.
The opposite also proved to be true. For example, an arrow pointing towards a page form resulted in the longest viewer time spent looking at the form.
They even took this one step further, testing which specific visual cues on a page resulted in the longest time spent looking at the primary page CTA (the form).
Thatâ€™s what good design does.
Not win pointless ADDYâ€™s or just look amazing. But spell out how a page should work or function.
â€˜Visual hierarchiesâ€™ are one example. Thatâ€™s like using a primary H1 Headline on a page, with a subhead underneath, and a smaller button underneath that.
Youâ€™re calling peopleâ€™s attention, through size and page placement, to elements one (headline), two (subhead), and three (the button).
This next oft-repeated example suffers from two primary problems:
- No visual hierarchy
- Page elements donâ€™t look â€˜clickableâ€™
Thatâ€™s one of the biggest problems with flat design. When things are too flat, it doesnâ€™t properly communicate to a viewer what it is (or what theyâ€™re supposed to do with it).
HubSpot uses a flat design for itâ€™s Website Grader. But they expertly avoid running into this problem by stretching out the underlined form element and then placing a blinking cursor where youâ€™re supposed to type your website address and email.
Itâ€™s subtle. But it works.
That means your page design needs to be conducive to scanning. Like this previous example:
Itâ€™s a long page. But thereâ€™s a clear visual hierarchy thatâ€™s then split up into different sections. Viewers can easily jump from one section to the next.
Zooming into an individual section, thereâ€™s also visual cues on the far right â€“ little device icons â€“ to get people to interact and discover how this service changes on each device.
The end result is that people are doing what theyâ€™re supposed to be doing. Theyâ€™re diving deeper into the information on this page. And theyâ€™re discovering how the benefits of this service. (Which will hopefully lead more, happy, informed visitors to become leads and customers.)
Website are never â€˜done.â€™
The deployment isnâ€™t the finish line. But a starting point.
Inevitably, unfortunately, itâ€™s not going to work as intended.
Thereâ€™s going to be a few pages, or a few transitions, that frustrate visitors to the point of bouncing.
The good news is that you can choose from a variety of user behavior tools to help. Once installed, youâ€™ll be able to analyze what people arenâ€™t doing. And hypothesize why theyâ€™re not doing it.
Then you can iterate. Using simple â€˜visual cuesâ€™ that help people immediately understand what they should be doing on each page.
Without requiring even the slightest mental energy expended.
About the Author: Brad Smith is the founder of Codeless, a B2B content creation company. Frequent contributor to Kissmetrics, Unbounce, WordStream, AdEspresso, Search Engine Journal, Autopilot, and more.
Source: New feed 2