Design Quotes "The two most important tools an architect has are the eraser in the drawing room and the sledge hammer on the construction site." —Frank Lloyd Wright Hemingway rewrote the ending to A Farewell to Arms 39 times. When asked about how he achieved his great works, he said, "I write 99 pages of crap for every one page of masterpiece." He has also been quoted as saying "the first draft of anything is shit." "The physicist's greatest tool is his wastebasket." —Albert Einstein "Rewrite and revise. Do not be afraid to seize what you have and cut it to ribbons … Good writing means good revising." —Strunk and White, Elements of Style

User Centered Design January 23, 2007

Design Good design is good because of its fitness to a particular user fitness to a particular task In general, you are not your user! Our class will stress user centered design.

Design Why is it important?

Design Why is it important? Design exists whether you think about it or not. When you don’t think about design, bad design will be the result.

The Design Process … I arrived at the studio room, and found a man at a drawing table, sketching out different variations of the Walkman® he was designing. I got close enough to see the large sketchpad and saw 30 or 40 different variations that he had considered and put down on paper. I introduced myself, pleaded ignorance about design, and asked him why he needed to make so many sketches. He thought for a second, and then said, "I don't know what a good idea looks like until I've seen the bad ones.“ By Scott Berkun

Design To choose the best solution, you must have more than one solution to choose from.

The Historic Waterfall Model System feasibility Analysis Specifying functionality Design Implementation Coding and unit testing Integration and testing Operation and maintenance

User Centered Design Cycle Composed of a series of steps like most design methodologies. Developed to give the design team maximum exposure to the users feature specific measurement of usability. Development is essentially iterative and self-correcting, and this model supports those aspects of design.

From CNN’s When good software goes bad By Jeordan Legon Almost one in five computer users surveyed by Consumer Reports encountered software problems serious enough to contact technical support in the past 12 months. The high number of pleas for help, suggests the magazine, may be caused by frequent and persistent software glitches. Software is riddled with errors because of its growing complexity, experts say, but also because much of the development costs -- as high as 80 percent by some estimates -- are spent on finding and fixing defects in millions of lines of code.

Design Cycle Needs Analysis User & Task Analysis Functional Analysis Requirements Analysis Set Usability Goals Design Prototype Evaluate

Northeastern University ACM Scott Berkun: Why Software Sucks

Design Cycle Needs Analysis User & Task Analysis Functional Analysis Requirements Analysis Set Usability Goals Design Prototype Evaluate

Design Cycle Needs Analysis Thumbnail sketch Why is a new system/product needed? Describe in one sentence or phrase Basic user (audience) description Benefit Basic systems characteristics/capabilities

Design Cycle User and Task Analysis Identifies Characteristics of the potential user population(s), eg. demographics, domain knowledge. Goals that the user wants to accomplish. Tasks that the users perform. May identify Mental models. Familiar metaphors. Mental Model when we store info we build a mental model of how something works. Car – put key in, turn ingnition, car goes Mechanic’s mental model may be very different Expectations are made based on our own mental models Metaphors. way to relate a new or difficult task to a familiar one typewriters / word processors physical calculator / calculator program When we see a calculator program for the first time if the interface looks like a calculator we use our preconceived mental model and intuitively know how or can make an educated guess about how to use it. User analysis Our class group of 4th graders group of senior citizens Goal: Send a birthday present to a friend Task: Select gift Subtask: check several websites Subtask:Check mall Subtask: based on price, availabilty and free gift wrap option and delivery decide on a gift and store Task 2: Buy gift Task 3: Deliver gift if local or notify its coming if remote. Analyzes the tasks to develop layers of sub-tasks. (All of this should be in terms of tasks,not actions). Gather as much information as you can for design and later testing.

Design Cycle Functional Analysis Who does what? Which system functions will accommodate which tasks ? What part of the task is the human going to do? What part of the task is the computer/device going to do? Will there be manual tasks? Will there be tasks that can be solved by an off-the-shelf package? [Not everything needs to be automated or developed from scratch.] Functionality or computer services that users will need and what will be automated to accomplish tasks Close correspondence between functions and tasks Examples: travel site task: “find all flights to xyz, ordered by price” Needs search function and sorting capability Music CD site: task “buy a CD” Needs secure on-line transaction functionality

Design Cycle Technical Requirements Analysis Formal technical specs Flowchart Schematic

Design Cycle Set Usability Goals Metrics Determine the quantifiable measures of how good is "good enough" e.g. task completion time, error rates, user preferences Set these goals up front Keep refining the system until you meet these goals

Design Cycle Design Where the planning pays off… Appearance Functionality Perceived affordance A door affords exit or entrance from or to a room Is a result of our mental model Perceived affordance is affordance that is obvious to the user

Design Cycle Prototype the Interaction Try it out Build the prototype

Design Cycle Evaluate Get feedback on the prototype User-based, testing Expert-based Quantitative and qualitative measures

In Class Assignment Divide up into two groups of two and one of three. Look at http://www.baddesigns.com/examples.html or http://www.webpagesthatsuck.com/ Select one bad design you would like to present to the class or come up with your own example. Prepare to present this to the class. Include: The bad design. The URL of the bad design. Why do you think this is poorly designed? Can you describe the problem using any of the terms discussed in class (perceived affordance, mental model, metaphor) Can you suggest or improve on the suggested remedy for the poor design?

Design and Art 2D and 3D design Animation – Making of Finding Nemo

Homework Free Writing due 01/28 - Compare and contrast the animation, engineering and software design processes described in class last week and today.