Class #2 December 17
PV 267 - UX workshop
Tereza Novotna
1
2
Recap of heuristic principles
16
The power of sketching
Everybody should draw as much as possible
Visual note-taking sticks to your mind
Many designers rely solely on digital tools as they lack confidence and time in their drawing
abilities
There is always a good reason to draw
Source:
https://www.nngroup.com/articles/definition-user-experience/
“I cannot draw”
17
Source:
https://uxdesign.cc/there-is-always-a-good-reason-to-draw-why-sketching-benefits-your-design-practice-fd0c7e43c2c8
Sketched instructions remove
the need for words. Making this
easy to understand, no matter
your native language.
Everybody can draw.
18 Source:
http://www.t-sciences.com/news/humans-process-visual-data-bette
https://alistapart.com/article/sketching-the-visual-thinking-power-tool/
rhttps://www.instagram.com/evalottchen/
Unless you wish to be an artist, your drawings do not need to be
beautiful: they need to be able to convey your point.
▸ Visual information is processed 60,000 faster than text by the brain
▸ Sketching is functional - it is about generating ideas, solving problems, and
communicating ideas more effectively with others.
▸ Ugly gets the job done just fine!
▸ Great tool for rapid idea generation - pen and paper works just fine
▸ Freedom to explore alternatives
▸ Sketches are unfinished and loose - they invite commentary and discussion
▸ This takes little time and can be quickly thrown away
Anybody - absolutely anybody - can sketch a great idea.
19 Source:
https://www.fastcompany.com/3057076/google-ventures-on-how-sketching-can-unlock-big-ideas
https://www.evalotta.net/blog/2019/4/7/my-sketchnotes-from-pixelup-conference-in-cape-town
r
Imagine you’ve got a great idea. You’ve been thinking about it for
weeks. You go to work, describe the idea to your teammates, and . . .
they just stare at you. Maybe you aren’t explaining it well. Maybe the
timing isn’t right. For whatever reason, they just can’t picture it.
Totally frustrating, right? It’s about to get worse.
▸ Sketching is the fastest and easiest way to transform abstract ideas into concrete
solutions
▸ Once the idea become concrete, it can be critically and fairly evaluated by the rest
of your team
20
Wireframing and prototyping
Wireframe
21
Source:
https://www.mockplus.com/blog/post/what-is-a-wireframe-what-is-a-prototype
● 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
● The simple wireframe is a kind of low fidelity design, it consists lines,
boxes, and grayscale colors.
Watch:
https://www.youtube.com/watch?time_continue=124&v=8-vTd7GRk-w&feature=em
b_logo
Low fidelity vs High fidelity
22
Used when
● high level ideas
● key features of screen or widget
● general concept of a design
● show examples
Used when
● a full story that incorporates visual
design elements
● conceptually complete design
https://marvelapp.com/75ihb1f/screen/58499278
https://uxplanet.org/actionable-ux-advice-with-hamed-yahyaei-88d5e971f923
Paper prototypes
26
Source:
https://www.mockplus.com/blog/post/what-is-a-wireframe-what-is-a-prototype
▸ Communicate your ideas quickly using materials that are versatile
and cheap.
▸ Can help you gather feedback about an idea in many ways, so first,
plan on what you want to achieve with your prototype
▸ Don’t be afraid to try something and throw it away. You just learned
something valuable by finding out what won’t work.
Prototyping tools
27
▸ InVision
▸ Sketch
▸ Marvel
▸ Balsamiq
▸ Figma
▸ Google Slides
▸ Keynote
▸ Slides
▸ Adobe XD
Example of prototypes
28
▸ Prototyping helps with identifying and formulating the design and
saves time
▸ Draft design precedes the development
▸ It is a process to significantly reduce the time to develop a site
▸ It gives the customer a complete idea of how the site will look like in
the final result
▸ A prototype can be user tested as well
▸ Risk reduction, iterating at a lower cost
▸ Provides feedback on how the final product will look like
Source:
https://uxdesign.cc/importance-of-prototyping-in-designing-7287c7035a0d
Let’s look at some prototypes
Thinking outside of the box
29
▸ Even silly or impractical ideas can evolve into their best work
▸ Think differently, unconventionally, from a new perspective
▸ Creative thinking
Let’s review what you did last time for the messaging app
30
https://app.mural.co/t/imperative3workshops1726/m/imperative3worksh
ops1726/1607359508206/dca36c4d102f9df0efab991f7a11ad2d96e4d64
b
31
EXERCISE in Mural
Crazy 8’s = fast sketching exercise that challenges people to sketch eight
distinct ideas in eight minutes. The goal is to push people beyond their first
idea, by suppressing self-judgement and making their ideas tangible.
“You’ll need to come up with the most ridiculous, silly, stupid solution to
make the user problem even graver than before. Generate the worse
possible ideas you can think of and stop at nothing.”
8’On your own 5’In a group
Identify the best 3 ideas
Share your crazy 8’s
32
Micro interactions
33
Source:
https://www.nngroup.com/articles/microinteractions/
▸ Many of our everyday interactions with computer systems fall under
the large umbrella of microinteractions
▸ One of the greatest joys of using technology comes through user
empowerment and engagement
Examples
34
Source:
https://www.nngroup.com/articles/microinteractions/
▸ Many of our everyday interactions with computer systems fall under
the large umbrella of microinteractions
▸ One of the greatest joys of using technology comes through user
empowerment and engagement
35
EXERCISE
Select one idea that you developed in the crazy 8’s
Create sketches or even high fidelity options, possibilities of that
interaction.
Tools: Use paper and pen, take your time to think it through just with paper. If
you feel you are well advanced, you can try black and white wireframe in Figma
- here is a nice library.
https://www.figma.com/file/xJji55T4uUp7YF05uuAg0p/Wireframing
-(Copy)?node-id=0%3A1
Goal: You should end up with wireframes simulating the interaction step by
step. This should get you thinking about the details.
Introduction to Figma
36
▸ We are using Figma as the main prototyping tool. Personally, I work in
Sketch - but that runs only on Mac and the free trial is limited as it
expires early on. Figma runs free and in the past years is becoming
very popular especially for its ease of use and functionality.
▸ If you are not familiar with this tool, here are few tutorials to help you
get started:
･ https://www.youtube.com/watch?v=jk1T0CdLxwU&feature=emb_logo&a
b_channel=JesseShowalter
･ https://www.youtube.com/watch?v=tdy1bo5eAgA&feature=emb_logo&a
b_channel=AJ%26Smart
･ https://www.youtube.com/watch?v=cCNLD5IZY34&feature=emb_logo&
ab_channel=CharliMarieTV
Homework for Jan 7
37
▸ Bring your sketched interactions to live in high fidelity via Figma
▸ Share several options of interactions that you considered (mark it in
your prototype too)
▸ Make sure you have well defined use case with what the end user is
trying to do
▸ Get familiar with Figma (links are in our class presentation)
▸ Find the right design kit for your messaging app you are considering
(simple google search for Messenger/Whatsapp/iMessage & Figma
gives you design kits to experiment with)
▸ An example: Messenger UI kit
https://www.figma.com/file/URGG5e2GSZXXfIHnYgulGk/SWD-(M
essenger-UI-Kit)-(Community)?node-id=25445%3A4872
▸ Bring your work to the next class (upload it to homework
assignment)
I wish you happy holidays
38