About cbeck
Cam spent his formative years in the best training school in the world for the fast-paced, high-pressure world of online advertising – the Marine Corps. It was, after all, in his blood, with a father and brothers who had done likewise. After being released from active duty in 1993, Cam fully engaged in civilian life, and along with his family eventually launched OO-RAH.com, a successful site detailing the special qualities that make the Marine Corps the Marine Corps. A subsequent e-commerce venture would eventually pique his interest in the art of serving customers and creating memorable user experiences. But it was actually his long-time stint as a graphic artist and ad hoc IT guy that provided the segue into information architecture that he needed. In 2005, Cam took all his prior experience – including his closely held business maxims, troubleshooting skills and knowledge of conceptual frameworks – to Click Here, where his chief responsibilities are information architecture, usability and strategy for Click Here clients: Thomasville, Centex, The Patrón Spirits Company, Travelocity and Advance Auto Parts. Cam lives in Grand Prairie, Texas, with his family and two dogs, and can be found instilling the same discipline and sense of adventure that drives him in his son’s Boy Scout troop.
Contact cbeck
Posts by cbeck
The sign of a good interface for a product meant for general public consumption is when the audience it’s designed for is delighted to use it. This includes but goes beyond simple matters of usability, architecture or aesthetics, and lies at the heart of how people are wired to interact with the world around them – and their attitudes and reactions both when they see it and after they interact with it. Failing to design it right can make your website seem cold and lifeless.
Think of the last time you shook someone’s hand. When you looked the other person in the eye, did he look back at you? Did his smile seem sincere, warm and friendly? Could you feel the heat radiate from his palm as his fingers gently squeezed around the ridges of your hand? Did it last a couple shakes – at least three seconds?
What makes such interactions pleasant is that they are welcome, warm and inviting. We find comfort in their predictability. We like it when people react and respond to us appropriately, and we are either bored or shocked when they do not.
Unlike people, computer interfaces (including websites) don’t think on their own. They can’t identify others’ intentions and sensibilities to respond appropriately. They require people – designers and programmers – to identify, predict and enable responses to user behavior so that the system works predictably, intuitively and in a way that inspires the appropriate emotion.
Put another way, designing a handshake is more complicated than designing something that looks like a hand. A fake hand may resemble something you can interact with, but without the intelligence and warmth behind it, it insufficiently reflects the humanity it represents. It doesn’t matter how much you try to make it look human. You can attach a wrist and arm – heck, the rest of the body. You can dress it up and even take it to a dance. But without that intelligence, without that interchange of appropriate responses to your actions, in the end, you’d just be dancing with a dummy.
Use People-Speak, Not Computer-Speak
Computers are part of our lives and, as such, the distinction between our languages has blurred a bit in recent years. They have changed the way we communicate. Did we say that we’re “processing” something before the popularization of the computer? Without context, we don’t know what a person is talking about when they mention a “desktop” or a “mouse.”
Whenever possible, let your interface do your talking for you. Don’t say “Click to submit” if your interface is obviously clickable (the words “Click to” in this case just act as a barrier between sight and cognitive understanding). Just let them know what it’s doing in their terms, not the computer’s.
And for goodness sakes, pay attention to your error messages.
Caption: Very few ordinary users will understand what this means or what they should do about it. Whether the system commits an error or a user does, the system should help the user recover from it. To do that, it must use language the user can understand.
Give Instantaneous Feedback
For a response time to feel instantaneous, it must take place within one-tenth of a second. A one-second response time, while noticeable, still leaves the user feeling like they are in control. Depending on the request, 1-10 seconds may be acceptable, but at 10 seconds, people lose attention and interest.
Once again, there are a number of tricks you can employ if there’s a possibility that something can take more than a split second.
In such cases, utilize the quicker interactions you have at your disposal – rollover states and latency notifications can be the difference in that first 10 seconds.
Caption: Apple’s navigation design helps people understand that what they are doing is having an effect on the system. Even if network conditions or connection speeds cause the next page load to take a few seconds, the user does not need to wonder whether they did something wrong.
If it’s longer than 10 seconds, be empathetic to your audience’s short attention span. Give them something to watch, read or do in the meantime.
Caption: BounceApp’s whimsical loading animation keeps users from thinking about how long it’s taking to process their request. While this exact approach won’t work for every brand, it fits (and helps define) BounceApp’s personality.
Make the Interface Predictable
Variety may be the spice of life, but inconsistency in interface and interaction design can be a major cause of frustration for the intended audience. Not only do people expect all interface elements to work the same on your own website (internal consistency), but also the way they work on other websites (external consistency).
Caption: One of the early usability critiques of the iPad is that the lack of conventions forces users to learn independent interaction rules for each application they use.
There are a number of methods we can use to make sure an interface is predictable (such as through typography, language, shape, color and placement); it doesn’t mean everything on every website always has to look exactly the same.
There are very few hard-and-fast rules of interface design that cannot be bent for a higher purpose. All design involves a series of trade-offs. It’s just important to understand the principles involved and to intentionally choose which trade-offs you’re willing to make.
The key to making your website (or any interface, really) feel like it’s an extension of you is to make it more life-like and less like a computer.
It is not enough to give attention to shapes, colors, sizes and dimensions. Plan the experience so that the entire system is sensitive to how people interact with it over time, providing appropriate responses to user activity so that the user feels like they are shaking the hand of a real person, not just grasping at a dead fish.
Related Links
First Principles of Interaction Design
The Design of Everyday Things
About Face 3: The Essentials of Interaction Design
Building or redesigning an important website can be like buying a starter home. You think it’s the solution to all your problems, but sooner or later you discover that it has problems of its own. The upkeep is a lot of work. One thing is certain if you are building a family: There will come a time when you outgrow your starter home, and you’ll notice that it seems like the house was built for someone else. A close examination of the house reveals that, in some instances, you just weren’t that important in the grand scheme of things.
For instance, the contractors used composite hardboard siding instead of wood, vinyl or cement, and it seems to not withstand the rigors of the environment like the other things might. Since hardboard is slightly cheaper than the alternatives, that part was built for the builder’s bean-counter… not for you.
When you encounter your first plumbing issue, the master plumber who comes in to fix it laments that when the builder installed the pipes, they didn’t seal them. That part was built for the construction workers, so they could get to their break quicker. It wasn’t built for you.
Who is your website built to serve?
It doesn’t always have to be this way, but in many cases, websites are built through a series of processes, negotiations and compromises – much like a house. However, it is primarily built to solve problems. Therefore, the design team must agree on which problems they are trying to solve, and in what order.
There are several ways to approach the problems you identify.
Recently I had the pleasure of attending the 2nd Annual Big Design Conference in Dallas (#bigD10). Our keynote speaker was Jared Spool (@jmspool), founding principal and CEO of User Interface Engineering. His presentation, “The Anatomy of a Design Decision,” included an excellent perspective on user-centered design.
What is “User-Centered Design?”
The traditional definition of user-centered design can be explained this way (from Wikipedia):
“User-centered design can be characterized as a … problem-solving process that not only requires designers to analyze and foresee how users are likely to use an interface, but also to test the validity of their assumptions…”
“The chief difference from other interface design philosophies is that user-centered design tries to optimize the user interface around how people can, want, or need to work, rather than forcing the users to change how they work to accommodate the software developers’ approach.”
User-centered design can be broken into 4 categories.
- Self-Design – The designer is the user. This is not traditionally considered user-centered design, but it can be effective when the designer is designing for himself or when other users are exactly like the designer.
- Genius Design – When the designer intimately knows the user and the space for which he’s designing and can apply the patterns he’s learned without researching everything from scratch.
- Activity-Focused Design – When the designer is focused on what the user does and verifies through research and testing. This is the benchmark for traditional user-centered design.
- Experience-Focused Design – Through extensive research and deliberate execution, persuades the intended audience to perform a desired action and elicits appropriate emotion that makes the experience memorable. True experience design transcends the medium and is the hardest to plan.
User-centered design is, at its core, a philosophy, not a rule. It stands in opposition to three other types of design.
- Unintentional Design – If this occurs, one of two things is true: Either the designer is absolutely clueless or has tried to stretch an architecture designed for one thing to serve purposes for which it was never intended to serve.
- Technology-Centered Design – This occurs when you’re more concerned about “features” on the platforms you already own or have access to than you are how the user could interface with those platforms – and why they would even want to.
- Ego-Centered Design – This is a variation of “Genius-Design” masquerading as “Self-Design.” The difference is that with Self-Design, the designer (whether he be an actual designer or simply a stakeholder who is hijacking the process through the exertion of power, intimidation or influence) actually is the primary user of the design in question. With Ego-Centered design, the designer simply presumes that everyone thinks like him — denying evidence to the contrary.
Getting to Good
There’s an old adage that production managers seem to like to use when estimating a project or allocating resources. It goes something like this: “Quick, Inexpensive and Quality. Pick two of the three.”
(Image credit: Adam Polansky)
Strictly speaking, this isn’t even true. Sometimes you can have only one. There are always limitations with any project. There are always going to be trade-offs, and discovering what isn’t negotiable is part of the process of getting to good design.
That really boils down the design process to its essence. Good design is primarily about solving a multitude of problems: for the user, the marketing group, the IT group, the finance group and the design group.
The value of a design can be broken down to its parts — such as usability, usefulness, desirability, etc., but if it doesn’t solve at least one key problem that synchronizes what your users want and what you provide, it is doomed to fail.
Instrumental to solving these problems is making sure you honestly identify what the real problems are — asking the tough questions up front to make sure you don’t go down the wrong rabbit hole. This requires confronting the uncomfortable truth that you may be using one design method when you mistakenly believe you’re using another.
For Further Reading
1 Comment | Trackback | Categories: 1000 Ft. POV, Research, Tips and Tricks | Email This Post
A good website is designed for two types of people: Those who want to consume every morsel of content on each page and those who don’t. Statistically speaking, everyone at your website falls into the second category. Armed with this knowledge, it becomes imperative that sites be designed to draw attention to the correct areas of the page while understanding that, for each audience you have, that area might be different. Here are 3 principles to keep in mind when planning your website.
1. All audiences are not equal.
A general consumer goods retailer has a number of different audiences, just within the customer base. But besides customers, they must also talk to the community, the press, employees, potential employees, investors and often regulators.
These audiences have wildly divergent needs, but they have one thing in common: they expect your website to be designed to sell general consumer goods, regardless of what need brought them to your website.
Secondary audiences for Target.com do not suffer on account of Target’s decision to cater to its primary audiences. Target was ranked 19th largest online retailer in 2008 with 2007 sales of over $1 billion. Investors and prospective employees don’t mind.
This doesn’t mean your design team can neglect other audiences, it just means they are free to focus their energies on solving the primary business problem while providing access to secondary content in areas that do not disappoint those audiences. Everybody wins.
2. The more it is about, the less it will be understood.
For large organizations, there is often a temptation to try to fit a little bit of everything for everybody on one page. This can work to a degree, and there are a number of companies that have found success with this model (e.g., Yahoo!). Others such as Intel have taken a different approach by segregating the audience outright.
Intel immediately segments the audience without sacrificing its core value proposition that communicates its expertise in the category.
All of these companies understand that too much of anything is a bad thing. Because even though they might want to sell a hundred things, virtually no one will want to buy a hundred things. They just need a clear path to their things.
Some companies, such as Amazon, work through personalization, though this doesn’t appear to help it be “about less.” This goes to show you that what’s right for Amazon might not be (and probably isn’t) right for you.
3. If everything is a priority, then nothing is a priority.
This is typified by the monstrous, undead home pages I described back in October. I blame this common flaw on corporate silos. Everyone seems to believe whatever their responsibility entails deserves top billing, or else no one wants to say “no” to their friends and colleagues.
Does that mean you have to choose a SINGLE element to focus on? Not necessarily. But it is always a good practice to utilize conventions in interface design to emphasize high priority tasks.
Apple’s Obsessive-Compulsive Simplicity
I often hear people exclaiming admiration for Apple.com. Their website is “clean” and “simple” and “easy to navigate.” This is true to a point. It’s not true for my typical usage of their website — if I had to get there through the navigation, anyway — but (among other things) Apple has embraced the 3 above principles very well.
- They know (in my typical usage) I am not their primary audience. This frees them up to focus on those who are.
- They stay true thematically to a singular core message.
- They prioritize each page so its purpose is eminently clear – whether you are the audience for that purpose or not.
This is not true of all of Apple’s products – even the popular ones. But here’s one thing to remember: What works for Apple may not (and probably wouldn’t) work for others in the sense they really want it to. There are very few organizations that can, pound for pound, generate such conversation and, in the midst of it, maintain their message discipline. Much of the communication heavy lifting occurs elsewhere (through PR, marketing, organic word of mouth, etc.), and Apple recognizes that.
Apple leaves no room to doubt what they want you to know about. Apple undoubtedly realizes that not everyone who comes to their website is going to buy an iPad. Not everyone who comes to this page will even want an iPad. That’s okay. It’s not who they’re talking to with this message.
Any organization needs to similarly recognize the space in which they work, the environment in which they live, and the sandbox in which they play. Doing this will give them the wherewithal to make the difficult decisions necessary to prioritize correctly and to conform to principles that allow them to communicate the right message to the right people at the right time.
No Comments | Trackback | Categories: Planning, Tips and Tricks, Websites | Email This Post
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
No Comments | Trackback | Categories: Testing, Tips and Tricks | Email This Post
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
Home pages have historically been a hotbed of contentious debate. Because of this, they are what Steve Krug called “The First Casualty of War.”
Why are they so controversial?
Because everyone wants a piece of the action. Because organizations typically work in silos, different departments feel slighted if their discipline isn’t “adequately” represented on the home page. One would think by all the name-calling and weepy eyes that the home page is kind of a big deal.
And they’re right. The home page is – kind of – a big deal. But not for the reasons people tend to get worked up about. After all, typically, only 40% of traffic to a website comes through the home page.
But as a consequence of their inability to set boundaries and priorities, they compromise the very purpose of the page. Every piece of real estate is up for grabs. The result of all the haggling may actually, as Krug suggests, kill the home page. But unlike a typical dead thing, it doesn’t go away. Like a zombie, it is reanimated into an unrecognizable abomination of its formal self.
You have 1/20th of a Second. Go.
The average time a new visitor (who comes to a site through the home page) spends somewhere in the neighborhood of 30-35 seconds on the page. User research tells us that people form lasting impressions of the quality of a website within 50 milliseconds.
That’s 1/20th of a second. It isn’t nearly enough time to process, well, pretty much anything except, apparently, a lasting impression.
There is one thing that can be processed in that amount of time: The presence or absence of clutter – the very thing that all the haggling over home page real estate tends to produce.
Like zombies, they also slowly suck the brains out of the user – making the home page manifestly harder to comprehend.
The purpose of a home page
To prevent this tendency, organizations and everyone who has a say in how the website is designed must realize what a home page is intended to do. A home page for a typical B2B or B2C site needs to do two things very well:
- Convey the big picture
- Speed people along their way.
Example 1: Hulu does an excellent job providing access to relevant video entertainment while minimizing noise.
This can be challenging for larger organizations that must communicate distinct messages to and accommodate the discrete tasks of many audiences – especially if they don’t have internal buyoff on priorities, or if they do not understand the purpose of the home page in the first place.
Example 2: Although improved from it’s previous version (on right), BravoTV still suffers from a significant lack of focus created by a failure to establish a clear hierarchy.
These organizations ought not rely on the home page to have a message and support each and every task for each and every one of their audiences. That produces clutter, which is enough to form a lasting negative impression within 1/20th of a second.
(As an aside — contrary to popular belief, clutter isn’t the result of simply having “a lot of stuff.” Instead, clutter is the consequence of failing to establish a clear priority and hierarchy. It is created, not by a multitude of objects or content, but by confusion.)
To serve all the audiences – even the important ones for whom the website was not primarily built – companies must ensure enough time and skill is applied to a comprehensive, consistent, and intuitive navigation – most of all from the perspective of all of the intended primary audiences.
Without a commitment to a process that recognizes that, they’re just tilting at the windmills – or worse – fighting a battle against a horde of undead without as much as a zombie survival guide.
Related Links:
Top Ten Guidelines for Homepage Usability
Don’t Make Me Think
How to Kill a Zombie
No Comments | Trackback | Categories: 1000 Ft. POV, Tips and Tricks | 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
What two things do a mother repairer, a brilliandeer-lopper, and an information architect have in common?
- When people ask what they do for a living, they’re all likely answer the question by describing the type of company they work for.
- If any of them throw caution to the wind and answer with the name of their job, the most common response is, “Huh?”
Peter Morville and Louis Rosenfeld, who literally wrote the book on information architecture, explain the awkward social interaction this way:
“Their eyes glaze over. They nod politely. Then comes the desperate attempt to change the subject. ‘Hey, speaking of information architecture, did you hear tomorrow’s weather report?’”
What is information architecture?
Most of us don’t know how to build a house by ourselves, and we wouldn’t even try. Even so, we still provide requirements that affect the end result. We can communicate these needs in terms of the physical structures (e.g., the number of bedrooms and bathrooms) or in terms of our physical and psychological needs (e.g., how much space we need to accommodate a growing family.).
This needs-defining exercise can help the builder decide not only what physical structures to build, but also their relationships. A builder might say, for instance, that the kitchen should always be adjacent to the dining area, or that bedrooms, to ensure the safety of the family, should always be downstairs, or that steel beams should be used instead of wood.
This is sort of how information architecture works. Web designers practicing this discipline must determine, based on the needs of the project, what the constructs (content) are, where they will come from, how they’re created, and the relationships that should exist between them.
How has it evolved?
Unlike in designing a house, however, on the Web it’s possible to jump from one area to a completely different area immediately. It’s even desirable when doing so will help someone solve the problem that brought him to your website in the first place.
Website design is about more than organizing chunks of information logically (which is still an important part of the overall process), but about planning holistic experiences through which people can solve their problems or find something they want or need.
Even though in the early days of the Web, jacks-of-all trades, art directors, or programmers handled these jobs, as websites become more complex, the industry has increasingly looked to specialists to fill this function.
They call them “experience designers,” “experience planners,” and, if they don’t deliver the results the customer wants, some other things that we won’t reprint here.
Much like the architect’s responsibility in building a home, the experience planner on a web project must take multiple problems and communicate the means by which those problems can be solved to various members of the team, and to the stakeholders themselves, not only be describing the structures, but also by defining how they work and the path through which people should and are likely to encounter them.
When you don’t need a specialist
Whether you plan for it or not, experiences get designed. It is either going to be a good experience or a bad one. A good experience reinforces the brand, and a bad experience can harm it. So the short answer is it doesn’t matter if it’s a specialist who designs the experience or someone who wears multiple hats. It only matters that the experience solves the problem in question – a problem that was correctly identified in the first place.
When the problem, solution, and/or risks are relatively small and already clearly defined, there’s usually no need to call in a specialist. Just ask a few average people what they think, and you can pretty much figure out what works and what doesn’t.
Blogs are good examples of websites where calling in a specialist might not be the best use of your resources. They’re pretty straightforward (though if your design team has a tendency to get too clever by half, getting some feedback from a specialist as a gut check couldn’t hurt).
When you need a specialist
On the other hand, specialists are particularly useful for complex projects, because it gives design teams the ability to work out the details of how a site should function before getting into the nitty-gritty details of how it should look.
This way, teams can decide if the way it functions can actually solve the problem before they must decide if it they’re using the right colors or if it’s pretty enough.
Blog platforms are good examples of websites that would be impossible to create but for the work of someone who was an expert at architecting information, it’s flow, and designing experiences.
The ugly truth
Any time you must deal with influencing human behavior, planning any experience around ergonomic, technological, psychological, social, and business requirements with any degree of certainty in a vacuum is tricky (if not impossible).
Therefore, it’s important to do a good job identifying the problems beforehand and to institute continuous testing methodologies to make sure you’re solving the right problems.
Also, a lot of people can have some very good answers – even if they’re not specialists. For even though the industry is recognizing information architects and experience planners as specialists, the truth is that they got there by first being generalists who, at some point in their careers, took an express interest in mastering the art and science of turning abstract concepts into concrete, intuitive, and persuasive solutions.
So the next time you’re on a website – especially a big website – and you’re able to find what you’re looking for, be sure to drop a note to the site’s owner to thank the information architect on your behalf. If you also happened to enjoy the entire experience – you found it intuitive, easy to understand, and even pleasurable – thank the experience planner, too.
And then grin with the knowledge that the people who monitor that kind of communication probably don’t even know what the heck you’re talking about.
No Comments | Trackback | Categories: Uncategorized | Email This Post
The best way to make sure a Web design and development project goes smoothly is to ensure everyone is working toward the same goals. The only way to ensure they’re working toward the same goals is to, early in the project, express the goals in clear, concrete terms and get agreement on them. An effective way to accomplish this is through the creation of use cases.
What is a use case?
Historically, software developers created use cases to define how individuals were expected to interact with a system. They expressed an interaction between users and the software, but from the perspective of the users rather than the system, the programmers, or the programming language itself.
A single use case represented a single task or goal – usually from the perspective of a single user role (called “actors” in geek-speak). However, a single use case could contain several scenarios, which represent variations that could occur in how the system behaves, depending on a specific action or condition of the actor.
An example
For instance, let’s take a look at a simple use case for a word processing application. Say we want to define the printing process. The use case can be expressed in the form of a diagram or in plain text, but either way, it identifies key operations and attributes of the system:
- Who or what is using the operation? (In use cases, the actor isn’t always a person)
- What is the actor’s goal?
- What must the actor do to initiate the process we’re defining?
- What does the system provide in return…
- …when everything is done and set up properly?
…when everything is not done and set up properly?
Consider the implications of the failure to go through this exercise. It would be very easy to overlook the need for the system to identify the conditions necessary for the successful completion of this task, and, if those conditions aren’t met, to provide adequate feedback that lets the user know:
- That an error has occurred,
- What the error was, and
- What steps the user must take to correct it
Ideally, the system would help in this recovery process (e.g., providing a button or wizard to install a printer), but in some cases, it must suffice to tell the user what is wrong in clear language, such as “Your printer is out of paper.”
Don’t laugh. It beats the pants off of some strange error messages we still get from time to time that tell us nothing at all.
Use cases for the Web
Over time, web development teams started to consider a similar approach to website design. They understood that clients were demanding their websites accomplish more. Partially because there were more opportunities for more severe task failure, usability engineers, experience planners, and developers saw the value of introducing use cases for their projects.
With use cases, system designers can define what an actor expects when he comes to a website, what the he must do in order to get the result he expects, and what the system must do, in turn, to deliver that expected result.
And they also must provide for the means to recover from an error. An example of this is in an online shopping cart, where the user has not filled in all the fields or has entered obviously false credit information.
What does the system show in return? Use cases help teams to identify the optimal workflow, provide safeguards that make that workflow the most likely outcome, and anticipate – in spite of those safeguards – what the likely errors are and how to recover from them.
The goals of use cases
Building a book of use cases during the planning stages of creating a website provides several important benefits:
- Helps prioritize. It helps to identify features that provide the highest business value. This is of particular importance, as it helps companies decide what features are most critical to the successful implementation of the overarching business strategy.
- Reduces risk. Each feature takes a certain amount of time to develop. With use cases, it’s easier to estimate how much time (and money) it will take to build a feature. Joined with the budget for the project and the estimate of the value of that feature, it makes it easier to decide which high-risk features are expendable, and which are worth the effort.
- Improves usability. Because tasks are explicitly defined and assigned a business value early in the process, it is easier to anticipate possible obstacles as well as plan an iterative usability test plan. Each iterative chunk should be designed, as much as practical to reduce effort duplication, to test the highest value use cases first, to give the team more time to make improvements.
Web projects will always have a finite budget and a deadline. Use cases help teams establish a common understanding of what user goals are of the highest value to the business and what level of effort is necessary to deliver on the goals. Then it is up to the team to make sure, through their development processes, that the design and interface successfully communicate to the user what they can expect to do and how they can do it.
Ultimately this process helps build better websites that meet the needs of the users and the organization and, through the act of meeting (if not exceeding) audience expectations, endear the brand to the individuals who come to the site.
For more information about use cases:
Use Cases information from usability.gov
Use Case Design for Websites
1 Comment | Trackback | Categories: 1000 Ft. POV, Monthly Point of Views, Planning, Research | Email This Post
No Comments | Trackback | Categories: Planning, Tips and Tricks | Email This Post