Affordances can point your users in the right direction

My mother-in-law, visiting us for a few weeks, almost burned down the house the other day.

It’s not what it sounds like – she’s very nice and we get along great.  The problem is our  stove.  Its sleek, minimalistic design makes it too easy to turn on the wrong burner without realizing it.  In other words, it lacks effective affordances.

“Affordance” is an industrial design term for a visual clue about how something works.  The purpose of an affordance is to convey to the user exactly what they need to know in order to use the product correctly.

Affordances are embedded into so many everyday products that we hardly notice them.

Airplane seatbelt

Affordances can be used to make websites more usable too.  Let’s take a look at some examples of three common forms of affordances: color, words, and arrows.

1. Color

The shower dial in the image above uses the universal colors for cold and hot – blue and red – to indicate which direction the dial should be turned for cold and hot water.

In a different way, the website of Ritual Roasters uses the contrast of the bright red to highlight the Shop link and direct the user where to go.

2. Arrows

Arrows are even more explicit.  They basically say, “Follow me here”.  The arrow on directs your eyes to exactly where she wants you to go: her newsletter sign-up.

3. Words

Have you noticed that every airplane belt buckle is etched with the word “Lift” on one side?  We all know how to open a buckle (I think), but I suppose in the case of a plane emergency every second you don’t spend fumbling counts.

The website of the social media tool Wildfire uses a word affordance too – but with a twist.  It has a cool six-pointed shape, each point of which is clickable.  Notice the “Hover” label with the arrow pointing towards it?

Here’s what’s interesting: the “Hover” affordance is temporary.  It’s displayed only when the page is first loaded, and after a few seconds it disappears.  You’re given just enough time to grasp how the six-pointed thingy works before the training wheels come off and you’re left simply with their cool design.

4. Combination uses all three forms of affordances.  There’s an arrow, labelled “Looking for my blog?”, pointing towards the blog link, and the “Free Download button” is unmissable in bright yellow:

Has usability testing shown that your users are taking too long to find an important feature on your site?  Consider adding a more explicit affordance to point them in the right direction.

Our Webinar with Balsamiq: The Power of Running Usability Tests on Wireframes

Last week we hosted a joint webinar, Wireframing + Usability Testing = A Headstart on Development, with our friends at Balsamiq, CEO Peldi Guilizzoni and Head of User Experience Mike Angeles.  Balsamiq is a rapid wireframing software provider with more than 80,000 customers.

Watch the recording of the 30 minute webinar, as we talk about the benefits of wireframing and usability testing and demo how they can be used to reduce development time and cost:



Heat maps are here!

We’re thrilled to announce another new feature for Loop11 – Heat maps.

The heat map reports provide you with a user-friendly graphical representation of where your participants click on your website.  The report will let you see task by task everywhere your visitors click anywhere on the page, whether it’s links, images, text or dead space.

The benefits of using heat maps are numerous. The data gathered can offer proof as to where visitors do and do not click, provide useful information when designing and redesigning landing pages, help determine optimal advertisement placement, minimize shopping cart abandonment, maximize conversions of online forms and predict how visitors will use your site in the future.

Loop11 heatmap

The heat map reports can be located through your Clickstream Analysis by clicking any of the links circled below.

Accessing heat maps through clickstream analysis

Oh…and one other important thing…we have been collecting heat map data since April 1 (no joke!). So anyone who launched a project from April 1 onwards will have heat map data in their account.

Happy heat mapping!

Wireframing + Usability Testing = A Headstart in Development

Wireframe + fresh eyes = cost reduction

I don’t need to tell you how important wireframing is for rapidly developing a great site.  It’s become standard practice because it enables teams to visualize and validate their concept before diving into development.

The renowned architect Frank Lloyd Wright once said, “You can use an eraser on the drafting table or a sledgehammer on the construction site”.  Which option do you think is easier on timelines, budget, and momentum?

Wireframing saves time and money, period.

Wireframe example

Wireframes are essentially blueprints for a site. They can be created quickly and require no coding.

