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 Constraints Scenarios Sketches Questions

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 scenarios 3. A brief paragraph discussing what you learned from the activity and your honest opinion about the utility of these design techniques.