How to create User Interface Design for Japanese

As we have discussed in our previous article, the aesthetic of Japanese web design is somehow worlds apart from the majority of web designs. Most of people think that Japanese web design is chaotic, coming from the Nineties, or that it looks as bright as pachinko parlours (the most popular gambling centers in Japan). But actually, Japanese web design is much more than this.

When you are creating a website for Japanese, the goal is not to make it look attractive, but to make it as intuitive as possible for the users. Japanese websites use various elements to deliver different kinds of information. Good web design in Japan is equal to obvious usage and straightforward information.

The most important principle when creating a user interface design for Japanese, is not to make the user think about how to find information in the website.

Just like all websites in the rest of the world, Japanese web design consists of two things:

• The structural design of the website itself (User Interface design)
• The visual contents that will build the website apperance and will lead to its final impression

CREATING USER INTERFACE DESIGN FOR JAPANESE

When we create a website with minimal design, only essential graphical elements and texts will be displayed. We tend to put the main content at the center of attention to highlight its importance and be sure visitors won’t miss it. This can result in a more pleasant visual experience, but when it comes to Japanese users, this can leave them clueless in case they are looking for more specific information.

Japanese customers may be impressed at the first sight by the beauty of a minimally designed website, but if the information they want is not available at a glance, they will become suspicious about the company credibility and capabilities. Aligned with this attitude, Japanese companies will try to minimize the risk of losing sales opportunities caused by lack of product knowledge by putting all the information about their products or service as much as possible on their website.

So, how to make a Japanese web design?

1. Prepare to allocate a lot of space to put detailed information

Japanese people eyes are well trained to scan tons of visual information in one-time. Have you ever heard of chirashi? Chirashi are the typical Japanese flyers, and they are an important form of advertisement in Japanese people’s everyday life. Japanese people use chirashi to find the best offers for everyday products (mostly groceries), and they are used to quickly scan and clearly evaluate the information. In addition, even when it comes to food on the plate or space at home, the Japanese culture always encourages to avoid waste. This culture of no-waste and thoughtful resource usage translates also into the digital side, ensuring that even digital space is utilized at its maximum. This is a cultural explanation of why you rarely see white space in Japanese web designs.

http://www.cosme.net

2. Prepare to craft an extra detailed navigation

All this translates in a very straightforward and actionable tip on Japanese web design: care for the details. Give extra details like color transition when you do some hover, a little caret/arrow and underline for links, small icons for menus, contrast colors to highlight something important, put the search box at a visible place, and much more. The combination of these details can make a difference between a successful Japanese web design and one which goes unnoticed.

http://www.starbucks.co.jp

3. Set up carefully the font family

Page loading speed is an important element to make a successful website. In English or alphabet-based language, choice of font only has a very small impact to page loading speed because the file size of a font family usually is less than 500KB. However, when it comes to Japanese web design, font could become a major cause of a slow-loading website page.

“Japanese font files have double-digit hiragana, both single-digit and double-digit katakana, both single-digit and double-digit alphanumeric characters, many symbols, and from 2,000 to 12,000 kanji characters. Some font files have more than 300,000 characters in total and the file size can be bigger than 2MB. Some browsers, such as Chrome, use different fonts for different characters. Kanji in Japanese is Micho (serif), while Hiragana is Gothic (sans-serif). It is safer to use okay-looking, pre-installed fonts in lieu of using beautiful fonts, but heavy to upload. Web-safe fonts are fonts that are pre-installed in many devices. While not all devices have the same fonts installed, you can choose several fonts that look similar, and that are installed on different devices.”

Pre-installed fixed pitch fonts of each device

source: http://hayataki-masaharu.jp/web-typography-in-japanese/#.WqpHUmaB3OR

“Japanese typeface design and font development presents many interesting challenges, from the time it takes to design thousands and thousands of available characters, to the technical infrastructure required to serve large font files as web fonts. As standards and technology continue to develop, we invite designers and developers to experiment with the Japanese web fonts now available on Google Fonts Early Access.”

If you are creating a Japanese language version site from an English based version, you probably found out that weight and visual appearance of fonts become inconsistent. You can often just apply CSS rules to fix this common issue.

CREATING VISUAL CONTENT FOR SUPPORTING THE WEBSITE APPEARANCE

Visual design for websites is needed to make a ‘good impression’ on the user. This is usually done by using visual design elements like pictures, banners, sliders, colors or illustrations. In many cases a designer is both in charge of UI design and visual design, which is good in terms of synching elements that are beautiful and functional at the same time.

1. Use strong, bold, detailed visual elements

The typical elements of Japanese graphic designs usually involve strong colors, well-defined visual identities, all densely combined on a single outline. Japanese graphic designers usually focus on warm reds, gold, and even black, but a deeper look through their archives reveals an even richer spectrum of colors. The Japanese culture does rely heavily on the use of color. The secret of Japanese graphic design success is not to be afraid to overdo your work. Again, an extra-detail, extra-color, extra-piece of information visualized in an extra-infographic can make the difference.

2. Text and language Mash-up

Japanese websites use an unbelievably high amount of text. They even use text in images. It’s really important for designers to know how to make a good layout for text, or how to layer images with text in the appropriate way. Japanese doesn’t have italic or capital letters which limits the opportunities for adding that visual punch that you get with latin alphabets. This makes it more difficult to create the hierarchical contrasts required to organize information with type alone, and colors and images become one element to differentiate and prioritize content.

To wrap up this article, we really want to highlight that to create a successful website for Japanese people, you need more than just translating a pre-existing website into Japanese language. Despite of what trend is currently popular in global web design, the key to create a successful website for Japanese people is to be user-centric: understanding what information Japanese users look for when they are surfing on a website and match message, content, and usability.