Six Revisions » Usability/Accessibility

Getting Users to Sign Up: Factors in Design and Content

Jacob Gube — Thu, 09 Jun 2011 10:00:06 +0000

Conversions can be tricky to accomplish on any website. A conversion could mean more sales, more registered users or simply more engaged users. Having a great product and delivering value to the user are obviously the factors to focus on when you want to increase your conversion rate. But a conversion rate can also be increased with smart design and strong content.

In this article, we’ll discuss how to improve design and content for one type of website conversion: getting users to sign up on your website, whether it’s registering an account for your web app, for an email newsletter, your RSS feed, etc. We’ll go over some design trends and practices that have been proven to improve conversion rates.

Everyone Wants Something for Nothing

Let’s say you’ve stumbled on a website that you know nothing about. Perhaps you were intrigued by an ad banner that pointed to the site. Maybe you read a post on your favorite blog about it and decided to check it out. Or perhaps you landed on the site because of a search query on Google.

You’d like to investigate further to see if you want to sign up. What do you do first?

Naturally, you want to try it out right away! Trying it out is the only way to truly know whether it is worth your time and commitment.

Trials are a strong selling point for increasing conversion rates. Your interest is already piqued; if you try it and it meets your standards, you’ll likely sign up.

For example, one of the top premium WordPress theme sellers, WooThemes, releases a few free themes so that you can get a good look at the quality of their products before signing up for the premium service.

The key is to get new visitors to try out the service, product or community in some way. What are some ways to do this? Some methods may be more effective than others. Here are a few ways:

Provide a limited-time trial version (e.g. 30 days free)
Provide a free or "lite" version, and then ask users to upgrade for premium features
Hand out freebies related to your product (such as a WordPress theme or an e-book with basic information)
Let visitors peek inside to see what registered users are enjoying
Offer detailed product tours, screenshots and videos that tell visitors what they’ll get before signing up

Some site owners may want to follow an established business model in their niche, while others may want to try a few methods and test their effectiveness. Before settling on one, track your current conversion rate metrics:

How many sign-ups are you getting?
What has been the average number of sign-ups in the past few months?

Then, implement the method you’d like to try out, and test the conversion rate for the same timeframe.

Should It Say, "Buy Today" or "Buy Now"?

Some web designers have dabbled in web copywriting. Whether you have or not, we should all pay some attention to the copy on the website we’re working on and be able to tell which content will be effective at increasing conversion rates.

Professional copywriters know how certain words can get more sign-ups, how certain paragraph lengths are more persuasive, and how the writing style and level can be tailored to get the best results.

You could always hire a professional copywriter, but designers should still know the basics. We’re still responsible for the call-to-action elements, even if we’re not actually writing the content. We need to know what will increase conversion rates.

How should a button or link be worded? Should you use "Log in," "Login," "Sign in" or something else? Studies show that consistency and various other factors affect conversion rates. Do you know how to make these decisions?

Introductory sentences, calls to action, sign-up and log-in links, featured content: all of these and more are critical to websites. Even page titles are essential. Anyone who has run a blog knows how changing the title of a post can increase the number of page views dramatically.

So how to you go about figuring out what copy sells? The tricky thing is that it can be different for every website!

One approach is to view trends in your niche. At the very least, this contributes to consistency in style within the niche, which helps usability and findability.

However, a stronger approach is to perform an A/B testing study.

A/B Testing

A/B testing (also referred to as split testing) is a simple yet effective user interface testing technique that can profoundly influence design and content decisions.

The idea is to use two designs (A and B) that have one minor difference: the item to be tested.

Let’s say you have to design a call to action button to get visitors to sign up. Many decisions need to be made:

What color should the button be?
How should it look?
How should it be aligned or positioned relative to the text and imagery around it?
How should it be worded: "Sign up now," "Become a member," "Sign up for a free 30-day trial," or something else?

Some designers might conduct A/B testing for a number of these factors, but that’s not always necessary. The two most important elements are probably the color (or other means of distinction) and wording. Two simple tests can be done to determine what would lead to the biggest increase in the conversion rate, and further tests can be done later on if desired.

After creating two mockups with these minor differences, one can use testing software or even do an in-person test to see which is preferred.

Live testing on a launched website can bring even better results and can be a part of an iterative web design process, although it’s not always an option, such as when the scope of the project ends after the website is live. Some designers might prefer to test the current call-to-action button, modify the design, and then test it again to see if there is an improvement.

Some A/B testing tools:

Images and Icons

Images and icons are a big part of most designs. Beyond adding visual interest, imagery can bring benefits at the psychological level. Icons create points of interest and help to organize and explain features. Photography and illustrations can bring life and personality to a website, making it more relatable. Users are more inclined to sign up on a website if they feel connected to it.

Look at the imagery on any website that requires registration, whether a web app or social network. How is it used? It may be minimal, but it probably still reinforces the tone and feeling of the website. Icons improve user interfaces and help to brand websites. Most importantly, icons and images help to convince new users to become members.

One effective way to promote registration is to explain the process visually with illustrations or photos. The images could either be integral to the demonstration or simply be a visual aid. For example, the illustrations at the top of Basecamp‘s page lead to the call-to-action button.

Simplify the Sign-Up Process

If you want users to sign up, don’t make it difficult for them. One-click registration has long been proven to promote usability and conversions. A long-winded process will frustrate users and make them stop partway, despite their initial interest. Keep forms to just a few fields if possible.

For example, Subernova requires only five fields to sign up, and then the user is given instant access, without even needing to confirm their email address.

While some would argue that email confirmation is essential for combating spam, the conversion rate increases when you lead users to the members section right away.

Instead, consider restricting certain areas or features until the contact information has been confirmed.

Below are some ways to simplify registration.

Make the Username the Person’s Email Address

Having to remember multiple user names is annoying. And any name that hasn’t already been taken will be harder to remember anyway. Because every email address is unique, why not just make that the username?

Let the User Choose Their Password

Don’t make password selection an arduous task. Some sites apply silly restrictions such as a password must be between 7-28 characters long, contain 3 numbers and a capital letter. This type of inflexibility just adds a potential exit point on your sign-up forms.

Require Only the Minimum Amount of Information

If more information is needed, then consider just giving the user the option to update their profile after creating the account.

Likewise, put any information the user will want to know right on the registration page. Tell them up front about the costs, core features and important terms. This will reassure them right on the sign-up page, and they won’t have to leave the page to find the information.

Allow Sign-in Using Popular Authentication APIs

More and more web apps and websites have been allowing new users to sign in with their social media profile. The user’s profile information is automatically filled in, and the person is spared the hassle of having to create yet another account they have to manage and remember.

Using the APIs of these social platforms to allow people to sign in, you can get people started on your website quite easily.

Some popular authentication APIs are:

Many users may find this convenient because:

It’s faster
There is less perceived risk from signing up with an unfamiliar website
The user does not have to remember another username and password combination
Even less commitment is needed to get involved with the website

Another trend is that some applications and websites are using Twitter, Facebook and the like for initial sign-up, providing limited functionality, and then afterwards prompting the user to register for a permanent account in order to access all of the features.

Fortunately, implementing or integrating these web services into your sign-up process is easy, too. Below are a few tutorials to get you started:

By Popular Demand: Social Proof

Social proof is another way to increase site conversions. Who else is using this website or app? Who belongs to the community? Are any users famous or notable? How many satisfied members are there?

A website that looks lonely won’t get much attention. If the website is membership-based, why bother signing up if no one’s there? If an application is set up for viral growth but doesn’t have a lot of sign-ups, then visitors will wonder what’s wrong with it.

Be sure to mention popular brands affiliated with the product and famous users, or just mention the hundreds or thousands of satisfied members.

Basecamp is once again a great example. It mentions the millions of people using the tool, which creates strong social influence. It also uses this figure to lay claim to being the leading project management app.

Whether it meets the needs of all companies or individuals, this social proof makes Basecamp seem valuable and reputable.

What happens if you don’t have any big-name members or a large user base? If you’re just starting up, providing social proof can be difficult. Membership websites must start small and grow gradually in order to gain high-quality attention.

First, reach out to 15 to 20 people who might be interested in testing your website. Get valuable feedback this way before scaling up. This will also get those first few members interacting; if visitors see no interaction or content, they’ll wonder why they should sign up. Focus on launching small first. Then, try out a launch page or invite-only page for the first month or two.

Conclusion

Building up the membership base is a primary goal of many websites, and it’s the main goal of any website that has a community or that relies on sign-ups for profit. Increasing the conversion rate is essential, and there are a number of techniques for doing so. The most effective way is to measure your current conversion rate and then try different things to increase it, all the while measuring the changes.

The designer’s main goal is to combine design and content as efficiently as possible in order to entice visitors to sign up and become members. Mediocre design and poorly planned content is a recipe for disaster, even if the members area is up to standards.

About the Author

Kayla Knight is a web designer and web developer who loves coding way too much for her own good. She does freelance design/development work and helps run the XHTML Shop. Connect with her by visiting her website and following her on Twitter @ KaylaMaeKnight.

Improving Usability with Fitts’ Law

Jacob Gube — Tue, 17 May 2011 17:21:27 +0000

Advertise here with BSA

Back in 1954, psychologist Paul Fitts published an article the detailed his theory on human mechanics as it pertained to aimed movement. It was Fitts’ observation that the action of pointing to or tapping an target object could be measured and predicted mathematically.

Fitts stated that the size of the target object along with its distance from the starting location could be directly measured, allowing him to model the ease at which a person could perform the same action with a different target object.

In 1954, this theory had no application for computers yet; however, it shouldn’t take a modern designer long to discover the powerful meaning this formula has in the context of user interfaces.

Because of this, Fitts’ law has become a staple in the field of human-computer interaction (HCI), and has become one of the most accepted guidelines in the industry.

Fitts’ law, at its simplest form, is common sense. The bigger an object and the closer it is to us, the easier it is to move to.

Fitts’ law is a model that can help designers make educated decisions in user interfaces and web page layouts. It can be used in conjunction with design theories such as visual weight to give user interface items proper hierarchy and placement.

Consider the potential financial gain generated by the proper design and placement of interactive buttons on e-commerce websites (such as add-to-cart buttons). For example, a study conducted on an e-commerce site showed a 34% increase in conversions simply by relocating the site’s add-to-cart button to the left navigation menu. Fitts’ law can be used as an aid to make educated decisions on the size and placement of user interface elements.

How Fitts’ Law Works

Fitts’ law is centered around a mathematical equation that is used to illustrate the time it takes to reach a target object. A target object, in the context of UIs, can be any interactive element, such as a submit button, a hyperlink, and an input field in a web form. The idea is this: The quicker you can reach a target object, the more convenient and easy it is to use.

Here is the equation:

In the equation above:

time is the amount of time required to complete the movement
a and b are empirically determined regression coefficients, which is basically a fancy way of stating they are values gained from direct observation that build a slope.
distance is a measurement from the starting point to the end point (target object)
width is the width of the target object

Note that only the width dimension of the target object is taken into consideration; height and depth is disregarded in a 2D/plane medium such as monitor screens. Therefore, an object that’s 500 pixels wide but only 2 pixels tall doesn’t seem like a usable target object since it’ll be more difficult to click on; use your better judgment and consider replacing width with height if it makes sense. Also, use the model in conjunction with other design theories you already know.

