Category Archives: Reading Reflections

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



Reading Reflections of Week 12: Usability Testing-Analyzing and Reporting Findings

Reading Material Covered: UxBook Chapter 16& 17

I have learned a lot of things about rigorous UX evaluation methods in last class. They can be formative or summative evaluation, or both. Now we have our qualitative usability data, what can we do next with these data? That’s what UxBook Chapter 16 tries to tell us: do informal summative data analysis, formative data analysis and cost-importance analysis to identity UX problems and fix them. UxBook Chapter 17 is quite straightforward. The author talked about how to report our informal summative and formative evaluation results. That is also the end of UX lifecycle process.

The goal of data analysis is to find whether the interaction design has met the UX targets. If not, how to modify the design. In one word, identify UX problems and causes as well as give suggestions to fix them. In order to provide a better explanation of the qualitative data process, the author uses several terminologies such as problems, symptoms, diagnosis, causes of causes, treatment and cure confirmation to illustrate it. Moreover, an important concept, UX problem instance, is posed in this chapter. The concept is different from critical incidents which is a record of raw data. Problem instance is more abstract and denotes the essence of a problem or cause which has been interpreted from the raw data.

The key procedure of formative data analysis is consolidating, merging and grouping these data. UxBook says that we need to extract related parts of one critical incident notes and put the critical incident pieces into one UX problem instance. This is the first step-consolidate data. After that, find and merge congruent problem instances into UX problem records. It will engender a single complete and representative UX problem description which could contribute to the cost-importance analysis as a basic reference. The third step is grouping related problem records which should be fixed together. Affinity diagram is a good tool to help us group and label all the problems.

Now we have these grouped problems, what’s next? UxBook says that we should prioritize UX problems in order to fix them. The book recommends a cost-importance table as a basic form to assess priorities. The table is powerful and effective to calculate trade-offs and I really love it! The column contains problem, importance to fix, solutions, cost to fix, priority ratio, priority rankings, cumulative cost and affordability. The form is quite straightforward and the process of cost-importance analysis is simple. I think the most difficult thing is to decide sort of problems and ordering of priorities. The book mentions that high importance and low cost problems are at the top of priority list and we can fix them at first. However, if the problem is high importance and high cost, how can we sort it? I think it is not pretty easy for me to make a decision. Maybe good feeling and engineering intuition will help me judge it.

After investing so many efforts and cost, finally we may think that our work is done. However, the last step of evaluation should not be ignored. It is neccssary to report formative UX evaluation results and convince the project team to fix those problems. For different audience, use different content types. But the basic principles should be followed: consistency, plain language, precision and specificity. Instead of being blunt, the report should be courtesy, likeable and positive. Remember that this is a collaborative team work. Although we are writing some flaws and pitfalls of the baby product, positive and euphemistic words will breed persuasiveness and success. Avoid jargon, avoid acrimony and avoid blaming. By doing so, our UX role will be taken seriously and the problems will be effectively fixed.

Leave a comment

Posted by on November 6, 2012 in Reading Reflections



Presentation Reflections of Week 5: Fundamental Usability & Interface Design Principles

In CGT 512, I did my first English presentation at Purdue University. Although it was not very perfect, I learned a lot of things from this experience. I blamed myself for late blogging. Every time when I have a strong desire to share something in my blog, I dare to create and dare to write because I regarded every article as my assignment and it should be perfect. In fact, blog is just the place where I can share thoughts, feelings and reflections with classmates. I should make it a habit to post what I want and quantity will finally turn into quality. Whatever, no excuse, the post is so late. Sorry about that…I am so sad but I really want to write something about what I learned in the first presentation.

In order to impress audience, our group made full preparation and dig deep into materials. We tried to encapsulate all the details into our presentation whereas forgot to focus on the most important points. I am not a good zoomer with the ability to change from details orientated to big pictures. Our direction was wrong at the first time. Out topic was about homepage design and we thought we should teach our audience about the principles and idioms. So we firstly spent a lot of time providing details of design tips. Then we illustrated them with several examples quickly because the time was limited. Why not insert the examples throughout the presentation to demonstrate the validity of principles? That will make our presentation convincing and effective. Moreover, I provided a good example in my second presentation and connected it with the principle very thoroughly. The response was amazing and it proved that with full use of examples, our audience will give us a big hug.

