Wireframing
and
prototyping1
Agenda
Homework
Storyboarding
Wireframing
Prototyping
Heuristics
Activity
2
3
● A sequence of drawings, typically with some
directions and dialogue, representing the
user’s actions and emotions
● In your storyboarding make sure that you
account for affordances in both digital and
physical interactions in the product
● You can start thinking about how to make
your product accessible as early as the
research phase, and the storyboard is
another great opportunity to visualize
(accessibility) measures
● https://olgashavrina.com/en/storyboard
Storyboarding
4
Use storyboards to visualize a flow or solution
within your problem space.
● Define context (environment), main
character (persona), product, interaction
with the product and happy ending.
● Before drawing - prepare a diagram with
notes.
● Project: Čekárna nebo váš projekt
Activity
5
Prototype
Sketch
8
● A wireframe is a graphical skeleton of a website,
that guides the content and concepts of the
pages, and helps designers and clients to discuss
the details of the website building (like a
blueprint)
● The simple wireframe is a kind of low fidelity
design, it consists lines, boxes, and grayscale
colors.
● To communicate Info structure/ layout/ content/
functionality
● Watch:
https://www.youtube.com/watch?time_continue=124&v=8-
vTd7GRk-w&feature=emb_logo
Wireframe
https://www.mockplus.com/blog/post/what-is-a-wireframe-what-is-a-prototype
9
● Step-up from a wireframe
● Higher fidelity
● It incorporates seemingly realistic looking
components.
● To discuss further with stakeholders
● Watch:
https://www.youtube.com/watch?time_continue=124&v=8-
vTd7GRk-w&feature=emb_logo
Mockup
https://www.mockplus.com/blog/post/what-is-a-wireframe-what-is-a-prototype
10
● a draft version of a product that allows you
to explore your ideas and show intention
behind a feature or the overall design
concept to users before investing time and
money into development
● can be a simple series of paper sketches
that details the product function and solves
for a use case
● great for validating product early. Ready to
be tested with users
● Validated prototypes are ready to be
developed
Prototype
11
Used when
● high level ideas
● key features of screen or widget
● general concept of a design
● show examples
Low fidelity
https://marvelapp.com/75ihb1f/screen/58499278
15
Used when
● a full story that incorporates visual design
elements
● conceptually complete design
High fidelity
16
https://uxplanet.org/actionable-ux-advice-with-hamed-yahyaei-88d5e971f923
17
InVision
Sketch
Marvel
Balsamiq
Figma
Proto.io
Moqups
Draw.io
Lucidchart
Google Slides
Keynote
PowerPoint
Flinto
Prototyping tools
Most of these have free trials
More UX Methods: https://kisk.phil.muni.cz/100metod/navrhovani
Example: https://marvelapp.com/prototype/b19dc99/screen/88563108
19
● To create a dialogue that helps designers
focus and reach consensus
● To provide educated guidance and
recommendations to move designs forward
● To help designers grow and improve by
learning from one another
Critique
1. Don’t take feedback personally, it’s about
the design.
2. Don’t feel like you have to pursue all of the
feedback that you receive.
3. If you don’t know the answer to a question,
it’s okay. Take a note to research and follow
up.
4. Get feedback from a wide variety of people,
not just designers on your team.
20
NIELSEN’S USABILITY HEURISTICS
● Jakob Nielsen's 10 general principles for interaction design
● They are called "heuristics" because they are broad rules of thumb and not specific usability guidelines
NIELSEN’S 10 USABILITY PRINCIPLES
Visibility of System Status
Keep users oriented and clear about where they are in the system or where
they are up to in a process.
“I know what’s going on.”
1
21
22
Match between the system and the real world
Follow real-world conventions, making information appear in a natural and
logical order.
“I know what you’re talking about.”
NIELSEN’S 10 USABILITY PRINCIPLES
2
23
User Control and Freedom
Users should be free to select and sequence tasks (when appropriate),
rather than having the system do this for them.
“Oops, let me out of here.”
NIELSEN’S 10 USABILITY PRINCIPLES
3
24
25
Consistency and Standards
Follow platform conventions. Principle of least surprise.
“Seems familiar, makes sense.”
NIELSEN’S 10 USABILITY PRINCIPLES
4
26
27
Help Users Recognize, Diagnose, and Recover from Errors
Error messages in plain language. Give users understanding of how they will
solve the problem in plain language.
“I know what went wrong, I can fix it.”
NIELSEN’S 10 USABILITY PRINCIPLES
5
28
29
Error Prevention
Even better than good error messages is a careful design that prevents a
problem from occurring in the first place.
“Glad I didn’t do that.”
NIELSEN’S 10 USABILITY PRINCIPLES
6
30
31
Recognition Rather than Recall
Make objects, actions, and options visible.
“I know what I need to do here.”
NIELSEN’S 10 USABILITY PRINCIPLES
7
32
33
Flexibility and efficiency of use
Cater the system to the inexperienced and expert user. Encourage
exploration. Offer accelerators.
“Allow me to do more of less.”
NIELSEN’S 10 USABILITY PRINCIPLES
8
34
35
Aesthetic and Minimalist Design
Dialogues should not contain information that is irrelevant or rarely needed.
Simplicity.
“Looks good, works beautifully.”
NIELSEN’S 10 USABILITY PRINCIPLES
9
36
37
Help and Documentation
Integrate help with the system. “How do I…?”
“Okay, I need help.”
NIELSEN’S 10 USABILITY PRINCIPLES
10
38
39