Fitts’ law is applied one axis at a time. However, in user interfaces on a 2D/plane, it’s important to remember that both the height and width of an object play a role in the object’s ease of use.

Bigger Is Not Always Better

One of the most important lessons we can take from Fitts’ law is that, while a larger button is clearly easier to click on, it isn’t necessarily the most optimal. This is counter to what many user interfaces do with their oversized call-to-action buttons and submit buttons.

Bigger items aren’t always more optimal than smaller items in the Fitts’ Law model. Source: elliotjaystocks.com.

Fitts’ law is a binary logarithm. This means that the predicted results of the usability of an object runs along a curve, not a straight line. In web design, this means that a very small object will become significantly easier to click when given a 20% size increase, while a very large object will not share the same boost in usability when given the same 20% boost in size.

The Fitts’ law model is a binary logarithm.

This is great news for designers across all platforms. This non-linear relationship protects our precious and scarce pixels. Our ability to measure gains in usability based on a non-linear increase of size allows designers to build efficient and clean interfaces.

If bigger was consistently better, we could expect to see that "Add to Cart" buttons that take up a significant portion of our screens will be the most usable. Functionally and holistically, we know this isn’t true.

Movement and Distances

Apart from size of the target object, another primary factor in Fitts’ law is the distance between where the mouse pointer currently is and where it needs to be.

Placing key site components far apart will increase the amount of time required in completing sequential tasks in your interface.

We all know that grouping common interface items together is a standard practice in design. It makes finding similar objects easier.

For example, notice how, in the FreshBooks interface, groupings of similar interface elements are created.

We can see Fitt’s law in action most clearly in the New Invoice button. Because of its size, it’s easier to click on. Its location closer to the top of the screen, assuming that the mouse pointer starts at the top of the screen, means that it’s the easiest button to click on. This makes sense hierarchically because this is the primary action you’ll likely want to perform on this screen.

Additionally, the shorter distances between buttons that are similar to each other make them easier to use.

Combine and negotiate the Fitts’ law model with other concepts such as Gestalt principles, power structure for visual hierarchy, symmetry, human behavior theories, etc., and you’ll be developing UIs based on reasonable and scientific design decisions.

What About the Prime Pixel?

The key to optimizing user tasks is to know where the user is coming from before directing them elsewhere. Unfortunately, for web designers, we are already at a disadvantage here.

In HCI, there is a pixel that is more important than all of the other ones on the screen. This super pixel is aptly named the prime pixel, and as such, it yields the most power.

The prime pixel is the reference used for the single point of space that your input device’s cursor is currently on. For every computer interface, the distance of a target object will always be measured by how far it is located from the prime pixel.

Desktop software frequently takes advantage of this concept. For example, in Windows, any time you right-click inside desktop software, a contextual menu of options usually appears that has its point of origin at the prime pixel (as illustrated below).

However, websites lack the native ability to know exactly where the prime pixel is, so a web designer loses out on this power. In other words, the prime pixel’s location is variable since the starting point can be anywhere. Even if you tracked the position of the mouse cursor using JavaScript, you wouldn’t want to constantly move interface items relative to the mouse cursor since that can become confusing.

What we do have, however, are fixed clickable items (such as submit buttons and hyperlinks). We can listen to events such as clicking and hovering on these fixed items using JavaScript. Since interaction on the web is driven by user input, we can make some pretty accurate predictions on where the mouse will be located when a new page is loaded, after a click event happens.

For example, If a user is navigating to a web page in your website via a horizontal navigation bar at the top, we know that the prime pixel for the next web page will be located somewhere in the clickable regions of items in the navigation bar. Assuming the mouse isn’t moved after clicking on a navigation link, we can guess that the last clicked or hovered position of the mouse cursor is the prime pixel for the next screen. This helps a lot in sequential user actions.

This logic may be most powerful in multi-step online processes such as a check out or sign up web form. A web designer should always consider how far the button for the next step of the process is from the last input field, as well as where that will place the user’s cursor when the next screen loads up.

Overcoming "Magic Pixel" Deficiency

While the prime pixel is the most important location point on a computer screen, it’s just one of five "magic pixels" that come into consideration when designing an interface.

The four other magic pixels offered up by our screen come at each of the four corners of the screen.

Web designers are, yet again, at a disadvantage here; for our sake, it almost inverts the purpose of these magic pixels.

The sides and corners of a screen play an intriguing role in Fitts’ law because they provide a boundary that wouldn’t exist in the real world.

Essentially, this provides a shape of unlimited size in the formula resulting in enormous value. Since a user doesn’t have to stop at the right hand corner of their screen, for example, hitting the button that closes the window becomes a very simple task.

However, if the option to close the window were to consume the top right hand corner of the screen but not include the pixels closest to the edge, it would become quite frustrating to use.

Since a website lacks the ability to consume any of the corner real estate, the corners that are available to us go from being the most valuable assets to the least.

Without the feature of a screen edge that creates infinite size, the corners of a website are consistently the furthest points from the prime pixel.

Treat the Center as the Prime Pixel

So how does a web designer overcome the lack of magic pixel power in their designs?

All of the sudden, the corners of our website have become a terrible place to put elements for important behaviors such as login buttons, for example. How do web designers overcome this?

The preferred method now shifts from being side- and corner-focused, to the center of the screen.

If we averaged out the distance the corners of our website have from the prime pixel and compared them to the average distance of the center of the screen, we would find that the center has a distinct advantage.

So web design sees a natural shift from being side- and corner-oriented to being centered.

This makes sense anecdotally: Most people who browse the web on widescreen displays can tell you that they prefer websites whose layouts are centered in the browser, when compared to those that stick to the left or right of the screen.

When your web layout is located at the center of the screen, the user can interact with the browser software and operating system much more efficiently.

Grouping Items

It’s important to keep interface items that are similar in close proximity to each other to reduce the distance between them, and thereby improving usability under the Fitts’ law model. The Gestalt law of proximity, which states that items close to each other are perceived as a group, further reinforces this idea.

For example, your navigation bar should run together, creating a seamless transition between one item and another. Below, while the Home item might retain the same distance from the Blog item to its right, building a gap between them that cannot be clicked decreases the usability of the menu by Fitts’ law, since the distance from the starting point to the target object is increased.

Conclusion

Fitts’ law is a model that should be in the toolbox of every designer, whether they work in digital or physical mediums. The basic logic found in Fitts’ law that insists that meaningful actions should consume meaningful space cannot be ignored.

One of the beautiful things about design theory is that a designer is often welcome to dig into its meaning as deep as they like. A designer who takes advantage of Fitts’ law in usability testing or research will discover valuable information that can directly impact the success of a website.

The model can sharpen your design sense and improve your decision-making. Use Fitts’ law to defend design decisions or introduce a suggestion to relocate certain interface elements when planning a site redesign. It won’t be long before you see how often these core theories can predict effective and usable designs.

About the Author

Jason Gross is a freelance web designer focused on creating clean and user friendly websites. Jason currently lives in Indiana and can be found on Twitter as @JasonAGross or on the web at his personal blog and portfolio.

How Cognitive Biases Shape User Experience

Jacob Gube — Thu, 28 Apr 2011 11:58:00 +0000

Advertise here with BSA

Everyone develops opinions regarding how things should look, how things should behave, and what things should be called. These cognitive biases make up the filter between what actually exists, and what we perceive to be true.

The field of experience design attempts to realize a user’s cognitive biases, or opinions, and rationalizes design decisions that make use of those biases.

If a UX designer or UX strategist does not go through the process of identifying and incorporating users’ cognitive biases into their work, it stands to be misinterpreted, and site goals stand to be unachieved.

What many UX professionals tend to forget is that they also develop cognitive biases that influence the work they produce. If these biases aren’t recognized and accounted for, the produced experience could be optimized for the designer, rather than the user. A common issue in agency life involves catering an experience to the cognitive biases present in the room (the stakeholders), rather than those identified through research and ethnography.

What follows are examples of cognitive biases of site users as well as stakeholders.

Users’ Cognitive Biases

Let’s discuss some cognitive biases our users bring with them when they use our site.

"I know where it should be located"

Users tend to have a preconceived understanding about where certain page elements are likely to be located. For example, many users will look for a sign-in button in the upper right corner of page.

Mint sign-in/login and sign-up buttons are at the top right of the web page, where users expect them to be.

Consideration: Placement of key/common page elements that are crucial to completing critical user flows should be handled with care and purpose.

"I know how it should look"

Users develop preconceived ideas regarding how many page elements should look. For example, a beveled edge on a graphic can give the impression that the element functions as a button.

A call-to-action button with a hover state. Learn how to make it by reading the tutorial.

Consideration: Visual appearance of key elements and groupings of content is important to the user experience. Analogies to physical objects should be adhered to, but should not be taken literally. Principles of Gestalt psychology should be applied in order to compose logical visual hierarchies and content groups.

"I know how it should behave"

Interactions with everyday things — both online and offline — influence a user’s cognitive biases when performing site actions. For example, users will tend to expect linked content to appear in the same format and location as the origin, unless explicitly told otherwise. This applies to PDFs and pop-up windows. If content will appear as a PDF or within a pop-up window, an explicit label should be associated with the call-to-action.

Consideration: Interaction design should be well thought out. Interaction design is often given a back seat to information architecture, but the two must work in unison for an effective site experience. It’s often the job of the web developer to interpret the interaction design. However, the UX professional can create prototypes that illustrate the desired interactions or create a set of interaction design flows and storyboards.

"I know what it should be called"

It’s widely known that Internet users tend to scan web pages for information, rather than reading and evaluating all information offered on the page. This scanning pattern causes users to seek out a keyword or a set of keywords.

For example, users often associate the term "contact us" with all forms of contact information. If the user is looking for a phone number, address, or email address, they’ll be scanning your site for the keyword phrase "contact us".

Techi, a technology news site, has a "contact us" link at the footer of all web pages.

Consideration: Taxonomy and nomenclature is important for taking advantage of this cognitive bias. Using common/recognizable nomenclature and categorization labels is one of the most important parts of UX design.

Often, taxonomy and nomenclature is given a back seat to visual design. Although visual design is very important, it’s not as important as creating the proper taxonomy and nomenclature.

Cognitive Biases of Stakeholders

Clients and project team members also have preconceived notions concerning the user experience. The following are some of them.

"I know what the user wants"

Stakeholders often transfer their own opinions to the user. If the stakeholder behaves a certain way, they often believe it’s a common way for others to behave.

Consideration: How was this bias established? Was it through reason/logic, experience, testing, research or secondhand knowledge?

"I know what the business wants"

It is the job of stakeholders to interpret (and prioritize) the wants and needs of the business. Aligning business needs with customer needs is where a UX professional is required to rely on creativity and social sciences.

There are many different ways (and timelines) for achieving what the business wants. The majority of businesses want their users to be happy, so balancing this with specific use cases will be important.

Consideration: What makes a user happy? Creating a pleasing experience is second only to a usable experience. If you have to sacrifice the experience of 10 people to improve the experience for 1, you’ll need to consider the value of that 1 user.

