SlideShare a Scribd company logo
1 of 21
Download to read offline
Aaron Gustafson
Sarah B. Nelson
Ruining the User Experience
Intro - Aaron first, Sarah 2nd
Sarah’s Points
+ AP, UX Experience consulting firm in SF
+ design researcher and interaction designer with background in front-end development
Aar
on
Aar
on
What is good user experience?
Aaron
* Something as small as a glass of water can have a profound affect on the customer experience
Sarah
Good user experience = good customer service
+ Provide good customer service:

 a) understand your users

 b) design and implement products that demonstrate your understanding
Understanding users means
+ context is which they are using your product: social, physical, cognitive, emotional, cultural
+ tools they use to interact your product
would you do this?
Would you do this?
The idea of treating customers rudely in a service context seems ridiculous - it’s clearly a bad idea.
Yet, if we don’t pay attention to the level of service we are providing at all levels of the design and implementation process, we run the risk of doing the
digital equivalent.
lala.com
Aaron
* Talk about Lala service
* What happens when you come to it with JS off
* How they’ve “addressed” that issue now
* Ajax getting in the way
o Confirming receipt
o Registering a package
* Use case – mobile use while out shopping
Javascript is a requirement
a “solution”
predictive service -
anticipating
1) No Frills
2) Dress It Up
3) Make It Sing
Levels of Service
Aaron - transition:
Guideposts for a responsible web site: Give them what they can handle
So how do we address this? By establishing for ourselves some basic levels of service
* Discuss concept of levels of service
* Service that meets people’s needs unobtrusively (i.e. without them knowing they have been given special attention) is key
* Jared Spool: “If we do our work right, it goes unnoticed.”
* One example of this is what we are going to show you today – three basic levels of service
* (Aaron) The example we are going to walk you through comes from a recent project…
Make content
accessible
No distractions
Clean, well-ordered,
semantic markup
Light, fast downloads
Level 1: No frills
Aaron or Sarah
* ensure that content is accessible first and foremost
* Talk about a basic level of service
* Content is the reason
* Simple, straightforward, fast
Level 1: No Frills
Aaron
* Here is an example of a form we needed
* simple & well-organized
* Accessible (fieldsets, labels, elements with meaning)
* may not be pretty, but it works anywhere
Level 2: Dress It Up
Refined visual design
Simple interactivity
Some Flash
Cross-browser
compatible
Styles for alternate
media
Sarah
+ Address visual design - layout, flow, readability, emotion
+ Introduce simple interactivity - feedback
+ Introduce emotional content
old
* Talk about adding some visual flair
* CSS for style & layout
* mention obvious need for browser testing
Level 2: Dress It Up
Aaron
Discuss the form with CSS applied
•
Level 3: Make It Sing
Responsive interface
elements
Predictive data
delivery (Ajax)
Allows for more
customizable
interactions
Sarah
+ predictive, responsive interfaces, reduce errors (think kayak)
+ allow for more customizable interacitons - not just customized visually, but deeply customized for the use contexx
.optional
.optional
.collapsing
Level 3: Make It Sing
Aaron
+ use context - who is this for?
+ objective – to allow certain parts of the form to be optional
Walk through the minor adjustments to the markup (classification)
How It Works
Have
Javascript?
Yes No
Page
Hide the optional field sets
Create the link to
show/hide the
optional field sets
Aaron
walk through how the page operates from a flow perspective
Level 3: Make It Sing
Aaron
Talk about the demo video as it playes
18Levels of Service
No Frills Dress It Up Make It Sing
Sarah
+ three levels of service, supporting three contexts of use
+ coded once
Tools at Our Disposal
DOM Methods
• getElementById()
• getElementsByTagName()
• getAttribute()/setAttribute()
• createElement()/createTextNode()
• innerHTML (if absolutely necessary)
.collapsing .collapsible
Class Swapping
.tabbed .tabbed-on
.faq .faq.on
Aaron
talk about the tools we, as JS developers, should be using to do this stuff
Think Customer Service
Most important tool - empathy for your user’s experience.
Use your eyes, use your brains, use your own experiences to build something that not only looks beautiful or functions elegantly but delivers an excellent customer service.
questions?
5 minutes

