I just wanted to let you know that this blog will cease to exist very soon (from 2 weeks to 1 month, or even less!), as I’m going to use it for something else that will replace it. Initially, it will be replaced with an Arabic blog revolving around the same concept, but later on this year, it will evolve into something bigger.

The contents of this blog (at least the best topics) will either be migrated to my new personal site, or a sub domain of this site. I haven’t decided yet. So, if you’re interested in an article or two here, you might want to save them now before they’re (temporarily) gone.

Just wanted to let you know that I now (finally) have a proper personal site located at aldubayan.com.

Since it’s my personal site, it’s not really a replacement for this one, but I will post occassional posts there on usability and user experience if you’re interested. I think that’s going to be the best place for my posts, since I realized I can’t write frequently due to my busy schedule, but I would still like to share my thoughts in this field. So follow me there in case you’re interested.

As you might have noticed, it has been a while since I’ve updated this blog. The reason is I barely have enough time anymore to write anything. Besides, the lack of user feedback was greatly discouraging, so I have absolutely no reason to keep writing (I blame myself for not marketing it well). Also, people interested in web usability tend to trust certain names only in the this field, and ignore the input and thoughts of everyone else.

So, I’ve decided to stop updating this site. I’m directing all my time and efforts to push web usability forward in a different and much more efficient way (no, it won’t be a blog). And this time, I’ll be targeting Arabic-speaking audience, since they have no one to look up to when it comes to web usability. If I had anything else to write about, I’ll do it in another site.

I’ll keep this site up until I find another place to move my articles to (probably my new portfolio site I’m currently working on). Once that’s done, I’ll shut down the blog and utilize the domain for something else.

Thanks for everyone for showing interest in what I’ve been writing, and for the few feedback messages I’ve received. I’ve learned a lot about usability just by writing about it.

It’s time to unsubscribe and move on….

You will eventually forget either your user name, password or both for one or more of the site’s your using, and most sites online don’t seem to realize this, and show you something like this when you enter incorrect login information:

Mediatemple’s Account Center login asks for your “Primary Domain”, “Primary e-mail” and “Password”, and assumes that you will always remember the combination. People these days not only use multiple user names, but multiple e-mails for different things online, so relying on their memory at login pages isn’t a good idea.

Rapidshare’s login page handles this better. If you enter a correct user name and an incorrect password, it will inform you that the account does exist, but the password is incorrect:

So, in short: be nice, and remind your site’s users what they’ve forgotten exactly. They’ve got so many accounts to worry about. Sure, this might seem trivial, but trivial stuff add up and eventually frustrate people.

People use a small percentage of the features in any application they use (we all do). They only use what gets the job done. Trying to pack more features into your web application could potentially complicate your application, force your users to spend more time learning your application rather than using it, and might end up encouraging them to try a competitor’s product.

So how do you avoid that?

Basically don’t develop or include a feature in your application unless it’s directly related to the application’s goal. For example, if you have an image upload application, then any feature that wouldn’t help users upload and share their images easily would be irrelevant here, and would just complicate things for your users.

Web applications like Flickr, Delicious, Basecamp do the same thing, which makes them so successful, since they do one thing and excel at it.

However, there’s a better way to utilize default values to reduce users’ efforts in filling forms as much as possible, which is using smart default values (not an official term). These values would mostly be at least close to what a user would choose, so that he could do minimal adjustments and fill forms faster.

How do you do that? it’s simple: you just use forms’ data that your users have previously submitted and site statistics to determine what a user would most likely choose (the average). Here are some examples to elaborate this:

• If most of your site’s visitors are from the US, then always make the US the default country in any form that has a “country” drop down list.
• If most of your site’s visitors are between 15 and 25 years old (for example), then make the “age” default value something in between (as opposed to the current year, “1900″ or “1″).
• If you have a support form that most people use to report bugs, then make “bug report” the default value in the “Category” field.

