Objectivity is at the heart of creating a user-friendly website, yet it is one thing that cannot be achieved by the people involved in its design. Why?

1) You can’t pretend not to know

Once we know something, we cannot un-learn it. Try to look at the image below without reading it:

Your brain decodes the word, and there’s nothing you can do to prevent it. Now look at this word:

If you don’t speak Hindi, you will probably notice the curves, dots and swirls of the letters or even decide if you like the look of this alphabet or not. Have you ever considered these details while reading English? Probably not.

If you know that clicking on a certain graphic will take you to a feedback form, you can’t pretend not to know. Every time you visit your site, your brain will know where things are and you will mistakenly believe that your site is easy to use, although in reality it may be quite confusing.

2) You are biased


You love that shade of green, you chose the design, you created that awesome graphic! How likely is it that you’ll realize that the cool animated intro you love is making people confused?

Whether you are a business owner or a designer, it’s normal to take it personally. You put a lot of yourself in the design, choose the colors, decide where to place what, etc. However, be careful not to let your artistic pride get in the way of good business sense!

3) You won’t see the problems

“Inattentional blindness” is the phenomenon of not being able to see things that are actually there. Our brain assumes that certain things are not important enough to be called to attention, so we don’t “see” them, even if they are within our field of vision. The most effective way to illustrate this it is by taking this fascinating test: (Click on the image below, and follow the instructions.)

There are many reasons why we notice some things and not others. It may be that we have seen the same screen so often that nothing in particular catches our attention anymore. Or perhaps we have clicked the same links repeatedly and developed automatic responses.

When we learn to perform tasks automatically, we stop paying attention to what we’re doing and focus on other things, which prevents us from noticing if anything has changed. People who frequently drive using the same route sometimes report not remembering actually driving to their destination. Why is that? They are extremely familiar with all aspects of their route, so they don’t need to pay attention. The brain relies on automated processes, allowing them to “zone out” and think about other things.

Get a second, third and fourth opinion!

We are incapable of perceiving things any differently than our own experiences, senses and thoughts will allow. That experience is unique to each person and can’t be faked. There is no substitute for a fresh pair of eyes.

To get a realistic picture of how people will react to your website, you need input from several individuals. A usability professional can help you set up simple tests with real users that will effectively uncover problem areas within your site.

For more information :

• “Inattentional Blindness” and Conspicuity (Visual Expert Human Factors)
• Inattentional Blindess on Wikipedia

Do you have “under construction” notices or graphics on your website? Do you perhaps think that it makes it look more dynamic, that it gives the impression that “things are happening”? If so, you are not alone. Google search results for “under construction” number in the millions, from small businesses to major corporations. Such notices, however well-intentioned, can do a lot of damage to your credibility.

These credibility-killers usually appear in the following situations:

• The upcoming website
  Often used as a “placeholder” for a site that is not built yet, this is the equivalent of having a “Sorry, we’re closed” sign on your website. While physical stores do close, your website doesn’t.
• The unfinished website
  The site is published, but several sections available to visitors are not finished. By doing this, you are in fact saying that your information is unreliable.
• The link to a page that doesn’t exist yet
  This one is especially sneaky and frustrating for users: they click on a link that they believe will lead to the information they want, only to be met with a “This page is under construction” message when they get there.
• The “teaser”
  Adding an icon after an item, indicating that it is not currently available. Like its cousin, “Coming soon!”, it frustrates visitors because you are showing them something they need but can’t have. They need it now, not “soon”.

What is so wrong with “under construction” notices?

Stating the obvious doesn’t look professional
Websites are always “under construction”. The web being a dynamic medium, it is easy to update as often as needed. There is no need to state the obvious. Doing so, in fact, shows visitors that you do not recognize the effect your website can have on your corporate image.

Giving people incomplete information makes you look like you don’t care
If you are not ready to publish something, wait until it is complete before doing so. Just because it is easy to put something up on a website doesn’t mean you should. By publishing incomplete information and by labeling it as unreliable (”under construction”), you are in fact showing that you don’t care enough to provide quality content. Would you give a prospective client a handwritten paper instead of a professionally printed brochure?

