SunyoungKim,PhD Last class Data analysis & report Affinity - - PowerPoint PPT Presentation

Human-Computer Interaction

• 11. Design – Part 1. Brainstorming

SunyoungKim,PhD

Last class

Data analysis & report

• Affinity diagram
• Survey report
• Persona

Recap: Affinity diagram

“a UX designer’s tool, used to capture and synthesize qualitative data” The affinity diagram brings together issues and insights across all users into a hierarchical diagram to reveal the scope of the problem.

• Gathers large amounts of language data (ideas, opinions, issues) and
• rganizes them into groupings based on their natural relationships
• A single picture of the customer population a design will address
• Shows how the work hangs together rather than breaking it up in lists

and what matters

• Used to brainstorm and generate ideas

Recap: Creating an Affinity Diagram

Recap: Survey: Visual representations

Recap: Survey Report

Reflect

• What did we learn?
• What conclusions can we draw?
• What are our recommendations?
• What are the limitations of our analysis?

Report

• Be explicit about your limitations
• Know the claims you cannot make
• Do not claim causation without a true experimental design
• Do not generalize to the population without random sample and

quality administration (e.g., <60% response rate on a survey)

Recap: User profile

User Characteristics User Characteristics ATM Customer characteristics TM Customer characteristics Age 12-25 25-50 50-80+ Sex Both male and female Both male and female Both male and female Physical limitations Educational background Computer/IT use Probably have some prior experience of computer or IT use May have little or no prior experience of computer or IT use May have little or no prior experience of computer or IT use Motivation Attitude

Recap: Personas

A precise description of a hypothetical user and what they suffer from and wish to do when using a system

• A concrete person in the designer’s mind
• A shared basis for communication

Essential question in developing a persona

• What are the classes of users?
• What do they do? And Why?

Today’s agenda

• 1. Brainstorming
• 2. Sketch
• 3. Scenario
• 4. Storyboard

Brainstorming

Design cycle

IDEO’s brainstorming rules

1. Sharpen the Focus 2. Number your Ideas 3. Build and Jump 4. The Space Remembers

Aim for quantity! Hope for quality

Sharpen the focus

• Posing the right problem is critical

– neither too narrow, nor too fuzzy

• Not “bicycle cup-holders” but

“helping cyclists to drink coffee without accidents”

Number your ideas

• Obvious but very useful
• Helps keep track of them during brainstorming (100 or more ideas can

be in play)

• Allows ideas to take on an identity of their own

Design cycle over project lifespan

Number of ideas under consideration Project time 1 2 3 4 5 6 7 1 23 4 5 6 7 1 23 4 5 6 7 1 234 5 6 7

Final product

This process of iteration helps “get the design right” But not the right design!

Having multiple ideas helps achieve the right design!

The best way to have a good idea is to have lots of ideas!

The space remembers

• Covering whiteboards or

walls with text is extremely useful in group work.

• It’s a very effective form of

external memory for a group

• Even better, it helps a group

have shared understanding

Sharpen ideas

• 1. Sketch
• 2. Scenario
• 3. Storyboard

• 1. Sketch

Sketching is fundamental to ideation and design. Traditional disciplines such as industrial design, graphic design and architecture make extensive use of sketches to develop, explore, communicate and evaluate ideas.

• Tohidi, Buxton, Baecker, Sellen

Why sketching?

Designers do not draw sketches to externally represent ideas that are already consolidated in their minds. Rather, they draw sketches to try out ideas, usually vague and uncertain ones.

• Suwa & Tverksey

Sketching will help you:

• Think more openly & creatively about your ideas
• Create abundant ideas w/out fixating on quality
• Invent and explore concepts visually
• Iterate quickly
• Choose ideas worth pursuing
• Archive ideas for later reflection

Sketching practices

• Sketch frequently
• No bad ideas or sketches (don’t erase)
• Always annotate (for your future self &
• thers)
• Explore broad space (getting right design)
• Refine and iterate (getting design right)
• Record ideas you see elsewhere
• Collect existing materials (printouts,

magazines)

Sketching techniques

Different pen thickness Use of shadow Minimalist design: no unnecessary details 3D perspective

Sketching is not about drawing! Sketching is about design!

“Sketching is a fundamental tool that helps designers express, develop, and communicate ideas.”

Sketch vs. Prototype

While both sketches and prototypes are instantiations of a design concept, they serve different purposes and are concentrated at different stages of the design process.

• 2. Scenarios
• A concise descript of a persona
• A narrative description of a task : the current use of a system
• An informal narrative story, simple, “natural”, personal
• Presented through storyboarding
• Scenario should be simple and focused
• Use personas in scenarios – how does it serve their needs?

• 2. Scenarios
• Motivation – what prompted the persona to embark on the scenario?
• Context – where is the person while the scenario is taking place? Does

it change? Who else and where else is involved?

• Distractions – What kinds of distractions or interruptions typically occur

and how does the persona deal with them?

• Goal – What is the persona’s goal? Information seeking? An artifact? An

emotion?

Using tasks in Scenarios: Narrative

Often specific