This might not make a significant difference in forms that are used once - like sign-up forms (although still helpful), but it will definitely make a difference in forms that are used frequently.

So, here are some tips that will help you build a helpful FAQ page for your site’s visitors:

1. Don’t turn a FAQ page into a “Help” section

Some sites treat their FAQ section as a “Help” section, where they put questions about almost everything on the site.

Initially, put only the questions that people will most likely ask. Then later on, you could add to it the most frequently asked questions that you (or your support team) receive from your site’s visitors.

2. Don’t use the FAQ page to market your services

I bet everyone saw this before, where a company uses its FAQ page mainly to advertise its services. Here’s an example:

Q: Is it true that you provide superb services and charge much less than your competitors?

A: Yes we do!! We’ve been providing our great services for 70 years, while making sure we satisfy every single customer.

This isn’t helpful, and I doubt anyone would actually ask a company a question like that.

3. Include a linked index on the top of your FAQ page

This will help your site’s users find the questions they’re looking for faster, click on it and get sent immediately to their answer. Just like what the Amazon WebStore FAQ does.

If you have a large number of questions, split the index into categories to help people find what they need quickly.

4. Use different colors for visited and unvisited links

This is needed if you’re linking to questions (whether they’re on the same page or on a different page). This helps people know which questions they’ve already checked. Not everyone find what they need in the first question they check.

5. Keep your answers short and straight to the point

Because, simply, people hate reading more than they have to.

6. If your FAQ page uses JavaScript, make it so it degrades gracefully in its absence

Some FAQ pages use Javascript to collapse all the answers, so that when the user clicks on a question, its answer will expand. This is OK as long as you make sure that all the answers are shown by default for those visitors using browsers that don’t have JavaScript enabled.

7. Frequently Asked Questions aren’t limited to FAQ pages

You could put a Frequently Asked Question in the page that it belongs to to make it helpful, just like what “Game Points Now” did in their contact page:

They knew that many customers might not receive their codes right away after purchasing them, so they put this FAQ on the Contact page to avoid having to answer the same question over and over again.

This is the first post in the “Innovative or Confusing?” series that highlights various web sites’ attempts at being innovative or just different, and whether their attempts actually work or end up confusing visitors.

Today we’ve got Lavasoft’s product viewer. But before you continue reading the article, check it out at Lavasoft’s home products page. Try to use it for a few moments to browse through their products, then come back here.

Lavasoft apparently is trying to offer visitors an innovative way to browse their products, but the way they did it, in my opinion, is pretty confusing. Here’s why:

1. Using horizontal scroll bars to navigate through things is very unusual on the web. They’re not even using the system’s default scroll bar.
2. The navigational links (right at the top of the scroll bar) are hardly noticeable. And even when you do notice them, they look like labels, not links.
3. You can’t click on any product’s box to view it.
4. Personally, it reminded me of Apple’s Cover flow, and I thought I could navigate the products by pulling them to the left with my mouse, but I couldn’t. I think those who previously have used cover flow before will have the same expectation. It doesn’t look exactly the same, but it behaves in a similar way.

It would be much better if they just displayed all the products on top of each other (especially when they have short descriptions), and include a few links at the top to help users jump quickly to a specific category (i.e: anti-spyware, firewall..etc). This seems like a good example of web sites trying to do things differently not because they need to, but to look cool.

What do you think? how long did it initially take you to figure it out? was it innovative or confusing in your opinion?

Scope

The book covers:

• The qualities that make a web application great (in detail)
• Which features you should (or should not) include in your web application
• Explains how people tend to behave when using web applications, how to turn them into frequent users and how to make your application(s) easier for them to use.

Target Audience

Geeks (that’s what the author assumes at least) who are involved in creating or managing web applications.

Prerequisites

Familiarity with modern web applications. A small background in usability and user experience would help, too.

Positives

• The book is beautifully formatted, designed and printed.
• Shares great tips, insights and experience on making and managing web applications.