"I know what’s technically possible"

Stakeholders are often inhibited by their IT or technical team. Redesigns are often undertaken without thinking about "re-platforming" or new technological advances that could support the redesign.

Broken or mismanaged IT systems often inhibit user experiences. This should be much rarer than it is. (See Adaptive Path’s Cake/Cupcake Model.)

Consideration: Which systems govern the core functionality of the user experience? Are there system integration issues across digital properties? What could prevent future scalability?

"I know what best practices are"

UX professionals tend to be egotistical in terms of understanding the fundamental best practices in web design. Understanding that there are multiple ways to solve a problem, and that the most innovative design patterns require out-of-the-box thinking, a UX professional can make recommendations without ignoring the possibility of improving a standard convention.

Consideration: Although there are some fundamental best practices, there are always new conventions being established. They can be used as guidelines, but should not discourage the creation of innovative user experiences.

Summary

With this framework, you can quickly identify key areas you can target for user research and ethnographic activities to derive cognitive bias insights from. These insights should influence your design decisions and help guide your overarching experience plan.

About the Author

Jordan Julien an independent consultant who focuses on user experience strategy, digital planning, social media strategy, and SEO. Jordan has recently worked with clients like VISA, RBC, P&G, GE, Telus, Toyota, Coke, Nike, Critical Mass, The Hive, and many others. You can follow Jordan on Twitter @thejordanrules and see more of his work on his blog.

Usability Testing With Card Sorting

Jacob Gube — Mon, 25 Apr 2011 10:00:21 +0000

Advertise here with BSA

Information architecture is a big component of web design. What order should elements go in? Is there a visual hierarchy that must be followed? What should go where? Is the current navigational structure the most efficient? These are just some questions that a designer faces.

Many designers construct websites based on their own views of how things should be ordered for the best results. This is a step in the right direction — because as a trained professional, you’ll have a good idea of what works and what doesn’t — but for enhanced usability, testing designs and information architecture on users can provide great insights.

Photo by Ivo Gomes.

Card sorting is a usability methodology that has been used by information architects for years to organize web designs and web content more effectively. It involves placing content, groups, keywords and the like on physical note cards and allowing study participants to move the cards into groups to see how the cards can be organized into categories.

Why Use Card Sorting?

Users might not agree with a designer about the way content and design elements should be organized. Information can be organized in a variety of ways. Card sorting allows the researchers to tease out any patterns in the way people organize information.

Card sorting is a free or inexpensive method that can be used to help determine optimal website layouts, navigation structure, wording of website copy, how to arrange blocks of text, and more.

If users tend to expect certain wording, a certain order of information or anything else that has to do with a website’s content, the designer can consider that a trend and leverage it.

Designers using card sorting as part of usability testing should notice trends that could be beneficial. And if trends appear to differ in certain ways, designers can analyze why. Web designs can then be created with this data in mind for usability and the best conversion rates.

Card sorting can have a profound impact on either the overall structure of the website or specific components of the design’s organization.

The card sorting method can help designers answer a number of questions. Here are just a few:

How do the choices of various groups of users (target audiences or demographics) differ?
How might their choices compare to those of the target audience?
Should the information and content on a website be grouped into certain categories?
How many sections should be on the landing page for optimum results?
How should the navigation be designed?
How many categories should there be, and how many navigation levels should be underneath those categories?
What should links, categories and content groups be named for the best results?

Use card sorting during the pre-design process to help answer these and other questions. Design around the answers to create a powerful user experience.

Finding Participants for Card Sorting Usability Testing

To use the card sorting method, participants are (obviously) required. They can be found in a number of ways, including online, through family and friends or through employees and business acquaintances.

Whether you use online participants will be determined by your target audience. For example, if you’re targeting users who are not online or do not use computers much, then they obviously wouldn’t be suitable.

Including Your Target Audience

A website will be effective if it is fueled by the trends and preferences of its intended audience. A website won’t grow in the right direction if the wrong audience is using it.

Card sorting participants should be divided into demographics, predefined for the study based on the target audience. Will users be young or old? Tech geeks or laymen? If there are multiple target audiences, test for all of them.

When looking at the results, notice how they differ, and how they are similar. What results worked best for a mixture of groups?

Types of Card Sorting: How To

There are two types of card sorting: open card sorting and closed card sorting. We’ll take a look at both.

Open Card Sorting

In open card sorting, participants are given cards that have the names of the website’s sections written on them, with no groups or group names for them to be sorted into. They are not organized in any way. The participants are responsible for creating groups and organizing them.

Open card sorting is great for both new and existing websites. It can be used to generate feedback about overall layout, navigational structure and especially names of groups and categories on the website. It can also solve or prevent problems that arise from the information architecture.

What names do the participants choose for section titles? Are there any trends? Observe how participants view and refer to the content. Doing this can prevent you from using confusing wording or providing confusing direction.

What is the average number of categories created by participants? If there are too many, perhaps the content was confusing or not relatable, or perhaps the website needs extensive multi-level navigation. If the content was organized into only a few categories or groups and there could have been more, why is this? It’s likely that users wanted this type of content to have simple navigation.

Were there sub-categories or sub-groups? How many? How basic or extensive was the top-level navigation compared to the deeper levels of organization and navigation? If there are inconsistencies in this area, perhaps the content or content types are too loosely defined.

Does the content flow logically? For example, an e-commerce system might be set up like this: Browse Products >Find Product Page > Description and Reviews > Check Out. A blog’s navigation would be simpler: Browse Titles > Post.

Closed Card Sorting

With closed card sorting, participants are asked to place content into preexisting groups, categories or sections. The most efficient method is to provide participants with basic top-level groups and let them go from there. Subgroups can be provided for more detailed testing.

You could also have a mixture of open and closed card sorting. Provide participants with primary group sections, and allow them to create subgroups as they see fit. This method is perfect for existing websites that need to fit new content without rearranging the primary navigation and existing content.

First, create primary groups for the participants. They can be based on the existing website structure or determined specifically for the study.

Then, supply cards or notes that have content categories (like those below) listed on them, or choose specific titles (such as from articles or blog posts) for participants to use when organizing the info.

Closed card sorting has many of the same benefits as open card sorting. Whether or not an existing website is involved, this method can be useful for the following purposes:

Test whether group names are well defined and understandable.
Determine whether there are too many or too few group names to accommodate all of the content.
See whether users arrange content differently when given different group titles, a different order or a different quantity.

Creating Website Layouts with Card Sorting Data

Creating layouts and determining order can be difficult for designers if they don’t know much about the content. A designer might only know how much space is required for each piece of content, based on image widths, content capacity, length and so on.

But where do users prefer the content? How big or small should those content areas be?

Card sorting can answer these questions as well.

There are a few easy ways to choose hierarchy via card sorting:

Place names of groups or content types on cards, and allow participants to place them in order of importance or in the order they’d want to see the content. No need to tell participants where to place sections in a wireframe; just ask them to order them as they see fit. Afterward, designers can use their skill to craft a suitable hierarchy based on the results.

Give participants a blank template, and let them fill it in. Either method (open or closed) can be used. Either serve the content in existing groups and let participants place cards on a blank page wherever they want, or let them organize content into their own groups or even free of groups. Then analyze the results. Are there patterns? What is where, and why?

Give participants an existing wireframe or web design, and let them rearrange the content. This is a great option if an existing template needs to be adhered to but content needs to be rearranged or added. Allow participants to use the current wireframe and put content where they feel it should go. Note patterns, trends and usability issues.

Card Sorting Case Examples

In addition to reading about methods, we designers can also learn more about card sorting and best practices by looking at examples.

Look into design practices, how data can be analyzed and how the process can effect the final website. There are plenty of case studies and tutorials for using the card sorting method on web projects. Below are just a few.

Design of SunWeb, Sun Microsystems’ Intranet

This is an old card sorting study, done for the 1994 redesign of SunWeb. It covers the practices and methods of card sorting that gather information about users’ preferred content placement and the layout and structure of this website.

Card Sorting for NTEN: Behind the Scenes

Beaconfire had the opportunity to redesign and reorganize the website of the Nonprofit Technology Network. It covered the project on its blog in a number of posts, the first being the planning stage, which included the card sorting method. This case study covers how Beaconfire divided its information into groups and prepared the study for participants, how it divided the audiences and, finally, how the results were analyzed.

Drupal.org: What We Learned From the Card Sort

Leisa Reichelt has written a case study about how her team used an online card sorting tool to reassess Drupal.org and gather information from 200 random participants. She then discusses how it helped the overall project and what she learned specifically from this study.

Eurostar Card-Sorting Case Study

This case study and review was published after the Eurostar website was created. Eurostar is a high-speed train service that is available in many regions of the world. The website’s content, of course, was extensive, and organization would have been difficult without the help of card sorting. This article goes over how Eurostar organized groups, found and organized participants, and collected and analyzed data for use on the website.

A Case Study Illustrating the Card-Sort Technique (PDF)

This case study explores something a bit different from organizing content for a standard website. This card sorting study was meant to help organize and re-establish the content of Cornell University’s online library system. The study helped to reorganize the application and its contents so that it could help students and other users find what they needed quickly and easily.

Card Sorting With OptimalSort: A Case Study (Abridged)

This case study deals with a government’s online information for a retirement system. The article covers basic card sorting methodology and provides examples and statistics of the results that came from using card sorting to organize data. This case study used OptimalSort, an online tool.

Card Sorting Study: Understanding How Users Categorize Home-Buying Information

This case study was done for a large realty website that not only offers static information about the company but also lets visitors find homes and home-buying information. The study explores the process of the card-sorting study and the resulting benefits.

Card Sorting Tools

As we now know, traditional card sorting involves placing content, groups, keywords and the like onto physical note cards and allowing study participants to move the cards into groups or create a hierarchy.

This method is useful if participants can easily be found and brought together, but there are also many online applications and tools for hassle-free card sorting studies. Below are just a few.

OptimalSort

OptimalSort offers a quality card-sorting and usability-testing service for a monthly fee. Create cards and options, and then send a link to the study to chosen participants. Or tweet the link and get random participants who are willing to help you out. The application offers real-time results and graphs, and the interface is sleek and smart.

WebSort

WebSort is another online application with which designers can create card-sorting usability tests and send a link to the public or to chosen participants. It also has a great interface and calculates results and graphs just like OptimalSort. WebSort, however, has a unique drag-and-drop interface to simplify organization.

User Zoom

Pre-organize data into groups and sub-categories. With User Zoom you can have unlimited participants, and there is an option to include your own questions (such as, Why did you choose to place this content here, or Why did you group these items like this?). Tailored questions will get direct answers from participants and help you analyze their thought processes and improve the user experience.

xSort

xSort is an application for Macs that creates a drag-and-drop interface for card sorting that mimics physical cards. It also calculates and presents the results for you to use on screen or print out for future reference.

CardZort

CardZort, a standalone application for Windows, Mac and Linux, offers a simple approach to digital card sorting. Two programs are available: CardZort, the standard drag-and-drop card-sorting application, and CardCluster, which works with CardZort to create a detailed cluster analysis of the results. This lightweight tool is a great free option that gets right to the point of traditional card sorting.

