Chapter 5 Design Overview

• Conceptual Design• Physical Design• Evaluation• Physical Design• Interface Design Standards

• Material through this and the next lecture is, much the same but, reorganized from the textbook.

1

Technology Myopia

• Interaction designs must be sensitive to:– Human-human communication– Implicit Knowledge– Non-technical aspects of work

• Integrate technology and human activities carefully

2

Conceptual Design

• Conceptual design involves – Structuring the information space– Creating of alternative solutions– Determining which design concept to

pursue

3

Conceptual Design

• The tools involved in conceptual design:– Personas– Scenarios– Brainstorming

• paper prototype• Semantic networks (mind maps)

– Card sort– Flowcharts

4

Conceptual Design – Personas

• Personas are archetypes of actual users, defined by the user’s goals and attributes.

“Personas are derived from patterns observed during interviews with and observations of users and potential user (and sometimes customers) of a product”

(Cooper & Reimann, 2003, 67)

5

Conceptual Design – Personas

• A persona is created by identifying the primary stakeholder and creating an identity based on the stakeholder profiles and other collection activities such as interviews and surveys.

– And your imagination – general life knowledge • A persona is a detailed description complete with

as many personally identifying attributes as necessary to make it come to life.

• Minimum – Give him/her a name – And a relevant life – Set him/her in an environment or context– Set some motivations and goals

6

Examples from old Exam

• Lecturer– Tom Good is a 59 year old, he works as a professor at UoA specialized in

English Literature. He has 2 kids and he lives on the North Shore. His office working hours are from 9-11. He has basic knowledge about using computers. He likes reading the news every morning from the Times (London). He always dresses for work with a bow tie.

• What is missing from this Persona?

• ……

• Student – Peter is a kiwi guy who is studying English literature at UoA. He is 18 years

old and lives in West Auckland. He likes girls, reading and writing. He had computer subjects at school, but thinks it is boring. He likes sitting in Albert Park sharing a joint with his mates – he often misses class. He uses on the online notes to find out what he has misses in class.

7

Conceptual Design – Personas

•Advantages of personas:– They are quick and easy to create.– They provide a consistent model for all team

members.– They are easy to use with other design methods.– They make the user real in the mind of the designer.

•Disadvantages of personas:– They can be difficult to create if the target audience

is international.– Having too many personas will make the work

difficult.– There is a risk of incorporating unsupported designer

assumptions.

8

Scenarios

•Scenarios– A description of a typical task– It describes

• The basic goal • The conditions that exist at the beginning of the

task• The activities in which the persona will engage• The outcomes of those activities

•Scenarios afford a rich picture of the user’s tasks

9

Examples from old Exam

• At 4pm Tom Good starts up his computer, logs in and starts the internet explorer window. The home page has shown up, which is the English Lit department home page. He clicks on the ‘staff’ button and logs in again! He clicks on the button for his course and then another for lecture 17 (tomorrow). He starts typing notes into the text box and then remembers he did all this last year and goes in search of the old notes to copy. All the time he is wondering why he should have to provide notes for lazy little sods like Peter, who should just turn up to class like he did when he was a student. But the Hod (his wife) has been nagging him mercilessly about getting his notes online.

• Peter has his EngLit101 lecture at 2pm Monday – but he is pretty out of it and misses half the class. Tuesday morning he realizes that he had better check if there is any info for the up-coming assignment. He logs into the course page and navigates to Monday’s lecture notes. Prof Good has come through again – everything he needs is online. Another wonderful afternoon in the park and still able to do is work.

10

Conceptual Design - Brainstorming

• Team activity– Stream-of-consciousness– Storyboarding/ paper prototypes– Semantic networks /mind-maps

• Using informal tools (pen and paper) is one of the keys to successful conceptual design

11

Low-fidelity (paper) prototypes

• The three main criteria for low-fidelity prototypes:

– Easy and inexpensive to make.– Flexible enough to be constantly changed and

rearranged.– Complete enough to yield useful feedback about

specific design questions.

12

Old student examples

• Your first paper prototypes should be very rough (lines only)

• By time you hand them in they should be like this

13

Low-fidelity (paper) prototypes

• Advantages of paper prototypes:– They can be used early and often.– They are inexpensive and easy to create.– They make design ideas visual.– No special knowledge is required; all team members

can create them.

• Disadvantage of paper prototypes:– They are not interactive.– They cannot be used to calculate response timings.– They do not deal with implementation issues (this is

also an advantage).

14

So what happens as you tidy them?

Yeung, L., B. Plimmer, B. Lobb, and D. Elliffe, Effect of Fidelity in Diagram Presentation in

HCI 2008, D. England, Editor. 2008, BCS: Liverpool. p. 35-45.

What happened?

• Number of changes • Enjoyment

0

2

4

6

8

10

12

14

16

18

20

22

24

26

28

30

Low formality(paper)

Low formality Medium-lowformality

Medium-highformality

High formality

Levels of formality

To

tal c

ha

ng

es

Mean total change

3.37(sd = 1.35)

4.2(sd= 1.35)

3.17(sd = 1.15)

2.53(sd = 0.90)

1.7(sd = 1.02)

0

0.5

1

1.5

2

2.5

3

3.5

4

4.5

High formality Medium-highformality

Medium-lowformality

Low formality Low formality(paper)

Levels of formality

Mea

n ra

nk

Conceptual Design – Semantic Network/Mind map

• A semantic network is a web of concepts that are linked through association.

• Best hand drawn because it is quicker and less constrained

17

http://www.cs.auckland.ac.nz/research/hci/digital_ink/sketch_tool

s/mindmap.shtml

Conceptual Design – Semantic Network

• Advantages of semantic networks:– They allow an easy way to explore the problem space.– They provide a way to create clusters of related

elements.– They provide a graphical view of the problem space.– They resonate with the ways in which people process

information.

• Disadvantages of semantic networks:– They require knowledge of the problem space.– They can lead beyond the problem space.– There is no formal semantics for defining symbol

meaning.

18

Conceptual Design – Card Sort

• Card Sorting can be used to discover user-centered groupings

• Card sorting can be used to organize the information collected in the discovery phase

• Used to define groupings for menus, controls and Web page content

• Used to generate labels for menus, buttons and navigation links

19

Conceptual Design – Card Sort

• Result of a card sort

20

Conceptual Design – Card Sort

• Advantages of card sorting sessions:– They are quick and easy to perform.– They can be done before any preliminary designs

have been made.– They will let you know how people organize

information.– They will expose underlying structures.

• Disadvantages of card sorting sessions:– They only involve the elements that you have

written on the cards.– They suggest solutions that imply structures.– They become difficult to navigate with more

categories.

21

Flowcharts

•Flowcharts can be: – Simple network diagrams that identify the

pages of a Web site and the navigational links between them

– Sophisticated diagrams that capture conditional junctures and computational processes

22

Questions

• Create two personas and scenarios for an email system.

• How did you maintain the integrity of your personas?

1-23

Next

• Evaluation, Physical design continued, standards

24