UX of HTML5

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

http://www.cxpartners.co.uk	9517
http://www.geekmind.net	2793
http://www.scoop.it	816
http://www.dontwatchme.com	177
http://webstuff.collected.info	148
http://enable85.cafe24.com	79
http://blog.websourcing.fr	50
http://380980011076825656_39ccd9ca1df3a77ecebf293c213882053b58bdfe.blogspot.com	35
http://lanyrd.com	30
http://sprmario.tumblr.com	25
http://www.etceter.com	18
http://jamsheds.wordpress.com	18
http://www.enbuyukkampanya.info	17
https://si0.twimg.com	11
https://twimg0-a.akamaihd.net	10
http://themeiq.com	9
http://pinterest.com	8
http://flavors.me	8
http://joeleech.net	8
http://devslides.com	6
http://www.netvibes.com	6
http://feeds.feedburner.com	5
http://sharesknowledgehyd.com	5
http://us-w1.rockmelt.com	3
http://www.mindgum.co	2
https://twitter.com	2
http://www.devslides.com	2
http://biblioaecidmadrid.wordpress.com	2
http://www.demo1.sabza.org	2
http://localhost	1
http://192.168.10.168	1
http://tweetedtimes.com	1
http://translate.googleusercontent.com	1
http://reader.googleusercontent.com	1
http://arquiteturadeinformacao.com	1

UX of HTML5

by cxpartners on Jul 12, 2012

Accessibility

Categories

Upload Details

Usage Rights

35 Embeds 13,818

Statistics

UX of HTML5 Presentation Transcript

UX of HTML5

by cxpartners on Jul 12, 2012

Accessibility

Categories

Upload Details

Usage Rights

35 Embeds 13,818

Statistics

UX of HTML5 Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare