Monthly Archives: November 2012

How To Be a Good UX Designer

There is a huge need for talented user experience designers in the US now.  We should grasp the opportunity and practice ourselves a lot. But what makes a good UX designer and how can we prepare for that? There are several skills and qualities which is very important in my opinion to be a good UX designer.

1. Passion and curiosity to learn about people and technology

As a user experience designer, we should always keep our eyes open to the world and see different things instead of adapting to the environment. We have passion for learning more about people when they interact with digital products. We are very curious about the way things are going on and how we can make stuff better. The passion and curiosity drives a lot of the creative thinking in the user experience area. Without curious, energetic and creativity, new ideas can not emerge. Remember that we are focusing on real person. We observe users’ behavior, talk with them, ask them questions, spend time with them and have a purpose to enhance their lives. What a wonderful thing! We use technology to make things better and even better. Everytime, ask why, why things goes like this, why we need to change that, etc. Everywhere, we have a desire to know about potential users. By doing so, creative ideas are around us.

2. In depth knowledge of user-centered design techniques and principles

Instead of only being familiar with user-centered design, we need to have a deep knowledge and understanding of these guidelines and principles. On one hand, we should have the ability to design the products like website and IPhone app with Adobe PhotoShop, Illustrator or other design tools. On the other hand, we have the ability to apply cognitive psychology and human computer interaction techniques to evaluate and test these systems. For example, we can choose the most appropriate personas, scenarios and create storyboards, wireframes and rapid prototyping.  With implementing user interface guidelines and standards, we collect data, analysis data and interpret results to meet business needs. The qualification is that we should have a strong understanding of the design process and deliver results that satisfy product goals best.

3. The ability to conduct scientific research

We are proficient with various tools and we know user-centered design guidelines. Why do we need to be a researcher? To answer the question, it is necessary to learn that UX designer is not just a designer, it is more like a versatile person. You are good at many things, especially conducting qualitative research to think about what user are thinking about.  If we go through some UX design positions, we can find that many requirements are a combination of graphic design skills, wireframing, rapid prototyping, designing researches such as user interview, usability testing, ethnographic research and so on.  A good user experience designer should be familiar with these researches and skilled in planning research, choosing the right qualitative method, collecting and analyzing data. Moreover, a good presentation of your findings and results is the key skill too. This is what we are doing in our CGT 512 class now. These things are closely related to our professional growth. Hopefully, we all can do a great job!


Posted by on November 28, 2012 in Breakthrough Ideas



An Interesting Article About Crafting a Mobile App

Have you ever tried the IPhone Application-Ridejoy. You can share your rides with friendly people by posting your rides. The most wonderful part of the design is the match between passengers and drivers. It is a great experience to take along some riders and get paid if you are a driver and have empty seats. Also, if you are a passenger, it is cool to find a ride using this application. Jason Shen, the co-founder of Ridejoy, posted an article- Crafting a Mobile App: a UX Design Case Study for Startups on his blog about the design process.  The design team identified three key challenges-encouraging posting, speeding up matches and facilitating arrangements. They learned lessons from the process which is valuable for us too.

  • Prototype test with real users is very important and helps them make decisions faster.
  • Play out the interaction models fully to truly understand how they are going to work.
  • Be perfect for the details and always gonna ship.

Please check it out by yourself. Thanks.



A Great Resource for Usability Career

I just found a website called UsabilityCounts which is created by Patrick Neeman, director of user experience at Jobvite. The website contains a lot of useful information especially for those who want to get a great job in user experience area. I was very excited when I found the website. You should go check it out yourself. Here is some lists of what I like.



Some Good Examples of User-Friendly Navigation Menus

A good navigation menu is user-friendly which can help users to locate and find where they are. If users can’t find their way around the interface, they will be frustrated and the navigation menu is not user-friendly. Good navigation menu is simple and reduces cognitive overload.  Users don’t need to stop and think about relationship between objects.  What’s more, providing feedback on users’ location is essential of any navigation menu.if users can’t get feedback from a navigation menu, it is not user-friendly.

Below I present some beautiful and user-friendly navigation menus.

1. Visually appealing icons

A great menu is clear and transparent but in a visually appealing way. Once arriving at the navigation page, users can be very picky about icons. Beautiful menus are always simple and intuitive enabling users to feel completely. Some UI designers use large and image-based icons on the web page and grasp users’ attention quickly.  Users are amazed by these icons but still immediately know where they are led and how they interact with the website.

One  example of clean menus with icons is Fishing Cactus. The icons are very cute and aid users in recognizing each item’s function.

Another example is Viviledish which using handwriting and a piece of paper to guide users in the website.

One more example is Neochic and the navigation options are very simple but very attractive. On the right bottom of the web page, there is a man who behaves as the meaning of the keywords listed in the options. Such a creative idea!

2. Be active, not silent

A new trend of designing an effective navigation menu is to be active and speaking, not serious and silent.  Instead of a list of options, the navigation menu of the website has a beautiful layout with great effects. With good UI design thrown in, the menu is outstanding and impressive differentiating with other plain websites. The designer can use different approaches to present options from the traditional header menu to side bar menus and much more.

