Tag Archives: Lecture Summary

Spring’15 Class notes – Class 25: Reporting Usability Data

4 May

This class was focused on how to structure the usability report and how to report usability data.

First and foremost, figure out who your audience is for the report, what they would be looking for, and how to make it easy for them to find what they need in the report.

Other tips worth remembering:

  • present absolute numbers, not percentages, when you are dealing with small numbers of participants
  • pick the correct graph or chart to represent your data (we did an exercise in class where we discovered the stack bar graph)
  • enable quick and easy comparisons across tasks, but also present data for each task
  • remember to present and rank-order usability issues in a way that helps developers prioritize their work

Spring’15 Class notes: Class 24 – Usability testing

9 Apr

Today we learned about a simple and a complex way of doing usability testing.

Simple: ask a human to perform some tasks on your product, observe them, identify what gives them trouble. You can also ask them some questions along the way.

Complex: you take various measures of usability such as time on task, time performance, efficiency, etc. The slides below remind you of the types of metrics and the overall flow of a usability test. I highly recommend Measuring the User Experience for more-in depth information about why and how to collect each metric, and how to analyze and report data for each one.

Spring’15 Class notes: Class 23 – Evaluation part 1

7 Apr

We began with an overview of research and evaluation methods:


Experts Users
Learned heuristic evaluation

competitive analysis

contextual inquiry



focus groups


Not yet learned cognitive walkthrough
  • task analysis
  • keystroke level modeling
  • usability testing
  • comparative usability testing
  • A/B testing
  • multivariate testing

You haven’t done any formal evaluation yet on your early prototype. It’s time to do that! Here are next steps:

  1. Conduct a cognitive walkthrough on your existing prototype.
  2. Improve the prototype, but keep it low fidelity. This is prototype v.2
  3. Create a plan for user feedback and usability testing.
  4. Get some informal user feedback on v2
  5. Improve the prototype based on user feedback, and create a high-fidelity prototype v. 3 in Axure or Sketch.
  6. Conduct formal usability testing on prototype v. 3
  7. Provide recommendations for moving on from v.3 to working prototype (v.4)
  8. Document everything and write it up in the last part of the final project, the evaluation report.

Spring’15 Class notes: Class 22 – Web accessibility, Interface controls

2 Apr

We began class with guests who talked about the importance of Web accessibility and provided some tips for making websites accessible to people with disabilities:

  • don’t rely on color alone to communicate meaning
  • test your color scheme for contrast
  • write meaningful alt text for images
  • use structural elements for headings, lists, etc.
  • do not turn off keyboard navigation
  • use large click targets
  • write meaningful link text

I cannot share their slides publicly, but you can find them on the CN under the daily plan for Class 22.

We then brought together various interface languages by understanding the underlying grammar of interface controls. The slides I showed in class are below.


  • remember the types and controls and their definitions
  • follow accepted patterns (speak the language you choose correctly)

Spring’15 class notes: Class 21 – Responsive design & Cross-channel UX

31 Mar

The purpose of this class was to become aware of what we need to consider from a UX perspective when we’re planning a user experience that’s responsive – or even more, cross-channel.

First, definitions:

Responsive design for the Web – means creating adaptable sites that serve different layout, navigation, and content hierarchy depending on the user’s device. This is done by querying the device first to get info about screen size, then serving the appropriate version.

Cross-channel UX – means creating integrated user experiences that span several channels (e.g. desktop, mobile, phone, in person).

Second, some strategic considerations:

  • mobile first – content is the most important thing and you need to plan a hierarchy starting from mobile and expanding to the larger desktop version. This is done by prioritizing and labeling content.
  • navigation – avoid very deep, complex hierarchies that can be hard to use on mobile
  • information architecture – try to keep it consistent across channels and enable users to move seamlessly across channels

Here are some slides about what UX needs to consider when planning for responsive, prepared by a former TA:

Third, tools:

  • we learned about customer journey maps, or experience maps and practiced imagining one for a young family moving to Indianapolis, and how they would interact with various city agencies (water, parks) using a desktop portal, a mobile app, and in-person or physical interaction (e.g. unlocking gates to the park).

For more about cross-channel UX, I recommend the book Pervasive Information Architecture by Andrea Resmini. I have some excerpts from that book on the following slides:

These are huge topics and we barely scratched the surface, but that’s because, at the end of the day, it’s not mobile first, or cross-channel first… it’s users first! As long as you know the techniques of user-centered design and the philosophy, you can apply them to more complex situations such as responsive or cross-channel.

Spring’15 class notes: Class 20 – Visual style & branding

31 Mar

You read and practiced in class with 2 tools for bringing together the elements of visual style and presenting them to clients for feedback:

Please be sure to know the definition of each tool and what elements go into each one.

Spring’15 Class notes: Days 12 &13: Design principles based in human perception and cognition

24 Feb

On Days 12, 13, and 14 we learned about human perception and cognition so we can design interfaces that work well with the human mind.

Day 12 – The Gestalt principles of visual perception are fundamental. They explain how we organize visual signals into groups and patterns. These are the inherent biases of the human mind. We can use them to create structure, organization, or fun visual effects.

Below are the slides with examples we used in class.

Day 13 – was all about creating visual structure. You can use visual hierarchy and grids to create layouts that guide the eye meaningfully and communicate what is most important, and where people should look. Try to remember some of the techniques for creating visual hierarchy:

  • create contrast through size, color, shape, alignment, saturation
  • create patterns through chunking and the use of negative space
  • capitalize on the human eye’s tendency to start reading from top left by using the Z pattern or the inverted F pattern.

Below are some slides on visual hierarchy:

Day 14 – we talked about attention, information scent, and memory.

Remember that human attention has 2 main mechanisms:

  • top-down, which the person controls with their will
  • bottom-up, which is “grabbed” by external stimuli in the environment

Understanding how attention works can help you design in ways that not only GET ATTENTION, but also you learn to support the person’s top-down attention. People use top-down attention when they search for relevant information that can help them accomplish their goals. So, if you know what people’s goals are, through user research, you can facilitate that process. One way in which you can facilitate it is through information scent. If you provide links and icons with strong information scent, people have to think less, guess less, and accomplish their goals faster.

Information scent is an estimate, or a probability. When users look at a link, they try to predict what is on the other side – what will they find if they click it? If they are unable to predict, or are uncertain or wrong about their prediction, this means the link has poor/weak information scent. For example, what do you predict you will find if you click on the words “information scent” at the beginning of this paragraph? How confident are you in your prediction? Click the link. Were you right? If you were able to predict confidently and correctly, the link has strong information scent. How about this, though? What do you predict is at the link from the word “this”? How confident are you? Were you right? If you can’t predict confidently and correctly, the link has weak information scent.

Memory is a weakness for most people. It is hard to remember things. It is hard to recall without any prompt or help. However, it is relatively easy to recognize items and remember that way. This is why multiple-choice exams are easier than essay exams: Because you recognize the concepts from class, and this helps you remember, as opposed to starting with a blank page and having to recall everything. Also, imagine I ask you to name the textbook you used in your junior high school English class. You probably can’t recall. But, if I show you 5 different books, you will probably be able to recognize and thus remember the one you used back then.

Below are the slides I used in class.