SlideShare a Scribd company logo
1 of 56
Download to read offline
The UX of

      Hi, comments from me
      here.




http://victorenrich.com/archives/155    @mrjoe   @mrjoe
Hello, I’m @mrjoe, but
 you can call me Joe
I’ve worked on big projects
for eBay, trainline, Marriott,
LateRooms, Virgin, Disney
and more



                                 @mrjoe
I want to
         punch this website
         in the face
Overheard in a user test
and what we as UX
practitioners 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 doesn't
                                           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
                                        doesn't understand
                                                    physics
                                                        @mrjoe
http://victorenrich.com/archives/155
HTML5 examples out there
are well, pretty unusable.




                             @mrjoe
Just because you
can doesn’t mean
   you should
                   @mrjoe
With Great Power
Comes Great        Stocksy last year at FOWD
                   2011 on HTML5


Responsibility                       @mrjoe
We’re talking about
html5 but we can’t help
but talk about these as
well.
                          Javascript
jQuery is so ubiquitous
but presents it’s own
issues




                                       @mrjoe
Browser
implementations of
HTML5 vary and they
aren’t always brilliant.
And worst of all they
aren’t consistent.




                           @mrjoe
I’m a psychologist at
heart.




                        @mrjoe
                            11
u
we have a bit of brain for
forms. We’ll look at the
bits of HTML5 but lets
focus on forms.



                             @mrjoe
                                 12
1. The spinner (aka range)


                         13
0



min="0"    What I’ve seen in



max="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



                    D
T = a + blog 2 ( 1 + )
                    W
            this is Fitts Law a very complicated
            way of saying...
                                                   15
0



                    D
T = 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 make
a cup of tea, return and
you don’t know what you
did wrong.


                            28
Opera is better. But the
error message is a bit
geeky. Plus it behaves
differently to Chrome.



                           29
Firefox is better, but still, what is a
field? Bit geeky.




                                          30
There are so many
inconsistencies
across browsers.
Browser guys: you
need to agree on an
implementation
standard.
As @Aral says, w3C
you need to set a
standard.




                      @mrjoe
4. Sliders are for losers


                            32
They are so fiddly for entering exact
values.

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 across
the world so using numbers in a
                                      dd/mm/yy
date field will always cause you


                                      mm/dd/yy
problems.




                                      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 the
next page. when you hit the button
down 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 drop
insurance 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 policy
Roadside assistance




Roadside assistance
           [drag me]



     Roadside
    assistance




Roadside assistance
                       We tested loads of design options.


                                                            46
Look what won! A button that once
clicked animated the movement
across.
Then along came the iPad. Thank you!
Drag and drop became more common place
Users tried stuff but we won’t go back and
remove that button, not because of affordance
but because...
Why [drag] when you can click
and 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 at
cxpartners.co.uk/blog
      @reply me on Twitter if you enjoyed the prezzo.




                                                        56

More Related Content

Similar to UX of HTML5

The prestige of being a web developer
The prestige of being a web developerThe prestige of being a web developer
The prestige of being a web developerChristian Heilmann
 
Jon Roobottom – Murder on the dancefloor: The death of disco
Jon Roobottom – Murder on the dancefloor: The death of disco Jon Roobottom – Murder on the dancefloor: The death of disco
Jon Roobottom – Murder on the dancefloor: The death of disco uxbri
 
Startup Cofounder Wanted (And Awesome Geeky Puzzles)
Startup Cofounder Wanted (And Awesome Geeky Puzzles)Startup Cofounder Wanted (And Awesome Geeky Puzzles)
Startup Cofounder Wanted (And Awesome Geeky Puzzles)YourFutureCofounder
 
Black Hat To A Notacon 6 - Black Suit: Econopocalypse Now
Black Hat To A Notacon 6 - Black Suit: Econopocalypse NowBlack Hat To A Notacon 6 - Black Suit: Econopocalypse Now
Black Hat To A Notacon 6 - Black Suit: Econopocalypse NowJames Arlen
 