Thibaud’s Portfolio -A beautiful layout navigation menu with great effects and active communication with users

Cassys Design-the navigation menu uses smart sidebar with consistency and unique features

3. Provide effective feedback

Remember to provide effective feedback and let users know where they are in the web site. It is a terrible thing if users are lost in the navigation page. There are some useful methods here. For example, we can use ’glosses’ to help users select correct links.  Also, we can differentiate and group navigation elements which requiring the shifting of attention so that users can be led into a new context. Moreover, animation and visual feedback are great ways to assist a user finding where they are in the webpage.

I found a good example of effective feedback navigation menu-BubbleNavigation. This is an example from a tutorial. Once users hover the mouse over the navigation option, a drop down menu surrounded by a blue circle pops up and let users make a choice. We can learn a lot of useful tips from the example.



Posted by on November 25, 2012 in Good/Bad Interface Design



A Comparison between Dealnews Website and Dealmoon Website based on information foraging theory

With Black Friday just around the corner, I am looking for convenient ways to get great deals. Prior to heading to the mall, it is better to search for these advertisements first online and do some homework. I found that both Dealnews and Dealmoon have a separate feature section for Black Friday Deal Ads. But they use different ways to present the same topic. I prefer Dealnews to Dealmoon for the following reasons based on information foraging theory.

Make it easy for user to find what they need

Dealmoon only uses vertically arranged layout and users need to scroll to get from one item to the next. The website displays some specific information about the ads such as downloading flyer, searching deals and store locations.

Dealnews arranges brand logos three in a row and each thumbnail contains a button which allows users to browse specific ads.

According to information snacking theorem, users always go online briefly and look for quick answers. When it is hard to find useful information, users will leave your website quickly. In a sea of information about deals and coupons, I think it is easier to scan through brand logos and find what I need. There is an issue of excise. For Dealmoon, vertical-arranged ads mean more mouse movement and more navigation from one item to another. However, with brand logos presented both vertically and horizontally, we can move our mouse at a higher speed towards the items and get more information at limited space and time.

Exhibit cues directly related to the desired outcome

Users are lazy and goal-driven. When seeking information they always do cost-cost-benefit assessment. I want to get specific information of deals and Dealmoon just gives me some pictures of the flyer and a vertical display of texts. Please see the following figures.

When I click the button of browsing ads on Dealnews,the website offers me a list of screenshots of products and their detail information. Even I can get an alert of the product.

A good design interface is that it can provide clear navigation cues, effective content grouping and rich data sources for users. The designer should give cues directly related to users’ desired outcome. Dealnews offers clear path and helps users to find what they really need, while the designers of  Dealmoon are lazy and allow users to spend a lot of time in information foraging.  The key of cost and benefit model is to get more results in less time. The website need to present massive amounts of data in an effective and efficient ways so that users perform the embedded task easily and happily.

1 Comment

Posted by on November 18, 2012 in Good/Bad Interface Design



A Fashion Website With Good Visual Design

The first impression of a website is very important. Good visual information from the website will please user. As I often go to FreePeople, I choose it as a good example of visual design.

A Clear Viewing Order

Alignment is the first principle of visual design. Visual elements on FreePeople are not placed arbitrarily. Elements are aligned and connected to each other which create a clear and beautiful look. In the following figure, we can see that all the items in navigation bar behave consistently with same type, font and color. Even the layout of advertisements below are ordered and placed with corresponding importance. For the vertical categories-by style and by shops, everything is aligned on the left side with strong visual hierarchy without cluttered or confusing. The clear viewing order is very simple and strengthens the design.

Good Contrast, No Conflict

If you want to attract user’ eyes and guide direction, just make a contrast. If everything is clean and neat, nothing is important. Avoid making elements on the page merely similar by adding contrast such as creating bold fonts, different colors, shapes, spaces, etc. Belowing is the item description page of FreePeople. The options of price, color and size are bold. These are very important information for users to make a choice. Moreover, the link of Q&A and review writing are marked with red color and thereby users are very easy to find and click them.

Group Related Items Together

Group items that have close relationship together and make the page not only organized but have a nice look! The website of FreePeople use cohesive, consistent, and contextually appropriate imagery to integrate style. For example, in the following picture, we can see that the organization is very clear because the related text and links are grouped together and thereby reduced cognitive load on the user.

Smart White Space

It is crucial to learn how to design for the white space. Instead of a waste of valuable screen real estate, white space is one of the most valuable parts of the design. You can not overlook zero state because it can direct users’ eyes and strengthen usability. Look at the following figure which is a comparison of FreePeople website and ASOS website, you can notice that with plenty of whitespace, FreePeople looks more elegance and beautiful while the layout of the ASOS page is a bit more crowded and cluttered.

Leave a comment

Posted by on November 11, 2012 in Good/Bad Interface Design



RAA5: A Structured Process for Transforming Usability Data into Usability Information

1. APA Citation:

Howarth Jonathan, Andre S Terence, Hartson Rex (2007). A structured process for transforming usability data into usability information. Journal of Usability Studies, Volume 3, Issue 1, November 2007, Pages 7-23.