It goes against best practices of web design
No designer worth his fee will use this method while developing a website. A good designer is aware of how websites are perceived by users and aligns his suggestions with your business goals. A well-designed site is the #1 factor that determines if visitors will trust your website; it’s worth the investment.

Valid issues, wrong solution

There are valid issues underlying the use of “under construction” notices; however, other solutions are far more effective and won’t hurt your reputation.

Issue: You want to show that your site is being actively updated
Solution: Display a “last modified” date on each page; visitors will be confident that you are updating your site regularly.

Issue: You want to announce that you will shortly publish information
Solution: If you must announce something in advance, make sure you provide the date when such information will be available, and respect it! The terms “soon” and “upcoming” are vague and will not be taken seriously.

Issue: You want to motivate people to come back to your site
Solution: The only way to reliably get people to come back to your site is by providing current, quality information they need. No amount of “Come back soon!”, animated graphics or hype will change that.

Issue: You want to add some life to your site by adding graphics
Solution: Graphics are tricky; if not used properly, they can easily undermine your credibility. Hire a qualified designer to translate your vision to the web.

For more information:
Consumer Reports WebWatch Investigation: How do People Evaluate a Website’s Credibility?
Website design aesthetics
Top 7 Usability Blunders Of The Big Players

Text Attracts Attention Before Graphics
Of users’ first three eye-fixations on a page, only 22% were on graphics; 78% were on text. In general, users were first drawn to headlines, article summaries, and captions. They often did not look at the images at all until the second or third visit to a page.

In the screen capture below, which images do you think are links?

The same page, with the image links outlined in red:

The five bottom images are not only links, they are the only direct way to get to very important information (information for, respectively: men, women, children, sexual health and mental health). Because there is no indication that these pictures lead anywhere (and the fact that they are located at the very bottom of the page), it is unlikely that anyone will click them.

This is so common that a new term was coined to describe it: “Mystery Meat Navigation“. Wikipedia defines this term as:

Mystery meat navigation (also abbreviated MMN) is a term (…) to describe user interfaces (especially in websites) in which it is inordinately difficult for users to discern the destinations of navigational hyperlinks or, in severe cases, even to determine where the hyperlinks are.

On this particular site, navigation could be greatly improved by:

1. Reducing the size of the huge photo on top of the page: it takes up a lot of room and is not likely to be a frequently visited section.
2. Moving the important information to the top of the page.
3. Combining text with images (add a description of the link under each image)

For more reading on the subject:

• Usability drawbacks of image based navigation systems (www.nirdagan.ca)
  

Some time ago, I received this cryptic email:

Upon clicking the link, the even less informative website appears:

My initial thoughts during this experiences were:

• The message seems to have been sent by someone I know… but it has no subject, no information.
• It’s instructing me to click, but why? I am suspicious of this “mystery” tactic.
• Once I click, I realize that the email’s only goal is to get my personal information. I leave the site.
• I am irritated that this person sent me a spam email and provided my email address to someone without my consent.

How can legitimate marketing emails avoid looking like spam? Here are three points we learn from the previous example:

1. Be crystal clear as to the purpose of your email
   Compare the above-mentioned email to this one from YouTube:

   

   There is no doubt as to the subject, and the link sends the user directly to the content, without asking for anything. It’s even more important to be clear when using social marketing features, such as “send to a friend”, because the message is sent from someone the recipient knows personally and is more likely to be read. If the message is perceived as spam, the recipient will resent it all the more for using someone they know as the conduit for unwanted sollicitation.

2. If you use “curiosity marketing”, make sure you know what you’re doing
   Arousing curiosity without seeming manipulative is an art (and a science) best left to specialists; most people that try to use it create resentment and end up seeming deceptive. A lot of research is involved in this kind of marketing in order to develop strategies that:
• Make people want to know more about the product or service
• Answer the “What’s in it for me?” question
• Time messages precisely to maximize interest
• Carefully target messages to a specific audience

In the case of this particular message, the “strategy” completely failed. They relied solely on the fact that the message was sent by someone I know, and assumed that it would be enough to get me to sign up.


