AEN UI

I ride mountain bikes and occasionally I ride with a heavy backpack because I need to carry my laptop and books to places. When using an average backpack, the entire load is on the shoulders and is uncomfortable on long walks and rides, especially on rough ground when the backpack bounces around.

While exploring ChainReactionCycles today I came across a interesting backpack made by a German bike components maker ERGON, the BD2.

According to ERGON, the backpack features a revolutionary carrying system which makes it unusually comfortable on the shoulders. Where the strap joins the back is a feature called the Flink ® ball joint, which the bag and body can rotate on independently of one another. This way the weight of the bag is distributed evenly on both shoulders and protects the back.

In 2007 MountainBIKE Magazine reviewed the backpack and went as far as saying if one goes back to a traditional rucksack after using the BD2, one will feel something is not right. On steep descents (on a bike) it does not slide forward and did not jump around when maneuvering.

The backpack comes in S and L, gender specific sizes. That means men and women will have a different fit which makes sense since men and woman are anatomically different. With 15 liters of capacity, you can fit many things inside. For me I usually bring my laptop—a 17 inch MacBook Pro, thick computer books, notebooks and miscellaneous stuff like a power adapter for my laptop, mouse, and iPod. This bag will swallow them all. The main fabric is 1000 D Nylon, like I know what that is. I suppose it’s some grade of quality and durable nylon.

ERGON apparently places much emphasis on product design. The backpack has won a 2007 Red Dot Design Award along with their also award-winning bicycle handlebar grips.

ChainReactionCycles retails them for around £85 which converts to around 230 Singapore dollars. Not a bad deal for something well-designed. I think It’s definitely worth the price because I would rather not have shoulder pain and backaches.

I was involved in something cool for the past few months. It was interesting for me because I am a food lover. I do not consider myself a connoisseur except for good Sushi and Sashimi. It is “The Miele Guide“, a paperback food guide for Asia in which selected restaurants are voted by members of its website (mieleguide.com).

I was engaged by Ate Media—the publisher, to design the user interface for the website which will be used by registered members to vote for restaurants they think should make it into the prestigious guide. The interface needed to fulfill the needs of users who will come from all over Asia, speaking different languages and with unique demographics.

First I identified the various UI elements such as mailing list signup, the registration form, voting mechanism and pre-ordering of the guide. Next I consider issues like accessibility and usability. Then I design the interface based on the analysis.

Form Design

As restaurant names are potentially long, the voting form has to accommodate long labels. Therefore the forms are designed to be compact using a familiar technique in which form fields are pre-populated with a default value as its label, i.e. an email address field with a default “Enter your email address” value. This method sacrifices accessibility though, because the fields lack proper labels. To preserve accessibility, I employed a technique where labels are positioned over their respective fields and removed on mouse focus with JavaScript. This method is documented in-depth on AListApart. The version I did has a slight modification whereby the labels are not removed immediately on mouse focus, instead they are dimmed (lighter color) so they remain visible until the user starts typing, similar to the iPhone interface.

To improve accessibility, the HTML markup of the forms are kept basic and standards-compliant and styling is solely controlled by CSS. This allows the form to degrade nicely for users on machines that do not render CSS and images, e.g. screen-readers. I’m very sure there are visually-impaired people out there who are food lovers.

Form-filling is a tedious process and while we tried our best to keep required fields to a minimum, the form UI is designed to make forms more responsive. Without a doubt, Ajax is used so that form validation can occur without the need for page refreshes. The forms also degrade nicely to standard forms when JavaScript support is not available.

One of the requirements for the registration form is it should allow the user to choose a prize from a list of 3, which he can win in a lucky draw. The obvious choice is the radio button. But since this is about selecting a prize, it should be more than a boring radio button. So I designed 3 large CSS-styled clickable DIVs which will toggle the respective hidden radio buttons when clicked. Again, accessibility is not sacrificed. The form is also made more usable due to the larger clickable area.

