The design of Japanese websites: information overload
How Japanese Visual Design Becomes a Way to Communicate Information
Japan’s visual design is no doubt distinct. The typical Japanese website bombards the user with so much information it can be overwhelming. But is it bad design or is it just misunderstood?
Much of Japanese visual design is cluttered with information, as seen in items such as pamphlets or even menus. This type of look elicits a feeling of a busy and bustling atmosphere, like much of their stores. It’s further demonstrated in their web design, which is notorious in the design community for being chaotic-looking due to so much information being shown.
But there’s a reason for this: cluttering and packing information tightly like this means that the user can have a lot of information at just a glance. Perhaps it’s just what the Japanese call for, as Douglass McGowan here suggests.
Initially, the designer in me itched to redesign these sites to make them more aesthetically pleasing or clean. Though upon closer inspection, I started to wonder if there was a method to the madness. Japanese web design, while chaotic, looks to be unique in its own way. In this article, I aim to find common elements in the visual design of Japanese websites to establish general building blocks that explain how it contributes to how they communicate information.
Research
For this study, I went to several popular Japanese websites and aimed to find out what the common elements are by comparing them. To do so, I’ve selected five popular Japanese websites and used their homepages as references. These websites were selected from similarweb.com’s top-ranking websites in Japan.
Overview: Communicating Information
The principal difference between the typical Western and Japanese websites is how they present information. Information, in general, is very condensed on Japanese websites. In contrast, websites in the West like to space out information by using whitespace in order to avoid clutter. This makes it easier for the user to jump from information to information without feeling too overwhelmed.
Japanese websites, on the other hand, do the opposite and present their interface with so much information to the viewer. The entirety of information is placed within a single area closed together like a crowd. The user’s eyes don’t have to jump from place to place to get information. Pretty much everything is in one place.
Think of it like going on a trip: in Western web design, the user has an itinerary where they go from one spot to another, with a few breaks in between — there’s a beginning and an end. In Japanese web design, however, the user is placed smack dab in the middle of Tokyo where it’s up to them to find their spots.
In terms of its overall visual design, it can be said that Western websites like to stretch the interface loosely so that information is spaced with enough breathing room (much like how the fabric of space is stretching), but Japanese websites tighten the fabric and push all the pieces of information together.
Whitespace: Big Gutters, Small Borders
In the West, whitespace is used as a tool. It’s used to space out information in an interface in order to give the user more breathing room so they don’t get information overload. This way, pieces of information are much more set apart from each other. Not only is it visually pleasing, but it’s also much easier to get around the website.
However, looking at the aforementioned Japanese websites, one can see that they use whitespace more differently. Rather than using whitespace to create large amounts of breathing room on the interface, Japanese websites instead use whitespace to actually push information together. I observed that there are two ways Japanese websites accomplish this.
First and most noticeably, the gutters at the sides. For the most part, the websites have empty gutters at the sides, focusing the content on a narrowed center. Rakuten is a notable exception to this, where its website is rather stretched out. This reinforces the congestion of information on the interface, crowding them against each other with the use of gutters.
However, this is a minor point. Gutters can be small in Japanese websites and Western websites may also narrow their main content at the center using gutters. Though the point here is what Japanese websites are trying to accomplish: congesting information together. This gives way to a tendency for them to pack information more densely. This way, it takes up all the space at the center so all of the information is in one place.
More important, however, is the use of whitespace to separate information in Japanese websites. If you look at the examples in this article, there isn’t much breathing room. It’s much more similar to those pamphlets or menus you can see. The groups of information are very near to each other.
Typography: All in Uniform
It’s apparent that Japanese typography is going to be different, considering the writing system. It’s one of the reasons why Japanese web design can look so overwhelming in information. The combination of Hiragana, Katakana, and Kanji into one writing system plus the lack of spaces give Japanese websites their distinctive look.
In terms of typography, however, on the visual level, you can see some tendencies in design. For one thing, the font generally leans towards being uniform. Most of the text here is for the most part the same color.
Furthermore, the sizes for text overall lean towards the smaller side. This makes it much easier to fit more information onto a screen.
In general, it would seem that Japanese web design doesn’t use contrast in their typography as often; or at least, it doesn’t do so to such a degree that the West normally does. Typically, a website in the west will use large text to contrast smaller text in order to draw attention to it or to differentiate information.
On the other hand, when Japanese websites use larger text, it’s not so big enough to draw attention to the user.
A particularly interesting case is Rakuten, which when using larger text likes to accompany it with flashy visuals in order to maximize extravagance.
Organizing Information: Boxing it Up
As mentioned, Japanese websites tend to condense and tighten the UI by placing their pieces of information close together.
For one, information tends to be assembled inside boxes. Despite how it looks, the notion is actually quite neat and organized. It’s kind of like lining up your toys in a single square in an orderly fashion.
Square icons in the West are almost always noticeably rounded as standard. In Japan, however, while square icons may be rounded, it tends to be much more subtle. Sometimes, the squares actually retain their sharp edges.
Speaking of lining up, there is also a tendency for items to be lined up vertically yet narrowly. This causes said boxes to become long (so long that sometimes I have to zoom out to fit it onto a screencap).
Final Thoughts
There’s a sense of order to the chaos of Japanese web design. What I just showed are some of the common elements that make up why Japanese websites have the tendency to look so cluttered and information-dense. In essence, there’s a clear orientation towards condensing information in a tight manner. Each element listed has commonly functioned towards pushing all pieces of information tightly together.
If your goal is to recreate the typical look of a Japanese website, then taking into account these elements could be a good start. Many designers have noticed elements in Japanese visual design that make it so unique, for instance. However, the most important thing to note is that with all common elements, there’s usually a goal it's trying to achieve. For the ones I listed, they were meant to condense information.
We should be fair when it comes to evaluating designs from other cultures. What I just showed is an example of why we shouldn’t just dismiss some designs as completely unstructured and chaotic. If something looks the way it is, there are different reasons that contribute to that look.
