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!


Assignment: Conceptual Design

The Conceptual Design assignment is posted on Blackboard and below. Please ask questions in the comments on this blog post.

Cross-channel user experiences

I mentioned in class the book Pervasive Information Architecture. See also today’s Alertbox from Jakob Nielsen’s company about The Importance of Consistent Cross-Channel User Experiences.

As most entities communicate with users across different channels – e.g. website, app, kiosks, offline, etc. it is important to design for a consistent and user experience on all channels – same look and feel, and of course, good usability and pleasant user experience across!

Please click through and read the Nielsen column. And if you haven’t subscribed to the Alertbox yet, please do so now, if UX is something you are seriously interested in.

Happy Monday!

Monday everybody hates me

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.

Reverse metaphor: Dropbox



I saw this in a building the other day and thought to myself: Dropbox?! Oh, I know what this is, it works just like the online service Dropbox.

Then, of course, I realized that it’s the other way round.


But there are so many metaphors we use on the screen that have become outdated, because we do not use their physical analogues anymore – floppy disks? paper calendars? tabbed folders?

The metaphors are becoming divorced from the very objects that used to help us understand how they were supposed to help us understand how the computer features work.

They are becoming stand-alone signifiers. We know what “tabs” are even if we’ve never worked with tabbed folders before (imagine explaining to your children where this comes from!).

So, what are we to do? I see 2 options:

  1. Keep the metaphors and use them with their newly acquired meaning. They are not metaphors anymore, they don’t stand for something else. They stand for themselves.
  2. Move away from the metaphors that make reference to physical objects and embrace the digital world for what it is, and create its own language and signifiers. I think this is one of the main pushes behind flat design – it’s a move against one of the most fundamental metaphor, the button.

I agree with this philosophy. I do not like things that pretend to be something they’re not.  They remind me of the cheap plastic bowls that are made to look like grandmother’s expensive china. In the physical world, we call them kitsch.

This doesn’t mean, however, that flat design is without pitfalls. By doing away with metaphor, which has an important role in learnability and communicating affordances, flat design invites usability problems. I guess the devil is in the implementation details – but look at Pinterest. It uses flat design and seems to get EVERYTHING right. So it can be done. 😉

Typography and User Experience

In User Experience, typography has 2 main roles:

  1. usability – legibility and readability
  2. mood

1. Typography is an important part of usability. The way the letters look influence readability. Readability is defined as comprehension/understanding of the text. One prerequisite of readability is legibility. Legibility is the ability to decipher the characters. Legibility is influenced by character type, spacing, weight of the lines, etc.

2. Choice of typeface can set the mood of a product – playful, formal, old-fashioned, modern, etc.

I have compiled a list of resources for you to help you get started in understanding typography. Please consider them required class reading.

This slide deck introduces fundamental concepts of typography:

And finally, one of my favorite slide decks on Slideshare that explains not as much about legibility but more about mood and emotion:

If you are interested in learning more, see the list of top 10 most recommended books on typography by designers.

Examples of excise

Example 1: Remember my choices

In Blackboard, every time I upload a new file, I pick the option for it to open in a new tab. Blackboard does not remember this choice so I have to go through that extra click every single time.

In WordPress, I have the same option for links – I have to make that choice once per blog post, and after that, WordPress remembers my preference.

Blackboard doesn't remember preferences

Blackboard doesn’t remember preferences


Example 2: Don’t make me fill out the same information twice.

This example is from, where I just signed a petition to make the code for open source , but it is true of most sites I have seen. You try to log in. You put in your username but forgot the password. You click the “Forgot password?” link to reset your password. In the next screen, you need to input your username AGAIN – why not repopulate it with the information I just input a second ago???!!

Have to re-enter username...

Have to re-enter username…

Can you see how these are examples of excise? What other questions do you have about excise? Please interact with this post as soon as you read it by commenting or rating. Keep in mind that interacting with blog posts is part of your participation grade in this course.