CS 3724Introduction to Human Computer Interaction

Section 1 CRN 11499 TuTh 5:00-6:15 209 McB

Today’s Agenda

What is “good design”? How can we look for good design?

Methods Concept selection Strategy switching Recombinant construction

Today’s Agenda

What is “good design”? How can we look for good design?

Methods Concept selection Strategy switching Recombinant construction

What is good design?

What is good design?

Dieter Rams (product designer):Good design is innovative.

Good design makes a product useful.

Good design is aesthetic.

Good design makes a product understandable.

Good design is honest.

Good design is unobtrusive.

Good design is long-lasting.

Good design is thorough down to the last detail.

Good design is environmentally friendly.

Good design is as little design as possible.

What is good design?

Vitruvius: Commodity

“useful” “as little design as

possible” Firmness

“long lasting” “thorough” “environmentally

friendly” Delight

“innovative” “aesthetic” “understandable” “honest’ “unobtrusive”

Dieter Rams (product designer):Good design is innovative.

Good design makes a product useful.

Good design is aesthetic.

Good design makes a product understandable.

Good design is honest.

Good design is unobtrusive.

Good design is long-lasting.

Good design is thorough down to the last detail.

Good design is environmentally friendly.

Good design is as little design as possible.

How to look for good design?Look at the big picture

Don't judge solely on a single frustrationBut don’t underestimate the overall response that comes from “small” interactions that frustrate you.

Be conscious of design patternsAs you use a product, take some time to understand its underlying structure.

Critique with reason, not emotionTry to articulate what bothers you so much Add it to a lexicon of principles that you want your designs to followthis will make it easier to spot similar flaws in your own work, too.

Today’s Agenda

What is “good design”? How can we look for good design?

Methods Concept selection Strategy switching Recombinant construction

What methods can help us look for good design?

Concept Selection Matrix

Systematically compare alternative designs against list of requirements

Procedure:1. Create alternative designs2. Enumerate all requirements (even implicit

ones!)3. Fill out matrix: columns = design alternatives,

rows = requirements4. For each element: +, -, or “ “5. Identify “best”

Concept Selection Exercise

In Class Exercise• Review list of requirements• Add any requirements you think are

missing– Do not limit to just “user requirements”– Your team would carry out the project

• Use matrix to evaluate alternatives1. Fill out matrix: columns = design alternatives, rows =

requirements2. For each element: +, -, or “ “3. Identify “best”

Concept Selection Exercise

REQUIREMENTS:A. The website should provide a calendar of

meeting timesB. Some members are not able to attend

regularly, so the website should communicate which pieces are needed to fit with larger group projects

C. The website must work with minimal technical skill level

D. The website should support the social interaction of the club members.

E. The website should support both sophisticated and unsophisticated searching.

F.Your team should trade off spending time rather than having a rich set of features.

G. The website must be up and running in a week or so.

Concept Selection Exercise

In Class Exercise (Part II)• Get into groups (Next slide)• Compare results• Add/remove/edit extra

requirements• Create new selection matrix• Compare each groups’ results

GroupsGROUP

A 1:Roy, Hecht, Sica

2: Luc, Shih, Pillmore

3: Sams, DelaRosa, Kim

B 4: Muessig, Schafer, Cox

5: Bhatia, Reyes, Al-Qattan

6: Liss, Jin, Bannerjee

C7: Chapman, Franklin, Demma

8: Bowers, Sternowski, Loftus

9: Stegnre, Lu, Larkins

D 10: Dorsett, Fein, Rich

11: Miller, Houglum, Rendin

12: Nash, Weaver, Will

E 13: Damodaran, Gungordu, Patel

14: Huynh, Haley, Karbassiyoon

15: Butler, Sabri, Galeeme, Smith

F 16: Otiji, Norwood, Asaad,

17: Huffman, Merheb, Wood, Kostyk

Concept Selection Matrix

Some possible problems with this method:

Concept Selection Matrix

Some possible problems with this method:No one alternative maybe “best”No alternative may even be “acceptable”Does not suggest new alternativesRequirements are not weighted by importance

so making tradeoff decisions are not evaluated

NOTE:you are asked to include a concept selection matrix in Team Report 2

How can we make a good design better?

Recombinant construction

This method inserts dissimilar ideas into a design (more like recombinant DNA than hybridizing)

Procedure:1. From Concept Selection Matrix, take top 2 designs2. Enumerate features of each3. Create matrix of features (best = column, second best =

rows)4. For each cell of matrix: “X” = common to both, “+” = does

not interfere, “ “ = cannot work together5. “What new idea incorporates all the ‘X’ and ‘+’ features?”

NOTE: save original ideas since you may need to revert to them.

Recombinant construction

XX

XXX

X+

+

+ +

The object is to describe a new thing that uses the compatible features of the best and second-best

concepts.

Recombinant Exercise

In Class Exercise (Part III)• In your groups• In a blank matrix:

1. From Concept Selection Matrix, take top 2 designs2. Enumerate features of each3. Create matrix of features (best = column, second

best = rows)4. For each cell of matrix: “X” = common to both,

“+” = does not interfere, “ “ = cannot work together

5. “What new idea incorporates all the ‘X’ and ‘+’ features?”

Recombinant construction

Some possible problems with this method:

Recombinant construction

Some possible problems with this method:FeaturitisViolates metaphorWorse, it can create an “Edsel” (that is, good

system and good patterns get lost)Seductive (loose sight of real users)

What if we end up with no good design?

Strategy switching

1. Start over using original strategy2. Keep a record of every spontaneous thought that occurs to

team members; do not resume work until everyone understands the random thought.

3. When “enough” random thoughts have been recorded to see a pattern, STOP all work and compare pattern of random ideas to current strategy.

4. Decide whether to adopt new strategy or ignore spontaneous thoughts

Repeat above until strategy is found that yields “good” results

Strategy switching

Some possible problems with this method:

Strategy switching

Some possible problems with this method:It takes timeIt relies on “outlier” thoughtsYou must be disciplinedYou might see a misleading patternThere might not be any good design ideas

wHaT wErE aLl ThOsE mEtHoDs AgAiN?

WiZaRd Of Oz MeTaPhoR pErSiCoPe GrApHiC dEsIgN CoGpSyCh LaB eXpErImEnTs MeNtAl MoDeLs PeRfOrMaNcE oPtImIzAtIoN rOlE-pLaYiNg DeCoNsTrUcTiOn ReComBiNaNt CoNsTrUcTiOn GoMs StOrYbOaRdS pArTiCiPaToRy AnAlOgIeS fRoM tOtAlLy UnReLaTeD ArEaS

Methods we’ve learned so far:BrainstormingDelphi planning methodHierarchical task analysisMorphological boxWizard of OzMetaphorPeriscopeStrategy switchingCogPsych Lab

ExperimentsMental ModelsPerformance Optimization

Role-playingDeconstructionRecombinant ConstructionGOMSStoryboardsParticipatoryAnalogies From Totally

Unrelated AreasConcept SelectionDesign Review

Today’s Agenda

What is “good design”? How can we look for good design?

Methods Concept selection Strategy switching Recombinant construction

For Tuesday: Team 8: Hall of Fame / Hall of Shame Next Lecture: “Where is the interface?”, some good

ideas from graphic design and a preview of the midterm

For Thursday: Mid Term

In TWO weeks: Team Report 2