Voting Mechanism

Now comes the voting mechanism which is the heart and soul of the website and what the main purpose it was build for. It is also where the majority of the Ajax in the website lies. If you wish to give the voting UI a try, you need to register yourself with a valid Visa card (for verification purposes. Visa is a main sponsor). You can vote as well!

At the voting screen, you are presented with a dropdown menu which you can use to display restaurants in 18 countries. As you select different countries, the alphabetical list of restaurants is updated via Ajax.

As you click on restaurant names, its respective bar changes color and a tick symbol appears. It works like a checkbox, with a larger clickable area so it is easier to click. When a restaurant is selected, its name appears on the sidebar so you can review your list of voted restaurants and make adjustments. Everything is Ajaxified to make the form more responsive.

The other cool feature is that if there are restaurants you like that are not in the list, you can nominate them yourself and they get submitted together. Simply click “nominate” and an extra field appears for you to type the restaurants name.

Language Options

The site offers its content in 3 languages (English, Chinese ad Japanese) to meet the needs of its user base of diverse cultures. The language switching feature is presented as a fuss-free dropdown menu. Switching to a different language is fast and easy.

Final Notes

The website has so far gathered votes from a big number of Visa cardholders where 42% are for user-nominated restaurants. Considering that the site is targeted at financially-empowered users, specifically Visa cardholders, we cannot expect a large user base with a broader demographic. But we can say that the current number, which I unfortunately cannot disclose, is a promising one.

This goes to show that the user interface worked as it was intended.

I would like to thank my client—the folks at Ate Media, and Mr U-Zyn Chua who handled the development and Ajax work.

Visit The Miele Guide

Photo of ADA aquarium tank from ADA.

This is the chapter of Kanso 簡素 (simplicity).

By definition Kanso is simplicity and keeping things basic and plain, free of decoration and gimmicks. There are two obvious schools of thought which designers belong to. One sees design as a means of decoration and the other sees it as craft. Decoration serves the purpose of amusement and craft serves the purpose of function, the function that form follows. A fancy dish garnished with top quality ingredients amuses our taste buds while plain rice serves only to ease our hunger. Kanso is rice, not pasta. You will get tired of eating fancy food but not basic food like rice. Kanso is plain white paper and black ink on paper, not oil on canvas. You only use what you need and nothing more. Kanso is the bare essential.

As a design consultant, my work schedule is very often hectic and stressful. I tend to find solace in things that are peaceful and natural. I like simplicity in the things I use so it is not surprising I am a devoted follower of MUJI, whose guiding principle is flexibility, providing the savvy customer with products that are simple and essential “objects for good living”. MUJI is distinguished by its design minimalism, emphasis on recycling, avoidance of waste in production and packaging, and no-logo policy. MUJI “無印良品” simply means quality products with no mark.

One of my favorite MUJI product which I buy and use very often are the B5 paperback notebooks which I buy for slightly more than three Singapore dollars at their two stores in town. They are made from recycled paper and look very simple. Because they are relatively cheap and cheap-looking, I can doodle on them and not have the worry of wasting expensive paper in the back of my mind. I have a Moleskin notebook which I bought out of novelty. It is expensive and elegant. In fact it is so expensive that I find it mind-restricting. I prefer cheap things I can waste.

The MUJI notebooks sold in Singapore are very light grey, unlike the yellow version in the image which I took from MUJI’s website. I actually have at least a dozen of the notebooks because I love them so much I worry they will go out of stock. My bed sheet, coffee table, book stands, storage boxes, kitchen broom and many other things are all MUJI!

So you can see I love simplicity. I designed my meishi (name cards) in a simple way too. My company name is “AEN” which is my name too, so there is no need to list both names. It also gives the message that my client deals with me personally. I used only one color—white, silkscreen printed over translucent plastic cards. The result is a card that blends itself into any background you hold it up against. I only put essential information on the card, which are my email address (which contains my website url/domain), what I do and my contact number, which is as minimal one can safely get.

