Category Archives: Web

Design Examples of Website Internationalization and Localization

Posted on by
1

Internationalization and localization are the processes of designing a website, rich internet application or any other software so that it can be adapted to different languages and regions. One important problem is how to make this possible from the technical point of view, the architecture behind the application. Another problem is how to communicate to users about the internationalization and localization options. In this article I explain the later.

If a website is available in several languages it is, logically, very important to give users an easy way to change to their preferred one. Unfortunately there is no standard interface design on how to do it, every website it’s taking a different approach.

 

On a little research I did I’ve found the following:

- Showing a flag is the strongest way to show that your website is available in different languages or for different regions.

- Showing a world icon works well, but not always.

- Using phrases like "change to global edition" does work but it is not always easy to find.

 

Here there is collection of website UI design examples presenting internationalization and localization options: 

 Amazon detects that the user is connecting from another country and offers to switch to the local version of the website. The message is displayed very big but when the user changes is difficult to go back to the American version.

Amazon

 

The BBC News website also shows users the option to change internationalization options with a prominent message.

BBC

 

Ciao, a comparison shopping website, does not offer a link to its European websites on its American version. I’m not sure if this have been done for political or marketing reasons, maybe it is not the best approach.

Ciao Homepage

 

On the other side, Ciao offers links to its international versions on their European websites. The links are a bit hidden, at the bottom of the homepage, but at least they are there.

Ciao Countries

 

Another website having a high level of internationalization but not displaying it too much is eBay.

eBay Homepage

 

eBay users have to scroll down to the bottom of the homepage to see the links to the local versions.

eBay countries

 

 Is there something more international than Coca-Cola? Users landing to coke.com are presented to the localization options in a prominent position. The combination of "Change Country" plus a flag icon makes the option difficult to skip. A problem could be that once the user chooses a country is difficult to go back to the internationalization options.

Coke Countries

 

El Pais is a spanish leading newspaper. Although it offers news in Spanish language only, it also offers an international version showing less local articles. The option is displayed in a prominent position but the lack of a icon makes the link a little bit difficult to see.

ElPais

 

Last.fm offers language options placed in a way that it’s difficult to overlooked. The planet icon alone would not have been enough for most users.

lastfm

 

 For Mapoot.com, a real estate listings website, we noticed that a "language" link was not working. Adding a little flag icon made the internationalization options more visible.

Mapoot Homepage

 

The New York Times’ link "switch to global edition" is the first option of the navigation bar.

NYT Homepage

 

 Yahoo Canada detects that the user is not connecting from Canada and shows internationalization options in a highly visible section.

Yahoo

 

YouTube displays internationalization and localization options in a highly visible position.

YouTube

 

Apparently, there are several approaches to design a user interface with internationalization and localization options. My general recommendation is to place the links in a visible position and to display a flag icon if that matches your website design.

 

Mockups Tool Review

Posted on by
6

Mockups are sketches representing key GUI features. They are specially used early in the design process to order ideas and to get feedback from the user. Traditionally, they were made of cardboard but now there are several software tools to make the process of creating them much faster. In this article I would like to tell you my experience with Balsamiq Mockups, a tool we used at Design vs Art for our last project.

Note: following our request, Balsamiq sent us an activation key to fully test the product.

 

The big thing

After trying several mockups tools, what it got my immediate attention was that the elements bar is located on the top of the window. Elements like buttons, containers, text and others for the iPhone are represented by huge icons that users only have to select and place on the mockup to make use of them. It doesn’t seem to be an important feature but it actually is, I have problems with other tools at the moment of looking for elements. 

 Balsamiq Mockups window

Balsamiq Mockups Window

 

The elements bar

Balsamiq Mockups Elements Bar

 

The "sketchy" look is great

I like the sketchy look so much because it turns attention away from details and allows users and testers to focus on the content and functionality. With this feature everybody understands that the presented "web" is just a test (what it also encourages users to criticize without fear).    

 

Mockup Example

Balsamiq Mockup Example

 

A few problems found

I have found two main negative issues:

- The property inspector is a floating bar appearing and disappearing as the user clicks on an element. I wish it was just a normal bar that is there without moving around, the fact that it is "blinking" all the time distracts users when they working. 

- It is no possible to link mockups among them. This is a key feature that many other tools offer and Balsamiq should too. The company is already working on this (as I read on forums). 

 

Conclusion

We are probably going to keep on using Balsamiq Mockups and I would totally recommend the tool but linking mockups is a feature that Balsamiq should offer to keep next versions competitive. 

 

Please Fill this Form or How to Get a Nervous Breakdown

Posted on by
Reply

The world economy is in trouble and as a consequence of the lay-offs many people have been forced to jump into the uncomfortable task of looking for a new job. Unfortunately, some companies seem not to be willing to make applicants’ life easier with simple web and job application process designs.

Internet should make job application easier, not harder. Last weeks I have been hearing complaints from people about how tedious online applications are. Websites like CareerBuilder have good intentions as they try to simplify the process giving the possibility of uploading the CV once and send the same copy to all companies.

Unfortunately, many companies require applicants to send the CV and to fill a web form with the same information. This process could make applicants go crazy if it is not well design.
 

 Web forms could have been part of the plot of Women on the Verge of a Nervous Breakdown

Women on the Verge of a Nervous Breakdown, a film by Almodovar

 

Sorry, there was an error, would you please fill the form again? A friend got that message a few times last week, but even once is enough to make people feel worse in a particularly bad moment. These are few things companies should keep in mind when creating a web form for job applicants:

- Make sure your web form continuously saves the information the applicant is uploading.
- Display a message confirming that the data was saved successfully.
- Make the web form simple and short.
- If the web form has to be long, divide it in steps.
- Maybe the best option is to avoid using web forms and let applicants send the CV per email.

 

Why a company should have a well designed application process?

- Yes, everybody wants to work at that company, but if data is lost during the saving process I’m sure not everybody will take the time to fill all that info again. That company might be missing the right applicant.

- It’s about the company’s image. Make the process simple and easy and applicants will love you and your website. 
- Applicants might think the company is playing with their time. Can you imagine the rage a company can flame if the data is lost after several minutes in front of the computer?

- Think in the moment applicants reach the company’s website and their mood. Many people apply during weekends when others are having fun or late at night after work when they are tired. This could affect the perception they get about the questions a company makes on web forms, it’s better not to abuse. 

 

If a company wants to hire the best ones, a good selection process might be needed to improve the whole user experience, one thought as a whole process design. These are a few questions a company should keep in mind at the moment of designing the application process: How applicants will get to my website? How are they going to apply? Do I really need a web form or should a CV upload be enough?