Card Sorting Resources

Conclusion

With just a bit of planning and testing, we can learn a lot about our target audience and how users view and use websites. Card sorting is one of the more popular methods for figuring out hierarchy, navigation order, layout order, title naming, link wording and more. It is also a simple technique that, when analyzed, can help a designer learn a lot about a project and their own design strategies and habits.

Feel free to share other techniques and tools for card sorting in the comments section, as well as your experiences with methods like this. Have you ever used card sorting? Have you used another method to get similar results?

About the Author

Human Behavior Theories That Can be Applied to Web Design

Jacob Gube — Tue, 16 Nov 2010 11:00:40 +0000

Advertise here with BSA

Humans are logical creatures, and as surprising as this might be, when we visit a website our minds make a series of decisions that affect the actions we take. The ability to reason enables us to form judgments, reach conclusions and make decisions. If, on the web, we weren’t able to think on the spot and then take action, we would trap ourselves in crippling situations of mindless clicking.

Behavioral psychology is an advancing field, and we web ninjas need to understand something about psychology in order to make usable websites. If we understand human needs and emotions — how we interpret what we see and how we choose to act — then we will better understand our site users. We’ll be able to choose and create meaningful layouts, typography and colors.

This article is no substitute for a degree in psychology (so don’t give yourself an honorary Ph.D. after reading this). Also, the items mentioned here don’t account for every circumstance, because no two people are the same. Yet by understanding the theories outlined below (there are no hard facts in psychology, just theories), you can better understand how your design work will be perceived and used.

Empowerment and Maslow’s Hierarchy

Giving your visitors a sense of growth and increasing their self-esteem is essential. One of the main problems faced by Facebook, YouTube, Twitter and many other social networks is how to get visitors to participate and feel that they are welcome and safe.

The "silent visitor" (or lurker) has existed for many years and makes up the majority of people who visit the average website. This type of visitor usually isn’t socially inclined; a number of your audience members will not go any further than to visit and read, which isn’t very encouraging if you want to establish a community.

StumbleUpon encourages people to make friends and invest themselves socially.

For a design to work, it must meet the needs of visitors–although what’s important to visitors is up for debate and could drastically change from project to project. Some needs cannot be met before other needs have been addressed.

The most famous theory about what humans require in order to reach their "pinnacle" — the point where they decide to participate — was posited by the humanist psychologist Abraham Maslow in the form of a "hierarchy of needs."

Maslow defined levels of importance that reflect how and what humans prioritize, as well as what they require in order to appreciate their surroundings and achieve personal growth (or "self-actualization").

Based on his concept, I’ve created one related to web development: The hierarchy of website user needs. They’re listed below in order of importance.

Accessibility: The website can be found and used by all people.
Stability: The website is consistent and trustworthy.
Usability: The website is user-friendly.
Reliability: The website is consistently available, without downtime.
Functionality: The website offers content, tools and services users value.
Flexibility: The website adapts to needs and wants of users.

The hierarchy of website user needs.

Fundamental expectations of visitors include being able to find the website, to browse around it effectively, to return to it easily and to use the available services and content.

Adapt to the needs of your users whenever possible. If the hierarchy of website user needs fails, it will severely hinder the user experience. Examine, then, the factors that affect experiences, and learn how to reduce the risk that primary needs will go unserved.

Attractiveness Bias

Web design — and specifically the visual aesthetics of a web design — is not a case of "fatal attraction," nor is it the be-all and end-all of a website’s success (as shown by big websites that have mediocre visual aesthetics). But beauty is attractive to humans. Psychologists surmise that humans have a cognitive bias to attractive people and things.

Content is, of course, the most important part of the website; it’s the personality that lasts after the design has worn off.

The attractiveness bias theory simply states that a good-looking design will draw more attention than a poor design. Once viewers get over their first impression (which is always important), they’ll be content and comfortable, and that will increase the likelihood that they’ll visit again.

The principle behind this theory is that humans are naturally attracted to beauty. And yet, content (the personality) is what matters — it’s the foundation of your long-term relationship with visitors — but the attractiveness of the design (the exterior) is what will get you noticed.

Beauty becomes less important when people learn what’s underneath, and with websites, what should be underneath is quality content.

Status, though, is an exception to this rule: If you’re famous, you can make the website as ugly as you like and visitors will still flock in droves. This is called brand recognition. Look at celebrated usability expert Jakob Nielsen’s website, for example.

Jakob Nielsen’s website.

Some believe that design does not affect the overall impression made by a website, but attractiveness bias theory indicates that, while the content of a website is important to regular visitors, the "wow" factor is responsible for creating initial appeal.

Make your website look professional and beautiful, but make sure that it doesn’t overrule the hierarchy of website user needs. If you accomplish this, then your website should naturally attract even those visitors who are quick to judge quality by appearance (which happens a lot).

Once you’ve convinced people that the website is visually solid, then the content’s integrity will shine through.

Serial Positioning Effect

The placement of information affects how well it’s remembered. Lists, charts and tables are useful because they break large clusters of information into manageable, comprehensible chunks. Organized information stands out from blocks of heavy text on a website.

In lists, the first and last pieces of information will be most easily recalled. The beginning and end are, in our minds, naturally significant, and therefore the text in those locations will appear to be more important than other text on the page.

Yahoo Answers uses small content blocks to facilitate memorization.

The serial positioning effect, proposed by Hermann Ebbinghaus, proposes that the ability of people to remember something accurately varies with the item’s position in a list. In web design, this most closely relates to visual hierarchy.

When people browse the web, looking through pages and pages of information, they typically commit less than 10% to memory (and only 1% if they are looking for a key phrase or definition). Find helpful ways to present your information, and you might make your website and its content memorable.

Depth of Processing

Depth of processing (or levels-of-processing) is a term that refers to the level to which information has to be processed in order to be committed to memory.

Engage your users, and ensure that they read important details carefully by asking them about it afterwards. Remember those exams in school that tested whether you had retained the course material? Tests are feared by many, but there is science — go figure — behind the methodology.

At the end of a W3Schools tutorial, a basic quiz is offered to reinforce knowledge.

Users do not want to be hassled with questions or have their browsing interfered with (which is perfectly understandable) so put simple mechanisms in place (such as an "I accept" button in a license agreement). Find a balance between subtle awareness and intrusiveness.

Use checkpoints and reviewing mechanisms to ensure your visitors are learning what they need to know. For example, asking questions at the end of an e-store checkout process and repeating important warnings can help users process the information you are providing.

If your website provides educational information, a quiz or method of testing knowledge could serve as an interactive memory aid. Even asking a pointed question at the end of a blog post (such as Do you have any tips to share about the subject?) encourages users to critically think about what they just read.

Finding the balance between helping someone remember key pieces of information and annoying them or getting in their way can be tricky. Use your best judgment to decide at which points images, interactive elements or other processing aids would be useful. From quizzes to images to humor — so many options are at your fingertips.

Fitts’s Law

Fitts’s Law models human interaction with computers. It states that the time and effort required to reach a target depends on the distance and size of the target. In web design, it is most relevant when designing the degree of usability of user interfaces.

To a great extent, websites determine how easy it is for users to achieve their goals. Certain layout structures can become an obstruction. A classic example of an obstruction is a clickable element that is so small that it requires precise movements and targeting to click (such as a small hyperlink text viewed on a mobile device).

The issue of objects with small clickable surface areas is significant especially in mobile devices.

Fitts’s Law states that the smaller the clickable area, the longer it will take to activate. The longer something takes to activate and get to, the lower its usability is.

Make the surface area of interactive items on your website sufficient in size. Take advantage of gesture movements on touchscreen devices, and ensure that pages can be zoomed and text enlarged. Removing barriers to access, especially for users with impaired motor skills, is important. Anything that detracts from the experience could cause visitors to run away.

Cognitive Load

The amount of time it takes to accomplish a task increases with the amount of tasks given to a person. Cognitive load is a term that describes how our learning performance is reduced when we have many things we have to do at once.

To put it simply: the more tasks we give users, the slower they are able to finish a task and the more confused they will become. Usability consultant Steve Krug, in his book Don’t Make Me Think!, illustrates this theory by using the idea of "goodwill" and gain and loss.

Keep things quick and easy to follow and your visitors will get what they want faster. Smartly laid-out designs are among the easiest to use and receive the most positive feedback. Using your website should be effortless.

The Zombie Browsing Effect

We’re not talking about characters from a George Romero movie. Zombie visitors target what they seek and don’t get distracted by other items on display at a store or on a website.

As people get used to a website, the zombie effect becomes more likely; as in a supermarket, once you know what goods you want and their location, you don’t spend much time looking elsewhere. This explains why stores sometimes change their layouts; it exposes existing customers to new goods.

You don’t want to be a one-hit wonder; you want to encourage users to explore your wares so that you can increase sales. Zombies avoid exploration by ignoring their surroundings and merely following their primal instincts. That’s what I call brainless buying habits!

Overcoming the zombie problem can be quite a challenge. You don’t need to whack them on the head like in the movies (although that might help); rather try getting their attention and engaging them with distinctive design. For example, thoughtfully-placed and distinctive elements could garner the user’s attention.

While searching a website like Amazon, our field of vision is limited to specifics.

If everything on the page is somehow important, decide which sections you most want to promote–streamlining content will streamline traffic. Too many advertisements and too much content and clutter will cause the zombies to raise their defenses and ignore all messages; their brains will shut down completely.

Single points of interest attract attention, and if the item is relevant to visitors, they might spend time exploring it. Allowing people to customize your website according to how they prefer to browse (as iGoogle and the BBC do) can discourage the zombie effect, because people will be attracted to the relevance of the content.

Conditioning Models

In psychology, the term conditioning refers to the process of instilling predictable behavior. Classical conditioning modifies involuntary reactions, whereas operant conditioning modifies choices (or the likelihood that the subject will make a certain choice). Both are relevant.

Classical conditioning becomes relevant to web design when we think about visitors closing pop-up windows or turning the volume down on a website’s background music. Some reactions are natural, but many of them are conditioned by experience. These are called learned behaviors.

Behaviors are learned when people experience the same thing or similar things repeatedly. In web design, conventions, trends and patterns are responsible for learned behaviors and help users associate events with likely outcomes. Thus, a range of possibilities emerges — emotions can be leveraged to improve conversions, for example.

The learned behavior to a "Page not found" error message is to click the "Back" button.

Instead of trying to override natural behavior, streamline your website by adapting to them. A natural or learned response requires less cognitive power than a response to a new experience — say, when the user faces a change in the layout. In the latter case, the learning curve is increased significantly, primarily because training oneself to suppress a natural response is a lengthy process and can take years — and it might not be worth it. Trying to classically condition Internet users is like swimming against a fierce tidal wave.

Now let’s consider operant conditioning. Operant behavior is the behavior of an agent — that is, someone who chooses rather than reacts. The agent learns by trial and error, and patterns of behavior are created by learning to anticipate outcomes.

One method you can use to affect operant behavior is called priming. Here’s simple example: if you invite website visitors to "Contact us if you need help," a visitor will feel the need to contact you once they have exhausted their own means of accomplishing their task. If you hadn’t suggested it, they’d be less likely to think of it as an option.

