CSE 440: Introduction to HCI
User Interface Design, Prototyping, and Evaluation!
Lecture 02: Design Process
Instructor: Amy Zhang, 1/7/2021
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
The Rapid Ideation Lab asked users how they would create the cars of the
future.
[Link]
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
Reducing Disparity
• This can be broadly construed to relate to helping groups of people gain
access to information, resources, support, connections, communities,
opportunities, etc. that other groups may more easily access for various
reasons.
• Your team must pick a user group that you all do not consider yourself a
member of; this is so that you will not rely too much on your own
experiences during user research.
• Define what the specific disparity is that you wish to help reduce for which
population. Then start to consider ways technology can be designed to help
address this problem. Some examples of relevant projects are in the syllabus!
LifeAfter
[Link]
cse440/17sp/projects/LifeAfter/
honestCare:
[Link]
cse440/17sp/projects/honestCare/
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 an introduction if you didn’t meet each other on Tuesday
• Name, pronouns, 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:
[Link] You’ll turn in your assignments as PDFs on Gradescope but we expect
you to also keep this doc up-to-date with all your assignments (don’t worry about replicating any
fancy formatting in your PDF in the doc).
• You can also begin making a plan for 1a now. You’ll have some time tomorrow in Section as well.
The final 1a is due 5PM Friday in Gradescope!
• 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!