3. Don’t force people to do something they don’t want to do
   I assume that this website is some kind of social networking site where you can interact with people you know. However, this is merely a deduction using the few clues I noticed from the email and the sign-up page. This is not enough for me to give up my personal information; I need to be convinced that this is not just an email-gathering strategy for a spam mailing list. If more information about the website had been given on the page, it’s possible I would have chosen to sign up. Like most people, I want to be in control of what I disclose (if anything) and why. The only control I have in this instance is to either a) put my faith in their good intentions or b) leave. I pick B.

For more reading on the subject:

• Managing the power of curiosity for effective Web advertising strategies (AllBusiness.com)
• How to Drive Customers Away from your Website: Confuse, Frustrate and Anger Them (Lucid Web)
• Incompetent Email Marketing = Lost Future Opportunities (useit.com)

I guess it means that either a) someone wants to know or b) (the most likely reason) they ran out of people to tag… So here it is:

5 little-known facts about myself

1. I speak 2.85 languages
   As a linguist wannabe, I have studied several languages including Chinese (Mandarin and Cantonese), German, Spanish and (currently) Hindi. I am originally a Francophone and I also speak English. The remaining 0.85 language is separated as follows:
• Chinese:0.00 (I forgot everything!)
• German: 0.05 (Read Only)
• Spanish: 0.25 (Read & Understand)
• Hindi: 0.55 (Read, Understand, Speak 30% fluently)
2. My High School career profile found me best suited to be an oceanographer
   Even though I don’t really like water or submarines
3. Every single hat I have ever tried on has looked good on me
   Consequently, I am saddened by the fact that people don’t wear hats anymore, and I can’t wear any of my vintage hats outside the house…
4. My current favourite TV show is Battlestar Galactica
   I haven’t felt this good about a SciFi show since Babylon 5!
5. I killed my first fly at 6 months of age
   By a freak coincidence, I threw my shoe and it landed on the wall, on an unsuspecting fly that had just landed in that very spot!

Now it’s my turn to tag:

• Cristina Favreau, a good friend of mine and passionate Small Business Coach
• Language Hat, my favourite linguistic blogger, who also happens to love hats!
• Sandrine Prom Tep, of ergonomia.ca, a Montreal-based usability colleague I have yet to meet

That is why I have created the Lucid Web “Wink”, my personal acknowledgment of good usability examples I notice on the web. It is not meant to be any sort of authoritative judgment; it’s simply my way to highlight a feature, design element, process or anything that makes my life easier as a consumer on the web.

It took me several months to find something worthy of mention, but today, on World Usability Day no less, I did. So, I am happy to announce that I am awarding the first Wink to

istockphoto.com
for their Search Help function that allows someone to
refine search results according to the meaning of keywords.

(iStockPhoto is a royalty-free high quality stock image website)

I’m sure this exists somewhere else, but I had never seen it before and it was really helpful in finding an image for my new blog header, which is designed by a very talented guy called Simon Oxley. This useful feature saved me time and made me smile… what else can you ask for on a rainy Tuesday?

• 75% of those questioned would not return to websites that took longer than four seconds to load.
• One third of those questioned abandon sites that take time to load, are hard to navigate or take too long to handle the checkout process.
• The four-second threshold is half of what is was before, suggesting that people are getting more impatient with websites.
• The experience shoppers have on a retail site colours their entire view of the company behind it.
• About 30% of those responding said they formed a “negative perception” of a company with a badly put-together site or would tell their family and friends about their experiences.

What does that mean for website designers and business owners?

1. Heavy graphics and animation can have a negative impact
   Even if your design looks great, if it uses many graphics and animation, people may leave your site before they see the whole picture; you will have lost potential customers. To avoid this, make sure your site is light on graphics (use text links rather than graphic “buttons”, for example) and that your hosting provider is reliable.
2. Simple and user-friendly websites keep their visitors
   By making things easy for your visitors, you have a much better chance to effectively communicate your message. Make sure your navigation structure (”menu”) is simple and that each step of a transaction is clear; that way, your visitors are less likely to quit before accomplishing their task.
3. Your website really does have an impact on your business
   People consider that websites are a reflection of the companies behind it; if they have a negative experience, that will affect their attitude regarding the company and they will tell their friends!

If this survey proves anything, it’s that a usability evaluation can save your company from repelling potential clients!

For more information:
BBC News “Websites face four-second cut-off”