By showing off important features, Get Glue primes visitors to use its services.

Operant conditioning employs methods of positive and negative reinforcement (reward and punishment). What does this have to do with web design? Ensure that actions that benefit your website, like visitor comments, are rewarded and that negative ones, like spamming, are punished. Loyalty is in short supply and can fizzle quickly if participants feel they are being treated unfairly, so be fair and make sure that users know you’re trying.

When it comes to the underlying features on a website, conditioning is a lot subtler and requires less explanation. Websites that have calls to action — such as buttons that encourage users to download a piece of software or a friendly message that asks people for information — will prime users to perform the relevant action. If the results are beneficial, then users are likely to repeat that behavior.

Conditioning takes time, and people will comply with fair rules if they feel they have reason to. By using operant conditioning you can encourage visitors to change their perception of your website and even go along with the behavior of the majority (although some people might defy conditioning for other reasons).

Coca-Cola uses positive reinforcement: a reward system is in place for customers.

A person’s behavior has so many contributing factors that trying to understand it can be a real challenge. Being aware that behavior can be altered (with the right incentive or by addressing certain issues) might be key to keeping your community alive.

Ultimately, you can’t force people to do your bidding, but you can give them reasons to visit and instill in them the desire to return. The encouragement of a community is a powerful psychological force.

Conclusion

In almost everything we undertake as web designers, psychology plays an important role. Whether the influence is subliminal or explicit, and whether you leverage common trends and conditions, understanding the experience of the audience and their perception of your web design gives you a great advantage.

Sources and Further Reading

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

Privacy and the User Experience

Jacob Gube — Tue, 09 Nov 2010 11:00:39 +0000

Advertise here with BSA

The privacy issue is an often-neglected aspect of designing user experiences. All too often in today’s information-driven society, we who work on the web sacrifice privacy and submit our users to violation or intrusion. In this article, we’ll discuss certain privacy-related concerns — in particular, how asking for too much information can degrade the overall user experience.

Our Thirst for Information

Why is privacy such a hot topic? Look at social networks such as Facebook (whose privacy settings are notoriously complex and ambiguous): the amount of user data that is either being made available publicly, sold without the user’s knowledge or is visible because of a security breach is increasing. We as site owners and site builders are responsible for the transactions and activities that occur on our sites. We’re the "guardians" of our users, and respecting their privacy is important.

Many people use PayPal to ensure that any breach of their website doesn’t compromise their users’ data.

The predominant concern about privacy is that websites often ask for more information than they need. How many times have you been forced to sign up for an account just to access certain information? How many times have you been asked for personal details when the transactions don’t require it? Websites of all scales and sizes are guilty of this, and it’s time to address it.

Twitter doesn’t make its users submit a ton of information. Excellent work, guys!

In addition to the concerns about the amount of information being harvested by websites, there are concerns about storage and how websites deal with information once they get it. A user’s experience of a business and its services will only be as pleasant as the business is trustworthy. Treat visitors with respect and remove barriers to access (such as multiple data requests and spam), and you’ll improve usability — and empower your audience in the process.

The Value of Knowledge

We, as users of websites, typically "sell" our personal information to whoever asks for it, whenever they ask. What’s your shipping address? We’ll also grab your IP address while we’re at it (We’ll do it secretly after you submit this web form). What’s your date of birth? How much do you make a year?

One could argue that we, as a society, are devaluing identity. Knowledge is power, and anyone who knows details about someone else — details from which they could benefit or profit from — has a leg up on the competition.

We certainly shouldn’t manipulate our users or cash in on their data without their explicit consent and knowledge (e.g. Check this box if you’re OK with us selling your data to anyone; we’ll make $7.99 from selling your data). Quite the contrary: visitors will value our website if we ensure that their information is secure. Trustworthiness is rare and, for that reason, a valuable asset.

Tracking visitors’ habits is a debatable practice, but it can help us enhance the experience.

While the data that we harvest from users allows us to target them much more purposefully and give them a better user experience, we can still reap long-term value despite restricting ourselves to minimal data (i.e. personal details). Analytic tools, detection scripts and the logging of IP addresses all hold great benefit to site owners, but they must respect the privacy of users if they want to maintain that experience.

We’re discussing value and trust here, and you’re probably wondering how this relates to user experience (UX). The answer is simple: trust and confidence are essential components of the experience that users have on your website and with your brand. Trust and confidence are critical to turning one-time visitors into long-term customers. If your business lacks the trust and confidence of users, then they will be reluctant to use your website.

Progressive Disclosure

If privacy problems can be so detrimental, what can we do about them? Presumably, you want to offer visitors a hassle-free experience, one in which they feel safe. A simple way to satisfy privacy concerns and remove barriers to access is by following the principle of progressive disclosure; that is, asking for and using information only when absolutely necessary.

The basic goal of progressive disclosure is to ask for the minimum amount of information. As users interact with the site and encounter something that requires them to divulge more information, that’s the only time the site should ask for it. Users should have the choice not to provide the requested information (and thus may not use that feature of the site).

Take for example, Amazon.com. First-time visitors can browse the entire site without giving out any information. (A bit of an awkward example, just because Amazon.com drops cookies to track users that aren’t signed in — but that’s a conversation for another day.) If the visitor finds an item she likes and would like to put it on her wish list to bookmark for later, that’s the only time Amazon.com will ask her to sign up for an Amazon.com account. When a new customer signs up, all they need to provide is an email address.

The new or existing customer signup form on Amazon.com.

Finally, some months later, the user comes back to Amazon.com, ready to buy the item she placed on her wish list — this is the point where Amazon.com will ask for her shipping address and payment information.

The key concept to remember in the Amazon.com example is the progressive disclosure model for acquiring user data: A website should not ask for all the data up front. Let users progressively disclose their information as they use the site.

If a visitor is registering an account on your forum, don’t ask for their phone number or home address. If they’re paying for goods online, you don’t need to know their sex, tax bracket or marital status. Online stores commonly make the mistake of asking for credit card details even when the visitor is just window-shopping. People want to fill their cart with items before checking out and entering their credit card information.

Be sensible about when you ask for information: request it progressively, and only when it becomes necessary.

In addition to restricting your private information requests, consider how you present the requests you make, which could lower barriers. People waste a lot of time fumbling through complex forms that annoy them to no end; our job as web designers is to make such tasks simple. If you need users to fill out a huge form, break it down into progressive (and thus less daunting) goals to improve readability and reduce anxiety.

Breaking Down Barriers

The key to success is removing a website’s barriers to access — all barriers, whether related to accessibility, usability or function. Make your website glide, not grind. Two core principles come into play here; principles by which we can satisfy our own thirst for data while still being responsive to our users’ needs. The principles also suggest methods for helping visitors find what they’re looking for on our websites.

The first principle is more choice, fewer options. While you’ll want to avoid extremes, minimalism and reductionism are powerful in their ability to give shape to information and to remove excess from a visitor’s line of sight, thus improving the company-customer relationship. Offer clear choices and remove ambiguous input fields, and you’ll increase the likelihood of getting responses.

The second principle is education. The need to be transparent and sensible with users has never been greater. Privacy laws exist so that websites take steps to protect the safety of visitors and promote awareness of how user data is handled (data protection laws serve the same purpose in some countries). Posting clearly written and comprehensible (i.e. not too technical) policies in a visible place on your website can put visitors at ease, as can explaining the measures you’ve put in place to enact those policies.

Educate users about what they’ll be "giving up," and help them avoid nasty surprises.

It never ceases to amaze me how we web designers — who would never trust a web host that doesn’t explain how it stores our sensitive data (user records, registration information, etc.) — are so quick to ask our own users to hand everything over with a mere "Trust me!"

Invisible Data-Mining

The last topic we should discuss is the issue of invisible data-mining (which includes recording IP addresses, using cookies, storing sessions, even using analytics software). Invisible data-mining might seem harmless enough to us professionals, but that doesn’t allay the concerns of users.

Spam is a serious issue; intruding on an inbox won’t win the person over.

Invisible data-mining encroaches on ethically questionable territory. I don’t want to preach about what one should or shouldn’t do with respect to procuring and using data; education and awareness solve most problems. In the end, though, more websites and designers should allow anonymous browsing (where sensible) and make cookies and usage-tracking optional: leave it up to the visitor.

Many people will immediately retort, "The data is harmless" or "They can easily delete the cookies." The point is that, while such tools can improve a website’s UX through site improvements resulting from analysis of site activity and traffic, they shouldn’t be used against the visitor’s wishes, and the onus shouldn’t be on users to opt out (as is the case with spam).

Value Your Users’ Data and Privacy

My purpose was to highlight the importance of trust, which gets compromised when user privacy is handled poorly. Know your visitors’ expectations of privacy, as well as the most current methods of handling data and the lawful ways in which data can be collected and used. You might help to dispel some of the anxiety and contention that currently afflicts users and governments. The future of the web almost certainly depends on our methods of dealing with privacy, so taking the issue seriously right now is crucial.

"User experience" is a funny term, and it can be looked at in a number of ways. The lesson to remember, though, is "Value your users." If an element doesn’t enrich the experience or encourage users to continue, your efforts will have been wasted. If your website breeds distrust, then you will certainly lose customers and possibly erode the public’s regard of the web as a safe place to store data. As web professionals, we must value our users, recognize their worth and treat them with respect.

About the Author

Information Architecture 101: Techniques and Best Practices

Jacob Gube — Mon, 18 Oct 2010 12:00:50 +0000

Advertise here with BSA

Information architecture (IA) is an often-overlooked area of website design. Too often, as designers, we just let the CMS we’re using dictate how content for a site is organized. And that works fine as long as the site fits perfectly into the narrow content formats most CMSs are designed around.

But too often, a website’s content breaks the boundaries of most CMSs. Without a clear understanding of how information architecture works, we can end up creating sites that are more confusing than they need to be or, at worst, make our content virtually inaccessible. It’s a shame, considering that the basics of good information architecture are no more difficult to learn than the basics of good web design.

This guide covers the fundamentals of information architecture for organizing website content. We will look into popular IA design patterns, best practices, design techniques, and case examples.

Information Architecture Design Patterns

There are a number of different IA design patterns^[1] for effective organization of website content. Understanding these IA models will help you pick the most appropriate starting point for a site’s information structure. Let us talk about five of the most common website IA patterns.

Single Page

The first pattern is the single page model. Single page sites are best suited for projects that have a very narrow focus and a limited amount of information. These could be for a single product site, such as a website for an iPhone app, or a simple personal contact info site.

Flat Structure

This information structure puts all the pages on the same level. Every page is just as important as every other page. This is commonly seen on brochure-style sites, where there are only a handful of pages. For larger sites with a lot more pages, the navigation flow and content findability gets unwieldy.

Index Page

A main page with subpages is probably the most commonly seen website IA pattern. This consists of a main page (we know this more commonly as a "homepage" or "front page"), which serves as a jump-off point for all the other pages. The subpages have equal importance within the hierarchy.

Strict Hierarchy Pattern

Some websites use a strict hierarchy of pages for their information design. On these sites, there will be an index page that links to subpages. Each subpage (parent page) has its own subpages (child pages). In this pattern, child pages are only linked from its parent page.