Other groups’ presentation really impressed me a lot. I want to make a list of things I took away from their presentation.

1. General philosophy of usability – don’t make me think, good behavior

I love the way they presented it-concise and powerful with key message. Their slides looked good and they faced the audience at all times. Through their presentation, I know a generalize philosophy of good design-considerate and smart! Being Considerate means being connected with users’ needs. That’s the same philosophy with good presentation which should be user-centered too. Designing smart products means having computers work harder. Computer should remember users’ behavior and preference when interacting with it. It can help people reach their goals and complete their tasks.

2. Navigation

Website contains seas of information and navigation helps us find what we want and know where we are. This group introduced a lot of basic concepts and principles of navigation. Especially, I felt that 12 guidelines were very useful for me. Every page should have navigation options and provide feedback to let users know where they are in the Web site. Keep navigation in one page short and group navigation elements in a consistent. If we are designing a complicated website, remember to use sitemap to help user find information easily.

3. Excise

How to eliminate excise? Excise refers to unnecessary information which doesn’t contribute to user’ goals. It is determined by users according to different resources, goals, culture and technology. Excise is interruption of work flow. In this view, navigation is excise and counted as overhead. We can use tool bars and butcons to eliminate navigation. The group used many good and bad examples to articulate how to eliminate excise, not only for website, but also for daily life product.

4. Metaphor

Many website designs are based on metaphor. It is the connection between physical world and interface design. Our design idea comes from objects or systems in the physical world. Imagine that, when you search the internet, all the images and icons symbolize familiar styling and images. Then You will find what you need very fast and consistently. That’s the power of metaphor-capture your emotion and grab visitors to the site. There are a lot of examples on the web such as folder, weather forecast, radio buttons, etc.

5. Visual design

How can we align visual elements in a layout that matches the audience’s needs in an efficient, effective and pleasing way? In our third UR report, we encounter many visual design issues such as how to make a balance, how to accomplish a cohesive and unified design, how to handle visual noise and clutter. When I went back to this presentation, I got some new things that can be applied in my report. These principles are very practical. Also, we should connect the useful information with Gestalt Principles. Keep in mind of basic knowledge and practice a lot.

6. Text & typography

The topic is quite straightforward. Typography refers to arrange text in the space to make it perceived and comprehend. Making your text legible is the first rule. Simple, consistent, and easy to understand is the second rule. The last rule is using good spacing. The speaker also listed several tips of what not to do. Avoid too many different fonts, sizes and avoid all capitals, saturated colors and splashing.

7. Presenting information visually

The presentation was beautiful. The speaker used a lot of examples to state the basic principle of information architect. The fundamental task is to make the information understandable. We should integrate text, graphics, and data in one display and clarify it. Moreover, our information is beautiful and we can select many pictures to visualize it!


Posted by on November 6, 2012 in Reading Reflections



Presentation Reflections of Week 6: Fundamentals of Interaction Design

Looking back on our second presentation, I am still very proud that our performance was remarkable. I learned lessons from the first presentation-select what’s most important and present the main points. Our group’s topic was dialogs. We used a serious of bulletin dialog boxes as the start of our presentation. Four types of dialog boxes were illustrated with good and bad examples.

  • Bulletin dialog boxes are the simplest dialogs and they serve application. A blocking bulletin box forces user to make a respond or the program will not continue, while a transitory bulletin dialog box allows the procedure without user intervention. The design principle is that never use transitory bulletin dialog as error messages or confirmations.
  • Process dialog boxes indicate that the application is busy, but everything is otherwise normal. The design principle is that make the time-consuming process clear with a process meter. Process dialog boxes should satisfy users’ mental modal of a time-consuming process. Also, do not forget to provide a way for users to cancel the operation and regain control of the program.
  • Function dialog boxes can control a single function and are usually summoned from a menu. The design principle of this boxes is that segregate configuration and actuation. That means do not combine configuring the function and invoking the function or the users will feel the task is very complicated.
  • Property dialog boxes are quite straightforward as its name implies. Through these boxes, users can view and change attributes of an object. The design principle is that employ toolbar, palette, sidebar or task pane as an interaction idiom. They provide direct, visible, and persistent functionality.

