SlideShare a Scribd company logo

UX of HTML5

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

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

Recommended

Future of Advertising 2012 - Digital Ecosystems + Empowering Data
Future of Advertising 2012 - Digital Ecosystems + Empowering DataFuture of Advertising 2012 - Digital Ecosystems + Empowering Data
Future of Advertising 2012 - Digital Ecosystems + Empowering DataZach Pentel
 
Atlas Digitais e interfaces para dados abertos
Atlas Digitais e interfaces para dados abertosAtlas Digitais e interfaces para dados abertos
Atlas Digitais e interfaces para dados abertosAlligo Web
 
Example Content Analysis Insight
Example Content Analysis InsightExample Content Analysis Insight
Example Content Analysis InsightBen Harper
 
The Art of AngularJS - DeRailed 2014
The Art of AngularJS - DeRailed 2014The Art of AngularJS - DeRailed 2014
The Art of AngularJS - DeRailed 2014Matt Raible
 
AngularJS Deep Dives (NYC GDG Apr 2013)
AngularJS Deep Dives (NYC GDG Apr 2013)AngularJS Deep Dives (NYC GDG Apr 2013)
AngularJS Deep Dives (NYC GDG Apr 2013)Nitya Narasimhan
 

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
 
Back To The Future
Back To The FutureBack To The Future
Back To The FutureBill Scott
 
A Design Journey /// Naba 2014
A Design Journey /// Naba 2014 A Design Journey /// Naba 2014
A Design Journey /// Naba 2014 Leandro Agro'
 

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
 
Back To The Future
Back To The FutureBack To The Future
Back To The Future
 
A Design Journey /// Naba 2014
A Design Journey /// Naba 2014 A Design Journey /// Naba 2014
A Design Journey /// Naba 2014
 

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

"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys VasylievFwdays
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr TsapFwdays
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1Inbay UK
 
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, GoogleISPMAIndia
 
Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?MENGSAYLOEM1
 
Pragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdfPragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdfinfogdgmi
 
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...ISPMAIndia
 
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Product School
 
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxThe Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxNeo4j
 
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31shyamraj55
 
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...htrindia
 
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerCentralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerSaiLinnThu2
 
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Product School
 
Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...Product School
 
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...DianaGray10
 
The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolProduct School
 
How AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptxHow AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptxInfosec
 
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptx
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptxGraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptx
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptxNeo4j
 
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Product School
 
How we think about an advisor tech stack
How we think about an advisor tech stackHow we think about an advisor tech stack
How we think about an advisor tech stackSummit
 

Recently uploaded (20)

"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1
 
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
 
Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?
 
Pragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdfPragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdf
 
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
 
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
 
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxThe Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
 
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31
 
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
 
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerCentralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
 
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
 
Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...
 
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
 
The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product School
 
How AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptxHow AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptx
 
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptx
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptxGraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptx
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptx
 
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
 
How we think about an advisor tech stack
How we think about an advisor tech stackHow we think about an advisor tech stack
How we think about an advisor tech stack
 

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