More Related Content

Viewers also liked

Designing the Conversation [SmashingConf 2016]
Designing the Conversation [SmashingConf 2016]Designing the Conversation [SmashingConf 2016]
Designing the Conversation [SmashingConf 2016]Aaron Gustafson
 
Writing for Engagement [TechReady 22]
Writing for Engagement [TechReady 22]Writing for Engagement [TechReady 22]
Writing for Engagement [TechReady 22]Aaron Gustafson
 
Designing the Conversation [SpeechTek 2016]
Designing the Conversation [SpeechTek 2016]Designing the Conversation [SpeechTek 2016]
Designing the Conversation [SpeechTek 2016]Aaron Gustafson
 
The Features of Highly Effective Forms [SmashingConf NYC 2016]
The Features of Highly Effective Forms [SmashingConf NYC 2016]The Features of Highly Effective Forms [SmashingConf NYC 2016]
The Features of Highly Effective Forms [SmashingConf NYC 2016]Aaron Gustafson
 
There Are No “Buts” in Progressive Enhancement [Øredev 2015]
There Are No “Buts” in Progressive Enhancement [Øredev 2015]There Are No “Buts” in Progressive Enhancement [Øredev 2015]
There Are No “Buts” in Progressive Enhancement [Øredev 2015]Aaron Gustafson
 
Designing with Empathy [Code & Creativity 2014]
Designing with Empathy [Code & Creativity 2014]Designing with Empathy [Code & Creativity 2014]
Designing with Empathy [Code & Creativity 2014]Aaron Gustafson
 
Design Theory - Lecture 01: What is design?
Design Theory - Lecture 01: What is design?Design Theory - Lecture 01: What is design?
Design Theory - Lecture 01: What is design?Bas Leurs
 

Viewers also liked (7)

Designing the Conversation [SmashingConf 2016]
Designing the Conversation [SmashingConf 2016]Designing the Conversation [SmashingConf 2016]
Designing the Conversation [SmashingConf 2016]
 
Writing for Engagement [TechReady 22]
Writing for Engagement [TechReady 22]Writing for Engagement [TechReady 22]
Writing for Engagement [TechReady 22]
 
Designing the Conversation [SpeechTek 2016]
Designing the Conversation [SpeechTek 2016]Designing the Conversation [SpeechTek 2016]
Designing the Conversation [SpeechTek 2016]
 
The Features of Highly Effective Forms [SmashingConf NYC 2016]
The Features of Highly Effective Forms [SmashingConf NYC 2016]The Features of Highly Effective Forms [SmashingConf NYC 2016]
The Features of Highly Effective Forms [SmashingConf NYC 2016]
 
There Are No “Buts” in Progressive Enhancement [Øredev 2015]
There Are No “Buts” in Progressive Enhancement [Øredev 2015]There Are No “Buts” in Progressive Enhancement [Øredev 2015]
There Are No “Buts” in Progressive Enhancement [Øredev 2015]
 
Designing with Empathy [Code & Creativity 2014]
Designing with Empathy [Code & Creativity 2014]Designing with Empathy [Code & Creativity 2014]
Designing with Empathy [Code & Creativity 2014]
 
Design Theory - Lecture 01: What is design?
Design Theory - Lecture 01: What is design?Design Theory - Lecture 01: What is design?
Design Theory - Lecture 01: What is design?
 

Similar to Ruining the User Experience [SXSW 2007]

Designing Voice Applications - Create For Voice
Designing Voice Applications - Create For VoiceDesigning Voice Applications - Create For Voice
Designing Voice Applications - Create For VoiceKasia Ryniak
 