There are some other guiding principles we should keep in mind such as put primary interactions in the primary window and use consistent terminating commands for modeless dialog boxes. During our presentation, we explained and illustrated the principles through practical examples.

Although it has been several weeks since the second presentation, I can still remember my classmates’ excellent performances and what I learned in that class when going through all the presentation slides.

The first group gave the presentation about control. How can we control the computer? There are four types of controls-imperative controls, selection controls, entry controls and display controls. Imperative controls invoke actions and button conveys the quintessential imperative idiom. Selection controls are more complicated. The controls include check boxes, latching butcons or toggles, radio buttons or butcons, combutcons, list controls, etc. We should keep in mind that all the selections are mutually exclusive. Entry controls serve data entry. Sliders, spinners, dials and text fields are the manifestation of the control. Display controls are used to manage the visual information with scrollbars or drawers.

Pointing & selecting was the second group’s topic. The topic was very interesting. After their presentation, I started to think about my interaction with computer. What is the feedback of pointing and how can I select an object? It is not very easy to make a manipulation possible. Many input issues and idioms are included such as visual indication of selection and drag pliant response.

The presentation of the third group clearly and succinctly stated the menu idioms. I never thought that menu provides a pedagogic vector. I learned a lot of things from this presentation. Drop-down menu, pop-up menu and menu bar helped pave the way for Today’s menu. Toolbars and direct-manipulation idioms are immediate compared with menu commands when serving the power and purpose of an application. All in all, menus are more like a pedagogic vector and its purpose were to execute commands. Terseness would be a virtue for good GUI design.

The last topic was errors and alerts. It has a close relationship with dialog boxes which are used for error messages, alerts, and confirmations. This presentation helped me differentiate the three dialogs and avoid abusing them. People always hate error message and blame the messenger before they blame themselves. It is human nature. Eliminating error messages helps designers create reliable software. Effective methods to improve error dialogs include use plain language, provide helpful messages and hints, think of error messages as a conversation with users, etc. Instead of reporting malfunctions, alerts and confirmations are more like notification. Elimination and brevity is necessary for alerts and confirmations too. Furthermore, we can use rich modeless feedback to replace dialogs. By doing so, our interface will be more user friendly and effective.

Leave a comment

Posted by on November 6, 2012 in Reading Reflections



Reading Reflections of Week 7: Qualitative User Research

Reading Materials Covered: Cooper Chapter 4 & UxBook Chapter 3

Qualitative user research is one of user centered design methods. In this week’s class, Dr. V. helped us clearly sort out the differences and relations among all kinds of methods. These research methods include qualitative user research, cognitive walk-throughs, usability inspection, usability testing, think-aloud, website experience analysis and so on. We can’t use the full set of methods on every project, but multiple research methods will give us good combining insights. Therefore, the key question is what it is, when to use it and how to use it. Based on Cooper Chapter 4 and UxBook Chapter 3, I answered these basic questions to better understand qualitative user research.

What are the goals of user research?

The first and most important goal for user research is to understand users’ goals and motivations. Qualitative user research helps us identity patterns of behaviors, attitudes and aptitudes among users. It is very important to know how users perform when interacting with the system. What they say, what they think what they do. Instead of asking users what they need, we just observe and interview users in their own work context and examine their needs.

The second goal, I think, is to understand the context of the product. As Cooper mentioned, we need to know the technical, business, and environmental contexts — the domain— of the product to be designed. Contextual inquiry requires gathering field data from users, not interviewing users in a conference room or café shop, but in their normal work environment. Notice details of behaviors and take notes.

Finding mental model of users is another goal for qualitative user research. How do users think about the activity and system would be? What is commonly believed with the product? Furthermore, potential problems and frustrations with current products or analogous system should be considered too.

What are some available tools (research methods) for conducting user research?

These available tools include:

  • Contextual inquiry: Focus on users’ goals. Interview users where the interaction happens and encourage storytelling. Collect data from observation and interview.
  • Interviews: Stakeholder interviews, subject matter expert (SME) interviews, user and customer interviews, user observation/ethnographic field studies, literature review, product/prototype and competitive audits
  • Focus groups: Select representative users and gather them together in a room to ask a structured set of questions. Because the data is not collected in the work domain, the method has many pitfalls.
  • Task analysis: Cooper uses several graphs to illustrate the method. The book says that task analysis refers to a number of techniques that involve using either questionnaires or open-ended interviews to develop a detailed understanding of how people currently perform specific tasks. In my opinion, task analysis is a very useful tool to define what users are doing and should be doing in order to accomplish the results. Paying attention to observable processes and behaviors, we can make better recommendations for our system.

