UX of HTML5
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

UX of HTML5

  • 53,049 views
Uploaded 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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
53,049
On Slideshare
36,752
From Embeds
16,297
Number of Embeds
39

Actions

Shares
Downloads
200
Comments
2
Likes
50

Embeds 16,297

http://www.cxpartners.co.uk 9,791
http://www.geekmind.net 4,898
http://www.scoop.it 821
http://www.dontwatchme.com 201
http://webstuff.collected.info 148
http://enable85.cafe24.com 79
http://jamsheds.wordpress.com 54
http://blog.websourcing.fr 52
http://lanyrd.com 47
http://380980011076825656_39ccd9ca1df3a77ecebf293c213882053b58bdfe.blogspot.com 35
http://sprmario.tumblr.com 25
http://www.etceter.com 21
http://www.enbuyukkampanya.info 17
http://themeiq.com 11
https://si0.twimg.com 11
https://twimg0-a.akamaihd.net 10
http://devslides.com 8
http://joeleech.net 8
http://pinterest.com 8
http://flavors.me 8
http://feeds.feedburner.com 6
http://www.netvibes.com 6
http://sharesknowledgehyd.com 5
https://twitter.com 4
http://translate.googleusercontent.com 3
http://us-w1.rockmelt.com 3
http://www.mindgum.co 2
http://www.devslides.com 2
http://www.demo1.sabza.org 2
http://biblioaecidmadrid.wordpress.com 2
http://www.linkedin.com 1
http://arquiteturadeinformacao.com 1
https://www.google.de 1
http://192.168.33.20 1
http://192.168.10.168 1
http://localhost 1
http://tweetedtimes.com 1
http://reader.googleusercontent.com 1
http://65.55.108.4 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 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.http://victorenrich.com/archives/155 @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 @mrjoehttp://victorenrich.com/archives/155
  • 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. ...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. 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. http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#6 52
  • 53. why?http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#6 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 atcxpartners.co.uk/blog @reply me on Twitter if you enjoyed the prezzo. 56