Co-Existing Hierarchies Pattern

As an alternative to the strict hierarchy, there’s also the option of co-existing hierarchies. There are still parent and child pages, but in this case, child pages may be accessible from multiple parent pages/higher-level pages. This works well if there’s a lot of overlapping information on your site.

Best Practices for Information Architecture Design

Image by Al Abut

There are a number of things you need to remember when designing the information architecture of your site. Most importantly, you need to keep the user experience at the forefront when making choices about how best to present and organize the content on your site.

Don’t Design Based on Your Own Preferences

You are not your user. As a designer, you have to remember that site visitors won’t have the same preferences as you. Think about who a "site user" really is and what they would want from the site.

Research User Needs

Researching what your users need and want is one of the most important steps in creating an effective information architecture. There are a number of ways to go about researching user needs. You could get feedback through interviews or experiment with A/B tests and other usability testing methods prior to launch (beta test phase) to see if users are able to navigate your site efficiently.

Once you know what your users actually need — rather than just your perception of what they need — you’ll be able to tailor your information architecture to best meet those needs.

Have a Clear Purpose

Every site should have a clear purpose, whether that’s to sell a product, inform people about a subject, provide entertainment and so forth. Without a clear purpose, it’s virtually impossible to create any kind of effective IA.

The way the information on a site is organized should be directly correlated to what the site’s purpose is. On a site where the end-goal is to get visitors to purchase something, the content should be set up in such a way that it funnels visitors toward that goal. On a site that’s meant to inform, the IA should lead people through the content in a way that one page builds on the last one.

You may have sub-goals within a site, requiring you to have subsets of content with different goals. That’s fine, as long as you understand how each piece of content fits in relation to the goals of a site.

Use Personas

Image by Nicolas Nova

Creating personas, a hypothetical narrative of your various website users, is another great way to figure out how best to structure the site’s content.

In its very basic form, developing personas is simply figuring out the different types of visitors to your site and then creating "real" people that fit into each of those categories. Then throughout the design process, use the people you’ve profiled as your basis for designing and testing the site’s IA. To learn more about personas, read Webcredible’s guide to personas.

Keep Site Goals in Mind

It’s important that you keep the site’s goals in mind while you’re structuring content. Pick the right IA pattern for those goals. Use goals to justify why the information structure should be the way you designed it.

Be Consistent

Consistency is central to exemplary information architectures. If eight of your nine informational pages are listed in a section, why wouldn’t you also include the ninth page there? Users expect consistency.

The same goes for how information is structured on each page. Pick a pattern and stick to it. If you deviate from that pattern, make sure you have a very good reason to do so; and make the deviation is consistent in similar cases. Inconsistencies have a tendency to confuse visitors.

Methods and Techniques for Information Architecture Design

There are a few different approaches commonly used for information architecture design. Let’s go over some of the most popular methods and techniques.

Card Sorting

Image from Manchester City Library

Card sorting is a low-cost, simple way to figure out how best to group and organize your content based on user input. Card sorting works by writing each content set or page on an index card, and then letting users sort them into groups based on how they think the content should be categorized.

There are several types of card sorting methodologies.

The basic method starts out with cards in random order and users sort them in the way they think they should be grouped. In reverse card sorting, the cards are pre-sorted into groups, and users are then given the task of rearranging them as they see fit.

Open card sorting lets users name the groups they’ve created for the cards, while closed card sorting will have group names in which the participant places the cards into.

Wireframes and Prototypes

Basic wireframes can do a lot more than just give us an outline of the design layout of a site. It also informs us how content will be arranged, at least on a basic level. Putting content into wireframes and prototypes gives us a good sense of how the content is arranged in relation to other content and how well our information architecture achieves our goals.

When you’re wireframing, and especially when you’re prototyping, you should be working with content that at least resembles what the final content of the site will be.

Site Maps and Outlines

Site maps are quick and easy ways to visually denote how different pages and content relate to one another. It’s an imperative step that "mocks up" how content will be arranged.

These content outlines show how all the pages on your site are grouped, what order they appear in, and the relationships between parent and child pages. This is often a simple document to prepare, and may be created after a round or two of card sorting.

For existing sites or content that must be placed in a website, a content inventory is usually the prelude to this phase.

Information Architecture Design Styles

There are two basic styles of information architecture: top-down and bottom-up. The thing that many designers must realize is that it’s useful to look at a site from both angles to devise the most effective IA. Rather than just looking at your projects from a top-down or bottom-up approach, look at it from both ends to see if there are any gaps in how things are organized.

Top-Down Architecture

Top-down architecture starts with a broad overview and understanding of the website’s strategy and goals, and creates a basic structure first. From there, content relationships are refined as the site architecture grows deeper, but it’s all viewed from the overall high-level purpose of the site.

Bottom-Up Architecture

The bottom-up architecture model looks at the detailed relationships between content first. With this kind of architecture, you might start out with user personas and how those users will be going through the site. From there, you figure out how to tie it all together, rather than looking at how it all relates first.

Information Architecture Examples

Different websites require different types of information architecture. What works best will vary based on things like how often content is updated, how much content there is, and how visitors use the site. Here are some case examples to show you how content is structured on different kinds of websites.

News Website

CNN.com is one of the biggest news sites online. They cater to over 20 million visitors a month^[2]; visitors from all walks of life. Different visitors will have different goals when visiting the site and varying interests in the news they want to read.

CNN.com does a great job of highlighting the biggest and newest stories right at the top of their homepage. Considering that most people going to the website are likely wanting to see recent and breaking news to catch themselves up with the day’s events, it makes sense to give these stories prime screen real estate.

But a lot of people visiting the site will also want to see news related to a specific topic (e.g. U.S. news, technology, politics). To accommodate this, CNN has multiple content blocks lower down on the page, organized by topic. It makes it easy to find new and relevant news on the most sought-after subjects. There are also links from the top of the page for many sections, including sports, tech, health, and politics.

CNN.com manages to organize a lot of content into a relatively small space. The site’s easy to use and the information architecture is intuitive and logical.

Single Product Website

The website for Coda is one of the more elegant single-product websites out there and it’s obvious they put a lot of thought into how the information on the page is structured.

Visitors to Coda’s website are likely looking for a good web design application, and likely already know the features they want. Coda doesn’t need to educate visitors on what web design is or how IDEs work; they assume that the main persona is of a web designer who’s familiar with this type of software and how it works.

Using a tabbed slideshow UI to display content makes a lot of sense on this page, as the site’s copy isn’t particularly long. It also keeps the purchase options front and center for visitors (along with the "Get Help" link, which is likely for those who have already purchased the software or those that want more specific information)

Ecommerce Website

L.L. Bean is a huge ecommerce site, with a big inventory of products that’s aimed to a mainstream and diverse audience.

L.L. Bean breaks things down by shopper type and product category, with some overlap where it makes sense. For example, the Footwear category has its own spot on the main navigation, but it’s also included under Men’s, Women’s, and Kids’, as sub-navigation items. Doing it this way shows an understanding of how different target customers might shop. It uses hierarchies and prioritization to organize content into meaningful subsets.

Beyond the organization of their products, L.L. Bean also organizes their auxiliary pages in a logical manner.

Their site map shows just how well information is organized on the site, so be sure to check it out.

Blog

Freelance Folder is a blog aimed towards freelance workers.

The site uses the navigation tabs design pattern for the blog’s primary categories on the site (e.g. Productivity, Inspiration, How To, and so forth). There’s also a primary navigation bar for different areas of the site (e.g. forums, job board, freelancing guides, etc.).

Navigation and structure are kept simple, which enhances the usability of the site. Grouping similar content together in categories is a hallmark of blog IA design.

High-Content, User-Driven Website

Wikipedia is one of the largest websites in the world in terms of sheer number of pages. As of September 2010, there were over 3.4 million articles on the site^[3]. The English-language articles alone would result in 1,439 printed volumes of 1.6 million words each. That’s seven full library stacks.

Considering the user-generated nature of Wikipedia, it’s a great feat that the site manages to have anything resembling good information architecture. But, for the most part, the site is organized in a manner that makes it easy to find content.

The difficulty of Wikipedia’s IA is that it’s organic, and thus, categories are difficult to set for such an open and malleable system. Any website with that much information will need to rely on search so that users can locate content they’re seeking. In addition to search, the interconnectedness of Wikipedia articles makes it easy to move from one article to virtually any other related article. This in itself makes Wikipedia’s information architecture one of the best online; they understand how visitors use the site and make it easier for them to do what they need to do.

Additional Resources on Information Architecture

Here are some additional resources on IA that are worth reading. Please feel free to share and discuss additional resources, tips, and techniques in the comments.

References

Information Architecture models: Guide to web site navigation patterns. webdesignfromscratch.com.
Cnn.com’s Site Profile. compete.com.
Wikipedia Statistics. wikimedia.org.

About the Author

Cameron Chapman is a professional web and graphic designer with over 6 years of experience in the industry. She’s also written for numerous blogs such as Smashing Magazine and Mashable. You can find her personal web presence at Cameron Chapman On Writing. If you’d like to connect with her, check her out on Twitter.

Improve Site Usability by Studying Museums

Jacob Gube — Mon, 20 Sep 2010 10:30:13 +0000

Advertise here with BSA

Using a website should be easy. It should be intuitive. We should know what button or link to click to get to where we need to be.

But sometimes websites can be insanely confusing. Just look at the Apple app store, for example. When seeking out apps to install on my iPhone — which as an open source advocate and proponent, I feel incredibly guilty with, by the way — I find myself endlessly frustrated at the general lack of good navigation in iTunes, making the process of discovering the apps I want more difficult than necessary.

Trying to browse all of the apps on iTunes is next to impossible!

This article aims to underscore lessons we can learn from museums and art galleries in relation to website usability.

A-Maze-ingly Unfriendly

Many websites are a labyrinth (or maze) of endless tunnels and pathways that have no clear direction — and getting lost or confused is the resulting outcome. Simply put, things really need to change if your website visitor feels like your content organization is like traversing a maze.

Navigation menus for visitors can turn from helpful aids to monstrous mazes; try to keep dropdown menus short.

Perhaps it seems a little unfair or extreme to compare most site navigation designs to a maze — but the problem exists in many sites and is something we need to tackle. It’s quite normal to see site navigation that is confusing, leading to dead ends or paths that lead you away from the exit.

Don’t make your navigation complex like this. Navigation isn’t a puzzle game!

What We Can Learn from Museums and Art Galleries

I remember going to the Natural History Museum (in London) on a school trip. While the endless exhibits were fascinating — what teenager wouldn’t get a kick out of weapons, naked statues and dead people on display — the one thing that impressed me was how the museum, for such a huge building, was incredibly easy to navigate.

There’s nothing like having enough space to appreciate art and websites alike.

Whilst the brick and mortar foundations of a museum or art gallery may not seem, on the surface, like ideal candidates for usability, navigation, and layout design inspiration, indulge me as I try to make the connection.

The Connection

What is it about museums and galleries that encourage people to spend time exploring the many rooms and walkways in these humongous buildings? It’s nothing more or less simple than the exhibits.

In terms of the web: our content, site features and service offerings are the core exhibits that we offer.

