Class notes F14 – week 9: Conceptual Design – execution & evaluation

Core interaction design concepts: controls and menus. Remember the 4 types of controls: Imperative, Selection, Entry and Display. Remember that they’re implemented differently on various platforms. Although the grammar is similar, the actual languages are different.

See, for example, the guidelines for iOSAndroid and Windows 8.

Slides used in class are below.

Remember the streamlined cognitive walkthrough as one rapid method for early in-house evaluation.

If you have further questions that were not answered in class, please ask them in the comments below.

Conceptual Design

Please look at the slides below. They take class conversation one step further, and show how you present the ideas you create using sketches, storyboards, wireframes, mockups and prototypes.

Please work on understanding the definitions and differences among:

  • sketches – hand drawn, quick, rough, low-fidelity
  • storyboards – series of sketches showing the user’s progression through interaction with a product
  • wireframes – computer drawn, pixel-perfect in terms of size; they show layout and functionality; medium-fidelity
  • mockups – computer drawn, pixel-perfect models of what the screen will look like. They include the visual design layer: color schemes, detailed icons, buttons, and typography; high-fidelity
  • prototypes – are interactive. They can be made out of sketches, wireframes or mockups. Or, they can be rough live codes of the product you envision. They vary in fidelity.

Read this article about wireframes and their importance, then look at the slide decks below that illustrate these definitions and differences.

There are many tools out there for wireframing and prototyping. In this class we will use Balsamiq and Axure, but I encourage you to try others as well – see a review of several tools from (yes, THAT Cooper). You might also want to bookmark this collection of wireframing resources I created a while back.

When you’re done, head back to Canvas and read the scholarly articles about how to evaluate the products of conceptual design.

Class notes F14 – Week 7: User research: analyzing data and reporting results

Affinity diagramming – what is it, how do you do it? and… how do you move from stickies grouped on white boards to…

Personas – what are they, why would you want to use them instead of a report with graphs and charts?

What are the do’s and don’ts about affinity diagramming and personas that you learned from readings and class experience? Please add your takeaways to the comments below.

Class notes F14 – Week 6 – User research 1: Planning and Conducting

We began class with an overview of the user-centered review process.

UX process

We identified the specific activities taken in 2 of the articles we read and mapped them onto the steps of the UCD process.

We spent the rest of the class working on an exercise to create a plan for user research for a system that would improve the UX in the PMU food court. Some of the main take-aways about user research are below:

  1. Appropriate research goals: to understand users, their goals, needs, mental models, and current experiences.
  2. Inappropriate research goals: to figure out what users want, or to treat them as designers. Unless you’re doing participatory design, this research goal is not very useful. Remember: users are not designers.
  3. Observation is queen. Whenever possible, conduct some sort of observation – ideally coupled with interviewing, as in contextual inquiry.
  4. We usually aim for in-depth understanding – qualitative data from a limited number of people rather that shallow information from large numbers of people.

We briefly discussed the various methods used to conduct user research: contextual inquiry, ethnographic interviewing, diary studies. See an informative slide deck about diary studies below:

One method that you can use to gain an in-depth understanding of users is task analysis. We did not discuss it in detail in class, but please do read about it and ask questions in the comments below.

Finally, remember to let me know if these class notes are useful to you, and to indicate in some way, by rating, commenting, etc. that you have read this post.

Class notes F14 – Week 5: Fundamental principles part III

We discussed the 3 levels we can design for in order to engage users emotionally:

  • visceral
  • behavioral
  • reflective

… and some strategies for designing at each level.

We discussed a bit about the controversy of “designing by committee” vs. the “genius designer.”


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.


Get every new post delivered to your Inbox.

Join 54 other followers