Negatives

• Feels a little repetitive at times.
• Most of the author’s attempts at humor fail.

Conclusion

In my opinion, you shouldn’t buy this book unless you’re interested in making or managing web applications. If you just want to learn more about usability and improving users’ experience in general, then this isn’t what you’re looking for, and you might want to consider a book like Don’t Make Me Think instead.

If you’ve read something about web usability and user experience, you probably already realize how valuable they are, and how much they significantly contribute to a site’s success (which is a lot by the way).

Web usability, however, seems to be fairly new to the average person involved in creating and/or managing sites, especially in businesses. And, unfortunately, the majority still don’t care about it since they can’t see how it could help them succeed. In fact, those people might be against its practices, since they conflicts with how they envision a site should be.

So, in this article, I’ll write about 4 characters (or positions) that are involved in making and managing web sites the most, along with examples of how they tend to think (stereotypically) based on my experience with each one of them, and how to respond to them and hopefully convince them otherwise.

1. Graphic Designers

How they tend to think

• A site should look beautiful and artistic.
• “Conventional” equates to “not creative”. A site should be visually unique and creative.

How you could respond

• All what a web site needs is a professional, presentable layout. People judge sites based on their usefulness and ease of use, not on how pretty they are.
• If possible, give an example of a site that the designer uses often, which doesn’t have a fancy design (most likely Flickr), and ask him why he isn’t using a different one.

2. Developers

How they tend to think

• Error messages that display technical details of the error to the user is OK.
• If users can’t figure out how to use a feature in their application, they should read the documentation or invest some time on it.

How you could respond

• Error messages need to be simple and informative so users can understand them. It’s not like everyone is a geek after all.
• If users are having problems using a specific feature, it means it’s not usable and should be improved. You will lose a plenty of users if you assume they will stick around long enough to figure out how a feature work. They would either stop using it and do their task in a different way (if possible), or start using a different application.

3. Marketing People

How they tend to think

• Want to add an unnecessarily big picture on the top area of every page on the site to send a specific “message” to visitors.
• Think that the best web forms are the ones that asks for as much information as possible from users.
• Want to use cheesy marketing headings or links like “People We Shared Our Success With” instead of “Portfolio”.

How you could respond

• The first thing people see when they visit a site is what’s in the top area (aka: “above the fold”) of the site. So, instead of using a big picture to take up that space, you could utilize it for something more useful.
• People won’t provide you with any information you ask for #during a task# unless it’s necessary to complete it.
• If you don’t use descriptive headings and links, visitors will have a much smaller chance of finding what they’re looking for. Which means they might end up frustrated and going to a competitor’s site.

4. Managers

How they tend to think

• A site without animation, music or a “splash page” is boring.
• Putting an introduction written by the CEO or the history of the company on the home page is a good idea.
• Assume that their professional designer is already capable of producing usable layouts, and that extra work to improve on usability isn’t needed.

How you could respond

• A site’s layout can never be “boring”, even if it was an entertainment site. It’s all about the contents, and how easy it is for users to find or do what they need. YouTube has a very simple layout, yet it’s one of the most entertaining sites on the web.
• Home pages should tell visitors (in as few words as possible) what they can do or they expect to find on the site, not some information that probably no one besides the company’s employees would ever read.
• You still needs someone to evaluate and improve your site’s usability, no matter how good your designer is. As Jakob Nielsen put it in his analogy:
  

  Even the best writers ask editors to improve the correctness and readability of their writing before publishing it. Using an editor is not the sign of an unskilled writer; it’s the sign of a writer who knows what it takes to write well.

Conclusion

You could be any of the above. It doesn’t matter as long as you try to make your team members aware of the usability factor, and give it a higher priority. Even if you’re hiring someone to take care of it for you; having usability in everyone’s mind would save you a lot of time and money.

The best thing about the usability field is that most of it is built on common sense, which will save you a lot of trouble when trying to convince those who influence the site you’re working on.

