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

Opera search box

Mozilla 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:

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.

How other browsers behave – they let you choose too

Mozilla

Opera

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?

It’s Friday, I was thinking to have a little fun and offer you this brand new multibrowser addon to create pixel-perfect layouts based on a horizontal grid.

We will also think about a vertical one, or mixing vertical and horizontal grids to bring some happiness into designers’ world

Suggestions and improvements are welcome and much appreciated.

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.”

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.”

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?

I needed a plugin to help me send the last posts of my blog as email to my subscribers. I chose 6 that might solve my problem and here they are, in alphabetical order:

Ajax Newsletter

It comes with a widget so make sure you install them both. It collects subscribers and sends email depending on the settings you decided upon.

(+) The widget will collect subscribers while the plugin will send email every X posts or weekly/monthly. Quite flexible with the settings and usable.
(+) You can preview the emails, to see what your subscribers will receive.
(+) The users receive a confirmation email and also there is always a link to unsubscribe from the newsletter.
(-) The user has to confirm the subscription and the confirmation page is quite ugly and not based on your theme. You have to work a bit to make it pretty. Also you have to spend a little time and improve the mail’s look.

Automatic Newsletter

Quite unusable for me.

(+) You can set the number of posts to send and how often
(-) Problems with the usability of the widget. After subscribing I am redirected to an error page while the error/success message is displayed under the newsletter form. So my attention goes to the page, displaying: “Sorry, no posts matched your criteria.” instead of the message under the form saying:”Email Added, Thank you”.
(-) No confirmation email is sent to the subscriber.
(-) I don’t see the subscribers and I wasn’t sure they will all receive my email until I actually sent a test email. The interface is not as usable as it could be and might confuse the user.
(-) There is no Unsubscibe link by defauls in each mail sent to the subscribers.

G-Lock Double Opt-in Manager

This was my choice in the end and I think it is the most complex plugin that I tested.


(+) It sends confirmation mails and the unsubscribe link is present in all their mails.
(+) You can send welcome messages
(+) You can customize emails for:subscribe, unsubscribe, the newsletter’s content, welcome mail.
(+) You can customize the newsletter’s fields. In this case I chose to show only the email field.
(+) It uses the current theme to display pages Success/Error/Confirmation pages in your blog and it saves you time with customizing them.
(+) Quite usable and flexible and with useful tips in te sidebar of the admin section.
(+) You can see your subscribers and unsubscribe/delete them.
(-) In case you already used a plugin before and have a DB of subscribers, there’s no way you can import it and use it with G-Lock. Too bad…:(

MeeNews

Comes with a widget so pay attention. It’s also partially in Spanish so you have to pay attention some more. But it’s better than Glock because it has statistics and more settings, but it does not send mail automatically and it’s a little too complex – too sofisticated perhaps.

(+) Sends a confirmation email.
(+) Very customizable and skinnable, maybe too much.
(+) You can customized the confirmation email, which is very good because their English is not 100% perfect.
(+) You can see the subscribers and also import them from .csv files.
(+) Access to statistics: how many subscribers you have, how many read your email, etc. Really cool feature!! (if you pay for it)
(-) It doesn’t use the blog’s theme for the confirmation mail, but their own.
(-) It does not send mails unless you pick the posts and send them yourself. It cannot do this automatically or when your blog reaches a certain number of posts. Too bad
(-) In the emails sent to the users I saw an unsubscribe message but the link was not functional.

Newsletter

(+) You can costomize the emails sent to the users.

(+) You have access to the subscribers’ list and you can import subscribers from a .csv file.
(+) It uses your blog’s theme for confirmation message, and it sends really polite mails.
(+) Quite customizable.
(-) It doesn’t use unubscribe links in the emails.
(-) It doesn’t have a scheduler for the emails, it keeps sending you to buy a better version that hasn’t been released yet. Quite frustrating. And expensive.

Subscribe2

(+) Sends mails automatically.
(+) You have access to the subscribers list.
(-) You cannot customize many things, pretty simple compared to the other ones.
(-) You have to create a page with the newsletter form, it does not add itself in the sidebar.You really have to read the Help for this one.

Check the Spanish version of this post:
Plugins de Noticias WordPress

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”?

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?

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

Do you think using weird fonts will improve or distroy your website? Do you think a boring typeface is better than a wacky one? Then you haven’t seen these fonts

1. Amadeus

2. AKKA

3. Hornswoggled

4. BPdotsUnicase

5. Badaboom

Any wacky ideas anyone?

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.

Sometimes…

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.

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.

What options do I have now?

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

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

Anyone thinks the language redirect that some companies provide is simply annoying sometimes?

Take for example the three IT giants that probably did some usability testing involving the language redirect.

Google.com

knows even better than I do that I want to go on Google.es and that I want it to search in the Spanish pages.

It’s true that you can then convince it to go to your desired page, google.com, but it takes some knowledge to make it remeber that for a while. Cause sometimes it forgets and it will take you to google.es again…

Yahoo.com

does the same thing as Google and it takes you to yahoo.es while displaying all the info that you might need in Spanish. It mixes the results of an English query with the results of Spanish websites and you can choose after that what you would like to read.

MSN.com

is a bit wiser. It knows that you might know better where are you going and it diplays a splash screen. Behind it, the page in Spanish is already loaded

I wonder how travelers think about this and if they feel frustrated about handling such small but annoying problems. IF they consider them as problems.

Check the Spanish version of this post:
La usabilidad de la redirección por lenguaje

For the font maniacs that would like to improve the web’s boring look with some new fancy fonts, here’s a list with great free retro fonts that will improve your website design.

1. UpperEastSide

2. Riesling

3. Lemonchicken

4. Deftone Stylus

5. LakeShoreDrive