But… there’s something even more effective than creating wireframes.  It’s creating wireframes and then running usability tests on the wireframes to get solid feedback from “new eyes”.

We talked recently about why usability testing is so important.  It enables you to get inside your users’ heads so you can make a site that they find easy to use and want to stick around on.

The beauty of running usability tests on wireframes is, you get all of that valuable feedback before you spend a minute or a penny on development.  Your usability testers can interact with your wireframes as if they were a fully developed site.  You can then integrate the insight you get from the usability tests into your designs before you start coding.

Usability testing will save you time and money. Who wants to find out, after they spent resources on development, that the design is intuitive to the designers but not to the users?

So, don’t stop at wireframing.  To get a huge headstart on development, take the next step and run a usability test on your wireframes. Go ahead and create your first test now – it’s both easy and free.

Want to learn more about how to get the most out of your wireframe and usability testing efforts? Join us for a free webinar on Thursday, July 12 with three user experience veterans: Loop11 CEO Toby Biddle, Balsamiq CEO Peldi Guilizzoni, and Balsamiq Head of User Experience Mike Angeles.  UPDATE: You can find a recording of the webinar here.

Which is more effective: lab-based or remote usability testing?

If you have a new website or web app, you probably want to gauge the performance quality of your site. And you probably know that this will involve some sort of usability testing.

But which is the best method for usability testing? A team of researchers studied this very topic. Below is a summary of their study – and their results.

The team compared two methods of usability testing:

1. Traditional lab-based testing method – pick a group of people and have them go through the usability test in a controlled, in-house environment

2. Remote web-based testing method – pick users at random and have them go through the usability test remotely

Their experiments and results were published in a paper titled An Empirical Comparison of Lab and Remote Usability Testing of Web Sites1. Let me give you the highlights.

The experiments

Two user groups tested the usability of a set of two websites: 8 users participated in the experiments in a traditional lab-based environment, and 38 users participated remotely over the web.

Experiment #1

Experiment #1 consisted of 17 tasks to be completed on a website that was meant to be of both informational and transactional value to end-users. It provided information about retirement savings, pension, medical and dental coverage, payroll deduction, direct deposit and financial planning. It also enabled users to set their own payroll deduction.

Experiment #2

Experiment #2 consisted of 13 tasks to be completed on a second website that was meant to be of purely informational value; it provided details about stock quotes, company news, research, and investment strategies.

The tasks in both experiments were designed to judge whether:

• The website was visually appealing
• The menus and links were easy to navigate
• The information was arranged in a logical, easy-to-access manner
• Individual page formatting was good
• Content used appropriate terminologies
• The quality of the web content met the expectations of the target users
• The site was easy to use overall
• The user was able to complete the desired tasks within a reasonable time span
• The user would be interested in returning to the site in the future

The results

The conclusion of the study was based on the following criteria:

• Task completion – percentage of users who successfully completed the given task
• Average time spent to complete each task
• Subjective rating quality

A high correlation was noted in the following conclusions:

• The time spent to complete the tasks and the difficultly experienced in completing tasks were strikingly similar in both user groups – indicating similar behavior irrespective of environments.

• The quality of typed comments and the kind of data extractable from remote users were as rich as those that could be obtained in direct laboratory conditions.

If click streams and screenshots were enabled in remote test conditions, the quality of data obtained will likely be richer. Remote testing conditions are more cost feasible with the ability to include diverse user groups to uncover unique usability issues. Both testing conditions each reveal certain unique usability parameters as well.

In conclusion

The study concludes: The behavior of test users is strikingly similar in lab and remote usability tests. This is reassuring, and indicates that the different environments do not lead to different kinds of behavior.

In other words, take your pick – both methods of usability work and each have their own advantages and disadvantages. In-house testing may ensure that you gather more detailed input, while remote testing is usually less expensive. The most important thing is that you do some form of usability testing.

Footnote 1. An Empirical Comparison of Lab and Remote Usability Testing of Web Sites, by Tom Tullis, Stan Fleischman, Michelle McNulty, Carrie Cianchette, and Marguerite Bergel.

