New paintings:)

Pen Tablet

Just got a Wacom bamboo. So I drew a sketch to get a gist of it.

Recent Works: UI design for imDict

imDict is a popular online dictionary in China. Contributed by its intellectual search engine and dictionary robot on Gtalk and MSN, imDict has attracted nearly 10 thousands users.

Since the developer of imDict, Gao Pinker planned to embark on a major upgrade for imDict, I was commissioned to design its gadget UI, new profile picture and website.

Here they are:

1.Gmail & iGoogle gadget

3.IM profile picture

4.Homepage

5.Other webpages(Everyday English/ Google Images/ Wiki/ Visual Thesaurus)

New iPod shuffle

I know it's for gym/jogging and to some degree functionaility can be sacrificed for size(or, just for cool).
But at least it's not good for me because of these points:
1. Because of the ultimately simplified controls, I cannot go back or repeat the song I'm listening to.
2. I have to bear Apple's poor quality earbud because the controls are located on the earbud cord.
3. It'd be too slow to play playlist if you have many of them, you have to wait for the voiceover to read all until the very last playlist you wanna play. (quoted from one of my friends)
4. I thought apple would not add a feature that might be helpful but not mature or good enough. However now they did. That is VoiceOver.
5. For those left-handed people, the controls on right earbud cord might be inconvenient.
(of course they can swap left and right, but why do they have to do that?)

What's next?
iPod shuffle, iPod flea, iPod germ, iPod atom, iPod quak, or iPod nothing ?

Recommendation:An website of useful UI principles

http://designinginterfaces.com
this is acomplemental website for the book "Designing Interfaces: Patterns for Effective Interaction Design"
The principles introduced in this site are simple but important.

3 useful usability glossary

Rachel mentioned some concept of usability in her comment on my last post. When I tried to find out the meaning of those terms I found some good glossary that might be good for study:

• Interaction Design Encyclopaedia
  A growing encyclopaedia on interaction design; the articles not only explain usability terms and issues, but also provide a detailed description of their use in modern design.
  
  
• Usability First Glossary: Alphabetical Index
  One of the largest usability glossaries with hundreds of articles about usability-related issues.
  
  
• Usability Glossary
  Usability 101. Usability Glossary from the Information Technology Systems & Services of the University of Minnesota Duluth.

Usability Flaws of Google Reader

No doubt, Google reader is definitely a great product.
Google reader has entirely changed my living pattern. Other than the other rss reader, the friends shared items of Google reader greatly integrate the high-quality items. If my time is limited, I can easily pick out and read the articles shared by my friends who have a similar taste as me.

However, I also found some annoying flaws of Google Reader ：


1. Subscriptions Title
As shown in the picture, there are two rows of the subscriptions title. One is the name of the subscription seed, one is relevant settings. The point is that these rows take too much area for reading. The name of subscription is necessary because it notifies the user where he is, but the settings might not be used so often. I think there are two easy solutions: one is combining them into one row, if there is no room for the buttons, use icon; the other solution is hiding the second row of settings and allow it to slide out once your cursor moves to the bottom edge of the first row.

2. Share with note
Share with note is a great feature. I would like to see my friends' comment on the items they shared. However, after you finish the task of "share with note", there is no feedback on the button of "share" which is just beside it. I always ask myself does it mean I added a note but didn't share it? Can others see this item if the share button is not highlighted? After I saw some of my friends shared two same articles one with note after one without, I know he has the same problem with me.
The solution is, once you shared with note, the share button will be highlighted to notify you that you have shared it.

3. Feedback when hover on the article title
Clicking the article title will lead you to the new tab of the original site of the item. However, when you hover your cursor on the article title, except cursor turning to be a small hand, there is no other indication to tell me where is the button area. Please note that there is a small arrow icon after the title, are they in the same button are? At least I didn't know before I click them respectively.
Solution: Make it look like a button.

4. The unexpected items position change
The left bar of google reader is about the information of subscription. Sometimes when you don't need it, or you need your reading area expanded, you can hide the left bar by clicking the arrow on the vertical rule. However, once you do that, you will find that the position of the article will change(Typically, they will go up because the number of words per row is increased). That is stupid.
Solution: when you hide the left bar, the top row stays the same as it was before your hiding.

5. Button hover feedback
This is not a big problem. But I don't like when my cursor moves on the button and only the frame color of the button changes a little.

