This week I found another reason makes me love it even more. The platform voice instruction system. Long story short, on one direction, it’s forever female voice while on the other always male voice. This subtle design helped passengers from taking the wrong direction train.

Hat tip to the designer.

I was digging into my memory and was looking for recipes online, trying to find a perfect recipe. I noticed most recipes are “step by step” format and in some cases the recipe can be incredibly long.

I devised another format of recipe, mainly in Grid. See the image below, it’s pretty self-explanatory.

Recipe Design - Wenbo

I like this grid style, cuz:
1 – in terms of length, it’s not that daunting
2 – it gives u a hint of “which ingredient interact with which” in neighboring blocks.
3- it offers multi-tasking possibilities.

However, during the real cooking process, I found it not optimal. The underlying reason is: It’s not as straightforward as the step-by-step style;

User wants simple no-brainer instruction during cooking and user’s need determines everything. That’s why step-by-step instruction flourishes.

Have fun!

Internet Marketing - Search Engine

Rules of thumb

- Speak users’ language, be concise but not ambiguous
- It never hurts to do one more dry run.
- Response rate: 20%-40% for target email invitations, 10%-15% for web popup windows, 1%-2% web banners

Prelude: Survey and you

We all agree that online survey is a very effective method to unveil l the answer to product stakeholder’s questions and collect quantitative data about target users. It is especially superior in making strong claims about narrow phenomena.
There are several ways of attracting users to take your survey, ranking in efficiency, from highest to lowest: email campaign, popup window (which I dislike most) and website banners. In my case, I used a sliding animation, hoping to have user’s attention with minimal negative influence on browsing experience.

FRBSF Survey

Apple Survey

Step 1: Formulate Goals

What’s the question in your mind? Do you want to know your users’ characteristic information, their behavioral preferences or their attitude toward your product? In my case, we hope to know users’ impression of usability/visual appeal/functionability/web page speed and we can prioritize them. List all questions out, group them semantically, and eliminate ones that you don’t really need, because, the shorter the better.
A gorgeous example is from apple.

survey frbsf other

Step 2: Design the questions, make it short

The rule of thumb is: make it short. If this survey is a single-question-one, GOOD, if a multi-questions one, don’t be discouraged, remember not to put too many questions on one page, because a long-and-daunting-survey is not that friendly to users. If possible, try to use as many as many as many close-end questions as possible, which will save both users and your time. If you hope users to surprise you, it is ideal to have an open-end question with the survey.
Or you can do what I did here, using a little bit Javascript, asking for “why” “other” when user clicks on “strongly disagree” or “other” button. A tiny interaction makes a difference, right?

Agree/Disagree Array

Another nice approach I would like to mention is the agree/disagree array. If you have a group of somewhat related questions all asking agree/disagree, why not put them into an array, reduce the reading time of the user and make the survey more visually appealing.

Survey Design

Step 3: Test, Pilot and Start the survey

Actually a better phrase for this section is: Iterative test, iterative pilot and finally start the survey. The test of the survey helps u refine your wording in the survey, and the pilot helps u balance the amount of information you require and the time users need to spend on it.
Send out the survey using: email, popup window, banner or even telephone calls. Remember, the invitation message needs to be short, and full of incentive. A subtle example shown below is from msdn while in contrast an annoying survey is displayed side by side.

Last Step: Data analysis is important

Either a home-built survey application or 3rd party online survey tools will generate reports. Do spend GOOD amount of time on it, totally worth it.

According to the post, iPhone turned out to be the best selling phone in Korea in the week of November 30, hitting 10.2% market of all mobile handsets (not just smartphones) sold in Korea. Remember that not until late Sept, South Korea gave thumb up to iphone. This sales figure is impressive, and its carrier KT’s market share is booming, beating the market-leader SK Telecom.

I hope we can see more data on this, allowing further analysis. One comment I have in my mind is: a truly nice item will claim the victory.

• Late entry into China Market
• No wifi due to Chinese cell network policy
• Ridiculously high price
• Not a generous amount of app available

Altho CEO of China Unicom claimed the figure beat the expectation and is confident in iphone becoming the most popular cell phone in China, I would say this outcome is a fiasco.

There is no room for debate on the negative effects brought by lack of wifi and grey market; I would like to add that this fiasco also comes from a marketing failure and a user experience acceptance failure.

My telecommunication working experience in China tells me China Unicom has a notorious reputation in the industry, for its delay of denial of last 10% or even 20% of the payment such as cellphone network station construction, and it is seldom good at providing effective marketing strategy to cater to different users’ need. I really have no idea why iphone pick Unicom as network carrier partner in China.