The link is

2. Purpose:

In recent usability research area, researchers have paid more and more attention to how to use the raw usability data generated by usability evaluation methods instead of developing evaluation methods. The assumption of the transforming process is relatively straightforward. However, the author questiones the assumption and argues that the assumption is incorrect for novice usability practitioners. Based on a new way of thinking about data, the paper presents a more structured approach to transforming raw data into usability information and conducts a study to evaluate the process.

3. Methods:

The extraction of usability problems is not straightforward because raw usability data are specific while usability problems are quite general. The author introduced the concept of UP instances to fill the gap. The structured usability evaluation process is as follows (figure 1).

Figure 1: Structured usability evaluation process

The usability problem analysis step is significant. Practitioners put more details to fill the UP instance records and then merge the same UP instance records into one UP. In the reporting stage, group the associated UP descriptions to create evaluation reports and make it appropriate for target users to read.

In order to evaluate how well a structured process supports novice practitioners, the author conducted a study with sixteen evaluators who were Virginia Tech graduate students recruited from university mailing lists. Additionally, all the participants were regarded as novice usability practitioners because they had less than one year of job experience related to usability engineering. The effectiveness of the result was defined as the accuracy and completeness of the final evaluation reports produced by usability practitioners. Therefore, in the experimental design, the independent variable was “support” which equals to “structured” and “no support” which means “freedom” with a between-subjects design. The dependent variables were time measures and quality of the evaluation reports rated by judges.

  • Firstly, the participants who were referred to as evaluators, began the evaluation of Scholar, a course management system (, by watching videos of two representative users performing tasks. One representative user task is adding a student to and removing a student from a course, and the other user task is adding a student to a course. Each evaluator participated in one study session with no more than two and a half hours. Evaluators participated individually; each study session consisted of only one evaluator.
  • Secondly, while watching the videos of the representative users, the evaluators were asked to record their comments in Morae or create UP instance records in DCART. Morae and DCART are two different tools for usability reporting. Morae (TechSmith) was used for without explicit supporting for the structured process. On the contrary, DCART (the Data Collection, Analysis, and Reporting Tool) was used for explicit supporting for the structured process (figure 2).
  • Figure 2: Usability problem instance record in DCART
  • Thirdly, the evaluators with Morae reviewed their comments, added new comments, and reviewed the video. Then they created usability evaluation reports based on their comments. The evaluators merged the same UP instances and grouped related Ups using DCART. Then they built tem into DCART to generate a usability evaluation report based on the groups of UPs they had created.
  • The final step is calculating quality of evaluation reports. Evaluator effectiveness was of primary interest for this study. The quality was rated by judges and developers. Two individual with usability experience referred to as judges rated the reports based on six guidelines developed by Capra. As to developers, the researchers created a questionnaire based on the set of Capra’s guidelines and let three developers from the Scholar team fill out the questionnaire and rate the evaluation reports.

4. Main Findings:

A t-test indicated that there was not a significant difference between the freeform treatment and structured treatment means, t(14)=0.48, p=0.64, as well as the number of evaluators who finished the task. The data supported that the structured process would not affect the evaluation in terms of time.

For the quality as rated by judges, the treatment main effect indicated that mean rating for the structured treatment, M=0.45, SD=1.17, was significantly greater than for the freeform treatment, M=0.10, SD=1.54. The data supported that the structured process would increase the quality of the usability evaluation reports as rated by judges

As to the results of developer ratings, a higher mean rating for the guideline questions and the summary question would indicate a higher level of usefulness and quality. The treatment main effect indicated that mean rating for the guideline questions for the structured treatment, M=1.21, SD=0.97, was significantly greater than for the freeform treatment, M=0.39, SD=1. 43. The data also supported our hypothesis the structured process would increase higher quality as rated by developers.

All in all, all these results proved that a structured process helps novice usability practitioners transform raw data into usability information more accurately and completely with higher quality than a freeform approach. The higher ratings assigned by judges and developers support this interpretation.

5. Analysis:

When I read UxBook chapter 16&17, the article recommended us to use UX problem instance to abstract out details of data. I thought the process was quite rigorous and complicated. Why not abridge the analysis and just use some rapid methods? Unfortunately, it is a passing thought and I didn’t think it deeply. So when I found the article, I was very excited as well as regretful. Concrete and factual thinking of this question can result into a thesis! The author grabbed the opportunity and filled the gap while I just let it go and do nothing. Therefore, whenever you have something in your mind, don’t hesitate to post it or write it down. Further reflection in the following days will help you to find new ideas.

Overall, the study examines the efficiency of a structured approach to transform usability data produced usability evaluation reports comparing with freeform approach. The new method was rated to be of higher quality by both judges and developers. However, the paper did little to improve the effectiveness of novices. Not only a framework but also effective usability engineering tools will help novice practitioners understand or describe usability problems. Furthermore, the experiment was conducted in a fixed-resources environment with short video clips, few tasks and short performance time, which may not reflect a real lab-based usability evaluation.

1 Comment

Posted by on November 11, 2012 in Research Article Analyses