SlideShare a Scribd company logo
1 of 35
Aaron Gustafson Ruining the User Experience
 
 
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
nicely designed visual hierarchy maybe a bit of Flash adequate browser testing basic styles for alternate media Level 2: Dress It Up
Level 2: Dress It Up
Responsive interface elements Predictive data delivery (Ajax) Allows for more customizable interactions Level 3: Make It Sing
.optional .optional .collapsing Level 3: Make It Sing
Page JS Create the link to  show/hide the  optional fieldsets Yes  No Hide the  optional fieldsets Level 3: Make It Sing
Level 3: Make It Sing
Levels of Service
Example: Tab Interface
Page JS Split the content & make some tabs Yes  No Example: Tab Interface
.tabbed Example: Tab Interface
Example: Tab Interface
http://code.google.com/p/easy-designs/wiki/TabInterface Example: Tab Interface
Example: FAQ
No  Yes Page JS Yes  No User clicks ? Any open? No  Yes CSS Inside click? Yes  No Close any  open FAQs Slide open requested FAQ :target used Default browser behavior Example: FAQ
dl.faq dd#id dt>a Example: FAQ dl.faq
.faq dd:target Example: FAQ
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?
http://slideshare.net/AaronGustafson Aaron Gustafson Ruining the User Experience

More Related Content

What's hot

AIESEC CMS - Bug tracking
AIESEC CMS - Bug trackingAIESEC CMS - Bug tracking
AIESEC CMS - Bug tracking
Bogdan Rusu
 
iWeb NJECC June 28, 2011 DAndrea
iWeb NJECC June 28, 2011 DAndreaiWeb NJECC June 28, 2011 DAndrea
iWeb NJECC June 28, 2011 DAndrea
D'Andrea
 
Social Web
Social WebSocial Web
Social Web
gabbylee
 
Introduction to web design
Introduction to web designIntroduction to web design
Introduction to web design
Fitra Sani
 
Communication tools.ppt12
Communication tools.ppt12Communication tools.ppt12
Communication tools.ppt12
Mona Hassan
 

What's hot (19)

Lecture1 B Frames&Forms
Lecture1 B  Frames&FormsLecture1 B  Frames&Forms
Lecture1 B Frames&Forms
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Accessorize Your Blog: 10 Ways To Maximize Reader Experience
Accessorize Your Blog: 10 Ways To Maximize Reader ExperienceAccessorize Your Blog: 10 Ways To Maximize Reader Experience
Accessorize Your Blog: 10 Ways To Maximize Reader Experience
 
Online assessment ict4 elt2017
Online assessment ict4 elt2017Online assessment ict4 elt2017
Online assessment ict4 elt2017
 
Lecture 9 Professional Practices
Lecture 9 Professional PracticesLecture 9 Professional Practices
Lecture 9 Professional Practices
 
Structural Semantics for Accessibility and Device Independence
Structural Semantics for Accessibility and Device IndependenceStructural Semantics for Accessibility and Device Independence
Structural Semantics for Accessibility and Device Independence
 
Getting Started With School Net
Getting Started With School NetGetting Started With School Net
Getting Started With School Net
 
AIESEC CMS - Bug tracking
AIESEC CMS - Bug trackingAIESEC CMS - Bug tracking
AIESEC CMS - Bug tracking
 
How Usable is Wordpress?
How Usable is Wordpress?How Usable is Wordpress?
How Usable is Wordpress?
 
iWeb NJECC June 28, 2011 DAndrea
iWeb NJECC June 28, 2011 DAndreaiWeb NJECC June 28, 2011 DAndrea
iWeb NJECC June 28, 2011 DAndrea
 
Social Web
Social WebSocial Web
Social Web
 
Mobile web design
Mobile web designMobile web design
Mobile web design
 
How to Optimize Your Blog for the Mobile Shift
How to Optimize Your Blog for the Mobile ShiftHow to Optimize Your Blog for the Mobile Shift
How to Optimize Your Blog for the Mobile Shift
 
Exposing Semantics to Drive Transcoding
Exposing Semantics to Drive TranscodingExposing Semantics to Drive Transcoding
Exposing Semantics to Drive Transcoding
 
TPR4
TPR4TPR4
TPR4
 
Programming to the Twitter API: ReTweeter
Programming to the Twitter API: ReTweeterProgramming to the Twitter API: ReTweeter
Programming to the Twitter API: ReTweeter
 
Introduction to web design
Introduction to web designIntroduction to web design
Introduction to web design
 
