AEN UI

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