Sometimes, however, this recognition is only skin deep; as soon as you want to add an item to your shopping cart or view your account information, a login is required. Such measures are necessary for security reasons, of course, but if they are not presented clearly, they can confuse visitors and cancel the positive perception they had of seeing their name appear on the page in the first place. “Why don’t you recognize me anymore? You just said hello to me!”

For example, Chapters.ca greets clients directly on the home page:

However, when the “Wish List” link is clicked, all of a sudden they don’t know who you are anymore:

This irritant is easily fixed: use the personalized information in the message and explain why you are asking the customer to log in, even if the site already “knows” it’s the same person. Something like this would be better: “Hello [Customer Name], for security reasons, please enter your password to access your personal Wishlist”. There is no need for an intermediate page whose only purpose is to announce that you will need to sign in after you click “continue”.

Clients shouldn’t have to worry about technology

Not everyone knows that the feature that recognizes you as a returning customer (a “cookie”, information stored in your browser) is not the same as what controls your other customer information such as account details, order history and payment information (which is on the Chapters.ca server). If it is not possible to make the transition transparent, it should at least be explained clearly.

Personalizing a website certainly has its advantages, but it comes with strings attached. Each new feature creates expectations that, if not met consistently, will leave visitors with a negative impression. When thinking of adding something new to your site, think about what your visitors would expect to happen next. If you can’t respond accordingly, maybe it’s better to not include the new feature at all; it may end up hurting your business instead of helping it.

My confusion was due to the following reasons:

• The next action link is located outside of the visual area of the form field (the gray box), so I didn’t notice it at first; I hit “Enter” instead, which gave me an error message
• Once I noticed the action link, I hesitated because the link label (”Continue in Registration”) is too vague
• I am used to see a button, rather than a text link, right next to a box I have to fill out. I don’t know if my information will be saved when I click the text link.

In my “What can we learn from this?” tradition, here are three tips taken from this example that you can use to improve your forms:

1. Group items that go together

In this example, a grey box was used around the form field; that makes sense, since there are other elements in the page that are not part of the form and so it helps the user to focus on it. However, the next action link should have been included in that space, because it is also part of the form.

2. Respect users expectations

Even though the way we are using forms is evolving with new web technologies, people are still used to things working a certain way. For example, most users expect a button or button-like graphic next to a form field they have to fill out rather than a text link. User-conscious sites such as Backpack and Smugmug still adhere to that principle:

3. Use specific words for action items

The word “registration” was mentioned four times in the T-Mobile page, all within a few lines of each other. Rather than using generic words that can confuse the user, try verbs that indicate what the next logical step is, such as “Save”, “Publish” or “Send”. Garrett of yourtotalsite.com says it best: Button labels should communicate what happens when they are pressed and use language that users understand.

The designers of the wine.com site made at least three assumptions about me that were incorrect and led to my frustrating experience and subsequent departure:

• I come to wine.com to buy something (I came to get information about wine)
• I live in the United States (I am in Montréal, Canada)
• I arrive to the “Wine 101″ section from somewhere else within the site (I found the link from Google and arrived directly on the “Wine 101″ page, not their home page)

The basis for these assumptions is probably valid; it may well be that wine.com cannot sell to anyone outside the US, and that the majority of their visitors do come to purchase wine. However, that is no reason to turn away other visitors simply because they don’t fit their target clientele’s profile.

By making it easier for everyone to access the information they want, wine.com would ensure that they offer a positive user experience (if not necessarily a “shopping experience”) and make a good first impression, no matter who visits the site.

Using personas during the design of their site could have prevented this incident. A persona is a fictional person created to find out how different kinds of visitors would use a website. A very simple example could be something like this:

Name: Jane Smith
Age: 30-something
Profession: Web Designer
Location: Montéal, Canada

Jane is a web professional and knows how to use the internet. She usually finds what she needs using Google. She likes to give wine as gifts and enjoys learning about different kinds of wines and food. She buys wine at liquor stores, but likes to do research ahead of time to know what she wants.

When designing a site, create a few personas that represent different types of potential visitors. Even if you only cater to a local market, include some “people” from other areas and backgrounds; the web is a global tool, you never know who may be looking in! There is no down side to making your site accessible to all; it only makes you look like you care.

For more information on personas:
An introduction to personas and how to create them (Step Two Designs)