Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

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

Published in: Technology


  1. The UX of Hi, comments from me here. @mrjoe @mrjoe
  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. I want to punch this website in the faceOverheard in a user testand what we as UXpractitioners 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. @mrjoe
  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 @mrjoe
  6. HTML5 examples out thereare well, pretty unusable. @mrjoe
  7. Just because youcan doesn’t mean you should @mrjoe
  8. With Great PowerComes Great Stocksy last year at FOWD 2011 on HTML5Responsibility @mrjoe
  9. We’re talking abouthtml5 but we can’t helpbut talk about these aswell. JavascriptjQuery is so ubiquitousbut presents it’s ownissues @mrjoe
  10. Browserimplementations ofHTML5 vary and theyaren’t always brilliant.And worst of all theyaren’t consistent. @mrjoe
  11. I’m a psychologist atheart. @mrjoe 11
  12. uwe have a bit of brain forforms. We’ll look at thebits of HTML5 but letsfocus on forms. @mrjoe 12
  13. 1. The spinner (aka range) 13
  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. 0 DT = a + blog 2 ( 1 + ) W this is Fitts Law a very complicated way of saying... 15
  16. 0 DT = 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 makea cup of tea, return andyou don’t know what youdid wrong. 28
  29. Opera is better. But theerror message is a bitgeeky. Plus it behavesdifferently to Chrome. 29
  30. Firefox is better, but still, what is afield? Bit geeky. 30
  31. There are so manyinconsistenciesacross browsers.Browser guys: youneed to agree on animplementationstandard.As @Aral says, w3Cyou need to set astandard. @mrjoe
  32. 4. Sliders are for losers 32
  33. They are so fiddly for entering exactvalues.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 acrossthe world so using numbers in a dd/mm/yydate field will always cause you mm/dd/yyproblems. 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 thenext page. when you hit the buttondown 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 dropinsurance interface 4 years back.Problem was nobody got it. Why?...
  45. affordance. That is no clue from the design what you should do. Like a push/pull door. 45
  46. Your policyRoadside assistanceRoadside assistance [drag me] Roadside assistanceRoadside assistance We tested loads of design options. 46
  47. Look what won! A button that onceclicked animated the movementacross.
  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. Why [drag] when you can clickand 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. 52
  53. why? 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 @reply me on Twitter if you enjoyed the prezzo. 56