SlideShare a Scribd company logo
Ruining the
User Experience




Aaron Gustafson
What is a good user experience?
Would you do this?
lala.com
JavaScript is a Requirement
A “Solution”
Levels of Service
Level 1: No Frills


       Just the content

       Clean, semantic markup

       Light, fast-downloading pages

       No distractions
Level 1: No Frills
Level 2: Dress It Up

         nicely designed

         visual hierarchy

         maybe a bit of Flash

         adequate browser testing

         basic styles for alternate media
Level 2: Dress It Up
Level 3: Make It Sing


       Responsive interface elements

       Predictive data delivery (Ajax)

       Allows for more customizable interactions
Level 3: Make It Sing
.collapsing




  .optional




  .optional
Level 3: Make It Sing


Create the link to
 show/hide the
optional fieldsets

                       Page


    Hide the
optional fieldsets



                           JS
                     Yes        No
Level 3: Make It Sing
Levels of Service
Example: Tab Interface
Example: Tab Interface


  Split the content
 & make some tabs

                        Page




                            JS
                      Yes        No
Example: Tab Interface

.tabbed
Example: Tab Interface
Example: FAQ
Slide open
                                                              :target used
                         requested FAQ




                                                          Default
                   Close any
                                                         browser
                   open FAQs
                                                         behavior
                                           Page

       Yes              No
              Inside                     User clicks ?
                                                                         CSS
               click?
                                                                    No         Yes



No           Yes
                                               JS
      Any
     open?
                                         Yes        No




                        Example: FAQ
dl.faq


 dt>a

 dd#id




         Example: FAQ
dl.faq
.faq dd:target




Example: FAQ
Example: FAQ
Tools at our disposal
DOM Methods

getElementById()

getElementsByTagName()

getAttribute()/setAttribute()

createElement()/createTextNode()

innerHTML (if absolutely necessary)
Class Swapping

.tabbed          .tabbed-on

.collapsing      .collapsible

.faq             .faq.on
Think Customer Service
Questions?
Ruining the
User Experience




Aaron Gustafson

More Related Content

Similar to Ruining The User Experience (The Ajax Experience West 2007)

[Challenge:Future] Chocoholic
[Challenge:Future] Chocoholic [Challenge:Future] Chocoholic
[Challenge:Future] Chocoholic
Challenge:Future
 
AtlasCamp 2011 - Five Strategies to Accelerate Plugin Development
AtlasCamp 2011 - Five Strategies to Accelerate Plugin DevelopmentAtlasCamp 2011 - Five Strategies to Accelerate Plugin Development
AtlasCamp 2011 - Five Strategies to Accelerate Plugin Development
mrdon
 
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
jbandi
 
Web Performance 101 - Gil Givati
Web Performance 101 - Gil GivatiWeb Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Mika Josting
 
Print a web page using java script
Print a web page using java scriptPrint a web page using java script
Print a web page using java script
zulhamsyamhari
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
fish_yy
 

Similar to Ruining The User Experience (The Ajax Experience West 2007) (20)

Ruining The User Experience (The Rich Web Experience '07)
Ruining The User Experience (The Rich Web Experience '07)Ruining The User Experience (The Rich Web Experience '07)
Ruining The User Experience (The Rich Web Experience '07)
 
Ruining The User Experience (The Ajax Experience Boston 2007)
Ruining The User Experience (The Ajax Experience Boston 2007)Ruining The User Experience (The Ajax Experience Boston 2007)
Ruining The User Experience (The Ajax Experience Boston 2007)
 
J query
J queryJ query
J query
 
[Challenge:Future] Chocoholic
[Challenge:Future] Chocoholic [Challenge:Future] Chocoholic
[Challenge:Future] Chocoholic
 
High performance websites session1
High performance websites  session1High performance websites  session1
High performance websites session1
 
AtlasCamp 2011 - Five Strategies to Accelerate Plugin Development
AtlasCamp 2011 - Five Strategies to Accelerate Plugin DevelopmentAtlasCamp 2011 - Five Strategies to Accelerate Plugin Development
AtlasCamp 2011 - Five Strategies to Accelerate Plugin Development
 
A Primer on Web Accessibility for Teams
A Primer on Web Accessibility for TeamsA Primer on Web Accessibility for Teams
A Primer on Web Accessibility for Teams
 
Fix The Future - Accessibility Testing Using Wave
Fix The Future - Accessibility Testing Using WaveFix The Future - Accessibility Testing Using Wave
Fix The Future - Accessibility Testing Using Wave
 
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
 
SEO Audit Checklist and Worksheet - over 90 SEO checkpoints!
SEO Audit Checklist and Worksheet - over 90 SEO checkpoints!SEO Audit Checklist and Worksheet - over 90 SEO checkpoints!
SEO Audit Checklist and Worksheet - over 90 SEO checkpoints!
 
User Interface Patterns and Nuxeo
User Interface Patterns and NuxeoUser Interface Patterns and Nuxeo
User Interface Patterns and Nuxeo
 
RIA
RIARIA
RIA
 
High Performance on Drupal 7
High Performance on Drupal 7High Performance on Drupal 7
High Performance on Drupal 7
 
Web Performance 101 - Gil Givati
Web Performance 101 - Gil GivatiWeb Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
 
Print a web page using java script
Print a web page using java scriptPrint a web page using java script
Print a web page using java script
 
Rethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern ageRethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern age
 
Ajax and Accessibiity
Ajax and AccessibiityAjax and Accessibiity
Ajax and Accessibiity
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Giacomo Zinetti - 1001 ways to write CSS today - Codemotion Rome 2019
Giacomo Zinetti - 1001 ways to write CSS today - Codemotion Rome 2019Giacomo Zinetti - 1001 ways to write CSS today - Codemotion Rome 2019
Giacomo Zinetti - 1001 ways to write CSS today - Codemotion Rome 2019
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
 

More from Aaron Gustafson

More from Aaron Gustafson (20)

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for Everyone
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
 

Recently uploaded

Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 

Recently uploaded (20)

Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdf
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 

Ruining The User Experience (The Ajax Experience West 2007)