ICS 463, Intro to Human Computer Interaction Design:

5. Design Processes

Dan Suthers

Bill Verplank

“One of the first things you learn in design is to put forward a number of alternatives so that you can then compare them. Having a lot of display space is important for doing this because you can then make them visual. One of the things you can do with visual things is superimpose them, or put them side by side and quite often when you start doing that you like one better than another. Until you’ve made a comparison you have no idea why you prefer one over another. The criteria emerge from the comparison.”

“Part of learning these skills is just looking at creative people, seeing the volume of stuff they do, and realizing the role of chance. … It’s not just picking the right idea, but recognizing the right idea in all the mess that you produce. Having that rich field of things to compare and contrast that you’ve either generated or collected is something that designers need to know how to produce. Evaluation also comes into brainstorming: when you stop generating ideas you have to start evaluating them.”

Holistic Envisionment of Design

• Influenced by ethnography– situation-centered design (immersion)

• Less structured: – levels of design not distinguished– no rigorous ordering of design

• Instead– Focus on conceptual model– Early concern with visual appearance

and behavior of interface

Holistic techniques: Sketching

• Visual Brainstorming and Rapid Paper Prototyping – use easy to manipulate tools– minimize polish and hence

commitment – explore alternate visual metaphors for

conceptual model 1. Initial sketches 2. Cardboard representations

evaluated with users (see games)

3. Scenarios, prototypes

Holistic techniques: Games

• Users and designers collaboratively manipulate cards of screen shots, functions, objects, artifacts to communicate ways of working and explore possible designs

• Has similarities to Scenarios …

Holistic techniques: Scenarios

Scenario: personalized fictional story of use– Construct variety of scenarios to consider

range of users and activities– Let the characters have a life of their own

Snapshot: image showing possible interaction

Storyboard: sequence of snapshots illustrating a scenario– Can construct these via games

Scenarios and storyboards help communicate with users, and force designer to confront implications

Supporting Design: Techniques

• Understand the problem domain• Identify previous successful solutions to similar

problems• Decompose into less complex, better defined

sub-problems • Generate and evaluate alternative designs• Simulate partial designs with someone not on

the team• Opportunistic reasoning, “jump around” but

have well organized places to put the ideas

Supporting Design: Tools

• Post-its, paper, posters, markers, … • Shared representations, common

language• Software

– Communication tools supporting negotiation about artifacts

– Diagramming facilities (dataflow, ER, UML)– Storyboarding facilities– Visual GUI builders

• Design Room

Constra

ints

Scenarios

SketchesQuest

ion

s

Assignment 4

We think of spell checking as a very simple and obvious activity - how could there be anything interesting and innovative about designing a spell checker? Let’s challenge this notion.

1. Using rapid sketching, explore some alternative models of spell checking. (You may wish to expand the scope to grammar and style checking, and take into account document genres.) Consider using visual metaphors, and try visual brainstorming of alternatives.

2. Choose one of your models or metaphors and write two brief scenarios (textual; storyboard is optional) showing how two different users might use the system.

Turn in a URL for a web page with: 1. Your sketches, and any associated explanations. (You can scan in your

sketches in the lab as GIF images, or you can replicate them in software).

2. Your two scenarios3. A brief paragraph discussing what you learned from the activity and

your honest opinion about the utility of these design techniques.