Note that all of the stereotypical thoughts I’ve written here aren’t always “bad”. They might be suitable in specific scenarios if implemented by someone who knows what he’s doing.

Read more related stuff

• Writing Error Messages That Humans Can Understand [error messages]
• Convincing Clients to Pay for Usability
• Usability ROI Declining, But Still Strong

So, here are some quick tips you could use to make your links’ names as useful as possible:

• When you’re linking to information about something or someone, put only their name in the link.
  
• When you’re linking to an event, put its name and the name of the people associated with it.
  
• When you’re linking to an action, put the name of the action and what’s associated with it.
  
• Integrate links, don’t add them.
  
• You might need to re-write some parts of your contents to make useful links. It’s not always possible to make useful links out of pre-written contents.
  
• In any case, avoid using links that contain many words (up to 7 words should be fine) unless it’s expected, like in FAQ pages for example.

This post is part of the “Link 101″ series that I will be posting. So, subscribe to the blog’s feed no stay up to date!

Well, first, you need to consider a few things:

See whether your site really needs one

Don’t just include it because you can. Tag clouds work better on sites where users themselves tag its contents (like Flickr for example), or sites that use tags as the main method to navigate its contents. If your site is neither, then chances are you don’t need a tag cloud. Save up space for something more important.

Separate the tags

Use commas or put tags within buttons for example. Many sites use only spaces, which does more bad than good, because you wouldn’t be able to tell whether a tag has one or more words.

Make your tags readable and scannable

Typical tag clouds tend to use different font sizes, colors and/or font-weight to differentiate between popular and less popular tags. I don’t know about you, but I personally think that the only thing this degree of differentiation does is slow me down.

I get it. “Design” is very popular there.

The best implementation of tag clouds I’ve seen to date is the one that MSDN blogs use. The difference between tags is small, yet recognizable. All tags have (almost) the same font size, and you can tell which ones weight more by how dark their color is (popular tags eventually get darker, bolder and a tiny bit bigger).

Know when and where to display them

When tags aren’t the main way of navigating your site’s contents, they become less important to users, and therefore should be given a less prominent placement in your layout.

For example: RetailMeNot.com has a search bar that is used as a start point for users to find coupons through the home page, yet they still placed a tag cloud on the top left of the page, even though it’s not as efficient (nor as usable) as the search bar. Sure, the tag clouds in any of their sub pages are useful to narrow down results, but it’s unnecessary in the homepage in my opinion.

If you’d like to read more on tag clouds, check out Smashing Magazine’s article, which digs deeper into tag clouds and their usage.

Scope

The book covers:

• How people behave and think on the web.
• How to improve navigation and information findability on your web site(s).
• Common misconceptions regarding usability, its worth and its costs.
• A brief guide on how to conduct usability tests yourself.

Target Audience

Anyone who’s involved in creating or managing web sites.

Prerequisites

Nothing. All you need is a functional brain and some common sense. (seriously)

Positives

• Clear, effective and humorous presentation.
• Short (less than 200 pages).
• Tons of visual illustrations (and comic strips, too!).
• Gives you an overview of all the basics to start improving your site’s usability right away.

Negatives

None. Seriously. This is one of the best books I have ever read.

Conclusion

One of the most valuable books I have ever read. It’s very rare to find a book that you can read so fast, yet benefit so much from. A very enjoyable read. Definitely a must-get!

One of the qualities that makes a web application (or web site) great is displaying informative, helpful error messages when things go wrong, while trying its best to prevent errors from happening in the first place, to insure a smooth experience.

Many web sites though still don’t display error messages that help users recover from errors. They just tell them that something wrong happened. For example, here’s a message I got repeatedly yesterday as I was trying to send a private message on facebook:

Yes, more confusion please.

It doesn’t really say what happened. Was it something I did? was it facebook’s fault? what happened exactly? all it did was frustrate me more.

