Diferencias entre usabilidad y experiencia de usuario,casos reales que demuestran su importancia y herramientas que no ayudan a mejorarla. Además, unos aspectos básicos de usabilidad en formularios.

1. Hello!
Míriam González
Frontend Developer in @Neuromobile
1

2. USABILITYWhy is important
2

3. Let’s review
some concepts
▪ Usability
▪ User experience
▪ Fails examples
▪ Usability in forms
▪ Tools
Programmers imagine the most ridiculous ways to enter a
phone number into a form
3

4. 1.
What is Usability
Let's start from scratch
4

5. “ Degree to which a product or system can
be used by specified users to achieve
specified goals with effectiveness,
efficiency and satisfaction in a specified
context of use.
5
ISO 25010

6. “ Usability is a quality attribute that
assesses how easy user interfaces
are to use.
6
Jakob Nielsen

7. Quality
components
Learnability
How easy is it for users to
accomplish basic tasks the
first time they encounter the
product?
Efficiency
Once users have learned the
design, how quickly can they
perform tasks?
Memorability
When users return to the
design after a period of not
using it, how easily can they
reestablish proficiency?
Errors
How many errors do users
make, how severe are these
errors, and how easily can
they recover from the
errors?
Satisfaction
How pleasant is it to use the
product?
Accessibility
How easy is it for users
with disabilities interact with
the product?
7

8. Why
is important
PEOPLE LEAVE
8
Difficult use
Errors
Feel lost
Hard to read
Slowness

9. 2.
What is UX
User Experience
9

10. “ A person's perceptions and
responses that result from the use
or anticipated use of a product,
system or service
10
ISO 25010

11. UX
elements
Usability
Is it easy to complete
tasks?
Adaptability
Will people start using
the product?
Desirability
Is the experience fun
and engaging?
Value
Does a product provide
value to users?
11

12. UX vs
Usability
12

13. 3.
Fails
Let's get fun
13

14. UX
fails
14

15. UX
fails
15

16. UX
fails
16

17. UX
fails
17

18. UX
fails
18

19. 4.
Usability in forms
One of the most important component
19

20. Form
tips
Resist using placeholder text
as labels
20

21. Form
tips
Top align labels
21

22. Form
tips
Group labels with their
inputs
22

23. Form
tips
Avoid all caps
23

24. Form
tips
Floating label
24

25. Form
tips
Ditch the * and denote
optional fields
25

26. Form
tips
Show all selection options if
under 6
26

27. Form
tips
Place checkboxes (and
radios) underneath each
other for scannability
27

28. Form
tips
Make CTAs descriptive
28

29. Form
tips
Differentiate primary from
secondary actions
29

30. Form
tips
Specify errors inline
30

31. Form
tips
Use inline validation after the
user fills out the field
31

32. Form
tips
Don’t hide basic helper text
32

33. Form
tips
Use field length as an
affordance
33

34. Form
tips
Forms should be one column
34

35. Form
tips
Group related information
35

36. 5.
Some tools
Let’s improve UX
36

37. Some
tools
37

38. Some
tools
38

39. Some
tools
39

40. Links
▪ Usability 101: Introduction to Usability
▪ Design Better Forms
▪ Placeholders in Form Fields Are Harmful
▪ How to avoid making more UX clichés
▪ How to write for interactions
▪ ISO 9241
▪ DIfference Between usability and UX
40

41. Thanks!!
Any questions?
You can find me at @miriamgonp
41