The Three-Horizontal-Line Icon for Primary Entry List

There seem to be a UI trend recently, that the primary entry list / timeline is associated with the “three horizontal line” icon. Here are some screenshots from apps that use variations of such icon design. These apps include Path, Facebook, Google Plus, Reminders, Gmail (mobile web version), and Stitcher.

Here are some thoughts:

  • This “three horizontal line” icon is not bad for representing a list of entries, which is a visual abstraction of the iOS table view, although sometimes it’s just too general that it might not show the characteristics of the data of individual application.
  • The icon is almost identical to another UI element “toolbar resize grip” that is commonly used in desktop applications. See the screenshot below.
    And perhaps because of the reason above, both Google and Stitcher are using three bulleted lines to represent the primary entry list, to distinguish it from the possible confusion with the toolbar resize grip.
  • Just curious, what happen to the “Home” icon? What are the reasons that the app designer decided to ditch Home icon for the three horizontal line icon? With the concept of “Home”, at least it carries the idea of a place that you can get back to, the origin of a journey. Home is an appropriate metaphor that exists in real world. However, the three horizontal line icon does not have such metaphorical meaning in real world.

Evernote: three horizontal line icon for side pane resize grip

Post to Twitter Post to Facebook

Clever Shopping Mall Poster Design for Year of Dragon

The tag line of this poster is「思わずびっくりかえる、お得です。」(before your realizing, [time] changes suddenly and great deal comes)

Despite of my bad translation, there are two things that I think are clever in this poster design:

1. In the tag line, the word かえる (KAERU) has two meanings:
(a) 「変える」Changing from one state to another
(b) 「蛙」Frog

2. Along with the “frog / change” word play, the illustration above resembles a sitting frog. If you flip it upside down tho, it appears to be a dragon head. The illustration combines three themes into one presentation: frog (KAERU), change (KAERU), and the symbol of dragon.

I wish everybody a happy 2012. I will continue my journey to discover and document beautiful designs in everyday things.

Post to Twitter Post to Facebook

Treadmill Start and Stop Buttons

Treadmills are becoming more than just a surface for your to run on and exercise. With loads of functions and program controls, it’s getting more and more complex to operate. The picture above is a typical treadmill with buttons and screens that almost resemble a cockpit of a jet fighter. But what if you just want to get started right away? One solution designers came up with is a “Quick Start Button”. It’s purpose is to bypass the setup process and start rolling the treadmill right away.

On the other hand, a treadmill needs to have an emergency “Quick Stop” button, which allow user to stop the machine immediately in case of emergency. Both the “Quick Start” and “Quick Stop” has the same functional priority, only opposite purposes.

Question is, in order to make it easy recognizable and operable, the buttons has to be physically bigger than other controls, and very easy to understand at a quick glance without reading the text label on the button. So they need an intuitive icon.

The “Stop” button icon is relatively easy since there is an international standard “red stroke in a circle” symbol to follow. But it is trickier for the quick start button.

Back to the example treadmill in the photo, there’re two design decisions I find puzzling:

(1) Instead of the standard red colour, the Stop button is in orange.

(2) For the “Quick Start” button, it make sense to use green to imply a positive message of “go ahead”. But the icon is a 90° rotation of the stop button. It’s creative, but not very easy to understand especially for first time users.

Suggestions:

What’s your suggestion?

Post to Twitter Post to Facebook

Logo for LED Street Light

LED light is becoming more and more commonly used in household and public area, replacing the traditional florescent and sodium vapor based lighting systems. LED is energy efficient, bright and long lasting. With these many advantages, many cities are trying to promote this technology for a wider adoption. The picture above is a street light installed near Kawasaki JR station.

However, there is currently no international standard logo for the LED lighting technology. The most commonly seen logo so far is the 3 English alphabet “LED”. It is still a new territory for designers to come up with something that can communicate the concept and technology. For this street lamp near Kawasaki station, the designer attempt to do so by using 7 circles in a radial arrangement. Can you get the idea from the logo?

Post to Twitter Post to Facebook

Bowing in Signage – Do You Accept My Card Or Not?

What message to you perceive when you see a person bowing at you?

The meaning of bowing is quite significant in eastern culture, and especially important in Japanese daily life. Depending on the context, bowing could mean apology (when you bump into someone), appreciation (after you made a purchase from a store), and greeting (equivalent to saying hello and good morning). In the company I work that, for example, we often have meetings with guests and clients. When the meeting is done, our team would walk the guests to the elevator door and wait for the elevator with them. Once they stepped into the elevator, all team members will make a bow at the guests until the door closed. That is to show deep appreciation and good business manner.

But here is a challenging scenario I encountered one day when having lunch in a Japanese beef bowl restaurant YOSHINOYA. Near the cash register, there was a sign with an illustration of a staff bowing with a smile, some Japanese text and then logos of two popular NFC payment card “WAON” and “Suica”. Let me explain why I think the signage design could be confusing, especially to foreigners who cannot understand Japanese:

Full Body Gesture — it is pretty clear that the illustrated character is doing a bow at person who’s reading the sign, there’s no ambiguity about it. However as mentioned before, bowing could mean appreciation or apology.

Facial Cue — this one is subtle to pick up but important nonetheless: on the face of the character we could easily identify the eyes in the upper part of the face; however what is that curved line below it? It is a smile, or is it a nose where the character is now bowing with his/her head down?
(a) If the line is a smile, then the character could be making a pleased facial expression, indicating that the the subject of sign is to thank you for using the indicated payment methods.
(b) If this line is the nose otherwise, then the character is making a large head dip which ressemble a deeper bow. That can be interpreted as a big apology and further understood as “we do not accept the payement methods”.

Japanese text — obviously, to those who cannot understand Japanese, this instruction would have no use in explaining the message.

Logos at the lower right corner of the sign there are two logos of the payment systems. The logos are neutral and don’t convey any information of the acceptance of the payment methods.

Answer: 「当店ではWAON、Suicaはご利用いただけません。ご了承こださい」(meaning: this store does not accept WAON and Suica cards. We appreciate your understanding.)

My Suggestion: stick to international standard to indicating “No”. It’s boring but it works.

Post to Twitter Post to Facebook

About Calvin

Hello there, I’m Calvin Chun-yu Chan. Grew up in Hong Kong, studied and worked in Canada as web engineer+designer, now designing mobile apps in Tokyo. On my blog I would like to share my opinions on design, usability, culture and creativity.

Follow me on:
Twitter @calvincchan