While we are at name cards or if you prefer to call them business cards, let’s have a look at designs which oppose the Kanso principle.

Designers come up with crazy ideas all the time. Some end up “too creative” and stray too much from the original purpose. I found this business card design on Flickr. It is certainly cool and fun-looking but now imagine trying to stuff that sheep into your wallet or card case. Wool fabric instead of actual wool could be used instead so the card remains relatively flat and store-able.

Other than simplicity in design, a product can be simple in functionality too. The problem with today’s advances in technology is that it is often too easy to get carried away with features. Phones now support web browsing and email, can play music and video and have built-in mega-pixel cameras. Cars have GPS navigation systems, anti-theft systems, traction control systems, this system that system… Things are so choked full of features that product designers are now going back to the bare essentials, so we can catch our breath and escape from this feature choke.

This wall-hung CD player from MUJI is designed by Naoto Fukasawa in 1999. Quoted from iconeye.com: A tug on its pull string causes the exposed CD to turn and music plays through its integrated speaker. Fukasawa purposefully based it on a kitchen fan to give it an identity that people naturally recognize. “It’s totally synchronised with your image of the kitchen fan turning round,” he says. “You already have some memory of the fan, so it overlaps the two images and your body already knows how to turn on the fan by pulling on the switch.”

This is simplicity in functionality. This CD player does not come with surround sound, a fancy LED display nor a remote, it is a simple CD player that is a joy to use.

Keeps things simple when they should be. Use only what you need. One saying goes “Perfection is not when there is nothing more to add, but when there is nothing left to take away”. But there is no perfection. What is true then? There is no truth, only perception. Perception is clear when the mind is not clouded or burdened. Keep things simple as they should be and the mind will not be burdened.

Photo by tanakawho

This is a continuation of my original post on Wabi Sabi—Zen Aesthetic Principles. If you have not read that article, I recommend you read it before this one.

This article is the first of the seven principles I will be discussing, with my thoughts on them along with real examples of these principles manifest themselves in our everyday life. I will also show real life applications of the principles and how it can help make your design or artwork more effective and meaningful, or meaningless (in the Zen sense). I’ve already started to sound profound, read on and you will be able to understand.

Fukinsei 不均斉: Asymmetry, odd numbers, irregularity, unevenness and imbalance as a denial of perfection. Perfection and symmetry does not occur in nature.

If you look around you, you will seldom or in fact never observe perfect symmetry in nature. Water is never completely clear, Clouds are never perfectly white, your left hand is always a different size than your right hand, the moon is never a perfect circle, everything is random and even the most regular of events like day and night have slight differences in time. Exact measurement is human science which does not occur in nature.

Because nature is imperfect, we are comfortable and familiar with a world that is not perfect. Nothing has been perfect since the beginning of time. We cannot even give ourselves a perfect explanation of how it all began. Even the Big Bang is just a theory. Einstein tried to come up with a unified theory of the universe but he failed. We live in a much less than perfect world. Although humans have made attempts to strive towards perfection, we can only come close but we will never reach it. This familiarity with imperfection is what makes designs and art created with this principle in mind so pleasing to the mind.

In Industrial Design

Take a look at these bookcase designs by Naoto Fukasawa (more info). He introduced imbalance and asymmetry into the design of the bookcase simple by slanting one or more of its panels. The design is aesthetically pleasing and very functional too, with angles providing excellent support for books. People usually place their books slanted if without the help of an extra book stand, so it is just books and shelf, all that you need. If you can make something work better just by changing or adjusting existing elements without the need of additional elements, that is good design.

In Architecture

Who else to mention when it comes to asymmetrical and organic building designs than Toyo Ito? Toyo Ito happened to be the architect for VivoCity, a mega shopping mall in Singapore, where I live. The main exterior of the building as you can see from the photograph, is covered in panels resembling gentle waves on water, perfectly suited for its location at the harbor front. 49Black has a good flickr set of VivoCity and its construction.
Photo by Food Trails