Reading UK Community group TrailheaDX presentation
Reading UK Community group TrailheaDX presentationReading UK Community group TrailheaDX presentation
Reading UK Community group TrailheaDX presentationAntonina Romanova
 
Website Accessibility: Performa dan Manfaat bagi seluruh lapisan masyarakat [...
Website Accessibility: Performa dan Manfaat bagi seluruh lapisan masyarakat [...Website Accessibility: Performa dan Manfaat bagi seluruh lapisan masyarakat [...
Website Accessibility: Performa dan Manfaat bagi seluruh lapisan masyarakat [...Rahmaut
 
Designing Powerful Web Applications - Monterey
Designing Powerful Web Applications - MontereyDesigning Powerful Web Applications - Monterey
Designing Powerful Web Applications - MontereyDave Malouf
 
Designing Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDesigning Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDave Malouf
 
Workflow diagramming and information architecture
Workflow diagramming and information architectureWorkflow diagramming and information architecture
Workflow diagramming and information architectureDianna Miller
 
Open Web Technologies and You - Durham College Student Integration Presentation
Open Web Technologies and You - Durham College Student Integration PresentationOpen Web Technologies and You - Durham College Student Integration Presentation
Open Web Technologies and You - Durham College Student Integration Presentationdarryl_lehmann
 
User Interface is King: Developing a Web App UI
User Interface is King: Developing a Web App UIUser Interface is King: Developing a Web App UI
User Interface is King: Developing a Web App UIDave Olsen
 
Rich User Experience Documentation - Update
Rich User Experience Documentation - UpdateRich User Experience Documentation - Update
Rich User Experience Documentation - UpdateJohn Yesko
 
01 #awesome admin tdx19 global gatherings highlights for admins final
01 #awesome admin   tdx19 global gatherings highlights for admins final01 #awesome admin   tdx19 global gatherings highlights for admins final
01 #awesome admin tdx19 global gatherings highlights for admins finalszurley
 
The UX Toolbelt for Developers
The UX Toolbelt for DevelopersThe UX Toolbelt for Developers
The UX Toolbelt for DevelopersSarah Dutkiewicz
 
Experience Design For The Geospatial Web Feb16 V1 Mm
Experience Design For The Geospatial Web Feb16 V1 MmExperience Design For The Geospatial Web Feb16 V1 Mm
Experience Design For The Geospatial Web Feb16 V1 MmMichael Maclennan
 
Building AI-powered Serverless Applications on AWS
Building AI-powered Serverless Applications on AWSBuilding AI-powered Serverless Applications on AWS
Building AI-powered Serverless Applications on AWSAdrian Hornsby
 
IA and RIA: You know more than you think you do
IA and RIA: You know more than you think you doIA and RIA: You know more than you think you do
IA and RIA: You know more than you think you doAdam Polansky
 
An Exploration of Cross-product App Experiences
An Exploration of Cross-product App ExperiencesAn Exploration of Cross-product App Experiences
An Exploration of Cross-product App ExperiencesAtlassian
 
ChicagOhana TrailheaDX 2019 Global Gathering 6/25/19
ChicagOhana TrailheaDX 2019 Global Gathering 6/25/19ChicagOhana TrailheaDX 2019 Global Gathering 6/25/19
ChicagOhana TrailheaDX 2019 Global Gathering 6/25/19csupilowski
 
Designing The Interface For Use
Designing The Interface For UseDesigning The Interface For Use
Designing The Interface For UseChristina Wodtke
 
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)Aaron Gustafson
 
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)Aaron Gustafson
 

Similar to Ruining the User Experience [SXSW 2007] (20)

Designing Voice Applications - Create For Voice
Designing Voice Applications - Create For VoiceDesigning Voice Applications - Create For Voice
Designing Voice Applications - Create For Voice
 
Reading UK Community group TrailheaDX presentation
Reading UK Community group TrailheaDX presentationReading UK Community group TrailheaDX presentation
Reading UK Community group TrailheaDX presentation
 
Website Accessibility: Performa dan Manfaat bagi seluruh lapisan masyarakat [...
Website Accessibility: Performa dan Manfaat bagi seluruh lapisan masyarakat [...Website Accessibility: Performa dan Manfaat bagi seluruh lapisan masyarakat [...
Website Accessibility: Performa dan Manfaat bagi seluruh lapisan masyarakat [...
 
Designing Powerful Web Applications - Monterey
Designing Powerful Web Applications - MontereyDesigning Powerful Web Applications - Monterey
Designing Powerful Web Applications - Monterey
 
Designing Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDesigning Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAs
 
Workflow diagramming and information architecture
Workflow diagramming and information architectureWorkflow diagramming and information architecture
Workflow diagramming and information architecture
 
Open Web Technologies and You - Durham College Student Integration Presentation
Open Web Technologies and You - Durham College Student Integration PresentationOpen Web Technologies and You - Durham College Student Integration Presentation
Open Web Technologies and You - Durham College Student Integration Presentation
 
User Interface is King: Developing a Web App UI
User Interface is King: Developing a Web App UIUser Interface is King: Developing a Web App UI
User Interface is King: Developing a Web App UI
 
Rich User Experience Documentation - Update
Rich User Experience Documentation - UpdateRich User Experience Documentation - Update
Rich User Experience Documentation - Update
 
01 #awesome admin tdx19 global gatherings highlights for admins final
01 #awesome admin   tdx19 global gatherings highlights for admins final01 #awesome admin   tdx19 global gatherings highlights for admins final
01 #awesome admin tdx19 global gatherings highlights for admins final
 
The UX Toolbelt for Developers
The UX Toolbelt for DevelopersThe UX Toolbelt for Developers
The UX Toolbelt for Developers
 
Experience Design For The Geospatial Web Feb16 V1 Mm
Experience Design For The Geospatial Web Feb16 V1 MmExperience Design For The Geospatial Web Feb16 V1 Mm
Experience Design For The Geospatial Web Feb16 V1 Mm
 
Building AI-powered Serverless Applications on AWS
Building AI-powered Serverless Applications on AWSBuilding AI-powered Serverless Applications on AWS
Building AI-powered Serverless Applications on AWS
 
IA and RIA: You know more than you think you do
IA and RIA: You know more than you think you doIA and RIA: You know more than you think you do
IA and RIA: You know more than you think you do
 
An Exploration of Cross-product App Experiences
An Exploration of Cross-product App ExperiencesAn Exploration of Cross-product App Experiences
An Exploration of Cross-product App Experiences
 
Building a UX Portfolio
Building a UX PortfolioBuilding a UX Portfolio
Building a UX Portfolio
 
ChicagOhana TrailheaDX 2019 Global Gathering 6/25/19
ChicagOhana TrailheaDX 2019 Global Gathering 6/25/19ChicagOhana TrailheaDX 2019 Global Gathering 6/25/19
ChicagOhana TrailheaDX 2019 Global Gathering 6/25/19
 
Designing The Interface For Use
Designing The Interface For UseDesigning The Interface For Use
Designing The Interface For Use
 
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)
 
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)
 

More from Aaron Gustafson

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]Aaron Gustafson
 
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]Aaron Gustafson
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Aaron Gustafson
 
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]Aaron Gustafson
 
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?Aaron Gustafson
 
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]Aaron Gustafson
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Aaron Gustafson
 
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]Aaron Gustafson
 
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]Aaron Gustafson
 
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]Aaron Gustafson
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Aaron Gustafson
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Aaron Gustafson
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Aaron Gustafson
 
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 EveryoneAaron Gustafson
 
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]Aaron Gustafson
 
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]Aaron Gustafson
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Aaron Gustafson
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Aaron Gustafson
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Aaron Gustafson
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]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

Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
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
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
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
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
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
 
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
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 

