Today's Question:  What are you most afraid of as a programmer?        GIVE A SHOUT

Technical Article => Web =>  Web design

User experience distance

  sonic0002      2012-12-20 13:20:16      4,053    0

Good user experience can narrow the gap between product and users, it can also improve the user efficiency and increase satisfaction and comfort of users. Here we talk about user experience distance with different examples:

1. Floating bubble layer

When users need to delete one picture,they click on the "Delete" button, then the floating bubble layer appears to prompt the user to confirm the deletion, users only need to focus on the picture which reduces the visual burden, and also no need to move the mouse in long distances to click the OK button.Compared to pop up a modal window, users only need to concern about the picture.

iPad's photo deletion feature has similar effect.

2. Google+ circle

In Google+, if you want to follow other people and add them to your circle,you just need to move the mouse to the "Add" button and click to complete all operations. If you want to create a new circle, you can complete it on the same floating layer. The whole process is an very smooth experience. The user's visual attention and operations are completed within a very small area.

But for China's Sina Weibo, for the same process you need to click the "Add" button first, and fill the nickname and choose the group to add and finally click "Save" to complete. No matter where you click the "Add" button, the visual focus will be switched to the pop-up window at the center of the screen , this makes the user's visual focus and mouse move a long distance

3. Google's realtime search

For Google search, when typing something to search, the floating layer below the input box will display some related keywords, users can select keyword without having to enter the complete phrase; furthermore the search results will be updated accordingly(temporarily supported only in English version), you do not need to click on the hit the Enter key. This quick and easy search experience reduces the time of the user operations and search results display.

4. Symmetric interaction

For Google+'s user comments section, the Expand comments and Hide comments are placed at the same location, it's convenient for the user expanding and hiding comments. There is a hide comment icon at the bottom of user comments. This is easier for user to accept it and conforms to user's mental expectation.

YouTube's full screen and exit full screen operation are placed in the lower right corner of the player, you can exit full screen from where you enter the full screen mode, it is easier to be understood:

Symmetric interaction can be understood as "Exit from where you enter"

5. Flickr's photo editing

When doing photo editing in Flickr, just need to click the file name, you can rename and add a picture description at the original place; it's inline editing, WYSIWYG.

6. Skype vs QQ

When using Skype to chat with friends, there will be an animated small pencil when friends are typing; when friends delete content, the small pencil will be upside down to indicate wiping the contents. This is an effective feedback to user. This small detail design simulates users to use a pencil to write in real life, it narrows the distance between the network and the real life.

However, China's Tencent QQ doesn't provide this feature as good as Skype. When friends are typing, it will give feedback in the area of the window above which can not be found easily; user focus is the chat content area and they may not notice that small pencil.

Good user experience comes from the focus on every small detail in design.

Author :Jenson_Yang Source :



Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr    Delicious



No comment for this article.


A programmer in a room full of PMs

By sonic0002