Of all of the different tools we have to evaluate the effectiveness of a website, eyetracking is probably the most misunderstood and underutilized.
Eyetracking is the mechanism we use to observe and measure what people actually look at on a page. For individual users, they show what the order in which various elements caught their attention and how long they looked at a specific area.
Figure 1: This example from the Universtity of Minnesota shows in what order and for how long a single user looked at different objects on this page.
Typically they also produce heat maps that demonstrate what everyone in the test looked at while they were on the page.
Figure 2: This example shows the areas where a group of users fixated their gaze most often (shown in red).
What people look at and consequently do is directly tied to what they came to the page to do in the first place. However, people don’t keep seeking until they are 100% certain they found the right answer. They typically stop at the first reasonably plausible one.
In general, the better your design is able to both 1) draw peoples’ attention to the area of the page that will enable them to complete their task and 2) enable them to recognize it as the solution to their problem, the better the page will perform at helping them accomplish their goals and make them happy customers.
So how do you know for certain that that they’re looking where you want them to look so that you can improve your design?
You could ask them what they look at. User interviews, focus groups and properly constructed surveys will help discover what people think. But for more reasons than can be discussed here, they are inadequate measures of behavior.
Site analytics measure behavior, but they don’t explain why that behavior occurred.
Professional usability lab studies explains the “why” question to a great degree – and I recommend at least a quick, inexpensive informal study (often several) for most projects – but it still requires interpretation. Eyetracking can help the design team understand, contextualize, visualize and interpret these problems.
How to Get Started
There are 3 general approaches to getting started with eye-tracking studies. Which one you choose depends on your goals, expertise, capacity, deadlines, margin for error and budget.
- Outsource
Outsourcing is the ideal option for organizations looking to manage the performance of a high-value project that eyetracking can measurably help improve, if your team does not have equipment, time or expertise to conduct them. - Bring it In-House
Organizations that regularly build and refine websites should consider whether training and hiring in-house experts makes sense. The equipment and software can be obtained at a fixed cost (systems sell for over $20k), and in many cases incremental costs can be relatively low. - Simulate
If it could be shown that the human eye is typically drawn to certain objects with defined characteristics in specific contexts, accurately predicting what people would look at on a page is a matter of putting the right algorithm in a screen interpretation engine. Eyetracking simulation engine AttentionWizard is said to be able to do just that for static images. Its creators claim 75% correlation with actual eyetracking studies. This is partially because it cannot interpret the context of a specific task, but with prices for testing each image far lower than traditional studies, accuracy at that level may be worthwhile.
Limitations
Eyetracking doesn’t measure peripheral vision. Just because someone’s eyes did not fixate on an area, it doesn’t mean they didn’t see it or weren’t affected by it. Nor do they read minds. Just because it appears as though someone looked at something, it doesn’t mean they comprehended it.
Figure 3: This example from useit.com shows that users looking for the current U.S. population looked and fixated directly at the number that answered their question. However, as Jakob Nielsen reports, only 14% of users successfully identified it for what it was. A closer look shows that users fixated on only the left part of the number, implying that they did not really comprehend what they had seen.
To answer questions you have about a Web product (be it a site, application, or some hybrid of both), make sure that the test actually measures what it is you need to study. Just as you would not use a stopwatch to measure the temperature in Hawaii, nor should you ask analytics, surveys and usability lab studies to measure what areas of a page draw peoples’ gaze.
No single research method measures everything, but in many circumstances eyetracking can be a good supplemental tool in your design arsenal.
Related Links
Eyetracking: Is it Worth It?
First 2 Words: A Signal for the Scanning Eye
In its simplest terms, building commercial websites is about marrying something the customers want with something the owning companies want to sell them.
It isn’t as easy as that, though. Often companies must speak to widely divergent audiences who have widely divergent reasons for coming to their site. It doesn’t help that everyone within the owning organization has a different idea about how the customer thinks and what is most important.
Mutually exclusive ideas can all be wrong, but they can’t all be right. So how can we know that our solutions are addressing the right problems?
1. Ask your customers what they think
There always seem to be good, tempting reasons to capture the preferences of your customers…. There never seems to be enough time or enough money… Which is why it takes focus and discipline to resist the temptations.
We will almost always know more about our own products and business goals than our customers, which is precisely why our judgment is so unreliable.
The Curse of Knowledge
In Made to Stick, Chip and Dan Heath assert (and go on to demonstrate) that once we know something, it’s difficult to remember what it was like not knowing it.
For nontechnical people, this is why talking to IT can sometimes be like pulling teeth.
And before we’re too hard on IT, keep in mind that we all have interests that are boring and unintelligible to someone.
Similarly, our customers don’t care what we want, either, except when our demands unnecessarily encumber their ability to get what they want.
Knowing what we want and what we do makes it difficult for us to see things from our customers’ perspectives. The proper research can help us get out of that rut.
Doing without research means making sacrifices
With the right experts on staff, a “dead-reckoning” approach to website design can vastly improve the look of an inferior website.
However, the right experts will also know that proper research can do more than inform the design choices – it can be the difference between creating something that people can interact with something and something they actually want to.
Consequently, it can also be the difference between successfully meeting the right business goals and getting hammered in the marketplace by people whose actual (not perceived) wants and needs necessitate a redesign in a few years.
Examples of Preference Research
- Surveys
- Preference interviews
- Focus groups
2. Watch what your customers do
Irrespective of what they say they like, people behave in peculiar ways.
It is not uncommon in usability lab studies for participants who could not accomplish many goals set forth in the study to rate the overall experience highly in the post-test questionnaire.
This doesn’t make surveys or questionnaires unreliable; they are good for their intended purpose. It just demonstrates that data that indicates preference is not sufficient as an evaluative study – and certainly not a generative one.
Usability lab studies are but one method to observe customers. There are many other methods that provide insight into how customers behave both online and in the “real world,” such as log analyses and ethnography.
Examples of Evaluative Research
- Search and log analytics
- Card sorting
- Usability lab and field studies
3. See what you see
French philosopher Emilé Chartier once said:
“Nothing is more dangerous than an idea when it’s the only one you have.” (Hat tip to Roger von Oech)
I once spent a lot of time putting together a solution for a very complicated problem. The solution came in the form of a plan and interface architecture for a Web application. After making some adjustments based on feedback from some colleagues, I was very proud of it.
The problem was, when we put it in front of our audience in a lab study, no one could understand by its appearance how and why they should interact with it.
I tried a few times to “tweak” it, but to no avail. Even though – after we explained what the utility of it – our audience loved the idea and could “learn” it, they couldn’t give us any useful feedback other than to let us know they didn’t understand how it could be tweaked to make its function apparent.
After just a few users, we were reasonably sure that it couldn’t be salvaged by simply tweaking the interface.
So we simply blew it up.
We started over. Only by doing this did we find a solution that actually worked. But for the first few iterations, I was holding out hope for some derivative of my first attempt.
We are all susceptible to falling in love with our own ideas, but there can’t be any sacred cows when it comes to usability studies or any other kind of research. When we discover that people prefer one thing over our better sensibilities say they should, or if they simply cannot understand how to use something we spent a long time creating, we ought not let that get us down.
After all, by ruling out a possible solution through this research, we’ve gotten one step closer to finding the right solution.
What’s more, we can be comfortably certain about that our investments are safe, because we tested our assumptions and were prepared to deal with the ramifications of all of our research.
Related Links
How Do You Spell Succes? (A “Made to Stick” review)
Mental Models: Aligning Design Strategy with Human Behavior
Card Sorting: Designing Usable Categories
Rocket Surgery Made Easy
No Comments | Trackback | Categories: 1000 Ft. POV, Research, Testing | Email This Post
Contrary to our dearest wishes, people generally don’t come to our websites just to “click around” and see what’s there. They’re on a mission to find or do something – either specifically or vaguely defined. Information scent is that which sets expectations for their ability to find or do it.
It is a brand’s promise to them that they can find or do what the object or labels represent.
The good news is that, for savvy and diligent brands, this is a great opportunity to set high expectations and exceed them – thus, building a strong brand reputation.
The bad news is that, without proper planning, it’s unlikely to happen on its own. Brands, Web designers, and experience planners need to know the principles that will enable them to build strong brands by generating a strong information scent and delivering on the expectations they set.
What is information scent?
(Nerd alert: Instruction of theory follows)
To help interaction designers understand how to make information more findable, back in 1993, some researchers at the Palo Alto Research Center developed a theory called “information foraging,” which suggests that there are important similarities between how animals gather food and how humans collect information online.
The concept of “information scent” came out of this theory, which provided some useful principles to follow when building online experiences.
Abstraction: The stink bomb of information scent
Everything is alike at the appropriate level of abstraction.
For instance, dogs and cats are distinct animals. However, dogs and cats are both “pets.” Dogs, cats, and horses are “domesticated animals.” Dogs, cats, horses, and mice are “animals.” Dogs, cats, horses, mice, and pitchforks are “things you might find on a ranch.”
The more abstract the category, the more difficult it is to predict exactly what the label means. Hence, in (sadly) typical website parlance, “resources” and “tools” may be too abstract to be useful. By themselves, they provide no information scent. “Resources,” as a label, may just as easily be about water, coal, and oil as it is about links, support documents, or helpful people.
As the Chip and Dan Heath, authors of Made to Stick tell us, “Abstraction is the kiss of death in any situation where you need to stand out.” And in a space that is abundant with information (like the Web), you need to stand out.
Don’t be obsessed with click-counts
Once upon a time, savvy Web designers believed that websites should adhere to something they called the “Three-Click Rule,” which, as the name suggests, stated that every piece of content on a site should be no more than three clicks away.
The problem, however, isn’t the number of clicks. It’s the degree of certainty users have that they can find the information they need – that they can accurately predict what will happen when they click something.
It’s very rarely a good idea to add unnecessary clicks.* But often adding an intermediate step in a given process can actually make things more findable.
Otherwise everyone would just take their site map and turn it into their home page.
* Surprisingly enough, this white paper from Human Factors International suggests adding extra clicks can sometimes better support the goal of the site and fulfill the desires of the users.
Turn your web pages into billboards
“The goal should be for each page to be self-evident, so that just by looking at it the average user will know what it is and how to use it.” – Steve Krug, Don’t Make Me Think
Following Krug’s advice sometimes means turning three painfully laborious clicks into four quick and mindless ones. Within reasonable constraints, if the information scent is strong enough that users are supremely confident they will find the information they need by clicking on something, as long as the site delivers regularly, they won’t even remember how many clicks it took them to get there.
They get frustrated only when they struggle – either deciding what or where to click, or finding out that what they clicked didn’t give them what they expected.
You could provide instructions, but while in foraging mode, people don’t want to stick around and read instructions, so your interface must convey what you would otherwise use words to communicate.
People want to get to the meat of what brought them to your site in the first place. So they won’t read at first. They’ll scan. They’ll scan by looking for cues that indicate to them where they must go (or what they must read to find out).
Krug wrote of a framework that takes advantage of the typical scanning behavior of users: If people simply scan pages like they scan billboards (until they find what they came for), when necessary and possible, treat the pages like billboards.
Besides creating clear, consistent labels, here are Krug’s guidelines for doing just that:
1. Create a clear visual hierarchy on each page
Caption: As “ugly” as his site design is, Jakob Nielsen’s articles at useit.com are ridiculously easy to scan and read because he makes use of good visual hierarchy.
2. Take advantage of conventions
Caption: Many of the video interface elements we see and recognize everywhere on the Web today are conventions because YouTube became popular. Many of them were recognizable because they were recycled from video players that were manufactured for decades prior to YouTube’s manifestation.
3. Break pages up into clearly defined areas
Caption: USA Today’s website has a lot going on — even on content pages like this one — but the various areas are clearly defined for what they are. Navigation is navigation, headlines are headlines, body text is body text and so forth. Separation between areas aids in navigation and consumption.
4. Make it obvious what’s clickable
Caption: Buttons can come in all shapes and sizes. You can perform a few tests with others to determine if a button appears clickable. But if you do nothing else, look a few inches in front of any given design element (such as a button). If you can still tell that the object is clickable, then it probably will appear clickable to others.
5. Minimize noise
Caption: In spite of providing access to thousands of programs, Hulu.com does an outstanding job of keeping things simple on their homepage.
Live it, love it, give it a pleasant aroma
The main goal of following these principles is to ensure people who come to a site looking for information can find it.
Abstract labels or design features can get in the way of this goal. They are said to have a weak information scent.
Clear labels with good visual hierarchy, familiar or recognizable design elements that aren’t too cluttered typically provide a strong information scent.
It isn’t always possible, given the constraints of any particular circumstance, to achieve 100% clarity in appearance or labels.
However, knowing the principles of information scent and their potential benefit, with proper planning and testing, can give you a greater degree of certainty that your online presence will successfully support your brand promise.
Remember to plan for this important aspect of communication.
Related
Top 10 UX Myths (Hat tip to David Armano)
No Comments | Trackback | Categories: Planning, Testing, Tips and Tricks, Websites | Email This Post
So you’ve been given the green light to redesign your website. Your peers have high hopes. Your boss has high expectations. Not wanting to disappoint them, your team must tailor your website to accomplish a number of things for your business. However, your efforts will inevitably fail if the people who come to your site cannot find what they’re looking for. How do you make sure they can find them? And how do you make sure it’s in the most efficient and desirable manner possible?
Here are some general principles your team must follow if they’re going to improve their chances for success.
1. Provide orientation clues
In most public-facing websites, your users don’t think about your organization in the same way you do. They have diverse reasons for coming to your site. You need to be able to immediately answer several of their questions:
Am I at the right site?
Your website should be able to clearly explain to anyone likely to find his way to your site that he has arrived at the right (or wrong) place. There are two ways to accomplish this effectively.
- Put a company logo prominently in the header, preferably on the upper left hand side of your screen. Make it so that clicking this logo will take the users to your home page.
- Include in your header a short website-specific tagline that explains your business. This isn’t an elevator speech and, unless you’re a well-known brand, your audience is fairly well established and static, or it happens to also be descriptive of your company’s purpose, it’s not your company’s motto, either.
Bad Tagline - netmarket.com. "Save Time. Save Money. Save Your Sanity." Okay. Ummm, what do you do, exactly?
Good Tagline - refdesk.com. "Fact Checker for the Internet." That's pretty straightforward. Now, can you deliver?
No Tagline Needed - Yeah. We already know you, eBay.
(Credit for examples goes to Steve Krug)
Am I on the right page?
Not only should your website assure your users that that they’ve arrived at the right site, it should also let them know where in the site they’ve landed. There are a number of ways to accomplish this.
Where should I go next?
Just as important as knowing where they are, your customers are going to want to know where they should go next. For this, you must make your navigation easy to identify and easy to understand.
2. Display system status
The website should always let users know what’s going on. This will help users understand that your website (and by extension, your company) is both helpful and responsive, because it never lets these questions go unanswered:
Can and does the website recognize me?
This is especially important if you offer some sort of benefit for registration and logging in. Prominently showing universally and reminding the user at key places within their experience that the site can recognize and meet their needs can help drive leads.
Though not as prominently displayed as it could be, this message on USA Today lets me know that I'm not signed in and one of the benefits (weather on-the spot) I can get by becoming a member.
Did what I just do make any difference?
Have you ever clicked something and nothing happened? Try to avoid it. Even as broadband adoption expands, it’s still important to keep your website lean by reducing latency periods. When someone clicks something and expects to get something in return, your website should not delay in providing it.
How long will this process take?
Sometimes your website must make some calculations, and latency periods are unavoidable. In these instances, if you know about them ahead of time, provide some feedback to acknowledge that the user has done something, and let him know that the system will deliver momentarily.
Gmail lets you know that what you asked for will be delivered momentarily.
Don’t rely on long-form copy to explain that the process can take between 25-30 seconds, buried somewhere in the paragraph and a half it takes to explain that they should click the button to get to the next screen.
3. Create a recognizable interface
For websites intended for mass audiences, recognition is better than recall. In other words, people who see something should immediately recognize how interacting with it will affect the system. By virtue of the way it looks, they should be able to answer several questions about it:
Can I click on this?
Put simply, buttons should look like buttons and links should look like links. If it’s clickable, it should appear clickable. Conversely, if it’s not clickable, it should not appear clickable.
Example 1: Click Here (Good!)
Example 2: Click Here (Bad)
What will happen when I click on this?
Will it take the user to a new page? Will it submit the credit and billing information he just entered, or will he have an opportunity to confirm his order information before submitting it? Clear, concise instructions and an intuitive interface, designed from an accurate understanding of the audience, can help make it easy for people to predict the website’s behavior given any intended interaction.
Example 1: Next button
Example 2: Proceed to confirmation button
Should I click on this?
Knowing what is clickable and what isn’t solves only part of the problem. The other part of it is communicating whether clicking on something will benefit the user. One tactic that is often overlooked is communicating to the user whether clicking on two different links will take him to the same place, or whether he’s already been to a page where another link would take him. To solve this, use consistent terminology and ensure your links appear different when someone has already visited a page.
4. Plan defensively for errors
You’ve done well, but maybe your users are in a rush, they weren’t paying close attention, and they either clicked on something they shouldn’t have, or the servers are going through convulsions at any given moment. How can you help them recover?
Help users quickly answer a few questions.
Why am I here?
Was it a server error, a bad link, or was it something he did wrong? Use concise, plain language, and format it in a way that is easy to quickly identify and scan.
What should I do next?
Imagine searching for Elvis songs in a music distribution application. What if you weren’t paying attention and you submitted “Elviss” or “Elbis?” If you search for “The King,” will the system return music options from the the or B.B. King? What if you’ve ordered Elvis music before, should the application recognize your preferences and deliver more meaningful results?
Example: Google Did you mean…
Search isn’t the only place where people can experience difficulties. Good prior planning can make sure users have some meaningful choices when they’ve encountered an error.
Will I be able to avoid this problem in the future?
Understanding why something went wrong is critical to understanding how to avoid it in the future. Whatever the reason is, communicate it. Even small, growing companies with server issues can avoid audience abandonment by assuring their users that they’re taking steps to fix the problem.
5. Test, test, test
Guidelines are useful up to a point, but every project is different. It’s a constant struggle to straddle the fence between being unique and innovative and providing something of value that people can actually use.
Since you’re dealing with goals that seem to be at odds (being both innovative and conventional), why not take positions that seem to be at odds with each other?
Be a skeptical optimist.
Don’t be afraid to try something new, but test your ideas. Test your prototypes while in development. After all, your website’s success is measured by how well it supports your business, and to support your business, visitors must have a positive experience on your site.
People find websites useful, enjoyable, and valuable for different reasons. But chances are that very few will speak highly of a company when they get lost on their website.
You’ll never be able to save everyone from getting lost, but if you follow these simple rules, you’ll save a lot more than you lose.
Other resources:
Jakob Nielsen’s 10 Usability Heuristics
Don’t Make Me Think
Ambient Findability
The Design of Everyday Things
Defensive Design for the Web
2 Comments | Trackback | Categories: Testing, Tips and Tricks | Email This Post
No Comments | Trackback | Categories: Testing, Tips and Tricks | Email This Post