Category Archives: Usability

Opinions about the usability of the websites, case studies and more.

Is IE8 search box usable?

Have you ever tried to understand how IE8 behaves when searching? As a non-IE user I am used to going to the top right box, type a word and receive instantly the page with the search results. I work mostly with Mozilla and sometimes with Opera and Chrome (when I’m in a hurry and I need a page to load fast, I admit). So for me, as a user, the entire search process is transparent. I don’t even pay much attention to what search engine each of them uses. I know they are going to return some results and I’m always in a hurry.

So after so many years of NOT using Internet Explore I got myself searching something while testing a website. And, as usual, I type the word I need and in return I receive a page that is not a search result page. And I finally pay attention to what is happening to me.

Search box in multiple browsers

In all browsers the search box is pretty much the same. We’ve been trained to search it in the top right corner, to type the word and press enter. Here’s how it looks.

IE8 search box

IE8 search box

Opera search box

Opera default search

Mozilla search box

Mozilla default search box

Chrome search box

Chrome search box

I expect them all to behave the same. IE8 apparently thinks the other way around, cause if you search for a word thinking that the box will search for it, you’ll receive a screen like this one:

IE8 search result page

How IE8 searches

Next you realize that IE8 doesn’t search by default, you have to make it search by choosing a search engine. All browsers search using Google’s engine, but if you want another one you can choose, no problem here. But if you’re in a hurry and don’t care much about the search engine, you still receive some results. IE8 added an extra step so now in order to receive the results you have to take 2 steps instead of one:choose the engine, then search.

IE search box dropdown
IE8 engines alternatives

How other browsers behave – they let you choose too

Mozilla search box dropdown

Opera search box dropdown

Chrome doesn’t even bother, it won’t display alternatives at all.

What is IE8 thinking?

I wonder why did they choose to follow these steps and if they realize that this is a usability issue – in the search engines war the fact that the user has to bother and take one extra step (in this case 2 instead of 1 is double the effort) might mean some of them won’t bother at all. And if they want to promote Bing or Yahoo, why didn’t they just put these ones as default?

The dissapearance of H1

I was writing the other day about the importancy of the H1 heading and the necessity to use quality headings and content.

I started to search for big-names-earning-money-from-good-websites in order to find good examples of smart headings in their index pages. In case anyone would ask: “Ok smart….girl, show me a million dollar website if your’re so….” I would definitely say: “Look at Amazon or HP or BMW you…..” They have the money to buy web experts in case they don’t have an in-house department. They shoud know better than anyone how important is to have a good website.

But I can’t. Amazon, HP and BMW all have something in common. They all start their index page with a H2. Well it’s not the end of the world. Their pages still look good and at least they don’t say “welcome” 🙂

What do big guys say? H2 speaking…

Amazon says: “Shop Laptops at 20% Off or More”

HP US says: “Primary content tabs” or “Messaging banner” or “HP Newsroom links”…all for accessibility purposes…..

These 3 H2 tags are all having a CSS class that hides them. There are some H2 visible though …. In the footer we have “HP Corporate”, “Resources” and “Customer Support”.

BMW US says: “Your Saved Content”, “Your Saved Configurations” and “Sorry!” in case something bad happens. BTW, nice flash banner…..

Let’s find some good guys

Apple has:

H1: the Ipad image, with the message: “iPad is here.”
apple's h1 heading

H2-H6 missing

IBM has:

H1: an image with the message:”If the buildings in LA look smug, they have a good reason. Los Angeles emerges as te winner in the IBM Smarter Buildings Study. Find ut why–and see what else we learned.”
IBMs H1 heading

H2: missing
H3: “Featured topics”, “What IBM can do for…”, “How to buy”, “Products”, “Services”, “Evaluate”, “Design”……a lot….

The interesting thing about these 2 companies is that the H1 tag was also the most proeminent news in the page. They didn’t have, like HP, important tags used only for screen readers with no relation with what was important in the main visible layout.

In the end…

I think we all got the message. Forget about H1, who gives a ….flower about it anyway?

Why is “Welcome” so important?

I’m seeing a lot of websites lately that open their homepage with a big “Welcome” title. The beauty of this title is that usually somebody decides it is so important that it also deserves to be a H1 heading.

From the marketing-girl’s perspective – or the PR-guy if you want – probably welcoming your visitors with such a nice and polite heading is the good thing to do. And when a programmer like me decides your welcome does not worth the H1 and lowers its importancy to H3 (because I’m not allowed to delete it completely) then the war inside the company is about to begin.

When you have nothing else to say

Some people think the most important in your site is YOU. Your company’s name, slogan, discoveries, news…Sometimes the logo is also H1 – sometimes not. And this is where you stop. Not everybody agrees, but all agree that you have to have a H1.