Say hi to the Loop11 team at the Big Design Conference & UPA International

Hey everyone!

We have some exciting news. We’ll soon be on the road in the US and are fired up to meet you!

We will be at the Big Design Conference from May 31 to June 2nd just outside of Dallas, Texas. Stop by and say hello at Booth #12! We would love to chat. The biggest ideas in strategy, UX, design, gaming, mobile, usability and development will be discussed here!

Right afterwards, we will be in Henderson, NV from June 5-7 at the UPA International Conference. Come visit us at Booth #20 and be a part of the most interactive usability & UX conference in the world!

Hope to see y’all there! Don’t be shy.

Toby Biddle and the Loop11 Team

What website usability is – and why you need to user test for it

How many millions of people in the 80s and 90s had trouble figuring out how to program their VCRs?  My older sister was the only one in our house who knew how to do it, and that’s because she was a little nerdy and read the manual.

This is one of the most classic examples of a usability problem.  No one wants to read a manual or call a support line – or even spend more than five minutes trying to figure things out on their own; people want and expect to be able to use products out of the box.  This is the essence of effective usability design, and the same principle applies to website usability.

What is website usability?

Website usability has two aspects:

1. The primary aspect is about meeting your users’ goals and delivering a satisfying user experience.  Is your site clear, concise, and intuitive to them?  Can they quickly and easily find what they’re looking for?  Are the consequences of pressing buttons and clicking links unambiguous to them?

The email management tool is one of my favorite examples, because usability is one of its main selling points.  And indeed all of the most common things that you’d want to do with it are laid out clearly on the front page: Create a Campaign, Manage a List, View a Report.  The button for the most common action – creating a campaign – is distinguished by its orange color and large label.  It’s hard to miss.

Ideally your site is so intuitively laid out that the question of usability never enters your users’ minds; it simply works the way they expect it to.  (In fact, users generally only think about usability when they’re frustrated by something that is not usable to them.)

2. The secondary aspect of website usability is more subtle; it’s about fulfilling the goals your company has for the site.  Does your site’s design nudge visitors in the direction you want them to go?  Are the features that are most important to you front and center?