In Logo Design

Asymetry and imbalance is common in the design of logos. The current Adidas logo was introduced in 1997, designed by Peter Moore, the then Creative Director for Adidas. It is inspired by the 3-Stripes as they appear on footwear. The shape formed by the bars also represents a mountain, indicating the challenge to be faced and the goals to be achieved.

The new logo is a dramatic move from the legacy Trefoil logo designed in 1971, which is symmetrical in appearance.

Thank you for reading this article on Fukinsei. Next I will be writing on Kanso (simple, basic).

Photo by isyamuddin

This series of articles on Wabi Sabi (in Kanji: 侘寂) were transferred from my old blog and rewritten for AEN UI.

Wabi Sabi (quoted from Wikipedia) represents a comprehensive Japanese world view or aesthetic centred on the acceptance of transience. The phrase comes from the two words wabi and sabi. The aesthetic is sometimes described as one of beauty that is “imperfect, impermanent, and incomplete” (according to Leonard Koren in his book Wabi-Sabi: for Artists, Designers, Poets and Philosophers). It is a concept derived from the Buddhist assertion of the Three marks of existence — Anicca, or in Japanese, 無常 (mujyou), impermanence.

Back in 2003, I used to design aquariums for myself and friends with aquatic plants. The Japanese calls it Nature Aquarium and the westerners call it aquascaping. In Japan, these artistically crafted aquascapes are usually designed based on Zen principles. I am deeply influenced by these principles and philosophy and I apply them to my design work and also everyday life. This explains my tendency to create simple, white, sparse, minimal and typographical layouts. Enough of myself let’s move on to the principles.

There are seven main principles of aesthetics in Zen philosophy for achieving Wabi Sabi.

FUKINSEI
imbalanced, uneven

Kanso is asymetry, odd numbers, irregularity, unevenness and imbalance as a denial of perfection. Perfection and symetry does not occur in nature.

Much like the uniqueness of wood grain, different sizes of rocks in the riverbed, fluctuation of tide levels, intensity of rainfall at different times of the year.

KANSO
simple, basic

Kanso is the elimination of ornate. Things of simplicity by their nature express truthfulness. Neat, frank and uncomplicated.

Truthful and frank expression need no decoration. Just like a piece of plain paper, giving the message that it is ready to be drawn or written on.

KOKOU
austere, aged

Basic, weathered bare essentials that are aged and unsensuous. Evoking sternness, forbidence and maturity.

Things that can remind us of Kokou are the worn bark of old trees, rocks and boulders, harshness of the desert and the natural cycle of growth, decay and death. Despite uninviting appearances, they represent lessons learned and wisdom gained over the infinite passage of time.

SHIZEN
natural

Raw, natural and unforced creativity without pretense. True naturalness is to negate the naive and accidental.

Being natural is to let the natural grain pattern of wood show instead of painting over it, speaking naturally without a fake accent or not pretending to be of a race you are not and illuminating a building with natural daylight.

YUGEN
subtly profound

Suggest and not reveal layers of meaning hidden within. Invisible to the casual eye and avoiding the obvious.

Real beauty exists when, through its suggestiveness, only a few words, or few brush strokes, can suggest what has not been said or shown, and hence awaken many inner thoughts and feelings.

DATSUZOKU
unworldly

Transcendence of conventional and traditional. Free from the bondage of laws and restrictions. True creativity.

Standards, guidelines, golden rules, popular methods… they are good for getting things done but if you seek true creativity, you should free yourself away from these rules. Trust your imagination and let your mind and feelings go free.

SEIJAKU
calm

Silence and tranquility, blissful solitude. Absence of disturbance and noise from one’s mind, body and surroundings.

The silent solitude of the moon, a lone person in the middle of a salt lake in Uyuni, a weather satellite in Earth’s orbit.