Designing Recognizable Icons for Lake Kawaguchi-ko(河口湖)

Sunny Cui
6 min readOct 24, 2019

Introduction

Lake Kawaguchi-ko(河口湖) is the largest of the Fuji Five Lakes and has the best spots to view Mt.Fuji. On a clear sunny day, you will be able to see a perfect mirror image of Mt.Fuji reflected in the lake, making it a remarkable tourist attraction in Japan.

Mount Fuji reflected in Lake Kawaguchi-ko [1]

I visited Lake Kawaguchi-ko last month, and, other than enjoying the gorgeous view of Mt. Fuji, I also noticed the frustrations that my family and I had as foreigners when travelling around the Kawaguchi-ko area. In particular, Lake Kawaguchi-ko has three sightseeing bus lines: the green line, the red line and the blue line. Different bus lines come at different time intervals, and there are transfer stations where different lines intersect. On our first day, we were given a small map with very small figures and icons (see Figure 1.1).

Figure 1.1 Sightseeing Bus Guide Map [2]

The green, red and blue bus lines are marked in contradicting colors on the map, where the green route is for the red bus, the red route is for the green bus and the orange route is for the blue bus. Moreover, by looking at the map, it is hard to distinguish which are decorative figures and which are actual icons, which can be confusing for tourists. Although they marked each bus station with a white dot, it is hard to know where are the transfer stations located. I also got a chance to talk to people who were also confused in their trip, which motivated me to design a set of recognizable icons for Lake Kawaguchi-ko tourist site that can be used on maps, brochures, websites and even tickets.

The audiences I am designing for are tourists, both international and Japanese tourists. They are the people who need the aid of maps and brochures when travelling. The purpose of this project is to make all guiding materials at Lake Kawaguchi-ko more intuitive, and improve tourists’ overall travel experience.

Since I’m designing icons for tourists coming from all around the world, it is important to consider the intuitiveness of the icons and ways to optimize them for faster and universal recognition. How I optimized these icons to make them globally recognizable can be reflected in the choices of individual elements, shapes, consistency and colors (will be shown in later sections) [3]. The five icons I designed are shown below in Figure 1.2.

Figure 1.2 Icon set for Lake Kawaguchi-ko

Hiking Trail Icon:

Figure 1.3 Hiking Trail Icon

Since this set of icons are designed for both local and international tourists, I didn’t include any specific language. I believe these icons are globally perceptive even without the aid of language.

The first icon is designed to inform tourists where the hiking trails are located in the Lake Kawaguchi-ko area, since one of the best things to do on a clear day at Lake Kawaguchi-ko is to hike and enjoy the fascinating view and fresh air.

The icons I designed can also be in color. I colored this icon in green because it is the color you see the most in the natural environment, and, according to colorpsychology.org, green symbolizes calm and harmony, which resembles the feeling of hiking[4]. In addition, color is also used to reduce abstraction for faster recognition.

This icon is composed of a person walking with a cane and a mountain(Mt. Fuji) in the background. In order to differentiate this icon with icons representing people with disabilities, I added a backpack to the hiking stick man.

I decided to not include any facial expressions since I feel like there shouldn’t be a specific emotion for hiking: people can hike in any mood and under any condition. Moreover, facial expressions and details can also add complexity, which can be problematic when zooming out this icon for maps.

Mt. Fuji and Sakura Viewing Points Icons:

Figure 1.4 Mt. Fuji and Sakura Viewing Points Icons

There are multiple spots to view Mt. Fuji and cherry blossoms(sakura) in the Lake Kawaguchi-ko area. Unfortunately, both of the sights aren’t always visible. Weather and season might have Mt. Fuji hide behind clouds for days, and cherry blossoms can only be seen in late March and early April, so it is crucial to know the good spots to go because you have no time to waste on commuting!

This group of icons is composed of an eye and the main subject(Mt.Fuji or sakura) informing visitors the best viewing points. I spent a lot of time struggling to decide whether or not to include the eye element since it breaks the composition and adds another level of complication. I thought about using only the mountain and the flower, but it would be hard to distinguish them from other icons representing Mt. Fuji and sakura. Also, adding an eye to each icon increases the overall intuitiveness.

I choose blue for Mt. Fuji and pink for sakura. I think these two colors follow the common color scheme for these two subjects. According to the principles of visual perception, colors can be perceived by human eyes pre-attentively, meaning that you processing colors before you start to define what you are seeing[5]. Due to color’s visual attributes, assign icons into appropriate colors can also help to speed up the perceiving process.

Bus Station Icons:

Figure 1.5 Bus Station Icons

The last set of icons is about bus stations. Since the three sightseeing bus lines are the major way for tourists to commute, it is critical that all the bus stations and transfer stations are marked accurately and distinctly on all guiding materials.

The first three icons represent bus stations, and are color-coded consistently with the three bus lines in green, red and blue. This icon is a simplified bus frontal. The first version of this icon I design is a side face of a bus that has 4 small windows, which is hard to recognize when zooming out.

For the transfer stations, I came up with many design ideas to represent them. The simplest one was composed of only two arrows pointing opposite directions. But soon I realized, when I was trying to achieve simplicity, I was also compromising intuitiveness. For example, without the buses, the arrows can be perceived in many ways other than transfer stations, especially when I have a diverse group of audiences/users coming from various cultural backgrounds.

References:

[1]: Mt.fuji with Beautiful Cherry Blossom Stock Footage Video 14673949. (n.d.). Retrieved October 22, 2019, from https://www.shutterstock.com/video/clip-14673949-mt-beautiful-cherry-blossom--japan.

[2]: Fujiyoshida/Oshino/Yamanakako Sightseeing Bus. (n.d.). Retrieved from http://bus-en.fujikyu.co.jp/heritage-tour/detail/id/2/.

[3]: Kholmatova, A. (2013, November 30). Optimizing UI icons for faster recognition. Retrieved October 20, 2019, from http://boxesandarrows.com/optimizing-ui-icons-for-faster-recognition/.

[4]: The Ultimate Guide to Color Meanings. (n.d.). Retrieved October 21, 2019, from https://www.colorpsychology.org/.

[5]: Preattentive Visual Properties and How to Use Them in Information Visualization. (n.d.). Retrieved October 23, 2019, from https://www.interaction-design.org/literature/article/preattentive-visual-properties-and-how-to-use-them-in-information-visualization.

--

--