@mrjoe's talk on the UX of HTML5 given at Future of Web design in May 2012

1. The UX of
Hi, comments from me
here.
http://victorenrich.com/archives/155 @mrjoe @mrjoe

2. Hello, I’m @mrjoe, but
you can call me Joe
I’ve worked on big projects
for eBay, trainline, Marriott,
LateRooms, Virgin, Disney
and more
@mrjoe

3. I want to
punch this website
in the face
Overheard in a user test
and what we as UX
practitioners want to avoid.
3

4. HTML5 is an extension of
HTML4 with web apps in
mind. The expansion is big.
Our toolset is now complex.
http://victorenrich.com/archives/155
@mrjoe

5. A designer
who doesn't
understand how
people behave is
going to be no more
successful than a
We need to know what tools
to use to solve certain
problems.
architect who
doesn't understand
physics
@mrjoe
http://victorenrich.com/archives/155

6. HTML5 examples out there
are well, pretty unusable.
@mrjoe

7. Just because you
can doesn’t mean
you should
@mrjoe

8. With Great Power
Comes Great Stocksy last year at FOWD
2011 on HTML5
Responsibility @mrjoe

9. We’re talking about
html5 but we can’t help
but talk about these as
well.
Javascript
jQuery is so ubiquitous
but presents it’s own
issues
@mrjoe

10. Browser
implementations of
HTML5 vary and they
aren’t always brilliant.
And worst of all they
aren’t consistent.
@mrjoe

11. I’m a psychologist at
heart.
@mrjoe
11

12. u
we have a bit of brain for
forms. We’ll look at the
bits of HTML5 but lets
focus on forms.
@mrjoe
12

13. 1. The spinner (aka range)
13

14. 0
min="0" What I’ve seen in
max="99"
research is
people are drawn to the
up/down arrows
Text boxes with stuff in,
like select boxes we are
taught to click to
change.
14

15. 0
D
T = a + blog 2 ( 1 + )
W
this is Fitts Law a very complicated
way of saying...
15

16. 0
D
T = a + blog 2 ( 1 + )
W
... small stuff is hard to click.
16

17. 2. Form validation is
messy
17

18. How did you hear about us?
*
How old are you? *
Ever seen these before?
18

19. How did you hear about us?
*
How old are you? *
I didn’t see them [the asterisks].
There’s nothing that explains
what they mean.
This blew my mind first time I heard it. I keep hearing it. why?
It’s a fake construct. a tech solution to a non tech problem.
Think paper forms, how do people complete them.
From top to bottom until you tell them to stop.
19

20. How did you hear about us?
optional
Here’s what to do.
Technically it’s a little harder
Don’t enter labels in the text field because as
soon as you type they are gone. How do you
check you responses when reviewing a
completed form?
20

21. How did you hear about us?
optional
required=”required”
Doesn’t cut it I’m afraid.
21

22. 3. Validation still ain’t
brilliant
22

23. What is your salary? 34000
23

24. What is your salary? 34000
34,000
£34000
£34,000.00
34,000.00€
So many possible entries
for 1 seemingly simple
question. I’ve seen all these
in user testing
24

25. What is your salary? 34000
34,000
£34000
£34,000.00
34,000.00€
type=”number”
This forces the first option.
No comas or anything are
allowed. Very strict and
not very useful.
25

26. What is your salary? 34000
34,000
£34000
£34,000.00
34,000.00£
type=”number“ “text”
It has to be, as it is now, text :(
26

27. What is your salary? £34,000.00
/^d{1,3}(?:,?
d{3})?(?:.
d{0,2})?$/
Regular expressions or
regex.
We’re gonna have to get
to grips with this stuff.
Scary times front end dev
dudes.
Google: Mozilla Reg Exp 27

28. Blink and it disappears.
Click submit, go and make
a cup of tea, return and
you don’t know what you
did wrong.
28

29. Opera is better. But the
error message is a bit
geeky. Plus it behaves
differently to Chrome.
29

30. Firefox is better, but still, what is a
field? Bit geeky.
30

31. There are so many
inconsistencies
across browsers.
Browser guys: you
need to agree on an
implementation
standard.
As @Aral says, w3C
you need to set a
standard.
@mrjoe

32. 4. Sliders are for losers
32

33. They are so fiddly for entering exact
values.
Sadly they are very ‘fashionable’
right now. Think before you use.
33

34. 5. Dates are slimy little
buggers
34

35. What date would you like 12 - 04 - 05
your insurance to start?
35

36. What date would you like 12 - 04 - 05
your insurance to start?
The date format is different across
the world so using numbers in a
dd/mm/yy
date field will always cause you
mm/dd/yy
problems.
yy/mm/dd
36

37. What date would you like 12 - 04 - 05
your insurance to start?
The week typically starts on a
Monday in the UK
This is the default jQuery date
picker – it starts on a Sunday
A major train company I work for
has had thousands in refunds
because customers book the wrong
day.
37

38. Optimum solution folks.
38

39. 6. Prefetching is a great
idea
39

40. rel=”prefetch”
Great stuff. Prefetches the next
page while you are the current page.
Try typing CNN into Google to see it
in action.
40

41. This was built in um, flash/flex.
Super quick form that swished in the
next page. when you hit the button
down there.
T
41

42. Oh, what happened
Ohhh, what happened there?
there?
It freaked people out! To whizzy.
People are used to the submit, page
load experience.
Google: Change blindness 42

43. 7. Drag & drop
43

44. We tested this drag and drop
insurance interface 4 years back.
Problem was nobody got it. Why?...

45. ...no affordance. That is no clue from
the design what you should do. Like
a push/pull door.
http://www.nature.com/neuro/journal/v14/n10/fig_tab/nn.2932_F1.html
45

46. Your policy
Roadside assistance
Roadside assistance
[drag me]
Roadside
assistance
Roadside assistance
We tested loads of design options.
46

47. Look what won! A button that once
clicked animated the movement
across.

48. Then along came the iPad. Thank you!
Drag and drop became more common place
Users tried stuff but we won’t go back and
remove that button, not because of affordance
but because...

49. Why [drag] when you can click
and it goes over automatically?

50. 8. Don’t do stupid shit
50

51. autoplay=”autoplay”
There are uses for this, and no, one them isn’t a
MIDI sound track for you site.
51

52. http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#6
52

53. why?
http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#6
53

54. autotune=”autotune”
If only this existed!
54

55. <small>
The small element represents so-called “small print” such as legal disclaimers and caveats.
W3C specification
Why? Semantics I know. But really, why?
55

56. Thank you.
I’m @mrjoe on twitter
I (we) write at
cxpartners.co.uk/blog
@reply me on Twitter if you enjoyed the prezzo.
56