Course: Human Computer Interaction (HCI) by Scott Klemmer
Desing, Implementation, Evaluation Loop
- 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
- 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
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
- Creating Paper Prototypes
- Testing Paper Prototypes
- Digital Mock-ups
- 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 can point, gesture, talk, and be drawn performing other activities.
Task being accomplished
what steps are involved?
what leads someone to use the app?
what task is being illustrated?
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
Prototyping is a strategy for efﬁciently 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)
Color is good
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
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-ﬁdelity: users think it’s more real
Low-ﬁdelity: more license to suggest changes
Making a Wizard-Powered Prototype
- Map out scenarios and application ﬂow
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 ﬁrst
- 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
- Identiﬁes 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
- 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.