Google is great. However, interestingly, I always find flaws that should not existed in products of such a great company. I guess this may be rooted in their organization for innovation. I learned that no matter how big the project is, Google insists on forming a group of only 3-5 people to work on it.(I don't know whether it is ture now) Perhaps this not only makes their product very innovative but also increases the likelihood of emergence of flaws.

Number Usability

First, please answer these two question:

1. Mike completed piano level IX while Jennifer passed level III, who plays piano better?

2. Mike got a certificate of Japanese language level I while Jennifer got level III, who is better at Japanese?

We usually meet a handful of indexes or certifications presented in form of number but still feel confused about the meaning that those numbers stand for. First class scholarship implies greater accomplishment than Third class scholarship. But a five star hotel is much more luxury than a three star hotel. Certainly you are clear about scholarship and star-alliance because you touch this concept quite often in your daily life. But if you are not enthusiastic at Chinese Chess, how can you that less the number of level represents more excellence?

This is a daily usability problem and you can find it everywhere. When I was in China, I have never figure out what should I wear if the wearing-index is 4 or should I go to third-class hospital or first-class hospital (Now I know third-class is best from google).

So, what’s the reason behind this perceptual difficulty?

In my opinion, the reason is that numbers can only tell us the relationship in several aspects like greater or less, bigger or smaller, longer or shorter. However, there are more relationships that cannot simply be interpreted in such aspects. Take the car-washing index in China as an example, why six means more suitable for washing than five does? Why more severe the level disability can be represented in greater numbers of level? If the relationship between objects or situations cannot be interpreted quantitatively, then they are not good to be classified in numbers.

Now let us see the answer of the two questions in the beginning of this article: Mike plays better at piano and also be better at Japanese. So a new question arises: even it is good to adopt quantitative interpretations, there exists a problem of direction: should the number of level be greater if the situation is more positive or negative? Sometimes greater numbers will give people the feeling of positive but in some situation it is just opposite, for example, the class of cabin. Such phenomenon may rooted in some historical or social tradition or because of the difference of people’s perception.

OK, then how to reduce the trouble of quantitative classification? I think there are several points that needs designers’ attention. First method is to use more text. A good example is the classification in airplane: we have first-class, business class and economical class. Thus, for example, the cold-catching index can be turned to”easy to catch cold”, “ possible to catch cold” and “normal”. Presenting in color is also a great idea, color is broadly used in such as weather map or terror alert level.

If we have to use numbers, I have two suggestions: 1. keep it the same as the international standards or custom. 2. If there is no universal principal, then it would be better to do some user test to determine from which interpretation will the users get an easier acceptance and better understanding.

Number is just a very tiny detail in usability design, but it still result in bunch of problems. As a designer, we must be sensitive and vigilant to this details.

An interesting flash game

Have you guys played this game? I think it is a great to foster creativity.
Enjoy!
http://game.lansin.com/creat.shtml

The Map Website of Seoul National University

That's very impressive! I recommand everyone of you to have a visit to the link below:
http://www.useoul.edu/images/map/main.html
Just for comparison, you can visit the map website of Nortwestern:
http://aquavite.northwestern.edu/maps/

On the Seoul Univ.'s map, the name of the building emerges when your cursor hover on its image. And the campus is divided into several parts, you can easily visit any parts of the campus by just clicking the image and a street view will pop out naturally. If you are a student looking for the classroom by the number on your class schedule, or you are inquiring the schedual of the shuttle bus, you can find your anwser easily by easily searching it in the search box on the bottom. There are many other differnt ways for searching as well. It even provide the route for disable students. How nice it is!

The whole interface is clean and dynamic, the layout is fixed(the northwestern website will change the layout when you click the map), and the animation between different scene will release user's impacience during the loading time.

However, I think there are still some place need improvement. 1. when I choose an area of the campus, it is hard to find the main map button(which is located on the top). In my opinion, since the user can see where they are and choose where to go from the mini map on the upper-right of the page view, the main map button should also be placed on the mini map too.2. on the bottom-right, the "search by" part, there are a drop box and 2 buttons, actually they are equal relationship and are grouped together, however, different form hardly imply that they are equal relationship, which would cost mental load for the user to specify the function of these buttons and the drop box.

I hope one day the interface of Northwestern campus map website can be, at least the same good as that of Seoul National University.

My online Portfolio

I did this in the last two weeks.

The main purpose of doing this is to learn html and css(I didn't even know what div is 2 weeks ago -_-!), therefore at the beginning I didn't focus too much on the design of the webpage. As a result, some friends critisized me on the issues such as ugly color and layout.

Therefore, I decided to move on to the second round design of the website.

All sugestions are welcome: whatever it's about font, picture, words, or tabs. All the feedback are very important to me.

P.S.
1. I planned to put a logo on the upper-right of the header but haven't done that.
2. Some links (mail, downloads) don't work right now because I haven't uploaded the files.
3. I don't have IE on Mac OS so can't test the website with IE. I hope you can tell me if there is any problems to visit the site with IE.

the link: chenfandesign.com