Giving each of your products its own "room" can aid you in giving them enough distinction.

Content appears in many forms such as text, images, diagrams, videos and audio. While most art galleries focus on showcasing images and museums on historic objects, the idea that we can feature, display, organize and lay out experiences to be browsed at the user’s leisure is a central point of design theory and the content management process.

Showcasing images effectively will result in a more streamlined experience.

Components of Museums and Art Galleries

So what is the secret behind the success of a museum’s navigability?

Featured Exhibits

Source: Wikipedia

Museums highlight special exhibitions and actively promote them by ensuring that display items are in an accessible and easy-to-find region of the building.

They might have special posters outside the building, they may even advertise these exhibits off-site (such as in the local newspapers or in their website). As these are of special interest, they are publicized quite heavily.

Signs and Directions

Jimmie Rodgers Museum Sign. Source: Wikipedia

By having signs around the establishment, visitors can accomplish the most fundamental tasks — from locating that exhibit you wanted to see, to finding the closest public restroom.

Brochures and Reference Booklets

Having signs in a gallery or museum is great if you just want to provide simple directions, but many institutions have booklets or leaflets that are more content-heavy for individuals requiring more information.

Maps

Estonian Open Air Museum map. Source: Wikipedia.

A map is useful for providing directions visually towards certain locations. Some museums and galleries offer paper maps and other aids (sometimes even apps for mobile devices) to guide new visitors around.

Human Assistance

Every now and again, visitors will need more than what’s offered by default; when they have inquiries that require a tailored response. It is at this stage where human assistance comes in. Most places you visit have members of staff roaming around to help patrons or stationary informational booths in case someone needs help through human interaction.

Interactive Exhibits

Science Centre Port Blair Biotechnology Gallery. Source: Wikipedia

An increasing amount of museums offer interactive displays to make the things being presented to the visitor engaging and fun.

Space and Clarity

Source: Wikipedia

There is nothing more annoying than an overcrowded location. Whether it’s too many items put too closely together or too many visitors — ensuring that every item gets the space it warrants so that it is distinct from other pieces is an effective way of laying out museums and art galleries.

Souvenirs

Souvenirs from USCG Museum Northwest, Seattle, Washington. Source: Wikipedia

Most museums have some kind of store that sells memorabilia and trinkets related to the museum. These items create a tangibility to the visit, and may even prompt future visits.

Producing Digital Equivalents of Museum Components

Digital equivalents for these museum/art gallery components may feel like an imaginative stretch, but let’s give it a shot.

Website Equivalent of Featured Exhibits

Featured exhibits are the first item on the list, and it won’t surprise you that feature sections can be effective in design because you see it quite often. From content sliders and module tabs, to special limited-time offers and displaying fresh site content prominently, these various site components can draw attention to your featured items.

The above image shows precisely how you can feature prominent content.

Remember how I said museums sometimes even promote featured exhibits outside of their physical location? The digital equivalent of this is advertising your "exhibits" in other sites and services, such as Twitter, Facebook, and AllTop, all of which can help enhance findability.

Website Equivalent of Signs and Directions

Signposts and directions have their own digital equivalents too. Many websites have help documentation and navigation aids like breadcrumbs to help you locate the things you need. Great designs will also use the art of distinction and call-to-action buttons to draw attention and guide the user’s eyes towards what they might be looking for.

Chapters indicate how far you’ve travelled through a large document.

Website Equivalent of Brochures and Reference Booklets

The equivalent of reference booklets and brochures on the web are help doc pages, FAQ pages, video tours, and so forth.

Offering guided tours or quick start tutorials can help engage visitor understanding.

Website Equivalent of Maps

The most obvious manifestations of physical maps on a website are sitemaps and, to a large extent, your primary navigation menu. Creating a visually illustrative diagram of your site’s layout could also be components that help your users navigate around your site.

Providing a site map showcases the amazing array of content your site holds.

Website Equivalent of Human Assistance

A lot of businesses may say that it isn’t cost-effective to use a member of their team for live support, but they could have fixed hours for when live chat support is available to site visitors.

Otherwise, asynchronous communication methods such as a contact web form or a help desk support system can also be the website equivalent of informational booths that are driven by people.

Live chat software can be useful as a form of human assistance to site visitors.

Website Equivalent of Interactive Exhibits

Site interactivity can, just like their offline-counterparts, engage and provide more value to the experience of the user. You can have game mechanisms to enrich the user experience, live chat widgets so that visitors can interact with one another, and other simple strategies for creating a richer and more engaging experience.

Giving your users something to interact with provides a more engaging experience.

Website Equivalent of Space and Clarity

Space and clarity on websites require a solid understanding of design principles. Thinking about Gestalt principles (and more specifically, the concept of proximity), visual hierarchy, the use of negative space, reductionism, all the way down to the basics of clear and legible web typography can lead to effective use of space and clarity that, in turn, can lead to a better and more user-friendly experience.

Breaking information down into manageable segments help progressive navigation.

Website Equivalent of Souvenirs

People like and recommend free stuff to others, and if these "freebies" are branded or help promote your site, then in principle, the site’s visibility and illustriousness increases.

Souvenirs on websites could be custom browser extensions (for example, Mashable, a social media blog, has a Google Chrome extension), digital downloads (Six Revisions has freebies that are useful to its audience), or anything that allows your site visitors to retain something from their visit and reminds them to come back.

Giving some branded freebies away will help trigger the user’s memory of your website.

Structure from the Chaos

What all of this really boils down to is that it’s important to pay attention to the site visitor’s experience. All these concepts and components really lead to a single idea: A usable website is effective at providing what the visitor needs in a pleasant and near-effortless manner.

Why not visit a museum or art gallery yourself and see what other things you can apply to your profession? Maybe look at how they lay out their exhibits or observe how visitors interact with the various components provided to them.

The journey of an experience should be less about getting from points A to B (even with people in a hurry), and more about the things in between that make the experience pleasantly memorable.

About the Author

10 Usability Tips Based on Research Studies

Jacob Gube — Wed, 15 Sep 2010 10:00:15 +0000

Advertise here with BSA

We hear plenty usability tips and techniques from an incalculable number of sources. Many of the ones we take seriously have sound logic, but it’s even more validating when we find actual data and reports to back up their theories and conjectures.

This article discusses usability findings of research results such as eye-tracking studies, reports, analytics, and usability surveys pertaining to website usability and improvements. You’ll discover that many of these usability tips will be common sense but are further supported with numbers; however, some might surprise you and change your outlook on your current design processes.

1. Forget the "Three-Click Rule"

The idea that users will get frustrated if they have to click more than three times to find a piece of content on your website has been around for ages. In 2001, Jeffrey Zeldman, a recognized authority in the web design industry, wrote that the three-click rule "can help you create sites with intuitive, logical hierarchical structures" in his book, Taking Your Talent to the Web.

Logically, it makes sense. Of course, users will be frustrated if they spend a lot of time clicking around to find what they need.

But why the arbitrary three-click limit? Is there any indication that web users will suddenly give up if it takes them three clicks to get to what the want?

In fact, most users won’t give up just because they’ve hit some magical number. The number of clicks they have to make isn’t related to user frustration.

A study conducted by Joshua Porter published on User Interface Engineering found out that users aren’t more likely to resign to failure after three clicks versus a higher number such as 12 clicks. "Hardly anybody gave up after three clicks," Porter said.

Source: User Interface Engineering

The focus, then, shouldn’t be on reducing the number of clicks to some magically arrived number, but rather on the ease of utility. If you can construct a user interface that’s easy and pleasurable to use, but takes like 15 clicks (e.g. 5 times more than the three-click rule) to achieve a particular task — don’t let the arbitrary three-click rule stop you.

Sources and Further Reading

2. Enable Content Skimming By Using an F-Shaped Pattern

Dr. Jakob Nielsen, a pioneer in the field of usability, conducted an eye tracking study on the reading habits of web users comprising of over 230 participants. What the research study displayed was that participants exhibited an F-shaped pattern when scanning web content.

Source: Alertbox

A similar study, by search marketing firms Enquiro and Did-it in collaboration with eye-tracking research firm Eyetools, witnessed a similar pattern when they evaluated Google’s search engine results page with an eye tracking study that included 50 participants. Dubbed the "Google Golden Triangle" because the concentration of eye gazes tended to be top and left, the results are congruent with the F-shaped pattern seen in Nielsen’s independent research.

Source: Clickr Media

For designers and web copywriters, these results suggest that content you want to be seen should be placed towards the left, and also that the use of content that fits an F-shaped pattern (such as headings followed by paragraphs or bullet points) increases the likelihood that they will be encountered by a user who is skimming a web page.

Sources and Further Reading

3. Don’t Make Users Wait: Speed Up Your Website

We’re always told that our users are impatient: they hate waiting. Well, that’s logical — who likes waiting on purpose? But is there any proof outside of anecdotal evidence that people actually don’t like waiting and that page performance affects website users?

Bing, Microsoft’s search engine, conducted an analysis to see if there are any correlations between page speed versus numerous performance indicators such as satisfaction, revenue generated per user, and clicking speed. The report showed that a less than 2-second increase of delays in page responsiveness reduced user satisfaction by -3.8%, lost revenue per user of -4.3% and a reduced clicks by -4.3%, among other findings. For a company as large as Microsoft, even a 4.3% drop in revenue can equate to multi-million-dollar losses in profit.

Source: O’Reilly Radar

So users, in fact, are impatient: They’re less satisfied and will reduce their number of clicks if they wait too long. And if you care about search engine ranking, then the incentive to improve page response times is even greater since Google now factors page speed in their search ranking.

What can you do to improve page performance? Use tools that will help you find performance bottlenecks, use CSS sprites to improve page speed, and utilize benchmarking tools like YSlow to quickly see where you can make quick front-end optimizations.

Sources and Further Reading

4. Make Your Content Easily Readable

Internet users don’t really read content online, at least according to a study by Dr. Nielsen on reading behaviors of people on his website. His analysis shows that people only read 28% of the text on a web page and decreased the more text there is on the page.

Source: Alertbox

To increase the likelihood of your readers getting the most out of your content, utilize techniques for making content easier to read. Highlight keywords, use headings, write short paragraphs, and utilize lists.

Sources and Further Reading

5. Don’t Worry About "The Fold" and Vertical Scrolling

There has long been a myth that all of your important content should be above "the fold," a term borrowed from newspapers that refers to the area of a web page that can be seen without having to scroll down — first proposed by Jakob Nielsen.

So, are long pages bad? Should we cram everything at the top of our web layouts because people won’t ever read anything below this fold?

The answer is "No" according to a report by Clicktale, a web analytics company. Their results showed that the length of the page has no influence in the likelihood that a user will scroll down the page.

Source: Clicktale

A study reported by Joe Leech of CX Partners, a user centered design agency, indicated that less content above the fold even encourages users to explore the content below the fold.

Source: cxpartners

The main point to take away here is that you shouldn’t stuff all your important content at the top because you fear that users won’t be able to find them otherwise. Use visual hierarchy principles and the art of distinction to prioritize and infer the importance of various elements in your pages’ content.

Sources and Further Reading

6. Place Important Content on the Left of a Web Page

