Intro to UX
1
Agenda
Lecture
Recap
■ Final project - Jak budete hodnoceni
What is UX
■ What is covered under UX umbrella
Design processes - Jak se dá postupovat
■ Design thinking - emphasize, define,
ideate, prototype, test (Illustrated on a
sample project)
Workshop
Form teams of 2
Define your project - Co chceme dělat?
■ Select topics
■ Select target group - Pro koho to
chceme dělat?
■ Formulate POV statements
Communication tools
3
➔ Gitlab
https://gitlab.fi.muni.cz/qhala/dashboard-PV278
➔ Slack (preferred)
fi-muni-rejnoci.slack.com
When you log in - say hi to #general
➔ Email
khala@redhat.com
msviriko@redhat.com
lenka.sakalosova@notino.com
VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ
4
Final project - UX
UX part (50%)
▶ Define a problem
▶ Understanding your user (personas, storyboard)
▶ Sketches and prototypes
▶ Usability testing feedback captured and incorporated
▶ Creativity
5
Final project - UI
UI part (50%)
▶ Landing page
▶ Dashboard
▶ Chart using some chart library
▶ Table - static
▶ Table - interactive
▶ Entity detail
▶ User detail
Brainstorming: Využitia predmetu ( 90 s)
Aktivita
Final project variables
7
Meteorological information of czech republic past 40 years
▸ Temperature - average, minimum, maximum
▸ Sun - precipitation, snow, sunshine
▸ Air - wind speed, air pressure, air mois
Choose interesting and relevant date or date range
▸ Eg: date of birth (how much sunshine was in history at this
date), temperature change in your life or someone famous
Data are not 100% clean and up to date
Odkazy na dokumentáciu dát
https://app.swaggerhub.com/home?owner=karelhala a potom odkaz
na “referenčnú” aplikáciu https://spotless-grass.surge.sh/
VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ
Brainstorming: Ako počasie ovplyvňuje život ľudí v Česku?
Samostatná práca
1. Vymyslite, čo najviac
rôznych spôsobov
3 min
2. Prezentujte:
- Najhodnotnejší
- Najhlúpejší
Aktivita
● What is UX?
● How to UX? (Design Thinking)
Lecture: Intro to UX
User experience discipline
“User experience is a discipline focused on designing the end-to-end
experience of a certain product.” [or service, or system, etc.]
10
UX
User experience is the way a person feels about using a product,
system or service.
11
“Good design is actually a lot harder to
notice than poor design, in part because
good designs fit our needs so well that the
design is invisible, serving us without
drawing attention to itself.
Bad design, on the other hand, screams out
its inadequacies, making itself very
noticeable.
Donald A. Norman (The Design of Everyday Things)
UX fails
13
14
15
16
17
18
19
What is covered under the User
Experience umbrella?
20
21
22
UX jobs options
23
▸ User Researcher
▸ Visual Designer
▸ Interaction Designer
▸ UI Engineer / Frontend engineer
▸ User Experience Architect
▸ User Experience Strategist
▸ Motion Designer
24
25
Design process
26
Overlap of:
▸ Desirability
▸ Viability
▸ Feasibility
User centered design solution
28
Design thinking
▸ an approach used for practical and creative problem-solving
▸ Design Thinking can also be applied to any field; it doesn’t necessarily
have to be design-specific
▸ is extremely user-centric
▸ understand people’s needs and come up with effective solutions to meet
those needs
29
30
33
34
Design process
Aktivita
Cíl: vylepšit zkušenost v čekárně u doktora
Sample project: Čekárna
36
Empathize
User needs
38
Who are the users?
What is the context?
What do they expect?
What are their goals?
What do they want to accomplish using this product?
Cieľová skupina
39
= Pre koho to robíme?
▸ Definovaná kritériami, napr:
･ Demograficky - napr. vek, pohlavie
･ Psychograficky - ako premýšlajú
･ Behaviorálne - ako sa správajú
･ Geograficky - napr. kde žijú..
…
(aka. target group/audience)
Aktivita
● Kto je vaša cieľová skupina?
● Pre koho to NErobíme?
Sample project: Čekárna
Personas
41
https://www.usability.gov/how-to-and-tools/methods/personas.html:
▸ Purpose: to have a realistic and reliable representation of your
key audience
▸ Effective personas do the following:
○ Represent a major user group for your product
○ Express and focus on the major needs and expectations
of the user group
○ Give a clear picture of the user's expectations on product
use
○ Aid in uncovering universal features and functionality
○ Describe real people with backgrounds, goals and values
https://theblog.adobe.com/putting-personas-to-work-in-ux-design-what-they-are-and-why-theyre-important/
42
https://theblog.adobe.com/putting-personas-to-work-in-ux-design-what-they-are-and-why-theyre-important/
43
Empathy Mapping
44
▶ The first step of the process is empathizing
▶ This step is all about the users
○ Create personas
○ Explore user needs
○ Discover user goals
○ Consult experts to better understand the areas of
concern
○ When possible, talk directly to users!
dan
1/12
presentation
Messy desks Alternative
technologies
Bugs and
broken code
Seeing...
We need
compatibility
This migration
is a headache
Nobody
understands
Saying...
Hearing...
I don’t get it! We need to meet
the deadline
Different groupsadvocating fordifferent tools
We change
processes too
much
Thinking,
Feeling...
Bugs are
annoying
People, deadlines,
and broken code
are painful
Design Thinking: Sample Project
● Create empathy map!
○ Thinking
○ Feeling
○ Seeing
○ Saying
○ Doing
○ hearing
Sample project: Čekárna (20 min)
Define
52
Define
The fundamental questions at this stage are:
● What is the problem we are trying to solve?
● Explore the what and why of the user’s needs and goals
● Translate user needs into product requirements
● Define requirements in terms of functionality, attributes, and specifications
Design Thinking: Sample Project
Sample project: Čekárna (7 min)
Ideate
55
Ideate
“Ideation is the mode of the design process in which you concentrate on idea generation. Mentally it represents a
process of “going wide” in terms of concepts and outcomes. Ideation provides both the fuel and also the source
material for building prototypes and getting innovative solutions into the hands of your users.”
– d.school, An Introduction to design thinking PROCESS GUIDE
What is ideation
56
▸ it’s all about generating ideas
▸ come up with as many ideas as possible
▸ the focus is on quantity of ideas rather than quality
▸ main aim of an ideation session is to uncover and explore
new angles and avenues—to think outside the box
▸ Tools - mind mapping, storyboarding
57
https://medium.com/design-sprint-academy/evil-8s-remove-the-pressure-to-perform-in-a-design-sprint-e0c4337be5a
Design Thinking: Sample Project
Crazy 8’s = It is a 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.”
Sample project: Čekárna (8 min)
Workshop: Final project
Workshop
Workshop agenda
Form teams
Select
challenges
Define your
project
Workshop
Form teams
◆ Designer/researcher
◆ Frontend developer
Workshop
Select challenges
Return of the brainstorming exercise
Select 2-4Discuss ideas
● Importance
● Feasibility
Workshop
Define target group and your project
➔ Define target group/s
◆ For each challenge
◆ State criteria (inclusion, exclusion)
◆ Are there subgroups with different needs?
● Which one is your primary target group?
● Imagine a typical representant of this group
➔ Formulate “Point of view” statements
◆ For each challenge
64
https://www.tlpnyc.com/blog/define-stage
Activity #2 - 7 min