Here’s a quick example: Laura Roeder Studios ( offers social media training and tips to small business owners. Building its list of weekly newsletter subscribers is important to them – as shown by the fact that the email newsletter sign-up is given prime real estate on their site:

The value of user testing

Of course we designed our site to be usable, you might be thinking.  Why wouldn’t we? Here’s the thing: you will never know how usable your site truly is until you test it with people outside of your organization.

Is usability subjective?  Could something be intuitive to one person and not another?  Absolutely, and therein lies one of the two main values of user testing: testing across groups reveals quantifiable trends.  If 7 out of 10 people can’t figure out how to navigate to checkout on your website, that tells you something very valuable which you will want to address.

The other main value of user testing is that it’s unambiguous.  Ask a user an open-ended question – Is our website usable to you? – and you will likely get a general reply.  But give someone a set of specific tasks to execute on your website, and look at the results, and you will see unambiguously where the stumbling blocks are, if any.  And that means you can fix them.

User testing enables you to get inside your users’ heads and create a site that will truly be easy and pleasant for them to use.  And that, of course, is win-win for both them and you.

Go ahead and create your first user test to get a quantifiable, unambiguous handle on your site’s usability (it’s both easy and free).

3 critical business questions CEOs can answer using Google Analytics

We marketing geeks have a certain way of trolling an analytics account — but there’s an executive-level look, too — business owners who prefer to leave this in-the-weeds analytics stuff to their underlings are missing several things critical to the way they understand their business.

In this post, I’m going to talk about a few critical business questions which CEOs can and should answer for themselves, on an ongoing basis, through a shallow-dive look at Google Analytics.

Where is my most valuable traffic coming from?

When a website is your baby, traffic gets you excited. You know what I’m talking about. Somewhere nerdy within, you silently squeal with joy when your traffic numbers are riding high. Perhaps you’ve had a record day!

Well that’s great. But what if it means nothing for your business?

The thing is, web traffic is little more than bits and bytes clicking away in an electronic ant farm you’re hoping will pay your bills. They’re numbers. Why do we think they’re so important? Because they might convert into customers, and customers pay us, right? Precisely. And that’s why, if there’s just one analytics report business owners keep a pulse on, it must be the Traffic by Source report.

Engagement metrics

First, understand which sources are sending you visitors who actually give a sh*t about your site and what you’re up to. Pages/Visit and Avg. Time on Site measure whether a visitor even wound up on your site on purpose, and if they did, how long they’re willing to stick with you in the attention-sparse web landscape.

Personally, I tend to get particularly enthusiastic about new organic traffic. If you’re suddenly bringing in 150 new visitors every day as a result of your awesome blog post unveiling a new curried eggplant recipe, that’s super — unless their engagement metrics are a fraction of what you see from folks who found you through other channels. Right?

Conversion metrics

Pay attention to your conversion rates by traffic source. You might notice that 10% of your traffic accounts for 50% of conversions. All referrers, ad channels and social media outlets are not created equal.

New blood

Some sources of traffic will bring you fresh eyeballs and other sources will yield more returning visitors. Which does your business value more? If you’re an e-commerce site, does your average first-time shopping cart differ significantly from that of a returning customer’s?

Look carefully at the propensity of each traffic source to bring you new visitors. Once you have a returning customer, it’s likely you’re touching them through other marketing channels, but a brand new prospect — that’s gold.

How are people experiencing my site?

What proportion of your visitors see your site on their iPad? Their mobile device? Chrome or Internet Explorer (do people still use that browser)? Knowing the breakdown is part of understanding your customer base.

Maybe 30% of your users come to your site on a Mac, and your development team uses nothing but PCs. Sure, they might QA the site on a Mac, but this 30% slice of your prospect pool might not be getting the love they deserve. Maybe your homepage looks awful on the iPad, or your paid search landing pages don’t load the proper information above the fold for all users. If you don’t pay attention to how potential customers are experiencing your business on the web, you can’t control the message.

What content do people care about?

By understanding what pages on your site people spend time on, how they behave there, and what they do next, you can gain unparalleled insight into your business.

Just as a brick and mortar store owner would find it useful to develop an understanding of which store aisles draw the most customers and how the organization of her store impacts revenue — “did you find everything okay today?” — similarly, you as a business owner with a website should understand how your prospects spend their time there.

At a minimum, you should be able to recite:

1) Which pages are most visited? (your homepage, your blog, your shopping cart, your “about us” page, etc.)

2) Which pages attract the most repeat visitors? What about first timers?

3) Is new content appearing in this report, or has your website succumbed to content idleness?

Keep your site fresh by blogging and creating new content. You’ll get more organic search traffic and give your browsing population a treat to come back for. You want to see new pages indexing in this report, every few weeks at the very least.

4) Which pages have the highest bounce rate?

Is it because they suck, or because they’re a natural “exit point” for your site, like the order confirmation page? If they’re an exit point, are you providing a natural next step for your visitor? What should they do after purchasing — tell their friends to get a gift card? Share via social media? In general, analytics are a necessary and low-effort way to gather this data, but you’d also be wise to find a deeper understanding of how your users explore your site via usability testing.

All in all, here’s the bottom line. You’re busy. You’ve got a business to run, and minutes you spend in the weeds digging through statistics are minutes you could be spending elsewhere. But if you just have one hot minute to review your site analytics, I’m positing there are three places to keep your focus: traffic sources, browsers/devices, and site content.

About the author

Igor Belogolovsky is cofounder of Clever Zebo, a group of online marketing strategy experts dedicated to helping businesses grow revenue quickly and measurably by making smart moves on the web. For more good stuff, hang out with the Zebo on Twitter and peruse the Conversion Optimization blog.

« Previous PageNext Page »
Want more inspiration?
Join the Fab-UX 5 newsletter!

Five links to amazing UX articles,sent to you once a week.

No SPAM, just pure UX gold!

No Thanks