Multinational Global Header
Summary
An executive level representative from the global corporation became interested in how we had been using usability testing to make improvements to the Ricoh-USA header. Soon after, Ricoh Global approached us to overhaul the global header which would serve 61 countries in multiple languages.
Ricoh Global wanted a design that would allow countries to satisfy their culture and language requirements while maintaining a consistent look and feel across their sites.
We began by conducting heuristic reviews of the 61 sites in a discovery phase, and then conducted interviews with UX teams in Canada, the United Kingdom, Australia, France, Japan, and Latin America, conducting workshops to discuss their unique header content issues and needs. We had twice weekly meetings between the Japan and USA teams to discuss progress and findings. With the stakeholders’ approval of the initial prototypes, we began user testing, and then moved to more detailed wireframes. We also created a standards document to be given to each country outlining how to retain consistency if the need for deviations presented themselves.
Overview
Ricoh Company, Ltd. is a leading maker of office automation equipment, including copiers, printers, facsimile machines, and related supplies, and the world's number one maker of digital copiers.
With factories and sales affiliates located throughout Asia, Europe, and North and South America, Ricoh generates about 40 percent of its revenues outside of Japan, with about 18 percent stemming from Europe and 16 percent from the Americas.
Ricoh has a total of 61 separate country specific Ricoh websites. The need for websites grew with the company, but without any standards, countries were left on their own to imagine how a Ricoh website should look and behave. This resulted in 15 different header designs across the 61 sights.
The types are dictated by widgets/elements used, such as search, global location indicator, country selection, language selector, and navigational tabs and their location.
For example, headings ranged from this style:
To this style:
Customers often switched location between the global site and their country's site. New customers became frustrated when similar items worked differently between websites.
We asked,
"How can we develop a global header that can be applied to every sight?"
The search bar
After inspecting the 61 websites, many inconsistencies were discovered in the design, contents, and functionality of the headers.
There were differences between search bars:
Jakob Nielsen’s recommendation is to make the search box 27 characters wide. However, this does not take into account logographs of other languages, an issue we had to keep in mind for a global header, or a website’s most commonly search terms.
The analytics team determined the most commonly used search terms in both Ricoh.com and Ricoh-usa for a baseline.
We then design for the average/most common translation lengths provided by the analytics team for Ricoh.com and RUSA in both. Those terms were translated into Japanese, because it has the widest logographs of any language we were using in our sites.
We were able to obtain the optimal width of the global search box with consideration to the longest translation in pixel width, not character/logograph count.
The majority of searches done on Ricoh.com and RUSA are in English using Latin characters.
- 1 Latin character = 8 pixels wide
- Average Ricoh.com searches contain: 13 characters, so 13 x to 8 pixels = 104 pixels
- Average RUSA searches contain 10 characters. so 10 x 8 pixels = 80 pixels
Keeping in mind Japanese logographs are typically wider than Latin characters.
- The english word “desktop” is 56 pixels wide
- The word desktop in Japanese “デスクトップ” contains fewer logographs (characters), but they take up more width than the english spelling using the roman alphabet.
Because Japanese logographs take up more horizontal space than Latin characters, to be safe, we doubled the size of the average Ricoh.com search length (13 characters) to the width of 26 characters, to allow for searches in Japanese logographs (although they are not very common – most searches are done on Ricoh.usa are in English, searching for model numbers )
Therefore, 26 characters x 8 pixels = 208 pixel width recommended for Ricoh search bars, rounded up to 210 pixels.
No text was added inside or above the text field. User testing revealed that our users were familiar with how a search bar looks and functions
There were differences between placement of global location indicator and country selection:
Country locator and navigator
There were differences between placement and function of the country name and selector components
Customers needed to be able to understand which site they were on at a glance. They also needed a means to change to another Ricoh country website.
A country name, a globe icon, and the word "change" (or its equivalent in the language) solved this problem simply and elegantly.
Language selection
The site was configured to detect the user's location via IP address, however, it could not detect their web browser's default language. Users still need the option to choose the language they preferred.
There were many language selection methods, some of which are seen below.
A menu for selecting different languages could be used by any site that had more than one language. If the website was only created with one language, the language was not listed. This fixed an earlier problem that frustrated users. Sites with only one language were made to look like the user had other language choices. Anyone clicking or tapping the language translator was disappointed to fine they had wasted a click.
Designing for languages that read right to left
One of the challenges was adapting all designs for languages that are read from right to left. Each item had to be viewed through a different lens and placed according the the unique usability needs of readers of these languages.
Designing the global navigation
The global navigation design needed to be streamlined as well. There were inconsistencies regarding order labeling, conjunction usage, and label order.
When designing websites for different languages, text expansion can radically change a menu; translating a single word from one language into another, while maintaining a strict character length, can be very challenging. For example, "Search" in English translates to "Rechercher" in French, which is nearly twice as long. We had to design to allow space for this expansion in the navigation bar.
In order to reduce top navigation label width, we wanted to substitute the word and with ampersands in the navigation labels, but first we had to research whether or not the ampersand logogram was recognizable by other languages. The good news is that the ampersand is recognized by several cultures in several languages. However, many languages have their own logograms for the equivalent of the ampersand logograph. For example, Greek uses the kai, ϗ, logogram, while Irish uses the agus. ⁊, logogram.
The decision was made that ampersands (or the equivalent logogram for that language) would be used in navigation labels.
No matter which conjunction was selected, labeling was to remain consistent with the other navigation labels. See the last example above for an example of navigation labels that use a mix of both styles before design was complete.
Interface styles
The header elements align to meet the needs of each global website and each language used. They look and feel similar but the design allows for each country's exceptions and nuances. Some sites may have a primary service site that needs to be placed in the header, while others have no need for a language selector. Each exception does not stray far from from the layout for a usable header for each country.
Conclusion
This functionality was not built while I was with the company. I have found out since that some of my suggestions were implemented, but others were not. I can see several missed opportunities, and was sad I could not have lead the project. Small things, like users wasting clicks/taps trying to change to another language that is hinted at but not there, upset me. And the slow creep of inconsistency as not one is monitoring what does and does not constitute a primary or secondary link, and making what should be links into buttons, will soon lead to an inconsistent experience across the current 61 websites and possibly more in the future.