Aaron GustafsonRuining theRuining the User ExperienceUser ExperienceWhat is a good user experience?What is a good user experience?Would you do this?Would you do this?lala.comlala.comJavaScript is a RequirementJavaScript is a RequirementA “Solution”A “Solution”Levels of ServiceLevels of ServiceLevel 1: No FrillsLevel 1: No FrillsJust the contentClean, semantic markupLight, fast-downloading pagesNo distractionsLevel 1: No FrillsLevel 1: No Frillsnicely designedvisual hierarchymaybe a bit of Flashadequate browser testingbasic styles for alternate mediaLevel 2: Dress It UpLevel 2: Dress It UpLevel 2: Dress It UpLevel 2: Dress It UpResponsive interface elementsPredictive data delivery (Ajax)Allows for more customizable interactionsLevel 3: Make It SingLevel 3: Make It Sing.optional.optional.collapsingLevel 3: Make It SingLevel 3: Make It SingPageJSCreate the link to show/hide the optional fieldsetsYes NoHide the optional fieldsetsLevel 3: Make It SingLevel 3: Make It SingLevel 3: Make It SingLevel 3: Make It SingLevels of ServiceLevels of ServiceExample: Tab InterfaceExample: Tab InterfacePageJSSplit the content & make some tabsYes NoExample: Tab InterfaceExample: Tab Interface.tabbedExample: Tab InterfaceExample: Tab InterfaceExample: Tab InterfaceExample: Tab InterfaceExample: FAQExample: FAQNo YesPageJSYes NoUser clicks ?Any open?No YesCSSInside click?Yes NoClose any open FAQsSlide open requested FAQ:target usedDefault browser behaviorExample: FAQExample: FAQdl.faqdd#iddtaExample: FAQExample: FAQdl.faq.faq dd:targetExample: FAQExample: FAQExample: FAQExample: FAQTools at our disposalTools at our disposalDOM MethodsDOM MethodsgetElementById()getElementsByTagName()getAttribute()/setAttribute()createElement()/createTextNode()innerHTML (if absolutely necessary)Class SwappingClass Swapping.tabbed.tabbed-on.collapsing.collapsible.faq.faq.onThink Customer ServiceThink Customer ServiceQuestions?Questions?Aaron GustafsonRuining theRuining the User ExperienceUser Experience