Next in the line is H2. You can use it in any way you want but bear in mind that Google is listening and this H2 will mean a lot for SEO. And now we go back to “Welcome”.

What is Google learning from you when the most important message in your page is “welcome”?

Welcome message in a non existent site

Forget Google, what about information?

From the Information Architecture point of view, the fact that you open your website with a “Welcome” means that you have nothing better to say.

When I see it I think that this company has nothing interesting to write on the index page. The headings help me understand what is the company doing and how it can help me (because this is why I am here, I’m not surfing the net to waste time), so the index page is the most important page in the entire website.

The way it is designed, the content and most of all the headings should make me understand the company’s purpose and activity and convince me NOT to leave the website at once.

Nobody reads, everyone scans

Why are the headings so important? Besides the race to win Google’s heart, it’s all about money! When you have a boring index page with boring headings and insipid content, the huge Flash in the middle of the page won’t help you stop loosing your visitors. If the visitors come, get bored/scared/indiferent then they go somewhere else. And they take the wallet with them.

In case you don’t give a….flower on a web specialist’s opinion about your website then this argument should win. The analitycs were invented with a purpose. Knowing how many vistors come and go, how much time they spend on your website and why are they leaving after 30 seconds it’s suppose to make you win or at least stop loosing money. If you’re even more insensitive than that, think about them as wallets. The visitor goes = the money goes.

Does this make you more interested in the Web Architect’s opinion?

Check the Spanish version of this post:
Porqué “Binevenida” es tan importante?

The pixel-perfect website

As outsourced freelancers we are always in touch with freelancing websites. And at least once a day somebody wants a pixel-perfect website. I’m sure you guys and girls working with designers have heard in the past few months: “Look, I’ve Installed Pixel Perfect addon for Mozilla and the website I designed and the website you coded are not identical”.

What do you want?

I’m wondering what people want. It’s a mistake thinking that what we want is what everybody wants. The user’s needs are not the designer’s need of a good looking website or the developer’s need of a fast loading, functional website. What do the people with the IDEA and the money to build a website want from the company making the website? Do they know what they need?

Why the pixel-perfect idea even came up? If somebody wants a pixel perfect website, does he/she wants it pixel-perfect in Mozilla, Internet Explorer, Opera, Chrome or Safari? For Windows, OSX or Linux? In all of them maybe? The fonts should render like Adobe Photoshops ones? How is the page suppose to look on a mobile device?

What do you need?

Forget about the developers and the designers and the people who think they are both. What do users need? Do they care somebody spent 2 or 3 extra hours just to make the site “pixel-perfect”? Do they care that these extra hours mean extra money invested in this? Does it worth it?

And if not, why do I continue to see people asking pixel-perfect websites? Why does it matter that the line-height is not perfect, or the font doesn’t look identical in IE and Mozilla? Is this what matters most? What shines? Who cares about the functionality, the load speed or the quality of the content of the website?

Who cares?

Does the user even care? Most of them scan the website without noticing the details, look for something in particular which mostly is content related and then go. Their frustration may come from other directions: the website lacks usability or accessibility, does not load fast enough, the content is not related to the user’s needs, the website is not mobile ready, etc.

So who cares for the missing pixels?

Check the Spanish version of this post:
El sitio web de píxeles perfectos

Google Chrome translate – usability issue?

Being a lazy person, I always wanted to have a translate feature in my broswer so I won’t have to google-translate everything. When it finally was included in the Chrome browser I discovered that at first it was annoying and that the Options button in the right is not the best choice they could have made from the usability point of view.


I develop websites for foreign clients. At first I am not interested in reading their website cause I just want to take a look at the layout, at the menu, at the images and to asses the general look and feel of the website. So I browse the website and with every new page I check the same message pops-up.
Chrome translate message
chrome options

I don’t want to read it in English so:

1. I can ignore the message, but it keeps coming back
2. I can click on NOPE, but it keeps coming back. WHYYY? 🙁
3. I can choose NEVER to translate German, but what if I might need that in the future?
4. I might choose to never translate this site, but what if I will need it someday?

After a while…

I would like to asses the website from the Information Architecture content – I want to see how the content is formulated, how it is displayed and how can it be improved in order to make the users task of reading as easy as possible. So I need to translate it – and I use the button Translate. While I’m browsing the website the top message still appears telling me with each new page I click that it has been translated. While browsing this keeps showing and I wonder if it is really necessary for it to distract my attention with that message all the time – I can see it has been translated.

Chrome message

What options do I have now?

chrome options

I might not always want it to translate pages grom German to English. I don’t think these new options are ok. As well as I don’t think the ones before were ok. Something is missing. Some sort of “not now, please” button.

I think I want something like

What I propose

Check the Spanish version of this post:
Traducción de Google Chrome – problema de usabilidad?