Writing helpful error messages

Here are a few simple guide lines you could follow to make sure your error messages are as helpful (and as informative) as possible:

Error messages should:

• Clarify what happened in a simple language. Don’t mention any of the technical details.
• Clarify whether it’s the user’s fault or the application’s fault. If it’s the user’s, then explain what she did wrong and how to avoid it in her second attempt.
• Tell users how to recover from the error. If it’s a complicated issue, then you could point them to a page with helpful information.
• be as short as possible. People won’t read long error messages, and would rather trying again and again until they get it right. So don’t include anything that’s not directly related to the error (such as long apologies or promises to fix the error).

Pretty simple stuff. The last you want is people leaving your site because they faced an awkward error message.

2, 3 and 4? hmmm…

It looks fine at first glance, but when you see that the formats are represented by numbers that audible came up with, you have a problem.

After a quick search on the site, I found out that they mean the following:

Oh, OK.

I don’t understand why they decided to use numbers instead of just writing the formats’ names. The numbers don’t even link to a help page, show their meaning in a tool tip or anything like that. Just images.

In my opinion, it would be more helpful if it was more descriptive like this:

More helpful, no?

Or, if using those icons was really necessary, then something like:

Using the conventional question mark that leads to the explanation

Never depend on your site’s users to look for the meanings of icons, abbreviations or anything that isn’t familiar that you use in your site’s interface. If you really need to do that, then at least make those vague items lead to or contain the explanation.

Why would you want to do that? you might want to inform them about an error message, promote your site’s features, help them find the next step or whatever they need to notice by that time.

In this article, I will give you a small idea on how to utilize them efficiently. Note that any of those elements, if used excessively on page, will lose their privilege and cease to attract users’ attention:

Warm colored elements:

I wrote about warm colors in a previous article and mentioned how they emphasize elements on a web page, and make them stand out. Warm colors are usually applied on buttons or any element that take little space, because applying them on big elements would make them overpower the rest of the contents on the page.

Images and icons

Images and icons act as visual cues on web pages.

While images might not be the first thing people notice, they do get eye fixations (depending on the size) according to this eye-tracking study :

Although we learned that most of our test participants did not look at images first, we also observed that images received a significant number of eye fixations. We also learned that the bigger the image, the more time people took to look at it.

So, try your best to always use images that describe the nature of the contents they’re associated with. This is pretty obvious, but so many people still surprisingly associate unrelated images to their contents.

How is this image related to the story?

Icons tend to be used by users to figure out what is what without having to read, but you need to make sure you’re using familiar icons to avoid confusion.

The icons give you a quick idea of the site’s features at first glance

Irregular e elements

Irregular elements also attract user attention, which is why the popular Backpack application use it to tell users what to do next on an empty page:

The arrow stands out since it’s out of place

Headers and text links

Users tend to notice and read headers text links when they’re scanning text contents on a web page (since they tend to have a unique style), which is why you need to make sure that both the headers and text links on your page are meaningful when they’re read out of context.

Lists

Lists are also one of the things that users tend to notice and fixate their eyes on while scanning contents. So, if you’re going to write about more than 2 items (or steps) in a paragraph, put them in a list instead. This way you make it easier for people to notice and absorb the information you’re presenting whether it’s promotional, educational or just for fun.

Which one seems easier to read?

This was a quick overview of a few types of elements that stand out on web pages. I’ll detail each one of them (in a non-boring way) in upcoming posts. So make sure you subscribe to the blog (in case you haven’t) to stay updated.

The reason behind this is that Internet users develop ad blindness as they get more experienced on the web. They get familiar with how ads are formatted, placed and displayed on web pages, and learn to ignore them and focus on parts of the page where they expect to find relevant information. That’s because, most of the time, ads aren’t interesting nor related to what we’re looking for.

