github twitter email rss
Course: Human Computer Interaction (HCI) by Scott Klemmer
0001 Jun 1
4 minutes read

Course: Human Computer Interaction (HCI) by Scott Klemmer

Desing, Implementation, Evaluation Loop

Good Design

  • People’s tasks, goals, and values drive development
  • Work with users throughout the process
  • Assess decisions from the vantage point of users, their work, and their environment
  • Pay attention to people’s abilities and situation
  • Talk to the actual experts


rapidly creating an approximation of a design idea so that you can quickly get feedback and learn.
is a strategy for efficiently dealing with things that are hard to predict.
goal is not artifact, it’s feedback.


it’s a question rendered as an artefact
way of communicating with other stakeholders

are questions; ask lots of them.

Should not be required to be complete

Should be easy to change

Gets to retire

Answers questions:

  • Feel. What might it look like?
  • Implementation. What might it work like?
  • Role. What might the experience be like?

user interface elements uml

user interface navigation umlПрецедент_(UML)Пользовательские_истории

Main things

Focus on task first then on user interface
Minimal valuable product


  • A model of a person, an example.
    includes demographic information, but should also capture a person’s motivation, beliefs, intentions, behavior and goals
  • Draw a picture of your persona or use a photo
    give him or her a name, an occupation, a background, a social situation, some hopes, dreams, and goals etc. Give the persona a story to tell
  • Knowing what our persona thinks, does, and feel help
    build empathy so that you can understand the state of mind, emotion, philosophy, beliefs, or point of view of the user
  • Empathy leads to insights which leads to design opportunities

Use Stage-Appropriate Tools

  • Storyboarding
  • Creating Paper Prototypes
  • Testing Paper Prototypes
  • Digital Mock-ups
  • Implementation


  • Isn’t about pretty pictures
  • Is about task that project is designed to support.
  • About communicating ideas
    What will the UI help a person accomplish?
    It’s holistic. It portrays a whole sequence of events to meet a goal.
    Emnforce a time limit when storyboarding. E.g. 20 minutes is often sufficient.

Star people

Star people can point, gesture, talk, and be drawn performing other activities.

  • Setting
    People involved
    Task being accomplished
  • Sequence
    what steps are involved?
    what leads someone to use the app?
    what task is being illustrated?
  • Satisfaction
    what motivates people to use this system?
    what does it enable peolple to accomplish?
    what need does the system fill?


  • Helps emphasize how an interface accomplishes task
  • Avoids commitment to particualr user interface
  • Helps get all stakeholders on the same page in terms of the goal

Paper prototype

Prototyping is a strategy for efficiently dealing with things that are hard to predict
Focus on Goals
Evolve the Designs

  • Feel - What might it look like?
  • Implementation - What might it work like?
  • Role - What might the experience be like?

##Tips and tricks

  • Keep all your materials in one place! Small interface widgets tend to get lost or damaged easily
  • Work quickly and make reusable components (buttons, etc)


  • widgets
  • connectors
    Rubber Cement
  • drawing
    Color is good



##Further Reading

Bill Buxton, Sketching User Experiences
žBill Moggridge, Designing Interactions
žCarolyn Snyder, Paper Prototyping
žMichael Schrage, Serious Play
žHoude and Hill, What do Prototypes Prototype?
žTodd Zaki Warfel, Prototyping

Wizard-Powered Prototype

simulates machine behavior with human operators
Make an interactive application without (much) code

  • Makes sense when it’s faster/cheaper/easier than making real thing
  • Get feedback from users people
    Hi-fidelity: users think it’s more real
    Low-fidelity: more license to suggest changes

Making a Wizard-Powered Prototype

  • Map out scenarios and application flow
    what should happen in response to user behavior?
  • Put together interface “skeletons”
  • Develop “hooks” for wizard input
  • Where and how the wizard will provide input
    selecting the next screen, entering text, entering a zone, recognizing speech, etc.
    remember that later you’ll need to replace with
  • Rehearse wizard role with a colleague

Practice with a friend first

  • Once you’re comfortable, recruit “users”
  • Two roles: facilitator and wizard.
  • Facilitator provides tasks (paper) and takes notes
  • Wizard operates interface (more authentic if hidden or remote)
  • User feedback can be…
    Think aloud (speak freely as performing tasks)
    Retrospective (best when think aloud distracts)
    Heuristic evaluation (works with experts too)
  • Debrief users (reveal wizard if needed)

Advantages of Wizards

  • Fast (faster) and thus, cheaper and more iterative prototypes
  • Creating multiple variations is easy
  • More “real” than paper prototyping
  • Identifies bugs and problems with current design
  • Places the user at the center of development
  • Can envision challenging-to-build applications
  • Designers learn by playing wizard

digital mock-up

  • High fidelity
  • Time consuming
  • Visually appealing
    Users may give less feedback as it seems that more effort has been spent creating a digital mock-up.




Back to posts

comments powered by Disqus