The second point I would like to stress is the acceptance of elegant usability in China. There are a good amount of user experience professionals working as evangelist in China but an even larger amount of developers believe user experience is just merely graphic design plus some fancy coding effects or libraries. A side example is, Japanese cellphone manufacturer Sharp, who specializes in the cellphone industrial design, gained significant revenue without promoting its brand. We can’t really influence the taste of consumers but we CAN bring products with excellent usability to our consumers.
Take iPhone homescreen as an example,

iPhone_homescreen

Thanks for reading. Next time, possibly this Wednesday, I’ll discuss more on our website redeisgn progress, specifically, the visitors survey.

Last week, Federal Reserve announced the “Crisis and Response” website, aiming to tell the cause of the financial crisis, to explain Fed’s effort so far, to teach consumers better manage their wealth and to predict the future of our economy. We invested a lot of human resources into this project and we sincerely hope that this can be of use to everyone.

One thing I would like to discuss is the goal of this site. We are trying to meet the need of our users: economic researchers, home owners and general public. FRBSF.org attracts tremendous daily internet traffic, a dilemma is that it’s inevitable for FRBSF.org, a government website with a focus on economy, to be data intensive. Some users expressed their need for more economic research resources while others are only interested in Private Mortgage Insurance. We are working very hard to balance users’ needs and this “Crisis and Response” is an excellent attempt.

The current FRBSF.org homepage was designed about ten years ago but it’s still of great usability.

FRBSF homepage

We try to condense our data and research article into concise interactive graphs and charts; in the meantime, we are working very hard to improve the visual appearances of the website and to reduce users’ visual load.

Crisis and Response Homepage

We extensively uses JavaScript and provide additional more detailed resources for advanced users.

Crisis and Response Chart

Making the website more approachable to more users is our goal. This same concept will lead us in our website redesign. If any thoughts, feel free to leave it here and I promise you will see our best responses.

Here is a comparison. In one of our application we have a text submitting form with a character limit of 600. Unlike the traditional “you have reached 600″ alert, I tried to implement in a more user friendly way.

1. Provide a live word count. If exceeded, it will turn into a negative value with red color the color I believe is a good metaphor for “stop”
2. Take of the “600″ alert
3. Disable the “submit” button after user exceed the limit, providing a soft alert
4. While the textarea is blank, show a hint message “this is 600 limit only”

Usable vs unusalbe warning

So, how do you feel about it?

vertical text tag cloud effect preview

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
writing-mode: tb-rl;

I’ve been working on a very interesting project and one of the desired feature is a fancy tag cloud with variations in color, size, and text alignment. Tricks with color like depth or text sizes are pretty straightforward; however, the vertical & horizontal text alignment is not as easy as his other two fellow requirements buddies.

After digging thru piles of rss reader records, I found css sprite is a good answer. Here’re an article explaining detailed implementations, step by step, and a sample image (upper half demo effect, lower half css sprite compositions).

Vertical text rotation using css sprites

However, some brilliant people found a better way by employing css without sprite graphics. Link. He is using

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Explanations to the code: webkit-transform is the Safari core based browser’s support for vertical text, -moz-transform is the Mozilla Firefox counterpart, while the last DXImageTransform is the Microsoft IE Method.

Finally, after looking up into the css 3 standard, I found the lenghty IE vertical text support is trimmed and it is included in the css 3 standard:
writing-mode: tb-rl. Therefore, the final solution is

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
writing-mode: tb-rl;

I hope my article can be of use to you.

The video clip above is “piano stairs” which is a super fun design with raging success. This design successfully increased the percentage of people taking stairs instead of elevator by an astonishing 66%! Frankly speaking I hope San Francisco or my company can have a piano stairs.

Now I would like to discuss on the fun & usability. As a user experience professional, I always keep users’ goal in my mind such as running a search query, adding to cart, registration, placing order, which is a standard and correct process. However, we ux professionals’ goal s not only to help user achieve their goal in a pain-free process, but also keep the user engaged. According to D. Normans “Emotional Design”, adding positive emotional qualities (in this case, fun) in a design changes the user’s overall perception of the products utility and usability—PERCEPTION.

Here are some more examples,

Google Reader Fun (classical contra cheat upup downdown left right left right BA)

Flickr Fun Greetings

Some people may argue we should never compromise usability for fun. I am with this idea, partially, cuz I believe, fun complements usability. So, you have any fun products in your mind?