Social Media Start Up Guide
Social Media Start Up GuideSocial Media Start Up Guide
Social Media Start Up Guide
 
Communication tools.ppt12
Communication tools.ppt12Communication tools.ppt12
Communication tools.ppt12
 

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

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
 
Rutgers - FrontPage 98 (Advanced)
Rutgers - FrontPage 98 (Advanced)Rutgers - FrontPage 98 (Advanced)
Rutgers - FrontPage 98 (Advanced)
Michael Dobe, Ph.D.
 
Bringing Zest to SharePoint Sites Using Out-of-the-Box Technology
Bringing Zest to SharePoint Sites Using Out-of-the-Box TechnologyBringing Zest to SharePoint Sites Using Out-of-the-Box Technology
Bringing Zest to SharePoint Sites Using Out-of-the-Box Technology
joelsef
 
Usability and accessibility on the web
Usability and accessibility on the webUsability and accessibility on the web
Usability and accessibility on the web
Vlad Posea
 
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
 

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

Ruining the User Experience (AjaxWorld '07)
Ruining the User Experience (AjaxWorld '07)Ruining the User Experience (AjaxWorld '07)
Ruining the User Experience (AjaxWorld '07)
 
Ruining The User Experience (The Ajax Experience West 2007)
Ruining The User Experience (The Ajax Experience West 2007)Ruining The User Experience (The Ajax Experience West 2007)
Ruining The User Experience (The Ajax Experience West 2007)
 
Practical A11y testing for surveys
Practical A11y testing for surveysPractical A11y testing for surveys
Practical A11y testing for surveys
 
TPR4
TPR4TPR4
TPR4
 
SADIe - Taming The Inaccessible Web
SADIe - Taming The Inaccessible WebSADIe - Taming The Inaccessible Web
SADIe - Taming The Inaccessible Web
 
Beginner’s Guide to WCAG 2.0 – Know Your Way Around Web Accessibility Rules
Beginner’s Guide to WCAG 2.0 – Know Your Way Around Web Accessibility RulesBeginner’s Guide to WCAG 2.0 – Know Your Way Around Web Accessibility Rules
Beginner’s Guide to WCAG 2.0 – Know Your Way Around Web Accessibility Rules
 
Unobtrusive JavaScript
Unobtrusive JavaScriptUnobtrusive JavaScript
Unobtrusive JavaScript
 
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
 
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
 
Designing usable forms
Designing usable formsDesigning usable forms
Designing usable forms
 
Web accessibility testing methodologies, tools and tips
Web accessibility testing methodologies, tools and tipsWeb accessibility testing methodologies, tools and tips
Web accessibility testing methodologies, tools and tips
 
Rutgers - FrontPage 98 (Advanced)
Rutgers - FrontPage 98 (Advanced)Rutgers - FrontPage 98 (Advanced)
Rutgers - FrontPage 98 (Advanced)
 
High performance websites session1
High performance websites  session1High performance websites  session1
High performance websites session1
 
WCAG2 Guidelines and Cognitive Impairment a11y ldn 2011
WCAG2 Guidelines and Cognitive Impairment a11y ldn 2011WCAG2 Guidelines and Cognitive Impairment a11y ldn 2011
WCAG2 Guidelines and Cognitive Impairment a11y ldn 2011
 
Accessibility Part 3
Accessibility Part 3Accessibility Part 3
Accessibility Part 3
 
Bringing Zest to SharePoint Sites Using Out-of-the-Box Technology
Bringing Zest to SharePoint Sites Using Out-of-the-Box TechnologyBringing Zest to SharePoint Sites Using Out-of-the-Box Technology
Bringing Zest to SharePoint Sites Using Out-of-the-Box Technology
 
Usability and accessibility on the web
Usability and accessibility on the webUsability and accessibility on the web
Usability and accessibility on the web
 
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
 
Designing Accessible Drupal Themes
Designing Accessible Drupal ThemesDesigning Accessible Drupal Themes
Designing Accessible Drupal Themes
 
Reviewing Screen-Based Content
Reviewing Screen-Based ContentReviewing Screen-Based Content
Reviewing Screen-Based Content
 

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

Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
FIDO Alliance
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
FIDO Alliance
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 

Recently uploaded (20)

Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The InsideCollecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 
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
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
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
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 

Ruining The User Experience (The Ajax Experience Boston 2007)

Editor's Notes

  1. 1 minute Intro - who we are Here’s what we are going to tell you