Archive for the ‘ Class notes ’ Category

Class notes F14 – Week 4: Fundamental principles part 2 of 3

We moved from visual perception and attention to issues related to cognition – specifically, memory and learning.

It should be clear by now that largely, what makes an interface intuitive is its ease of learning. The following concepts are important when it comes to ease of learning:

Here’s Don Norman explaining affordances in less than 2 minutes:

All these things we know about visual perception and cognition are at the root of most guidelines for usable interface design. One of the most famous set of guidelines is Nielsen’s 10 heuristics, which we worked with in class. These heuristics can be used to inspect interfaces in a method called heuristic evaluation, which you will read about for next class.

Please remember to let me know that you read this post by interacting with it somehow. This, as well as participation on the FB group, are requirements for class participation.


Class notes F’14: Week 3 – Fundamental principles part 1 of 3

The first series of design principles were derived from what we know about visual perception and visual attention. They pertained to the Gestalt principles of visual perception, Visual structure & hierarchy, and a bit of Writing for the screen. The slides I used are on Canvas.

I’d also like you to know about:

In class, I mentioned resources such as:

Please look them up.

Not required, but for fun – look at some visual illusions. They really point out the role of the mind in visual perception. Here’s a freaky one I like.

Do remember that online participation on Facebook and here are required parts of the course. Please comment, Like, or somehow interact with this post to let me know you saw it. In the comments, you could let me know if such class notes are useful or not, or how I could make them more useful to you. Of course, questions about the material that I did not get a chance to answer in class should also go in the comments below.

Fall 2014 Class notes: Types of Design

We began class by furthering our exploration of “natural” and “intuitive” interaction with computers. We played around with the idea of tangible design, informed by the belief that using our bodies is natural and intuitive. The argument comes from Paul Dourish’s book Where the Action Is. See also the tangible interfaces lab at MIT.

Quick recap of the very big main points about the design process to take away from week 2:

  1. There are many types and approaches to design. UCD is not alone. The main differences among them are in philosophy (the central goal) and some of the methods and procedures. For example, the central goal of critical design is to raise awareness, to help people reflect upon and question the status quo. The central goal of GDD is to design for the users’ larger aspirations, whereas ACD focuses on structuring tools to facilitate an activity. Be sure to remember and be able to differentiate among UCD, GDD, ACD, participatory design and critical design. Interested in the theory behind critical design? Read up on critical theory – here’s a very quick introduction. Or, you might be interested in Norman’s controversial piece against human-centered design and in support of ACD. It’s a bit inflammatory, he has some clarifications to it, and overall, it does make sense, IMO.
  2. UCD is an approach and a process. It is a philosophy, a value system about how we approach design, but also a  specific set of steps, procedures, methods, and principles. The major steps of UCD are: user research, conceptual design, implementation, and evaluation.

If you have further questions about the things we discussed in class tonight, please ask them in the comments below.

Usability reporting

Please find below the slides about usability reporting.

Please run your research plan by me and let me know if you would like to meet with me during class next week.

Class notes: Usability testing

In preparation for discussing usability testing, we overviewed ALL the research methods mentioned in this class. The summary we came up with looked like this:



User Research


Conceptual Design

Brainstorm > Prototypes


programming (writing computer code) and implementation



Field observation



Cultural Probes, Design probes

contextual inquiries

ethnographic interviews

card sorting




picture cards

Case Study

Task Analysis  

Focus Groups


Cultural Probes

Card Sorting

Design probes

usability testing

focus groups

cognitive walkthrough

Heuristic Evaluation

Usability Inspection

Cognitive Walkthroughs

Usability Testing

Think-aloud (^)

Cognitive Walkthroughs

Focus Groups

Retrospective think-aloud protocol

User Acceptance Test

Usability Testing

Usability Inspections

Heuristic Evaluation

Laboratory Usability Testing

Field usability testing



Exit Interviews


Formative Research – Forms the creation

Evaluative Research – Evaluates the product

I then gave you more details about usability resting and Website Experience Analysis, as in the slides below:

At this point in the semester, my goal for you is to integrate all the knowledge – put it all together, and see links among the many concepts and methods we have learned. Please use your class reflection blog post to help you do that.


Class notes: Focus groups, Cognitive walkthroughs

In the first part of class we discussed questions about the differences among and utility of focus groups, cognitive walkthroughs, and usability inspection.

In the second part of class, you worked through a case study that required you to plan a focus group study and to conduct a mock focus group.

As you reflect on class, think about what you want to remember from what we did, but also please reflect on the experience of planning and conducting a tiny focus group. Was it like you expected? Different? What was easy? What was difficult? Do you feel you collected some useful information?

Don’t forget to email me your main findings from your focus group!

Class notes: Sketches and Wireframes

I started class today with a few announcements:

  1. If you are serious about learning more in the area of HCI, there is a course at Purdue, IE/PSYCH 577  Human Factors in Engineering (Purdue Catalog description) that covers in depth the topics we mentioned in the presentations about “Designing with the Mind in Mind.” It is taught by Dr. Robert Proctor, a legend in the field of human factors. If you have or are taking that course and can comment on its utility for students interested in user-centered design, please do so below.
  2. I’ve been contacted by someone who will pay a student to develop an Android app – email me if you want more details.

As we got to work, I wanted to clarify the concept of affordance and what an important role the body plays in seeing affordances in the physical world. I illustrated this with the slides below which show the difference in perceived affordances of common objects between humans and cats.

In the digital world, affordances are often communicated by making references to objects from the physical world. This is the concept of metaphor (this is the website I showed in class). However, metaphors have disadvantages when they impose the limitations of the physical world onto the digital one. Also, when taken too far, metaphors lead to skeumorphism, which is a tacky and outdated idea. We also discussed how metaphors can be outdated and become meaningless.

Next, we talked about using grid systems for alignment. The point is to limit the number of vertical alignments on a page. This will help you organize information better. This is the website I showed in class, where you can show and hide the grid on demand. I also recommend the book Making and Breaking the Grid.

Also, remember visual hierarchy. You can use size, color, shape, or texture contrast to make an object stand out and make it the first thing people look at. To assess visual hierarchy, use this simple test:

  • close your eyes
  • look at the screen and notice: what do you see first, second, third?
  • note what design elements are used to lead your eye from #1 to #2 and on.

Below are the slides on visual hierarchy I use in my undergraduate course.

Last, I mentioned typography – more about it in this other blog post.

A graphic design course can help you learn more about these things. As a user experience designer, if you know visual design, that is wonderful. You might be a UX unicorn! But if you are not a visual artist, you should at least be able to talk about these things intelligently.

You do need to know at least grids and visual hierarchy to create wireframes – for mockups, you do need a visual designer!

We spent the rest of class storyboarding a pizza ordering app and creating some wireframes.