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



Reading Reflections of Week 3: Visual Perception, Visual Attention and Cognition

Information about human memory is very important for interface design. In week 3, we learned how to translate the knowledge to graphic design. However, after two months, I find that I can relate Gestalt theory to the good or bad examples while I never mention visual attention theory or information foraging theory. I should not forget these fundamental principles. So I read again and summarize the fundamental rules of human computer interaction design which can find testimony in human psychology.


Why is clarity so important to interface design? Before I read the article on Blackboard, I will say well, it is human nature. So what nature? Information foraging theory tells us that people always seek and select information they need and get maximum benefit for minimum effort. People are likely to avoid complexity and information overload. Therefore, designers should clearly indentify links and category descriptions in order to help users find the destination. More easily to recognize what it is, where they are and how they do, more successfully people interact with our interface. That’s why explicit navigation bars are necessary. No mystery and cluttered information in our system.


According to visual search paradigm, people search target items among a number of distracting items. Some highly artificial stimuli like brighter color, salient letters will guide attention and help user keep track what was attended. The paradigm has been used extensively, especially in most of Gestalt Laws. As to law of balance/symmetry, a psychological sense of equilibrium is a stimulus directing attention. In law of figure-ground, two different foreground colors is a stimulus to guide attention orienting in foreground or background. In law of focal point, the focal point will draw users’ attention as a stimulus. Highlighting should be used not only for differentiating things, but also for guiding attention.

Put Primary Interaction Per Screen

When opening a homepage, it is annoying to see splash screens. When scanning highlight of the page, it is angry to see many advertisements. Why? According to visual attention theory, our attention is precious and selection is object-based. That means our attention is directed toward the target. Attention is precious. Do not use distractible materials to upset users. Our users are selfish, lazy, and ruthless. They are very unhappy to be interrupted or hard to find what they are looking for. Moreover, object-based deployment of attention is influenced by determine perceptual grouping. As a result, one screen is supported for one primary interaction and you will get credit for that.

Direct manipulation

Sometimes we want to create a perfect interface so that we add more options, graphics, widgets, buttons to the page which looks like a hodgepodge. One of the interesting things about information foraging is that doing cost-benefit analysis for user behavior. Absolutely, users need food, need calories. But if you give them so many contents and options, it will be time consuming to find their target items. So the best design is that user can manipulate physical objects directly and focus on their tasks. In Cooper and UxBook, the word excise appears many times—navigation excise, visual excise, menu excise, etc. Before designing a page, make tradeoffs and asked yourself what users will gain from the page and what their time and effort cost is. It is pretty the same thing with usability metrics which Dr. V. introduced last week. The performance metric includes task success, time on task, errors and efficiency.

Strong Visual Hierarchies and Smart Organization

Clutter means confusing. Clear view order of elements means user friendly. To achieve strong visual hierarchies and smart organization, we should decide the visual weight of all elements, which are related and above the fold, which are obscure with muted color. Why will we benefit from this principle? Top-down and Bottom-up control of attention can explain this. In visual search, Top-down is goal-driven attention which refers to recognize patterns in a contextual domain. Bottom-up is stimulus-driven attention which means beginning from retina to the visual cortex. How we perceive things is a combination of both bottom-up and top-down mechanisms. The bottom-up process happens so quickly that we may not notice it. The stimuli help us recognize and identify objects when we interact with the system. While the top-down process is contextual, what we know, what we expect, and what we want to do influence what we see. By understanding how this process works, we can understand strong visual hierarchies and smart organization enable user to better remember and understand the message that the webpage conveys.

Leave a comment

Posted by on November 8, 2012 in Reading Reflections