What kinds of data can we collect? What counts as data?

The contextual data include task data (raw user work activity data), recording video or audio, manual paper notes, rod artifacts, copious digital pictures, on-the –fly diagrams of workflow and sketches of layout, quantitative data, etc.

Our raw data describe a wide variety of topics. We must apply contextual analysis to extract the most important points and synthesize work activity notes. Then we can identity underlying themes about our work domains. In UxBook Chapter 4, the author articulates contextual analysis very specifically.

What are some big mistakes (pitfalls) to avoid when conducting user research?

Cooper says that when conducting contextual inquiry, we should avoid a fixed set of questions, avoid making the user a designer, avoid discussions of technology and avoid leading questions. Because the work practice may be biased with our own assumptions, we should not ask a question by trying to state what we think is their rationale. Each user has different perspective of how the domain functions. Remember, this is user-centered design. Get access to key users and discover what user cannot tell you.


Posted by on November 4, 2012 in Reading Reflections



Reading Reflections of Week 11: Usability Testing

Reading Materials Covered: UxBook Chapter 14 Rigorous Empirical Evaluation: Preparation

                                             UxBook Chapter 15 Rigorous Empirical Evaluation: Running the Session

These two chapters are very close contacted with each other. Chapter 14 is about how to make a good preparation for evaluation. Firstly, we should know how to plan for rigorous empirical UX evaluation, especially indentify the most important design issues and user tasks to investigate. Secondly, select our team members and appropriate tasks to support evaluation. Thirdly, determine our evaluation methods and data collection techniques which can fit our evaluation goals and needs. Just remember our approach to choosing these methods are goal driven. The following procedures are participant selection, recruitment and management. The book lists concrete steps to do these things and things what we should avoid. The last one is pilot testing. It is an effective method to find weaknesses in the prototype and solve problems in and early stage.

Chapter 15 is a continuation of Chapter 14. The article focuses on the details of running a lab-based evaluation. It begins with some essential preliminaries and protocol issues. Then the author uses three sections to discuss how to generate and collect quantitative UX data, qualitative UX data and emotional impact data. At last, wrap up our evaluation session.

This week’s materials are all about usability testing. The basic question is what is usability testing, why it’s done and how it is done.

1. What is usability testing and why it is done?

As a web designer, we need to do usability testing to see if our system works correctly as we expect. Jakob Nielsen defines usability testing and he says:

Usability is a quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease-of-use during the design process.

In my opinion, usability testing determines the efficiency, satisfaction and ease of use for our product. How can users find and use the features the first time they interact with our system? We want to know whether or not the users can accomplish their tasks easily, effectively and satisfactorily. That is what usability testing should do and the goal is to refine and modify our design.

2. How is usability testing done?

As UxBook mentions, there are two types of tests: lab-based test vs field-based test. Because our goal is to test whether our website product satisfies users’ needs, I will focus on lab test. There are several steps and methods to do usability testing.

  • Plan and Preparation

The first thing is to make a plan and prepare for the test. Select a team, determine our product and set our evaluation goals and measurements. Do not forget to select participants and recruit them.

  • User study

Learn about users’ physical and cultural characteristics, motivations and mental models. Also, why they use our products and how they use it. Especially, explore users’ goals and things they need to achieve.

  • Task study

Select appropriate tasks to support our evaluation. Except for benchmark tasks to measure issues, we can also select issues that uncover problems if they exist just like controversial issues. Keep an eye on critical incidents. Sometimes they can reflect some obvious and severe UX problems.

  • Conduct the usability test

Just let user finish the task and do not intervene them. Comprehension is very important. Reassure that there is no misconception. If a user asks a question, don’t answer it directly. Just observe what they behave and write it down. We can also use videotape to help us record but paper notes taking is necessary. Then we can categorize data and analyze data. Determine the causes of problems and find relevant usability issues.

  • Documentation