Not all ads are ignored though. According to Jakob Neilsen’s post which discusses this matter, users are more likely to pay attention to ads on search results pages or classifieds site, since they’re related to what they’re looking for. On those kind of pages, ads are considered as contents.

What I will write about here isn’t how to overcome ad blindness, and make more revenue (which is beyond the scope of this blog), but how to avoid proposed solutions that will affect the usability of your site and the overall user experience. Here are some proposed solutions and why you should avoid them:

1. Alternate the colors of your ads

Some suggest that, if you’re using ads that you control (like Google adsense ads), you should alternate your ads’ colors on every page (or refresh), to increase the chance of users noticing them.

I doubt that this actually works, because people tend to ignore parts of the page where ads are expected to be shown. So it’s not about how ads look, but rather where ads are placed.

2. Change ads’ position on every page

Another suggestion is to keep changing the position of ads in almost every page, so that users have a harder time unconsciously learning the ad placements on your pages to ignore them.

This does work actually, but it will also break the consistency of your design, which will make the user experience less pleasant.

3. User an unconventional layout

Some think that, if you use an unconventional layout for your site, users will more likely notice ads and click on them.

That is true, and you will probably get more clicks from one-time users. Regular users, however, will eventually learn your layout and ignore the ads, which leave you with a most likely unusable layout, since you’re not doing things the way users expect to go.

4. Make the ads look like contents

Others suggest that you make your ads look as if they were part of your contents, to basically fool people into clicking on them.

Sure, you will get more clicks, but you will also lose credibility, and your site users’ will feel cheated and frustrated since you’re not taking them where they expect.

5. Use intrusive ads

Some advertisers think that if they use intrusive ads (the annoying ones that pop in front of you), they will get your attention and you will inevitably see the ad. Even when they’re told that people will probably just close the ad and proceed with what they were doing, they would claim that the sub-concious hit of noticing the ad is just enough for them.

In reality though, experienced web users have learned to look for the “close” or “X” button immediately whenever something blocks their view, so they might not even notice the brand of the ad in the first place.

So what’s the solution?

As I said earlier, this is beyond the scope of this blog. But whatever you choose to do, give your contents and site usability a higher priority.

For example, if you have a good spot at the top of the page that you could use for either an ad or a feature, put the feature there, not the ad. You will make more money if your site provides an enjoyable experience. And, besides ad blindness, people are starting to use ad blockers these days, so I wouldn’t use ads at all unless advertisers were directly paying me.

If you provide unique contents and/or services, people will find you, and advertisers will follow (assuming you don’t charge them for it already).

And that’s not a random-tip thing. It’s something you see next to every post! and the audience of that blog is web developers who actually make web sites, which makes this explanation not only unnecessary, but kind of offensive, too.

Many people involved in the creation of web sites have probably heard of the “Three-Click Rule” before. In case you haven’t, it’s the rule that says that all information on a web site must be reached within three clicks at most, otherwise users will be frustrated and leave your site.

How accurate is it though?

According to a research conducted by User Interface Engineering, this rule isn’t really accurate:

Our analysis showed that there wasn’t any more likelihood of a user quitting after three clicks than after 12 clicks. When we compared the successful tasks to the unsuccessful ones, we found no differences in the distributions of tasks lengths. Hardly anybody gave up after three clicks.

In fact, the three-click rule some times works against its purpose. Your site, for example, will have problems scaling because, as it grows, it will be very difficult to put everything three clicks away yet maintain a meaningful and useful site structure.

What matters most in a site isn’t how far the information is, but how easy it is to reach. If users can navigate easily and quickly to what they need, they wouldn’t care how many clicks it takes to reach their goal as long they’re confident they’re on the right track along the way (and as long as it’s within a reasonable number of clicks of course).

However, the important information or functionality your site provides obviously should be no more than click or two away, since it’s what your site is basically about.

In case you haven’t already, I recommend that you read the whole research I’ve quoted in this article. It’s a little old, but contains interesting details about this matter.