• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content




@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



Total Views
Views on SlideShare
Embed Views



38 Embeds 15,722

http://www.cxpartners.co.uk 9746
http://www.geekmind.net 4374
http://www.scoop.it 820
http://www.dontwatchme.com 201
http://webstuff.collected.info 148
http://enable85.cafe24.com 79
http://blog.websourcing.fr 52
http://jamsheds.wordpress.com 52
http://lanyrd.com 46
http://380980011076825656_39ccd9ca1df3a77ecebf293c213882053b58bdfe.blogspot.com 35
http://sprmario.tumblr.com 25
http://www.etceter.com 20
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://www.netvibes.com 6
http://feeds.feedburner.com 6
http://sharesknowledgehyd.com 5
https://twitter.com 4
http://us-w1.rockmelt.com 3
http://translate.googleusercontent.com 3
http://biblioaecidmadrid.wordpress.com 2
http://www.demo1.sabza.org 2
http://www.mindgum.co 2
http://www.devslides.com 2
https://www.google.de 1
http://arquiteturadeinformacao.com 1
http://www.linkedin.com 1 1
http://localhost 1
http://tweetedtimes.com 1
http://reader.googleusercontent.com 1 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • It's the next big thing.
    Are you sure you want to
    Your message goes here
  • good

    i like it
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    UX of HTML5 UX of HTML5 Presentation Transcript

    • 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, Disneyand more @mrjoe
    • I want to punch this website in the faceOverheard in a user testand what we as UXpractitioners want to avoid. 3
    • 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
    • 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
    • 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 @mrjoe
    • We’re talking abouthtml5 but we can’t helpbut talk about these aswell. JavascriptjQuery is so ubiquitousbut presents it’s ownissues @mrjoe
    • Browserimplementations ofHTML5 vary and theyaren’t always brilliant.And worst of all theyaren’t consistent. @mrjoe
    • 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. @mrjoe 12
    • 1. The spinner (aka range) 13
    • 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
    • 0 DT = a + blog 2 ( 1 + ) W this is Fitts Law a very complicated way of saying... 15
    • 0 DT = a + blog 2 ( 1 + ) W ... small stuff is hard to click. 16
    • 2. Form validation is messy 17
    • How did you hear about us? * How old are you? * Ever seen these before? 18
    • 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
    • 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
    • How did you hear about us? optional required=”required” Doesn’t cut it I’m afraid. 21
    • 3. Validation still ain’t brilliant 22
    • What is your salary? 34000 23
    • 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
    • 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
    • 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
    • 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
    • Blink and it disappears.Click submit, go and makea cup of tea, return andyou don’t know what youdid wrong. 28
    • 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, w3Cyou need to set astandard. @mrjoe
    • 4. Sliders are for losers 32
    • They are so fiddly for entering exactvalues.Sadly they are very ‘fashionable’right now. Think before you use. 33
    • 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 so using numbers in a dd/mm/yydate field will always cause you mm/dd/yyproblems. yy/mm/dd 36
    • 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
    • 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 into Google to see it in action. 40
    • This was built in um, flash/flex.Super quick form that swished in thenext page. when you hit the buttondown there.T 41
    • 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
    • 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 a push/pull door.http://www.nature.com/neuro/journal/v14/n10/fig_tab/nn.2932_F1.html 45
    • Your policyRoadside assistanceRoadside assistance [drag me] Roadside assistanceRoadside assistance We tested loads of design options. 46
    • 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 that button, not because of affordancebut because...
    • 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. 51
    • http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#6 52
    • why?http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#6 53
    • 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? Semantics I know. But really, why? 55
    • Thank you.I’m @mrjoe on twitter I (we) write atcxpartners.co.uk/blog @reply me on Twitter if you enjoyed the prezzo. 56