Recently uploaded (20)

Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
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
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
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
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
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
 
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...
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 

Ruining the User Experience [SXSW 2007]

  • 1. Aaron Gustafson Sarah B. Nelson Ruining the User Experience Intro - Aaron first, Sarah 2nd Sarah’s Points + AP, UX Experience consulting firm in SF + design researcher and interaction designer with background in front-end development
  • 4. What is good user experience? Aaron * Something as small as a glass of water can have a profound affect on the customer experience Sarah Good user experience = good customer service + Provide good customer service: a) understand your users b) design and implement products that demonstrate your understanding Understanding users means + context is which they are using your product: social, physical, cognitive, emotional, cultural + tools they use to interact your product
  • 5. would you do this? Would you do this? The idea of treating customers rudely in a service context seems ridiculous - it’s clearly a bad idea. Yet, if we don’t pay attention to the level of service we are providing at all levels of the design and implementation process, we run the risk of doing the digital equivalent.
  • 6. lala.com Aaron * Talk about Lala service * What happens when you come to it with JS off * How they’ve “addressed” that issue now * Ajax getting in the way o Confirming receipt o Registering a package * Use case – mobile use while out shopping
  • 7. Javascript is a requirement
  • 9. 1) No Frills 2) Dress It Up 3) Make It Sing Levels of Service Aaron - transition: Guideposts for a responsible web site: Give them what they can handle So how do we address this? By establishing for ourselves some basic levels of service * Discuss concept of levels of service * Service that meets people’s needs unobtrusively (i.e. without them knowing they have been given special attention) is key * Jared Spool: “If we do our work right, it goes unnoticed.” * One example of this is what we are going to show you today – three basic levels of service * (Aaron) The example we are going to walk you through comes from a recent project…
  • 10. Make content accessible No distractions Clean, well-ordered, semantic markup Light, fast downloads Level 1: No frills Aaron or Sarah * ensure that content is accessible first and foremost * Talk about a basic level of service * Content is the reason * Simple, straightforward, fast
  • 11. Level 1: No Frills Aaron * Here is an example of a form we needed * simple & well-organized * Accessible (fieldsets, labels, elements with meaning) * may not be pretty, but it works anywhere
  • 12. Level 2: Dress It Up Refined visual design Simple interactivity Some Flash Cross-browser compatible Styles for alternate media Sarah + Address visual design - layout, flow, readability, emotion + Introduce simple interactivity - feedback + Introduce emotional content old * Talk about adding some visual flair * CSS for style & layout * mention obvious need for browser testing
  • 13. Level 2: Dress It Up Aaron Discuss the form with CSS applied •
  • 14. Level 3: Make It Sing Responsive interface elements Predictive data delivery (Ajax) Allows for more customizable interactions Sarah + predictive, responsive interfaces, reduce errors (think kayak) + allow for more customizable interacitons - not just customized visually, but deeply customized for the use contexx
  • 15. .optional .optional .collapsing Level 3: Make It Sing Aaron + use context - who is this for? + objective – to allow certain parts of the form to be optional Walk through the minor adjustments to the markup (classification)
  • 16. How It Works Have Javascript? Yes No Page Hide the optional field sets Create the link to show/hide the optional field sets Aaron walk through how the page operates from a flow perspective
  • 17. Level 3: Make It Sing Aaron Talk about the demo video as it playes
  • 18. 18Levels of Service No Frills Dress It Up Make It Sing Sarah + three levels of service, supporting three contexts of use + coded once
  • 19. Tools at Our Disposal DOM Methods • getElementById() • getElementsByTagName() • getAttribute()/setAttribute() • createElement()/createTextNode() • innerHTML (if absolutely necessary) .collapsing .collapsible Class Swapping .tabbed .tabbed-on .faq .faq.on Aaron talk about the tools we, as JS developers, should be using to do this stuff
  • 20. Think Customer Service Most important tool - empathy for your user’s experience. Use your eyes, use your brains, use your own experiences to build something that not only looks beautiful or functions elegantly but delivers an excellent customer service.