@mrjoe

The UX of

@mrjoehttp://victorenrich.com/archives/155

Hi, comments from me here.

@mrjoe

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

3

I want topunch this websitein the face

Overheard in a user test and what we as UX practitioners want to avoid.

@mrjoehttp://victorenrich.com/archives/155

HTML5 is an extension of HTML4 with web apps in mind. The expansion is big. Our toolset is now complex.

@mrjoe

A designer who doesn't

understand how people behave is

going to be no more successful than a

architect who doesn't understand

physicshttp://victorenrich.com/archives/155

We need to know what tools to use to solve certain problems.

@mrjoe

HTML5 examples out there are well, pretty unusable.

@mrjoe

Just because you can doesn’t mean

you should

@mrjoe

With Great Power Comes Great Responsibility

Stocksy last year at FOWD 2011 on HTML5

@mrjoe

JavascriptWe’re talking about html5 but we can’t help but talk about these as well.

jQuery is so ubiquitous but presents it’s own issues

@mrjoe

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

@mrjoe11

I’m a psychologist at heart.

@mrjoe12

uwe have a bit of brain for forms. We’ll look at the bits of HTML5 but lets focus on forms.

13

1. The spinner (aka range)

14

0

min="0" max="99"

What I’ve seen in research is people are drawn to the up/down arrowsText boxes with stuff in, like select boxes we are taught to click to change.

15

T = a + blog 2 (1 + DW)

0

this is Fitts Law a very complicated way of saying...

16

T = a + blog 2 (1 + DW)

0

... small stuff is hard to click.

17

2. Form validation is messy

18

How did you hear about us?*

How old are you? *

Ever seen these before?

19

I didn’t see them [the asterisks]. There’s nothing that explains what they mean.

How did you hear about us?*

How old are you? *

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.

20

optional

How did you hear about us?

Here’s what to do.Technically it’s a little harderDon’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?

21

optional

How did you hear about us?

required=”required”

Doesn’t cut it I’m afraid.

22

3. Validation still ain’t brilliant

23

34000What is your salary?

24

34000What is your salary?

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

25

34000What is your salary?

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.

26

34000What is your salary?

34,000

£34000

£34,000.00

34,000.00£

type=”number“ “text”It has to be, as it is now, text :(

27

£34,000.00What is your salary?

/^\\d{1,3}(?:,?\d{3})?(?:\.\d{0,2})?$/

Google: Mozilla Reg Exp

Regular expressions or regex. We’re gonna have to get to grips with this stuff. Scary times front end dev dudes.

28

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

29

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

30

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

@mrjoe

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.

32

4. Sliders are for losers

33

They are so fiddly for entering exact values.

Sadly they are very ‘fashionable’ right now. Think before you use.

34

5. Dates are slimy little buggers

35

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

36

dd/mm/yy mm/dd/yy

yy/mm/dd

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

The date format is different across the world so using numbers in a date field will always cause you problems.

37

12 - 04 - 05What date would you like 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 SundayA major train company I work for has had thousands in refunds because customers book the wrong day.

38

Optimum solution folks.

39

6. Prefetching is a great idea

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.

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

42

Oh, what happened there?Ohhh, what happened there?

Google: Change blindness

It freaked people out! To whizzy. People are used to the submit, page load experience.

43

7. Drag & drop

44

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

45http://www.nature.com/neuro/journal/v14/n10/fig_tab/nn.2932_F1.html

...no affordance. That is no clue from the design what you should do. Like a push/pull door.

Your policy

46

Roadside assistance

Roadside assistance

Roadside assistance

[drag me]

Roadside assistance

We tested loads of design options.

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

51

autoplay=”autoplay”

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

52

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

53

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

54

autotune=”autotune”

If only this existed!

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?

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.