(This is a sponsored article.) With the big picture established — mapping user journeys and defining your design’s look and feel — my fifth article in this series of ten articles dives into the details of designing user interface components.
UX, IA, UI: All of these abbreviations can be confusing. In reality, as designers, we’ll often be working across these different specialisms: designing the overall user experience (UX), organizing information logically as we consider information architecture (IA), and considering the granular design of the user interface (UI).
(This is a sponsored post). As web design focuses more and more on good user experience, designers need to create the most usable and attractive websites possible. Carefully applied minimalist principles can help designers make attractive and effective websites with fewer elements, simplifying and improving users’ interactions.
In this article, I will discuss some examples of minimalism in web design, things to consider when designing minimalist interfaces, and explain why sometimes “less is more”.
Buttons are a common element of interaction design. While they may seem like a very simple UI element, they are still one of the most important ones to create.
In today’s article, we’ll be covering the essential items you need to know in order to create effective controls that improve user experience. If you’d like to take a go at prototyping and wireframing your own designs a bit more differently, you can download and test Adobe XD for free.
Creating an effective web design is like putting a puzzle together, with the various parts coming together to tame the chaos and form a whole, well-organized design. At the foundation of this organization are the gestalt grouping principles.
In the first two parts of this series, we looked at the principles of similarity and proximity to understand how elements can be organized by their relatedness to other elements, and we looked at the principles of closure and figure-ground to understand how relationships are formed through the use of positive and negative space.
Before we talk about visuaanalytics, let’s talk people. There are two kinds in the world.
Those who see A/B testing (and CRO by extension) as gambling and those who see it as science.
Gamblers want quick wins; they resort to best practices without bothering with research. The scientists, however, are methodical; they follow a structured process that’s designed to get results.
I won’t call one wrong and the other right, but I’m helplessly biased towards the scientists.
Unfortunately for the gamblers, statistics, too, seem to be biased towards the scientists. On average, just one out of every seven tests produce a statistically significant result. Now force contrast that with a figure of one out of every three when a structured approach was followed. To create winning A/B tests, we need a shift in the way we approach testing. Here’s a brief look at what can be called a structured approach:
Problem Statement: What metric are you trying to improve, on what pages? Establish a baseline and evaluate the possible improvement.
Research: Understand current user behavior through analytics and usability testing. How long should you run a test for statistically significant results?
Hypothesis: Based on the research, zero in on ideas that would improve your preferred conversion metric.
Test: Test the changes to see if the hypothesis is right
Repeat the process
Analytics To Discover What’s Wrong Where Along The Funnel
Let’s talk about Research. It forms the backbone of testing, giving you hard data to reveal where exactly the copy or design might be costing your business.
Let’s delve deeper. The question of ‘Where’ has two parts to it:
Which page along the funnel?
Where (and what — copy or design?) within the page?
You already know how to figure out the answer to the first part. There’s Data Analytics for that, it’s sorted.
Data analytics, such as Google analytics, helps you answer which stage along the funnel you should test. It reveals the macro view — what percentage of your visitors abandon their journey at each stage (page) of the conversion funnel, or which pages engage visitors least.
Okay, great! Now you can prioritize based on what pages need immediate attention.
Bang! It hits you that you are not entirely sure what exactly to test on the page.
But, no matter! What are instincts for anyway? Who doesn’t mind endless testing, guessing and double-guessing what might work!
Or, if you want to start finding winning A/B tests more often, shake hands with visual analytics.
With the help of heat maps, visual analytics show how users engage with a webpage. It tells you what your users see on the page, what they react to, what affects them..a poet might even say, heat maps help you read customers’ minds.
Data analytics can show what pages require attention, but it does not show what part of the page needs mending. For instance, a high bounce rate on a page (that forms a part of the conversion funnel) shows that there might be something off with the page because users are exiting the funnel from these pages.
Visual analytics sheds light on why visitors leak off of your website.
Two Types of Visual Analytics
‘Heat map’ is a way to visually represent user activity on a page. It uses highlights of varying intensities to depict the density of user activity at each point of the page; typically annotated with data. For instance, number of clicks on elements and other useful ratios like clicks/hovers. Broadly, there are two kinds of heat maps:
Eye-tracking: A form of user testing where you select a sample size of your website’s user population and track their eye-movement as they engage with the flagged webpage. It’s fairly expensive and since the test itself is done only on a sample of your population, the results might not always be reliable.
For this reason, most businesses resort to a cheaper alternative:
Mouse-tracking: Mouse-movement and activity of all visitors to a site are tracked over a period of time and represented graphically. One question that pops is how good an approximation mouse-movement is of eye-movement. Studies comparing mouse-movement and eye-movement have found that the average distance between cursor and eye gaze is 90 pixels, and 40% of those times the distance was less than 35 pixels.
Mouse-tracking heat maps are more popular because it’s cheaper, and does the trick well
How Do Heat Maps Help In Creating Winning A/B Tests
Depending on what you are trying to discover, you can employ different heat map tools. Here we look at the most popular of such heat maps and how they help in identifying barriers to conversion.
It’s the closest alternative to an eye-tracking test. Mouse-movement tracking tools track mouse-movement of all your users and then represent the data visually over the page. It reveals patterns behind how users read and navigate the page. Here’s a look at how the mouse map looks for VWO Features Page, as generated by Navilytics.
Most mouse-movement maps also give analytic data like how many visitors hover over a particular area of the page, which is an indicator of the attention such page-areas command.
How Mouse-Movement Maps Help
Mouse-movement maps reveal how users are reading content on your page. What do visitors who convert do differently from the visitors who don’t? Such knowledge can validate, even spawn, your A/B test hypotheses. For instance, for an eCommerce product page it could help answer questions like:
Are guarantee badges getting enough attention? Should they be moved closer to the add-to-cart and/or checkout button?
Are users failing to see the ‘free delivery’ promise, with little to no activity in that area?
Do visitors hover over the product recommendation carousel?
2. Scroll Map
Scroll maps help you understand to what point of a page users scroll and where they abandon the page.
How Scroll Maps Help
Depending on the scroll behavior of users, you can adjust the length of your webpages for maximum effectiveness. For instance, the Nielsen Norman Group have continuously found that 80% of visitors’ attention is spent above the fold.
Does that mean your conversions will suffer with a long page? No, it’s best to test. Text-intensive pages like product pages are often lengthy. By analyzing the scroll-map of such pages, you can answer questions like:
Are visitors missing your painfully designed CTA button that is below two folds?
At what depth of the page is most drop-offs happening? Is the content in that part of the page relevant? Should it be rewritten or removed?
Where exactly does the page fold lie? Should other critical content be moved up the page to get more attention?
Forms are the sanctum sanctorum of webpages. It’s where a user becomes a prospect, and later, a paid customer. Your landing page content might be the best in the business, but unless your form is just as good and commands attention and inspires trust, conversions will suffer.
How Form Testing Helps
Form tester tools help understand how users interact with the form — where on the form they spend the most time hovering, where they click and how they engage with it. Think mouse-movement maps, but for a form.
Perhaps, users are hovering over form labels longer than you expect: this might indicate that the label text is difficult to read.
Are users spending longer than expected on the form fields? This might indicate poor contrast between the field text and field background color.
It’s not just these minor tweaks, form testing can help uncover major issues with form layouts as well. Here are some pointers on optimizing form layouts from Baymard.
5. Visitor Recording
While heat maps represent recorded data visually, visitor recordings capture actual videos showing a user’s interaction on a page.
Visitor recording helps you virtually see over the shoulder of users as they interact with your webpage. It tells you where exactly on the page a user faces issues and what they are most attracted towards, so you can see the visual hierarchy as it seems to a visitor.
6 Heat Map Tools To Help Ease Your Decision Process
Surveys and other usability tools aside, Usabilitytools has a neat Click Tracking tool that records clicks on page, clicks on elements and hovers (something they call the ‘attention map’) on a page. You can get a price quote by filling up a form on the website.
Mouseflow also has the entire suite of heat map tools with an offering specifically for eCommerce stores where it’s important to capture visitor interaction with dynamic page elements, too. They offer a freemium plan and you can start a free plan for upto 100 recorded sessions/month.
Navilytics packs the whole punch and more, with features like Area Stats that lets you select specific areas of the page and receive mouse interaction data and the ability to do data segmentation. Navilytics, too, offers a free plan for upto 50 recorded sessions.
Clicktale, largely an enterprise solution. probably the most well-known of heat map tools. The spread is not limited to heat map tools; on offer are specialized tools to help improve site efficiency and conversion funnels. They recommend signing up for a free demo only if there is a minimum of 500,000 page views per month across your website.
Okay, I’ll blow our trumpet now.
VWO too, includes a heat map functionality that provides both mouse maps and click maps. The functionality comes bundled along with any of the testing plans that we have.
Ptengine is another product that offers all typical heat map functionalities and some additional features like multi-device monitoring. They offer a free plan too.
Have we missed something? What other ways are you using visual analytics? Be sure to let us know in the comments section below.
PS. If you liked this piece, you will probably love our other posts. Subscribe to the blog to get research-driven original content delivered right to your inbox, fresh and warm.
There are only a handful of fundamental patterns that create all of the natural diversity around us. Nature’s patterns perform three basic tasks that get the work of the universe done by moving, storing and connecting energy.
Nature communicates within an interconnected and intricate system of checks and balances to weave patterns and processes together for perfect and purposeful outcomes. Nature is the ultimate economist when it comes to creating so much from so little.
Animation makes games real. Movement adds excitement to a game and makes the characters more realistic. In this article, we’ll look at the Cocos2D library and how it supports programmatic animations in iPhone games.
This article is part of a series that teaches you how to create iPhone games based on the open-source game Seven Bridges. Make sure to check out the first article in the series, “Designing an Open-Source iPhone Game” and look at the source code in the Seven Bridges GitHub repository.