Interviewing Domain Experts - Heuristics From the Trenches (DDD Europe 2016 M...
Interviewing Domain Experts - Heuristics From the Trenches (DDD Europe 2016 M...Interviewing Domain Experts - Heuristics From the Trenches (DDD Europe 2016 M...
Interviewing Domain Experts - Heuristics From the Trenches (DDD Europe 2016 M...Cyrille Martraire
 
Bluffers guide to elitist jargon - Martijn Verburg, Richard Warburton, James ...
Bluffers guide to elitist jargon - Martijn Verburg, Richard Warburton, James ...Bluffers guide to elitist jargon - Martijn Verburg, Richard Warburton, James ...
Bluffers guide to elitist jargon - Martijn Verburg, Richard Warburton, James ...JAX London
 
The Uncanny Valet
The Uncanny ValetThe Uncanny Valet
The Uncanny Valetinfovore
 
Software and all that comes with it
Software and all that comes with itSoftware and all that comes with it
Software and all that comes with itAlberto Brandolini
 
A Play in Three Acts
A Play in Three ActsA Play in Three Acts
A Play in Three Actsgnat
 
SLIDES w. NOTES - Extended Metaverse Workshop in Zoom OSCC 2022.pdf
SLIDES w. NOTES - Extended Metaverse Workshop in Zoom OSCC 2022.pdfSLIDES w. NOTES - Extended Metaverse Workshop in Zoom OSCC 2022.pdf
SLIDES w. NOTES - Extended Metaverse Workshop in Zoom OSCC 2022.pdfSiterma The World In 4D
 
Makin' Chatbots — Moment
Makin' Chatbots — MomentMakin' Chatbots — Moment
Makin' Chatbots — MomentAndrew Gold
 
Discover Your Customer Elevator Rant for U. of MD Dingman Center
Discover Your Customer Elevator Rant for U. of MD Dingman CenterDiscover Your Customer Elevator Rant for U. of MD Dingman Center
Discover Your Customer Elevator Rant for U. of MD Dingman CenterChief Listening Officers
 
Conductor C3 - 2012: Institutionalizing SEO
Conductor C3 - 2012: Institutionalizing SEOConductor C3 - 2012: Institutionalizing SEO
Conductor C3 - 2012: Institutionalizing SEOJeremiah Andrick
 
Immutable Laws
Immutable LawsImmutable Laws
Immutable LawsBiztek
 
Makin’ chatbots – Moment
Makin’ chatbots – MomentMakin’ chatbots – Moment
Makin’ chatbots – Momentjacobpastrovich
 
A Design Journey /// Naba 2014
A Design Journey /// Naba 2014 A Design Journey /// Naba 2014
A Design Journey /// Naba 2014 Leandro Agro'
 
The Brave New World by Marcelo Theodoro
The Brave New World by Marcelo TheodoroThe Brave New World by Marcelo Theodoro
The Brave New World by Marcelo TheodoroMarcelo Theodoro
 

Similar to UX of HTML5 (20)

The prestige of being a web developer
The prestige of being a web developerThe prestige of being a web developer
The prestige of being a web developer
 
Fighting Digital Dizzyness
Fighting Digital DizzynessFighting Digital Dizzyness
Fighting Digital Dizzyness
 
Jon Roobottom – Murder on the dancefloor: The death of disco
Jon Roobottom – Murder on the dancefloor: The death of disco Jon Roobottom – Murder on the dancefloor: The death of disco
Jon Roobottom – Murder on the dancefloor: The death of disco
 
Startup Cofounder Wanted (And Awesome Geeky Puzzles)
Startup Cofounder Wanted (And Awesome Geeky Puzzles)Startup Cofounder Wanted (And Awesome Geeky Puzzles)
Startup Cofounder Wanted (And Awesome Geeky Puzzles)
 
Black Hat To A Notacon 6 - Black Suit: Econopocalypse Now
Black Hat To A Notacon 6 - Black Suit: Econopocalypse NowBlack Hat To A Notacon 6 - Black Suit: Econopocalypse Now
Black Hat To A Notacon 6 - Black Suit: Econopocalypse Now
 
Interviewing Domain Experts - Heuristics From the Trenches (DDD Europe 2016 M...
Interviewing Domain Experts - Heuristics From the Trenches (DDD Europe 2016 M...Interviewing Domain Experts - Heuristics From the Trenches (DDD Europe 2016 M...
Interviewing Domain Experts - Heuristics From the Trenches (DDD Europe 2016 M...
 
Bluffers guide to elitist jargon - Martijn Verburg, Richard Warburton, James ...
Bluffers guide to elitist jargon - Martijn Verburg, Richard Warburton, James ...Bluffers guide to elitist jargon - Martijn Verburg, Richard Warburton, James ...
Bluffers guide to elitist jargon - Martijn Verburg, Richard Warburton, James ...
 
The Uncanny Valet
The Uncanny ValetThe Uncanny Valet
The Uncanny Valet
 
Software and all that comes with it
Software and all that comes with itSoftware and all that comes with it
Software and all that comes with it
 
A Play in Three Acts
A Play in Three ActsA Play in Three Acts
A Play in Three Acts
 
Progressing and enhancing
Progressing and enhancingProgressing and enhancing
Progressing and enhancing
 
SLIDES w. NOTES - Extended Metaverse Workshop in Zoom OSCC 2022.pdf
SLIDES w. NOTES - Extended Metaverse Workshop in Zoom OSCC 2022.pdfSLIDES w. NOTES - Extended Metaverse Workshop in Zoom OSCC 2022.pdf
SLIDES w. NOTES - Extended Metaverse Workshop in Zoom OSCC 2022.pdf
 
Makin' Chatbots — Moment
Makin' Chatbots — MomentMakin' Chatbots — Moment
Makin' Chatbots — Moment
 
Discover Your Customer Elevator Rant for U. of MD Dingman Center
Discover Your Customer Elevator Rant for U. of MD Dingman CenterDiscover Your Customer Elevator Rant for U. of MD Dingman Center
Discover Your Customer Elevator Rant for U. of MD Dingman Center
 
Conductor C3 - 2012: Institutionalizing SEO
Conductor C3 - 2012: Institutionalizing SEOConductor C3 - 2012: Institutionalizing SEO
Conductor C3 - 2012: Institutionalizing SEO
 
Immutable Laws
Immutable LawsImmutable Laws
Immutable Laws
 
Makin’ chatbots – Moment
Makin’ chatbots – MomentMakin’ chatbots – Moment
Makin’ chatbots – Moment
 
A Stranger in a Strange Land
A Stranger in a Strange LandA Stranger in a Strange Land
A Stranger in a Strange Land
 
A Design Journey /// Naba 2014
A Design Journey /// Naba 2014 A Design Journey /// Naba 2014
A Design Journey /// Naba 2014
 
The Brave New World by Marcelo Theodoro
The Brave New World by Marcelo TheodoroThe Brave New World by Marcelo Theodoro
The Brave New World by Marcelo Theodoro
 

More from cxpartners

Chi briding the relevance gap
Chi briding the relevance gapChi briding the relevance gap
Chi briding the relevance gapcxpartners
 
Putting people at the centre of design at the samaritans
Putting people at the centre of design at the samaritansPutting people at the centre of design at the samaritans
Putting people at the centre of design at the samaritanscxpartners
 
cxpartners customer centricity
cxpartners customer centricitycxpartners customer centricity
cxpartners customer centricitycxpartners
 
Designing Without Compromise
Designing Without CompromiseDesigning Without Compromise
Designing Without Compromisecxpartners
 
Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...
Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...
Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...cxpartners
 
How to do the work you want to do - AKA neglect selling skills at your peril!...
How to do the work you want to do - AKA neglect selling skills at your peril!...How to do the work you want to do - AKA neglect selling skills at your peril!...
How to do the work you want to do - AKA neglect selling skills at your peril!...cxpartners
 
Customer Driven Digital Transformation
Customer Driven Digital Transformation Customer Driven Digital Transformation
Customer Driven Digital Transformation cxpartners
 
UX vs Artificial Intelligence
UX vs Artificial IntelligenceUX vs Artificial Intelligence
UX vs Artificial Intelligencecxpartners
 
Research analysis: getting more from your data
Research analysis: getting more from your dataResearch analysis: getting more from your data
Research analysis: getting more from your datacxpartners
 
Transforming Care in Bristol
Transforming Care in BristolTransforming Care in Bristol
Transforming Care in Bristolcxpartners
 
Interaction designers vs algorithms
Interaction designers vs algorithmsInteraction designers vs algorithms
Interaction designers vs algorithmscxpartners
 
Beyond the touch screen - better accessibility for mobile apps
Beyond the touch screen - better accessibility for mobile appsBeyond the touch screen - better accessibility for mobile apps
Beyond the touch screen - better accessibility for mobile appscxpartners
 
Co design (NUX4)
Co design (NUX4)Co design (NUX4)
Co design (NUX4)cxpartners
 
How to ask a question
How to ask a questionHow to ask a question
How to ask a questioncxpartners
 
Photo ux nux 061014
Photo ux nux 061014Photo ux nux 061014
Photo ux nux 061014cxpartners
 
Photo content strategy (James Chudley, cxpartners)
Photo content strategy (James Chudley, cxpartners)Photo content strategy (James Chudley, cxpartners)
Photo content strategy (James Chudley, cxpartners)cxpartners
 
Psychology and the Perfect Design by @mrjoe
Psychology and the Perfect Design by @mrjoePsychology and the Perfect Design by @mrjoe
Psychology and the Perfect Design by @mrjoecxpartners
 
How Rapid Feedback improves the design process (Luke Jones, cxpartners)
How Rapid Feedback improves the design process (Luke Jones, cxpartners)How Rapid Feedback improves the design process (Luke Jones, cxpartners)
How Rapid Feedback improves the design process (Luke Jones, cxpartners)cxpartners
 
How to build a failsafe mobile usability testing set up
How to build a failsafe mobile usability testing set upHow to build a failsafe mobile usability testing set up
How to build a failsafe mobile usability testing set upcxpartners
 

More from cxpartners (20)

Chi briding the relevance gap
Chi briding the relevance gapChi briding the relevance gap
Chi briding the relevance gap
 
Putting people at the centre of design at the samaritans
Putting people at the centre of design at the samaritansPutting people at the centre of design at the samaritans
Putting people at the centre of design at the samaritans
 
cxpartners customer centricity
cxpartners customer centricitycxpartners customer centricity
cxpartners customer centricity
 
Designing Without Compromise
Designing Without CompromiseDesigning Without Compromise
Designing Without Compromise
 
Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...
Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...
Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...
 
How to do the work you want to do - AKA neglect selling skills at your peril!...
How to do the work you want to do - AKA neglect selling skills at your peril!...How to do the work you want to do - AKA neglect selling skills at your peril!...
How to do the work you want to do - AKA neglect selling skills at your peril!...
 
Customer Driven Digital Transformation
Customer Driven Digital Transformation Customer Driven Digital Transformation
Customer Driven Digital Transformation
 
UX vs Artificial Intelligence
UX vs Artificial IntelligenceUX vs Artificial Intelligence
UX vs Artificial Intelligence
 
Research analysis: getting more from your data
Research analysis: getting more from your dataResearch analysis: getting more from your data
Research analysis: getting more from your data
 
Transforming Care in Bristol
Transforming Care in BristolTransforming Care in Bristol
Transforming Care in Bristol
 
Interaction designers vs algorithms
Interaction designers vs algorithmsInteraction designers vs algorithms
Interaction designers vs algorithms
 
Beyond the touch screen - better accessibility for mobile apps
Beyond the touch screen - better accessibility for mobile appsBeyond the touch screen - better accessibility for mobile apps
Beyond the touch screen - better accessibility for mobile apps
 
Co design (NUX4)
Co design (NUX4)Co design (NUX4)
Co design (NUX4)
 
How to ask a question
How to ask a questionHow to ask a question
How to ask a question
 
UX Leadership
UX LeadershipUX Leadership
UX Leadership
 
Photo ux nux 061014
Photo ux nux 061014Photo ux nux 061014
Photo ux nux 061014
 
Photo content strategy (James Chudley, cxpartners)
Photo content strategy (James Chudley, cxpartners)Photo content strategy (James Chudley, cxpartners)
Photo content strategy (James Chudley, cxpartners)
 
Psychology and the Perfect Design by @mrjoe
Psychology and the Perfect Design by @mrjoePsychology and the Perfect Design by @mrjoe
Psychology and the Perfect Design by @mrjoe
 
How Rapid Feedback improves the design process (Luke Jones, cxpartners)
How Rapid Feedback improves the design process (Luke Jones, cxpartners)How Rapid Feedback improves the design process (Luke Jones, cxpartners)
How Rapid Feedback improves the design process (Luke Jones, cxpartners)
 
How to build a failsafe mobile usability testing set up
How to build a failsafe mobile usability testing set upHow to build a failsafe mobile usability testing set up
How to build a failsafe mobile usability testing set up
 

Recently uploaded

UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimizationarrow10202532yuvraj
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"DianaGray10
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...Daniel Zivkovic
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 

Recently uploaded (20)

UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 

UX of HTML5

  • 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 Joe I’ve worked on big projects for eBay, trainline, Marriott, LateRooms, Virgin, Disney and more @mrjoe
  • 3. I want to punch this website in the face Overheard in a user test and what we as UX practitioners 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 doesn't 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 doesn't understand physics @mrjoe http://victorenrich.com/archives/155
  • 6. HTML5 examples out there are well, pretty unusable. @mrjoe
  • 7. Just because you can doesn’t mean you should @mrjoe
  • 8. With Great Power Comes Great Stocksy last year at FOWD 2011 on HTML5 Responsibility @mrjoe
  • 9. We’re talking about html5 but we can’t help but talk about these as well. Javascript jQuery is so ubiquitous but presents it’s own issues @mrjoe
  • 10. Browser implementations of HTML5 vary and they aren’t always brilliant. And worst of all they aren’t consistent. @mrjoe
  • 11. I’m a psychologist at heart. @mrjoe 11
  • 12. u we have a bit of brain for forms. We’ll look at the bits of HTML5 but lets focus on forms. @mrjoe 12
  • 13. 1. The spinner (aka range) 13
  • 14. 0 min="0" What I’ve seen in max="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 D T = a + blog 2 ( 1 + ) W this is Fitts Law a very complicated way of saying... 15
  • 16. 0 D T = 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 make a cup of tea, return and you don’t know what you did wrong. 28
  • 29. Opera is better. But the error message is a bit geeky. Plus it behaves differently to Chrome. 29
  • 30. Firefox is better, but still, what is a field? Bit geeky. 30
  • 31. There are so many inconsistencies across browsers. Browser guys: you need to agree on an implementation standard. As @Aral says, w3C you need to set a standard. @mrjoe
  • 32. 4. Sliders are for losers 32
  • 33. They are so fiddly for entering exact values. 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 across the world so using numbers in a dd/mm/yy date field will always cause you mm/dd/yy problems. 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
  • 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 the next page. when you hit the button down 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 drop insurance 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 policy Roadside assistance Roadside assistance [drag me] Roadside assistance Roadside assistance We tested loads of design options. 46
  • 47. Look what won! A button that once clicked animated the movement across.
  • 48. Then along came the iPad. Thank you! Drag and drop became more common place Users tried stuff but we won’t go back and remove that button, not because of affordance but because...
  • 49. Why [drag] when you can click and 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
  • 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 at cxpartners.co.uk/blog @reply me on Twitter if you enjoyed the prezzo. 56