• Forces us to fill out description with relevant details
• Say who the users are (use personas)
• Design can really differ depending on the target user
• Name names (allows getting more info as necessary)
• Characteristics of the users (job, expertise, etc.)

Narrative Scenario Example

Produce scenarios covering each task

• Jill is traveling to Seattle for her job next week and she wants to check
• n the amount she can be reimbursed for meals and other expenses.
• Jackie wants to fly to Prince Albert, Saskatchewan next Thursday,

returning on the last flight on Friday. She wants to know how much this would cost, and whether it would be cheaper to take a different flight

• back. She is not quite sure how Saskatchewan is spelled on the
• computer. When she has found the right flight, she wants to confirm the

purchase with a credit card.

Narrative Scenario Example

• Sue is going to a wedding in Lake Tahoe, and needs a route to drive from her

home in Berkeley to the Church in Truckee, and from there to the reception at Heavenly Ski Resort. She has not been to these places before. She wants to know the fastest route, and needs clear instructions as she will be traveling alone.

• It is a busy morning with a long queue of telephone calls. John, who only

started the job this week, takes a call from Mr. Jones. Mr. Jones says he still has not received the goods he ordered 3 months ago. Mr. Jones does not know his account number, but gives his name and address. John retrieves the account, and checks the status of the order. It shows that the goods were dispatched 7 days ago. He informs Mr. Jones that they should arrive shortly. He also notices an error in the post code for the address, which he corrects.

• 3. Storyboards
• The point of storyboards is to convey the experience of using the

proposed system

• Include people experiencing the design and their reactions to it
• Visual elements: Detail, text, people, frame, portrayal of time

Storyboards: detail

Storyboards: text

Storyboards: frame

Storyboards: portrayal of time

Storyboards != Drawing

Ugh, drawing is hard! Yes, but you can use other means, such as taking photos (blur out unnecessary details), or software to describe your idea

Group project

Group project P3: Data analysis & Solution

• 1. Conduct data analysis

1) Survey data analysis: Graphical representation with descriptive statistics (Slide09: P42, 44) 2) Interview Data analysis: Affinity diagram (Slide09: P29-33, 38-39)

• 2. Create 2 personas (Slide09: P56)
• 3. Create 2 storyboards (Slide11:P47-49 )
• 4. Revisit your project statement: Add a “solution” section

#Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.

Group project P3: Data analysis & Solution

Format

• Submission includes:
• 1. Survey analysis
• Graphs with descriptive statistics
• A paragraph describing what you learned: themes, categories, things

unexpected or surprised you

• 2. Affinity diagram (30+ sticky notes) à Turn into a digital version
• Two photos: A photo of raw data (Slide9: p38) and a photo of synthesis

(Slide 9: p39)

• A digital version of a finished diagram: should have a problem statement on

top (Slide9: P33)

• A paragraph describing what you learned: themes, categories, things

unexpected or surprised you

• 3. 2 personas (Slide9: p48)
• 4. 2 storyboards (5+ frames) (Slide11:P47-49)
• 5. A paragraph with your solution statement

#Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.

Group project P3: Data analysis & Solution

Format

• Add a team name and a description of your project proposal on top
• Link to your project webpage on top
• Should be accessible
• Should have four pages with full contents (no pdf file):

§ Team intro § Project Proposal with a solution statement § Review of existing systems § Data collection plan: Interview/survey § Data analysis: Affinity diagram/Survey analysis § 2 Personas § 2 Storyboards

• Include: Who contributed to the original writing of each section and who helped

improve and/or review at the end

• A PDF file, 12 point scale in Times New Roman, 1.5 line spacing

Due by Midnight 10/19

#Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.

Group project P3: Data analysis & Solution

Rubric

• Survey (2pt)
• If the survey analysis is presented using a proper visualization format with proper statistical

measures (1pt)

• If the description clearly explains what you learned (1pt)
• Affinity diagram (5pt)
• If the final diagram contains significant themes (2pt)
• If the final diagram has a structure/relation of top and sub themes (1pt)
• If the submission includes the photos to show the extract-synthesis process and a final digital

version (1pt)

• If the description clearly explains what you learned (1pt)
• 2 Personas (3pt)
• If the persona used the proper format (1pt)
• If the persona represents a particular type of person capturing characteristics of target users

(2pt)

• 2 Storyboards (3pt)
• If the storyboard used the proper components to describe a use-case scenario (1pt)
• If the storyboard clearly states the problem/context/goal (2pt)
• Statement of solution (2pt)
• If the solution is clearly described to solve the stated problem. (2pt)

#Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.

Group project P3: Data analysis & Solution

Rubric

• You will lose 20% if your website doesn’t work or misses the contents
• You will lose 50% if your submission does not follow the format
• You will lose 20% if it’s a late submission (Not accepting a late submission submission

after that): Don’t think of it as an extended deadline but think of it as a grace period to fix any major mistakes you make for resubmission!!!

#Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.

By next class

Reading

• Health at hand (discussion paper)

Assignment

• Individual assignment: I2. data collection
• Group project: P3. Data analysis