Installing the new Firefox 3 was an easy task. The browser seems to work, on a Mac, better than the previous version. Although that, Firefox still has some usability issues. I don’t want to make a complete review but I would like to highlight the first issue I noticed: using the default skin, the tabs are upside down and not linked to the page they refer.

Tabs should be attached to pages. This is not a new idea, as you can see on the picture tabs has been used in this way for ages. When I have doubts about a new design I tend to look for ideas in the real world…

The Firefox 3 Approach

I think that Mozilla was just trying to copy the Apple Safari look without thinking if the Apple solution was perfect. In my opinion this tab design is not going to be a problem at all for old users. On the other side it could be troublesome for inexperienced ones: They just don’t notice that those are tabs.

Tabs are hanging from the Bookmarks Toolbar:

Changing tabs:

Tabs should be linked to the page, not to the menu. A simple mental model…

I got excited when I received an email from Nokia announcing the new Nokia Music Store. OK, I didn’t get excited at all, Nokia has been sending me promises of good service for a long time. Without success.

I have been an unhappy Nokia E61 user for a year or so (they are still selling that model). The interface is horrible and the whole telephone is very slow. I managed to load music into my phone only once, I never did it again. OK, OK, Nokia is the number one phone maker but that might be because they are making a good business in the third world selling cheap phones.

The new Music Store

Designing with standards and for everybody should be something that customers and designers themselves should fight for. When I tried to see the new Nokia Music Store a beautiful "Unsupported Browser" message was displayed. GREAT. The only system combination that works with it is the Windows-Internet Explorer one.    

My point

This is not what customers want, specially here in Europe where Firefox has a 30% market share, in some EU countries with market share higher then 40% (as reported by Ars Technica in January 2008). In a perfect world we would design for standard browsers, but the world is not perfect. Making a service available for different browsers is something that it’s going to affect the usability of it.

We are not talking about a startup, we are talking a huge company. So why not spending some more money to make products available for all?

OK, somebody does not understand how the internet works. This is not new, but Microsoft is digging his own grave (well, I hope). It makes me so angry to see things like this:

So, if users want to use the online version of the MSN Web Messenger, they have to use MS Internet Explorer. This not very user friendly, Microsoft! 

Giving users meaningful error messages is very important but, maybe, even more important to improve the user experience is to provide a solution to the error that is rising the error message.

"Give always an explanatory error message…"

It is very frustrating for users to get error messages and no way to solve the problem. Give always an explanatory error message and include in your design an obvious way to keep on with the process.

Lufthansa, the airline, gave me the other day an example of poor web design. After choosing a flight I got the option to enter my frequent flyer username and password. The system didn’t recognize my username and asked me to "Create new user profile". Well, there was NO "Create new user profile" link on that page.

Improve usability and user experience with a web design that avoids error messages that tell the users that she was wrong and don’t provide solutions. More Design vs Art articles about error messages.

Reddit provides an example of poor usability during the site submission form. They try to make fun of users’ errors. If the user enters a wrong CAPTCHA the website displays a "your letters stink" message.

"websites should have meaningful and explanatory error messages…"

Even worse, the instructions of what to do with that weird image (many users don’t know what a CAPTCHA is) were inside the "human?" field, so after entering something there the instructions disappear.

Error messages are not something users like seeing. Usually they are frustrating, so websites should have meaningful and explanatory error messages, they should tell users how to resolve the problem. Remember that if your users are not allow to finish a process, you might be loosing money.

Remember that after an error users usually want an explanatory message that helps them reach their goal (e.g. for example buying something at your site!)

The importance of a well designed sign up process is huge, if your website does not make it easy visitors will not register. Don’t ask for unnecessary information, make the from short, you can always encourage users to give you more details once they are already using your website.

"Your website should also avoid long instructions…"

Placing a link to your privacy policy makes people feel safer, make it visible during the whole process. Your website should also avoid long instructions, users will never read them and if you need them anyways that means that your sign up process is too complicated.

Shutterstock, an online image bank, got a not so user-friendly sign up process design for photographers (is not the same as the one for buying pictures). They require to fill a long form, but the worst thing is that they require to scan and upload a passport.

From the usability point of view this could not be worst. They required the scan after you fill the first long form. What happens if you don’t have a scanner close to you? I can imagine a lot of angry users. Plus, this is a very old fashioned way of identity validation, many users would be concern about their privacy. Even worse (if possible) they ask for a passport that matches your name and address, so I could never sign up to this service because I live in Germany but I am not German and I don’t have a German passport (and the address is not on my passport anyways).

Once again, usability has a direct economical impact. I wonder if this bad design is the reason Shutterstock has been loosing traffic in the last months (according to Alexa.com).

Creating a custom "page not found" web page is the proper way of handling wrong or outdated web addresses. Give information to your users, use a simple design and tell your visitors that the URL does not exists any more.

"tell them that the page is not available anymore"

Please avoid to tell users that they are wrong or that they have a "bad" web address. Just tell them that the page is not available anymore and give them a link to your homepage.

Ikea, the furniture maker, has a simple, good looking and informative page not found web page design.

On the other side, the Cartoon Network website does not have a customized 404 Not Found message. This could be very frustrating for users but it is also bad for the website business, I can imagine that many users don’t have idea what such a message means and they leave the site. Cartoon Network:

Login process should be extremely easy as this is they way users will get into the personalized content of your website. Many users get tired and leave if they try to login a few times and they can not get into the website. Specially new users leave and don’t come back.

Avoid unnecessary information or distractions. 9rules, the social content network, tells users that the password will be emailed when the are at the login page. This is confusing as usually sites don’t send emails during the login process.

Making a mistake introducing the username or password takes users to the signup page. In this particular case, this is really bad as no error message or password recovery link are displayed. If you want to improve usability and your general web design, I would recommend, first to nicely tell the user that there was a mistake, and after that give an easy way to solve the problem (in this example would be a “try again” or “recover login info”)

It could be a great problem if users don’t understand that they can click on a button, even worse, they might not notice that that button is actually a button. Then you have users moving the mouse around the website, trying to find something to click.

To avoid this usability flaw, try to include 3D buttons in your interface design. Most users understand the message because it represents their mental model and the real life: oh, it can be pressed!

In the example below, taken from Google Calendar, the arrow buttons are totally flat and it’s difficult to notice that they are activated.

Expedia.com, with its “Search for flights” button and Lego, with its “Search” button, give users a clear message: this is a button, is activated and you can click on it.

Using tabs is sometimes a very good option for a wed design. Visitors use them to navigate the site and to know where they are.

The JCPenney tab rows are 100% fine. They use a different color for the selected tab, but this color is similar to the one used for the unselected tabs. From the usability point of view, I can imagine that this could affect visually impaired and color blinded people.

Giving users a graphical and shaped sign could be much better for everybody. The MySQL website not only uses a different color for the selected tab but also makes a connection to the menu line below, creating a much obvious and nicer visual effect.