Usability Without Borders
Can good usability make up for a language barrier? As someone who enjoys travel and learning about other cultures, I decided to browse some sites in a foreign language, and see how well the usability features guided me. Since my Spanish vocabulary is limited to “gracias” and “empanada,” I began with Spanish websites. After a bit of searching I discovered the Spanish-language Mozilla page, an excellent example of usability.
On their home page, I immediately noticed the orange in the Firefox logo. Clicking on the logo brought me to another colorful page, and again, my path was clear – another orange and blue logo, this time with a green box attached. I moused over the box, clicked, and a pop-up appeared, asking if I wanted to open or save the Mozilla file. Well done, Mozilla: in only 3 clicks you led me straight to downloading your product – and all without understanding a word of Spanish. Mozilla’s design methodology is one of the oldest in the book. By using contrasting colors they guided me, the user, to the most important information on the page. Their logo – bright and easy to spot, no matter the language – works particularly well here because it contrasts with the rest of the page.
Layers of Meaning
Because Mozilla reaches across many cultures, their brand image needs to have a wide appeal. Firefox, as both a name and a logo, is a great choice, as foxes have positive connotations in many cultures. Also, the word fox translated from English to Spanish is the word Zorro – the same name as the fictional swordsman. Thanks to Don Diego de la Vega, foxes have excellent associations in Spanish-speaking countries. In stark contrast lies the example of the Chevrolet Nova: though this car was popular in the US through the 1960s and 1970s, it did very poorly in the many French and Spanish speaking countries where Nova translates to “doesn’t go”.
How Can You Implement This? Take a look at Huiping Iler’s post on the seven secrets to building an international website.
Contrasting colors and thoughtful, well-designed logos are both great examples of good site usability, but I wanted to find out more. I typed in random letters as an extension to the Mozilla URL, to see what sort of error message I would receive. Though I didn’t understand any of the Spanish words explaining the error, there was a clear top link to fix my error and return me to the homepage (página principal). This is significant, as any user wants an immediate solution to an error. In an application, this means telling the user what fields are missing information. On an error page, this means routing the user back to where they can easily begin again.
How Can You Implement This? Speckyboy Design Magazine dives into form validation and error message styling with some great jQuery demos and tutorials.
All in all, I take my hat off to Mozilla. The simple techniques they use make their site easy to navigate no matter the language. Of course, these are only a few of the many simple techniques a user interface designer might use to improve site usability. Tell us about your experience in designing user-friendly sites and applications in the comments section!