Complete and polish our usability report. Keep in mind who will read the report. Well done!

Leave a comment

Posted by on October 31, 2012 in Reading Reflections



Reading Reflection of Week 10: Information Architecture and Prototyping

Reading Materials: UxB Chapter 11; Conceptual Design: Information Architecture

The first article on Blackboard is about information architecture. The author articulates what information architecture is, how people navigate, how to develop an architecture, and some labels and orientation cues. The article is clear and concise and addresses the main aspects of the topic which allows me to grasp concepts quickly.

As the author mentions, information architecture means the structure or organization of the web site, how we design and label complex elements in practice. This area contains many issues such as navigation, searching, planning and organization. No matter what you use to organize information, the most important principle is that we should satisfy users’ needs and help them achieve their task. With this in mind, our web design is effective and creative.

When developing the information architecture, I think card sorting is a user-centered technique. Because card sorting is to involve perspective users to collect suggestions for the web site, it is a very useful approach to examine what people think and how they form concepts and categories. The open card sort method is quite common and the steps are very clear and easy to follow.

  • Label the cards
  • Brief the users
  • Let the users group the items and label the groups
  • Listen to other comments about the content
  • Group the groups, or subdivide the groups
  • Write down the hierarchy the users created, and repeat with more users
  • Combine the results

Often, we have a large number of materials to know and need to organize information into a coherent and complete form. In other words, we use different pages to convey information and different pages should be linked together. The way how they are linked is topology. There are various website topologies, as is show below:

Hierarchy topology: It divides information into different level and subgroups. The pattern is a symmetrical pattern where each level is connected to the next higher level. The top-down hierarchy topology is most commonly used.

Linear Topology: When moving through ordered list of similar items, an ordered sequence can be used which is linear topology. The disadvantage of this topology is that it may be time-consuming and tedious.

Matrix or Grid: Appropriate for two-dimensional organization. Not a very common use.

Full Mesh: More useful for small web site where every page is linked to every other page. It allows rapid navigation.

Arbitrary Network: Sites link back and forth with other sites with no dominant structure. It can help users find information when no central authority can determine the organization.

Hybrid: Information is complicated and topologies are not pure. Hybrid is a combination of these various topologies. Use it carefully and avoid confusing user or conveying vague information.

After reading UX Book Chapter 11 which discusses prototypes, I get an increasingly clearer picture of the different types and prototypes and how to choose the appropriate one.

Different types: Horizontal and Vertical Prototypes. Horizontal means broad and vertical means deeply. When we start with prototyping, horizontal prototype is a good choice as it can explore more concepts from a broad overview. While we need to give some details, it is better to use a vertical prototype which can show task sequences or associated user actions in depth.

Different fidelity levels of prototypes:

  • Low-Fidelity Prototype: Sketches, fast and disposable mockups, ultralow fidelity. They are used in the situation where few details are needed to flesh out or they may be quickly changed later. For ideation and sketching, we use low-fidelity prototype to support brainstorming and discussion.
  • Medium-Fidelity Prototypes: Evolution from low-fidelity prototypes. It includes wireframes, pixel-perfect interactive mockups and computer-printed paper. Sometimes we want a bit more fidelity in our procedure and medium-fidelity is a good choice. It often occurs when we undertake interaction design and early detailed design.
  • High-Fidelity Prototypes: Programmed Prototype. When our project is almost done, we can use high-fidelity prototypes to evaluate details in order to refine and modify the system. It is very effective to find many UX problems.

Additionally, prototyping has some pitfalls and drawbacks. The book has mentioned three pitfalls That is,

  • Get cooperation, buy-in, and understanding
  • Be honest about limitations and do not overpromise
  • Do not overwork your prototype

In my opinion, I should pay more attention to the third one which means do not “fall in love” with your prototype. Sometimes, after finally accomplishing our prototype, we are so excited and treasure our work so much. People all tend to be on a continuum of perfectionism. We modify and polish our work again again and again. It is totally wrong for prototyping because it is just some early things to realize design alternatives and evaluate interaction design. The fast you go, the sooner you know. So keep in mind that do not fall in love with your prototype and focus on something more important.


Posted by on October 30, 2012 in Reading Reflections