VASILIS BAIMAS
1
WORDCAMP GREECE 2021
Design ∩ Research ∩ Product
“Design For
Th
e Act Of Communication”
Slide 2
Slide 2 text
2
Vasilis Baimas
Web Designer
Visual Designer
UX Designer
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
5
User Experience Design
Is Everywhere.
Slide 6
Slide 6 text
6
De
fi
nition of User Experience
User experience refers to a person's
subjective feelings and attitudes when
using or interacting with a particular
product, such as an app or site.
Slide 7
Slide 7 text
7
Good Example of User
Experience
Parking Lots.
Copyright : Yael Ben-David
Slide 8
Slide 8 text
8
Bad Example of User
Experience
Bike Road and Sign.
Copyright : Vasilis Baimas
Slide 9
Slide 9 text
9
Th
e Basic Aspect of UX
Usability
It is useful
to me. It meets my
needs.
Desirability
Utility
Brand Experience
I am able to use the
product easily.
I like the way the
product looks and feel.
My overall feeling about the
brand/product (in the
abstract) is good.
(Source: user experience, 2008 mGroup Conference Amsterdam)
Slide 10
Slide 10 text
10
De
fi
nition of Usability
Usability is a quality attribute that assesses how
easy user interfaces are to use.
FFFEFC
Slide 11
Slide 11 text
11
Good Examples of Usability
FFFEFC
Carelman Pot.
Google Search Engine.
Slide 12
Slide 12 text
12
Bad Example of Usability
Touchpad on Laptop.
Copyright : Doug Collins
Slide 13
Slide 13 text
13
Th
e Outcome
Usability comes to one question :
Does your site provide an e
ff i
cient and enjoyable user experience?
FFFEFC
Slide 14
Slide 14 text
14
Learnability
#1
How easy is it for users to accomplish
basic tasks the first time they encounter
the design?
Key Quality Components
Slide 15
Slide 15 text
15
E
ffi
ciency
#2
Once users have learned the design, how
quickly can they perform tasks?
Key Quality Components
Slide 16
Slide 16 text
16
Memorability
#3
When users return to the design after a
period of not using it, how easily can they
re-establish proficiency?
Key Quality Components
Slide 17
Slide 17 text
17
Errors
#4
How many errors do users make, how
severe are these errors, and how easily
can they recover from the errors?
Key Quality Components
Slide 18
Slide 18 text
18
Satisfaction
#5
How pleasant is it to use the design?
Key Quality Components
Slide 19
Slide 19 text
19
88% Less likely to return to a
site after a bad user experience.
Slide 20
Slide 20 text
20
If your site is hard to use then the people will leave.
Slide 21
Slide 21 text
21
Slide 22
Slide 22 text
22
Simplicity
#1
Slide 23
Slide 23 text
23
• Make your user to get from point A (the
entry point) to point B (where they
want to be) as quickly as possible.
Site Layout
• Clear hierarchical structure.
• Make your layout clean with all the
essential info.
Slide 24
Slide 24 text
24
• A web page without any images is very
boring and hard to read.
• Include images to supporting your
content.
Images
Slide 25
Slide 25 text
25
Familiarity
#2
Slide 26
Slide 26 text
26
• Make navigation simple.
Complex Navigation
• Group relevant pages together in a
submenu.
Slide 27
Slide 27 text
27
• Helps to emphasize particular elements
that require deep attention from users.
White Space (negative space)
• Include “white space” in your content,
images, brand.
Slide 28
Slide 28 text
28
• Avoid cluttered content.
• Keep carefully balance graphics and
content.
Layout
• Don't use unusual layouts.
Slide 29
Slide 29 text
29
Design Considerations
#4
Slide 30
Slide 30 text
30
Layout Colors
• The colors deliver readability.
• Don’t use to many and bright colors.
• Use tints of a single color.
• Colors needs to develop an aesthetic
appeal.
Slide 31
Slide 31 text
31
Guidance
#5
Slide 32
Slide 32 text
32
Visual Hierarchy
• Define the hierarchy of the content.
• Define the key point(s) you want the
user to take away.
• Use Z or F Pattern.
Slide 33
Slide 33 text
33
Prioritize Buttons
• Make the most important button look
like the most important one.
• Always try to make the primary action
button more prominent.
• By making the button bigger you make
it look more important for users.
Slide 34
Slide 34 text
34
• Avoid using generic instructions such as
“read more”, “more”, and “click here”.
• Make it memorable.
Call To Action
Slide 35
Slide 35 text
35
Forms
• Users complete top aligned labeled
forms at a much higher rate than left-
aligned labels.
• Forms should be one column.
Slide 36
Slide 36 text
36
Search Box
• Don’t hide the search box among other
elements.
• Don’t make the “Submit” button fit too
small.
• Make the search box visible on every
page.
Slide 37
Slide 37 text
37
Errors
• Use inline validations after the users
fills out the field.
• Show the user where the error occurred
and provide a reason.
Slide 38
Slide 38 text
38
Readability
#6
Slide 39
Slide 39 text
39
• Choose fonts that are easy to read.
Fonts
Slide 40
Slide 40 text
40
• Give your text room to breathe.
• A lack of “white space” between each
line can affect readability.
• Avoid long narratives.
• Use heading, subheadings, bulleted/
numbered lists, intents, online.
Typography
Slide 41
Slide 41 text
41
• Left aligned text is easier to read than
centered text for paragraphs.
• Centered text is best used
for headlines and short lines of text.
• Avoid to combine centered text with
left aligned text.
Alignment in Fonts
Slide 42
Slide 42 text
42
• Don’t use the same or similar colors for
text and background.
• The more visible text, the faster users
are able to scan and read.
• High color contrast is useful for
readability.
Color Contrast
Slide 43
Slide 43 text
43
• Avoid using, especially if such sites are
likely to be read by users who are not
familiar with such technical
terminology.
• Instead of the features, focus on the
benefits of the product / service.
Jargon
Slide 44
Slide 44 text
44
• Don't let text go all the way across the
page.
Line Length
Slide 45
Slide 45 text
45
• Don’t hide your links.
• Change your link colors and be sure
that links can be recognised.
• Become highlighted or change color on
mouseover.
Site Links
Slide 46
Slide 46 text
46
The list could go on and on..
Slide 47
Slide 47 text
If you don't have users' voice in your design,
if you haven't done your research, how do
you know that your design is usable ?
47
— Alison Gavine (Interaction Design Foundation)
Slide 48
Slide 48 text
48
The list could go on and on
Usability Testing helps you
to make subjective findings
Slide 49
Slide 49 text
49
The list could go on and on
Do users enjoy using the
product?
Slide 50
Slide 50 text
50
www.vbaimas.com
hello@vbaimas.com
UX Chat
Connect
THANK
YOU