Your SlideShare is downloading. ×



Published on

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

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

Published in: Technology
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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