The UX of      Hi, comments from me      here.http://victorenrich.com/archives/155    @mrjoe   @mrjoe
Hello, I’m @mrjoe, but you can call me JoeI’ve worked on big projectsfor eBay, trainline, Marriott,LateRooms, Virgin, Disn...
I want to         punch this website         in the faceOverheard in a user testand what we as UXpractitioners want to avo...
HTML5 is an extension of   HTML4 with web apps in   mind. The expansion is big.   Our toolset is now complex.http://victor...
A designer                                               who doesnt                                           understand h...
HTML5 examples out thereare well, pretty unusable.                             @mrjoe
Just because youcan doesn’t mean   you should                   @mrjoe
With Great PowerComes Great        Stocksy last year at FOWD                   2011 on HTML5Responsibility                ...
We’re talking abouthtml5 but we can’t helpbut talk about these aswell.                          JavascriptjQuery is so ubi...
Browserimplementations ofHTML5 vary and theyaren’t always brilliant.And worst of all theyaren’t consistent.               ...
I’m a psychologist atheart.                        @mrjoe                            11
uwe have a bit of brain forforms. We’ll look at thebits of HTML5 but letsfocus on forms.                             @mrjo...
1. The spinner (aka range)                         13
0min="0"    What I’ve seen inmax="99"           research is           people are drawn to the           up/down arrows    ...
0                    DT = a + blog 2 ( 1 + )                    W            this is Fitts Law a very complicated         ...
0                    DT = a + blog 2 ( 1 + )                    W            ... small stuff is hard to click.            ...
2. Form validation is       messy                        17
How did you hear about us?                                                           *         How old are you?    *      ...
How did you hear about us?                                                                                      *         ...
How did you hear about us?                             optional                              Here’s what to do.           ...
How did you hear about us?                                           optional required=”required”              Doesn’t cut...
3. Validation still ain’t        brilliant                            22
What is your salary?   34000                               23
What is your salary?                   34000                                       34,000                                 ...
What is your salary?   34000                        34,000                        £34000                        £34,000.00...
What is your salary?                   34000                                        34,000                                ...
What is your salary?    £34,000.00/^d{1,3}(?:,?d{3})?(?:.d{0,2})?$/                                     Regular expression...
Blink and it disappears.Click submit, go and makea cup of tea, return andyou don’t know what youdid wrong.                ...
Opera is better. But theerror message is a bitgeeky. Plus it behavesdifferently to Chrome.                           29
Firefox is better, but still, what is afield? Bit geeky.                                          30
There are so manyinconsistenciesacross browsers.Browser guys: youneed to agree on animplementationstandard.As @Aral says, ...
4. Sliders are for losers                            32
They are so fiddly for entering exactvalues.Sadly they are very ‘fashionable’right now. Think before you use.             ...
5. Dates are slimy little       buggers                            34
What date would you like    12 - 04 - 05 your insurance to start?                                           35
What date would you like                 12 - 04 - 05 your insurance to start?The date format is different acrossthe world...
What date would you like    12 - 04 - 05 your insurance to start?                             The week typically starts on...
Optimum solution folks.                          38
6. Prefetching is a great          idea                            39
rel=”prefetch”        Great stuff. Prefetches the next        page while you are the current page.        Try typing CNN i...
This was built in um, flash/flex.Super quick form that swished in thenext page. when you hit the buttondown there.T       ...
Oh, what happened        Ohhh, what happened there?       there?                     It freaked people out! To whizzy.    ...
7. Drag & drop                 43
We tested this drag and dropinsurance interface 4 years back.Problem was nobody got it. Why?...
...no affordance. That is no clue from                                               the design what you should do. Like  ...
Your policyRoadside assistanceRoadside assistance           [drag me]     Roadside    assistanceRoadside assistance       ...
Look what won! A button that onceclicked animated the movementacross.
Then along came the iPad. Thank you!Drag and drop became more common placeUsers tried stuff but we won’t go back andremove...
Why [drag] when you can clickand it goes over automatically?
8. Don’t do stupid shit                          50
autoplay=”autoplay”    There are uses for this, and no, one them isn’t a    MIDI sound track for you site.                ...
http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#6                                               ...
why?http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#6                                           ...
autotune=”autotune”    If only this existed!                            54
<small>The small element represents so-called “small print” such as legal disclaimers and caveats.W3C specification   Why?...
Thank you.I’m @mrjoe on twitter    I (we) write atcxpartners.co.uk/blog      @reply me on Twitter if you enjoyed the prezz...
Upcoming SlideShare
Loading in...5
×

UX of HTML5

53,568

Published on

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