People brought up in cultures where language is read and written from left to right have been trained early on in life to begin at the left of a page, whether in writing or reading a book. This can be the reason why many web users spend a majority of their attention on the left side of a web page — as much as 69% of the time, according to Dr. Nielsen’s eye-tracking study that involved over 20 users.

Source: Alertbox

The same results were reflected on websites whose language were read from right to left, such as Hebrew and Arabic sites, with the results inverted (higher attention on the right side versus the left).

There are two things to take away from this result. First, the language of your site matters when thinking about layout considerations; when designing websites you should consider cultural design considerations. Secondly, for sites that are traditionally read from left to right, placing important design components at the left is a good idea; vice versa for sites whose language is read from right to left.

Sources and Further Reading

Horizontal Attention Leans Left

7. Whitespace of Text Affects Readability

Easy readability of text improves comprehension and reading speed as well as enhancing the likelihood that a user will continue reading instead of abandoning the web page. There are many factors that influence ease of readability, including font choices (serif versus sans-serif), font-size, line-height, background/foreground contrast, as well as spacing.

A study on readability tested reading performance of 20 participants by presenting them with the same text blocks having different margins surrounding the text as well as varying line-heights (the distance between lines of text). It showed that text with no margins was read faster, however, reading comprehension decreased. Faster reading speeds when the text had no margins can be explained by the text and paragraphs being closer together, resulting in less time needed to move the eyes from line to line and paragraph to paragraph.

Source: Software Usability Research Laboratory

As this particular study shows, the way we design our content can greatly impact the user’s experience. Be wary of the details: color, line-heights, tracking, and so forth and be mindful of sound typography principles for the web to ensure that you’re not discouraging your users from reading your content. Furthermore, study the effective use of negative space in web design.

Sources and Further Reading

Reading Online Text: A Comparison of Four White Space Layouts

8. Small Details Make a Huge Difference

Too often, we look at the big picture when creating a web design and ignore the little things when we’re in a time crunch. We forego any thought put into the wording of something, or the design of a single button on a form if time and resources are limited. There are so many other things we need to think about that it’s often easy to let go of the small stuff.

But something as small as a form’s button can affect the success of a site, at least according to user interface design expert Jared Spool, who wrote about a case on how removing a button and adding a clear error message to avoid user errors in a checkout process increased revenue by $300 million in just a year. The first month witnessed a 45% additional sales attributed to the revision of the checkout process.

This attention to detail being important is echoed by Flow, a user-centered design firm. They found that by revising their error page so that it contained useful help text improved completed checkouts by 0.5% per month, which if extrapolated, could mean an additional quarter of a million pounds annually for the particular site.

The message they used? A polite two-sentence message instead of a cryptic 404 error: "We’re sorry, we’ve had a problem processing your order. Your card hasn’t been charged yet. Please click checkout to try again."

Pay attention to the details. Use A/B split testing to test your hypothesis and find out what is the most effective design that achieves better results. Set goals using analytics software to benchmark results of design tweaks in relation to site objectives.

Sources and Further Reading

9. Don’t Rely on Search as a Crutch to Bad Navigation

Users expect navigation to be easy to use and well organized. Even with an excellent site search engine, users will still turn to primary navigation first. According to a task test conducted by Gerry McGovern, over 70% of the participants began the task he gave them by clicking on a link on the page as opposed to using the search feature.

This result is similar to a test by UIE of 30 users that tracked e-commerce tasks. The research analysis concluded that "users often gravitated to the search engine when the links on the page didn’t satisfy them in some way." Thus, search is most often utilized only when the user has failed to discover what they were looking for in the current page.

The lesson to be gained here is clear: Don’t rely on site search to remedy poor content organization, findability issues, and bad information architecture. When users are unable to navigate to what they are looking for, attention should be diverted to layout, navigation, and content organization improvements, with improving search functionality as the secondary priority.

Sources and Further Reading

10. Your Home Page Isn’t As Important as You Think

Visitors to your website are less likely to land on your home page. Search engines are a big factor here, as they’ll link to whatever page is relevant on your site. Links from other websites are also likely to link to pages beyond your home page if that’s where the relevant information is.

According to an analysis by Gerry McGovern, page views sourcing from the home page of websites is decreasing dramatically. He witnessed a drop from 39% from 2003 to only 2% in 2010 of page views coming from the home page of a large research site. This trend was doubly confirmed on another site he studied, where page views sourcing from the home page halved in just two years (from 10% in 2008 to only 5% in 2010).

McGovern’s results indicate that traffic, more and more, is coming from external sources — search engines, social media sites such as Twitter, and content aggregator services such as AllTop — rather than from the front page of a website. Therefore, a higher focus on landing pages versus your home page can get you more bang for your buck in terms of conversion and user-retention opportunities.

Sources and Further Reading

How to Increase Conversions on any Website in 45 Minutes

Jacob Gube — Tue, 09 Mar 2010 15:00:58 +0000

Advertise here with BSA

If you’re anything like me, it’s easy to "finish and forget" when it comes to web development. Once a website is live and the boss or client is happy, we close the project, kick off our shoes and crack a beer.

Part of the problem with this approach is the ever changing landscape online. Something that converts visitors today, might not be working two months from now (in some cases, it may not be working in the first place, but no one took the time to test it).

Redesigning a website, or even a single page, can be a tedious and time-consuming process. Re-opening a project that you so happily completed can take major mental willpower. However, improving a website doesn’t need to take weeks, or even days. I’m a believer in baby steps: making incremental progress, small victories, minor adjustments with big results.

That’s where my 45-minute plan comes into play. In less time than you spend watching The Bachelor each week, you can have a dramatic (and measurable) effect on your website.

Keep in mind, all times are approximate (and people work at different paces).

0 to 5 Minutes

Select a page where you can have the greatest impact

Surprisingly, this may not always be your homepage. Instead of trusting your gut, a little digging in Google Analytics (or your favorite analytics tool) can show you exactly where to start.

Here are some ideas on finding pages that you can work on:

Navigate to your "top landing pages" or "top entrance pages" report (in Google Analytics, this is found under "Content" on the left sidebar).

Use a filter to remove pages with minimal traffic (see the "Advanced Filter" link at the bottom of the table).

Sort your pages by bounce rate.

Select the biggest loser: the page with the most potential for improvement (a combination of high visits and bounce rate).

5 to 15 Minutes

Use free (or cheap) tools to determine which areas on the page need the most attention

If you really want to stick to 45 minutes, you won’t have time to use a lot of tools, but even using one will give you the insight you need to make an improvement.

Here are some tips and tools that you can help up your conversion rates:

Get free advice from the design and development professionals on Concept Feedback. You can find more tools like Concept Feedback in my previous post "10 Excellent Feedback Tools for Web Designers".

See how people interact with your site using Userfly or ClickTale (extra credit: set up an informal user test with your neighbor, or use a remote testing service like UserTesting or Feedback Army).

Use heat maps to quickly see what’s popular and what’s overlooked. CrazyEgg and clickdensity both provide heat map tools.

Setup a quick survey with Survey Monkey, or a poll with PollDaddy to see what your users want.

Still need help? Here is a quick list of high impact items you could be testing:

Headline copy
Buttons (size, color and location)
Calls to action
Whitespace
Advertisement density
Value proposition
Text size
Images
Color scheme (There are many tools for picking colors)

Find more tools that you can use through these articles:

15 to 40 Minutes

Define the top 3 items from your research and implement the changes

Chances are that you’ll discover a hundred different things you could change, but remember, the key is incremental improvement and not a complete overhaul. So choose the items that you believe will have the most impact, and start there.

Keep in mind that the changes you make don’t need to be perfect—this is going to be a work in progress.

As soon as you’ve narrowed down your list to three, develop the content and code a test page right away. Limiting your list to three items keeps the project manageable. Don’t try to overdo it: you’ll be surprised how much impact just three seemingly minor adjustments can make.

If you get done with three and still want to try new changes—great!—this needs to be an ongoing process. However, don’t let an overwhelming list of ideas prevent you from action.

40 to 45 Minutes

Split test your new page, rinse and repeat

Once your new page is ready, set up an A/B split test in Google Website Optimizer to track the results. Make sure to select a conversion page that accurately reflects your primary goal for that page.

Depending on the amount of traffic your page receives, you should be able to determine relatively quickly (anywhere from a few hours to a few weeks) what effect your changes made. If you’ve done your due diligence, you’ll most likely be rewarded for your effort with an increase in conversion rates, and sometimes your tweaks can result in substantial improvements.

However, you may find that your new page performs about the same, or in some cases, worse. But that’s the beauty of testing! Every test, whether successful or not, provides you with new knowledge about your site: what works and what doesn’t.

So—now that you’ve spent 10 minutes reading this—take the next 45 to improve your website. And please, come back here and let me know how it goes!

About the Author

Andrew Follett is the founder and CEO of Concept Feedback, a free web design review community for designers, developers and marketers. Follow Andrew and Concept Feedback on Twitter.

Six Revisions » Usability/Accessibility

Getting Users to Sign Up: Factors in Design and Content

Everyone Wants Something for Nothing

Should It Say, "Buy Today" or "Buy Now"?

A/B Testing

Images and Icons

Simplify the Sign-Up Process

Make the Username the Person’s Email Address

Let the User Choose Their Password

Require Only the Minimum Amount of Information

Allow Sign-in Using Popular Authentication APIs

By Popular Demand: Social Proof

Conclusion

Related Content

About the Author

Improving Usability with Fitts’ Law

How Fitts’ Law Works

Bigger Is Not Always Better

Movement and Distances

What About the Prime Pixel?

Overcoming "Magic Pixel" Deficiency

Treat the Center as the Prime Pixel

Grouping Items

Conclusion

Related Content

About the Author

How Cognitive Biases Shape User Experience

Users’ Cognitive Biases

"I know where it should be located"

"I know how it should look"

"I know how it should behave"

"I know what it should be called"

Cognitive Biases of Stakeholders

"I know what the user wants"

"I know what the business wants"

"I know what’s technically possible"

"I know what best practices are"

Summary

Related Content

About the Author

Usability Testing With Card Sorting

Why Use Card Sorting?

Finding Participants for Card Sorting Usability Testing

Including Your Target Audience

Types of Card Sorting: How To

Open Card Sorting

Closed Card Sorting

Creating Website Layouts with Card Sorting Data

Card Sorting Case Examples

A Case Study Illustrating the Card-Sort Technique (PDF)

Card Sorting Tools

Card Sorting Resources

Conclusion

Related Content

About the Author

Human Behavior Theories That Can be Applied to Web Design

Empowerment and Maslow’s Hierarchy

Attractiveness Bias

Serial Positioning Effect

Depth of Processing

Fitts’s Law

Cognitive Load

The Zombie Browsing Effect

Conditioning Models

Conclusion

Sources and Further Reading

Related Content

About the Author

Privacy and the User Experience

Our Thirst for Information

The Value of Knowledge

Progressive Disclosure

Breaking Down Barriers

Invisible Data-Mining

Value Your Users’ Data and Privacy

Related Content

About the Author

Information Architecture 101: Techniques and Best Practices

Information Architecture Design Patterns

Single Page