CSE703016: Introduction to HCI
Lecture 2: Design Process
Instructor: Dr. Mai Xuan Trang
12/10/23 Faculty of Computer Science 1
Today’s Topics
• UI Hall of Fame and Shame
• Design Process
• Why do we need to consider users in design?
• Iterative Design
• Design Diamond
• Ideation
• Ideation exercise
• Group Project Overview
• Meet your team and start brainstorming!
UI Hall of Fame or Shame
Hall of Shame
Hall of Fame or Shame?
Design Process
Design Process in a Nutshell
Explore the Solution
Frame the Problem
Space
User research
}
Competitive Analysis Brainstorming
Ideation through Sketching
Participatory Design
Scenarios
Storyboards Find a Good Solution
Personas
Design Rationale
Wireframes
Lo-fi Prototypes
Refine the Solution Early Evaluations
Mid-fi prototypes
Additional Evaluations
Design Process in a Nutshell
Explore the Solution
Frame the Problem
Space
User research
}
Competitive Analysis Brainstorming
Ideation through Sketching
Participatory Design
Scenarios
Storyboards Find a Good Solution
Personas
Design Rationale
Wireframes
Lo-fi Prototypes
Refine the Solution Early Evaluations
User-Centered Design Mid-fi prototypes
Additional Evaluations
Why do we need to center users
in design?
[answer in chat]
But how do we add users’ feedback
to our process?
Design Process in a Nutshell
Explore the Solution
Frame the Problem
Space
Iterative Design
}
Find a Good Solution
Refine the Solution
Wireframes
Lo-fi Prototypes
Early Evaluations
Mid-fi prototypes
Additional Evaluations
Iterative Design
Traditional Waterfall
Model
Why is the waterfall method bad for designing UIs?
• User interface design is risky
• Users are not involved in validation until the acceptance test at
the end
• UI flaws often cause changes in requirements and design
Iterative Design
• You won’t get it right the
first time!
Spiral Model
increases in fidelity with
each iteration
Examples of Early Prototyping
Sketches
Examples of Early Prototyping
Paper Prototypes
Examples of Early Prototyping
Wireframes and Digital Mockups
Early Prototyping can detect problems
Pros of Iterative Design
• Early iterations use cheap prototypes
• Later iterations use richer implementations, after UI risk has been
mitigated
• More iterations generally means better UI
• Only mature iterations are seen by the world
Design Process in a Nutshell
Explore the Solution
Frame the Problem
Space
Iterative Design
}
Find a Good Solution
Refine the Solution
Wireframes
Lo-fi Prototypes
Early Evaluations
Mid-fi prototypes
Additional Evaluations
Observation
Needfinding
Idea generation
Brainstorming
Sketch
Critique
Paper prototype
Wizard-of-oz
Video prototype
Heuristic evaluation
Wireframe
User study
Digital prototype
03 - Ideation
06 - User Research
03 - Critique 09 - Sketching
11 - Interface Evaluation 12 - Paper Prototyping
13 - Heuristic Evaluation 14 - Interface Implementation
1a, 1b: Project Brainstorm
2a, 2b, 2c, 2d: Getting the Right Design
2e, 2f: Design sketches
3b: Heuristic Evaluation 3a: Paper Prototype
3c: Usability Testing 3d: Preliminary Mockup
3e: Design Blogpost + finished mockup
Design Process in a Nutshell
Explore the Solution
Frame the Problem
Space
}
Generate Refine down
more ideas Find a Good Solution ideas
Wireframes
Lo-fi Prototypes
Refine the Solution Early Evaluations
Design Diamond Mid-fi prototypes
Additional Evaluations
Elaboration Reduction
Design Diamond
danger!
danger!
start generate select
danger!
intentional!
danger!
The Role of Critique
• Ideas can be both good and bad
• BOTH are useful in design
• By making clear what is a bad design, we can avoid implementing it
• Bad ideas help justify your good ideas and clarify what makes them
good
• Feedback can turn a good idea into a great idea
Critique
Critique
Combining design
diamond with iterative
design and spiral model
• By starting with low fidelity
and moving to higher, we
can more easily achieve a
design diamond process
earlier in the timeline (the
“diamond” gets smaller
over time)
Fidelity
• This is called parallel design:
• Build and test multiple
prototypes at the same time
to explore design
alternatives
• Easy to do when sketching
or making lo-fi prototypes!
• That’s in contrast to serial
design
• More useful during later
stages of prototyping
Ideation
Sketching
• A way to think through ideas,
explore alternatives, and convey
them to others very early in the
design
• Easy to make, easy to throw away,
so you don’t get too attached
• Quantity over quality - bad ideas
are also useful!
By Reid Schlegel: [Link]
Ideation Exercise
Sketching Part 1 (3 min)
• By yourself, sketch 5 new designs for a cup
• Try to push yourself to think of 5 vastly
different designs by considering very
different contexts and use cases for a cup
• What assumptions are you making about
how cups are used? What happens when
you get rid of one of those assumptions?
Lawful Neutral Chaotic
Good
Neutral
Evil
Sketching Part 2 (6 min)
• Consider how your 5 designs explore different
dimensions of the design space of cups (color, size,
shape, material, etc.)
• Throw out those old ideas and now come up with 10
new cup designs that stretch those dimensions out
or combine them in new ways.
• Purposefully come up with bad/ridiculous designs!
• From these 15 cup designs, pick 2-3 that are your
favorite (you’ll also be sharing these later in groups).
• Answer questions at: [Link]
Reflection
• What was hard about this exercise? [type in
the chat]
• Did you have any trouble coming up with
that many sketches?
• Did you have trouble trying to think of very
different sketches?
• What helped you break out of a rut?
• Anything else interesting you noticed
while going through this process?
Group Project Overview
Self and Community Care
• Project theme and instructions:
o [Link]
Thinking about ideas for the project
• Pick ideas that you are passionate about!
• The problem and the target user group should not be too vague (“people
who exercise”). As mentioned, thinking of specific types of users and
contexts will be helpful for customizing your design.
• But also don’t scope it too narrowly just yet. If you do, you may realize
that you’ve narrowed it so much that you’ve already got a specific solution
in mind. Try to keep an open mind at this point and look around for a
weighty, complex problem with several avenues for potential exploration.
In Your Groups:
• Start with your introductions
o Name, background, hobbies, fun facts, etc.
• Share your 2-3 favorite cup designs. Talk about your design process, what dimensions you
explored. How did you landed on these 2-3, and why are they your favorite?
• In the remaining time, exchange contact details, discuss when to meet, how to
communicate.
• Use the Google Docs we’ve set up for your groups to write down your work as you
progress. You need to summit this doc as pdf to canvas.
• You can also begin making a plan for Assignment 1a – Three Project Proposals
o A useful technique for group ideation is for teams to individually come up with a number of
ideas before sharing them all with the rest of the team. Helps to reduce groupthink and
improves the creativity of output (making a bigger diamond before narrowing!)
Some interesting cup ideas people came up with!
Q&A
12/10/23 Faculty of Computer Science 3