Published in: Technology
2 Comments
49 Likes
Statistics
Notes
No Downloads
Views
Total Views
53,568
On Slideshare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
215
Comments
2
Likes
49
Embeds 0
No embeds

No notes for slide

Transcript of "UX of HTML5"

  1. 1. The UX of Hi, comments from me here.http://victorenrich.com/archives/155 @mrjoe @mrjoe
  2. 2. Hello, I’m @mrjoe, but you can call me JoeI’ve worked on big projectsfor eBay, trainline, Marriott,LateRooms, Virgin, Disneyand more @mrjoe
  3. 3. I want to punch this website in the faceOverheard in a user testand what we as UXpractitioners want to avoid. 3
  4. 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. 5. A designer who doesnt 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 doesnt understand physics @mrjoehttp://victorenrich.com/archives/155
  6. 6. HTML5 examples out thereare well, pretty unusable. @mrjoe
  7. 7. Just because youcan doesn’t mean you should @mrjoe
  8. 8. With Great PowerComes Great Stocksy last year at FOWD 2011 on HTML5Responsibility @mrjoe
  9. 9. We’re talking abouthtml5 but we can’t helpbut talk about these aswell. JavascriptjQuery is so ubiquitousbut presents it’s ownissues @mrjoe
  10. 10. Browserimplementations ofHTML5 vary and theyaren’t always brilliant.And worst of all theyaren’t consistent. @mrjoe
  11. 11. I’m a psychologist atheart. @mrjoe 11
  12. 12. uwe have a bit of brain forforms. We’ll look at thebits of HTML5 but letsfocus on forms. @mrjoe 12
  13. 13. 1. The spinner (aka range) 13
  14. 14. 0min="0" What I’ve seen inmax="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. 15. 0 DT = a + blog 2 ( 1 + ) W this is Fitts Law a very complicated way of saying... 15
  16. 16. 0 DT = a + blog 2 ( 1 + ) W ... small stuff is hard to click. 16
  17. 17. 2. Form validation is messy 17
  18. 18. How did you hear about us? * How old are you? * Ever seen these before? 18
  19. 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. 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. 21. How did you hear about us? optional required=”required” Doesn’t cut it I’m afraid. 21
  22. 22. 3. Validation still ain’t brilliant 22
  23. 23. What is your salary? 34000 23
  24. 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. 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. 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. 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. 28. Blink and it disappears.Click submit, go and makea cup of tea, return andyou don’t know what youdid wrong. 28
  29. 29. Opera is better. But theerror message is a bitgeeky. Plus it behavesdifferently to Chrome. 29
  30. 30. Firefox is better, but still, what is afield? Bit geeky. 30
  31. 31. There are so manyinconsistenciesacross browsers.Browser guys: youneed to agree on animplementationstandard.As @Aral says, w3Cyou need to set astandard. @mrjoe
  32. 32. 4. Sliders are for losers 32
  33. 33. They are so fiddly for entering exactvalues.Sadly they are very ‘fashionable’right now. Think before you use. 33
  34. 34. 5. Dates are slimy little buggers 34
  35. 35. What date would you like 12 - 04 - 05 your insurance to start? 35
  36. 36. What date would you like 12 - 04 - 05 your insurance to start?The date format is different acrossthe world so using numbers in a dd/mm/yydate field will always cause you mm/dd/yyproblems. yy/mm/dd 36
  37. 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. 38. Optimum solution folks. 38
  39. 39. 6. Prefetching is a great idea 39
  40. 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. 41. This was built in um, flash/flex.Super quick form that swished in thenext page. when you hit the buttondown there.T 41
  42. 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. 43. 7. Drag & drop 43
  44. 44. We tested this drag and dropinsurance interface 4 years back.Problem was nobody got it. Why?...
  45. 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. 46. Your policyRoadside assistanceRoadside assistance [drag me] Roadside assistanceRoadside assistance We tested loads of design options. 46
  47. 47. Look what won! A button that onceclicked animated the movementacross.
  48. 48. Then along came the iPad. Thank you!Drag and drop became more common placeUsers tried stuff but we won’t go back andremove that button, not because of affordancebut because...
  49. 49. Why [drag] when you can clickand it goes over automatically?
  50. 50. 8. Don’t do stupid shit 50
  51. 51. autoplay=”autoplay” There are uses for this, and no, one them isn’t a MIDI sound track for you site. 51
  52. 52. http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#6 52
  53. 53. why?http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#6 53
  54. 54. autotune=”autotune” If only this existed! 54
  55. 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. 56. Thank you.I’m @mrjoe on twitter I (we) write atcxpartners.co.uk/blog @reply me on Twitter if you enjoyed the prezzo. 56
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×