Why Teams call analytics are critical to your entire business
UX of HTML5
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
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
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
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
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
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
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
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
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?
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