SlideShare a Scribd company logo
Peter Stahl Josh Damon Williams eBay Hot Studio   Checking the Feel  of your UI with an Interaction Audit
“ Who are these guys?” Peter Stahl Lead User Experience Designer at eBay Design patterns, holistic design Led the interaction audit Plays oboe Josh Damon Williams Senior User Experience Designer at Hot Studio Wide variety of projects and roles Key strategist for interaction audit Plays turntables
Interaction Audit team eBay Deborah Adams Estrada, Jennifer Anderson, Jennifer Kelly, Preston Smalley , Peter Stahl, Karenina Susilo Hot Studio Jon Littell, David Paige, Josh Damon Williams Persistent Systems Prasad Bartakke, Chaitrali Dhole, Rajesh Gode
What’s in this for you Discover why “Feel” matters Find out what an Interaction Audit is Learn our ground-breaking methodology See scintillating Feel findings Marvel at what an Audit can do for you Ponder exciting future advancements
Part 1 What is “Feel”, and why should I care?
Look & Feel
Look &  Feel
silk
water
 
 
 
 
 
[photo of mouse and/or trackpad and/or Wacom tablet ] Feel: How you operate it with your hands
 
 
 
 
 
 
 
 
Q: What interactive elements to use?
Q: What interactive elements to use? A: All of them
 
Q: What interactive elements to use? A: Hmmm…
Feel affects: Learning curve Mental bandwidth needed to operate UI User success (or errors) Site personality Brand promise Adoption (or abandonment)
eBay Site Experience: a Holistic View
Feel
Part 2 What we did
Project phases Strategy Data Collection Analysis Recommendations
Project phase 1: STRATEGY
Ark of the Covenant A “compelling artifact”
 
 
Example flow: New user finds an item, bids for it, registers as member
Example flow:   User bids on a Watched item, is outbid, rebids
Example flow: New seller lists item for sale, creates Seller account
Audit checklist
Project phase 2: DATA COLLECTION
FILE MAKER Ω Our FileMaker Pro database
Database Fields (partial list) Very relevant: Task & subtask Step description Page & URL Action (syntactic) Screen shot close-up Instructional text Click/keystroke record Less relevant: Region on page Icons symbol, meaning, behavior Interface elements label, type, style, notes Comments on Feel
Project phase 3:   ANALYSIS
Roll of Paper
Scrolls unrolled Flows as storyboards
 
Ideas for presenting findings
Radial charts to track Feel metrics
Emotional flow to track Feel effects
A course correction
Project phase 4:  RECOMMENDATIONS
[DOCUMENT FORMAT SLIDE (FROM MY NOTEBOOK)]
Affordance Task Data Object
Affordance A visual cue that some interaction is offered Affordance Inconsistency A single visual cue offering multiple interactions
Affordance Inconsistencies: Hyperlink User action… System response… Affordance Inconsistencies: Hyperlink Loads new page Clicks link… Immediate in-line response Clicks link…
Affordance Inconsistencies: Hyperlink User action… System response… Opens modal dialog box Clicks link… Expands/collapses in-line page content Affordance Inconsistencies: Hyperlink Clicks link…
Affordance Inconsistencies: Hyperlink Clicks link… Jump to anchor elsewhere on page Clicks link… Opens content in new browser window Affordance Inconsistencies: Hyperlink User action… System response…
Affordance Inconsistencies: Hyperlink Clicks link… Closes a popup layer Clicks link… Adds assistance frame to window User action… System response… Affordance Inconsistencies: Hyperlink
Affordance Inconsistencies: Tab Affordance Inconsistencies: Tab
Task A path to accomplish an immediate goal Task Inconsistency A single goal accomplished via  multiple paths
Task Inconsistencies: Filtering Data 1. Submit a form 2. Click tabs 3. Click criteria links 4. Click “toggle” link Task Inconsistencies: Filtering Data
5 x Enable/Disable Form Section Inconsistencies Task Inconsistencies: Enable/Disable Section of a Form 1. Checkbox 2. Tabs 3. Dropdown menu 4. Radio buttons
Data Object A representation of a data record or other piece of data Data Object Inconsistency A single data object represented  multiple ways
Data Object Inconsistencies: Members CAPTURES Data Object Inconsistencies: eBay Member
Data Object Inconsistencies: Members Data Object Inconsistencies: eBay Member
The Interaction Audit report
Part 3 Actions &  Future Directions
A page from the Interaction Audit
Interaction goals Low learning curve, due to… Consistent cues for actions Predictable behavior of affordances Instant recognition of interface elements Allow eBay member content to shine
 
Clean-up teams The Clickers   links and buttons The Swappers tabs and toggles The Submitters  forms and form elements The Shufflers  sorting and filtering The Disclosers  overlays and sections
An eBay design pattern
Clean-up process Find problem area in the audit report Recommend simpler set of interactions Document as design patterns Engineering creates code components New and upgraded site areas use the cleaned-up interactions
What about  interaction inconsistencies  without  obvious solutions? Example: Customize page layout
6. Paired ordered lists w/buttons Task Inconsistencies: Customize page layout 3. Schematic picture with buttons 5. Hyperlinks 2. Dropdown menu 4. Form in floating dialog 1. Form on its own page
Basic requirements:  restaurant Basic requirements:   - Clean dishes & utensils - Courteous staff  - Accurate check tabulation  - No cockroaches
Site-specific values:  restaurant Basic requirements:   - Clean dishes & utensils - Courteous staff  - Accurate check tabulation  - No cockroaches Site-Specific Value: Marrying food and wine felicitously So must have: Comprehensive wine list Site-Specific Value: Joy in boundless variety So must have: Extensive menu Site-Specific Value: Convenience So must have: Speedy customer throughput
Basic requirements:  interaction design Basic requirements:   - Navigable interface - Orientation cues - Consistent basic interactions - No cockroaches
Site-specific values:  interaction design Site-Specific Value: - Plethora of tools to    help buyers - Compatibility So must have: - Dense pages - Progressive discovery Site-Specific Value: - Clean, friendly, safe - Tons of fun add-in    applications So must have: - Transparency - Visual app framework Site-Specific Value: - Perceived simplicity  - Convenient adding    & editing of lists So must have: - Sparse pages  - Direct manipulation Basic requirements:   - Navigable interface - Orientation cues - Consistent basic interactions - No cockroaches
Values can vary depending on the conversation
“ Feel” metrics
Feel metrics: objective Page dimensions height, width Number of interactive entities Hyperlinks, buttons, form elements, icons Interactive density No. of interactive entities  ÷ page size “ Jack-in-the-boxiness” No. of mouse-over elements   ÷ page size
Feel metrics: semi-objective Number of syntactic actions in a task “ Reloadiness” Latencies in response to interactions Number/frequency of tool switches Mouse to keyboard and back Amount of dynamic behavior Pop-up layers, video, “sponginess” (layout changes triggered by mouse-over)
Feel metrics: subjective Number of different interaction styles, metaphors, paradigms in a page or task Simplicity/complexity Flatness/bumpiness Flat = uses only hyperlinks & other primitives Bumpy = uses more advanced interactions Cognitive load
What we’ve learned Nowadays it’s important to check “Feel” An Interaction Audit can be compelling, actionable, and spark real improvement Audits should focus on flows and be representative of real user experience Simple tools work; storyboards are key Audit for inconsistencies in Affordance, Task, and Data Object representation Clean up obvious problems first Harder problems require site-specific values “ Feel” metrics may hold promise
Thank you! peter.stahl [at] ebay.com josh.williams [at] hotstudio.com
And thanks to Flickr users who generously license  their photos with Creative Commons attribution  http://flickr.com/photos/ ihtatho /627226315/ http://flickr.com/photos/ cyberslayer /952121271/ http://flickr.com/photos/ dsevilla /97727582/ http://flickr.com/photos/ [email_address] /2334570947/ http://flickr.com/photos/ amanky /1377593634/ http://flickr.com/photos/ mastrobiggo /2341517672/ http://flickr.com/photos/ shuttleworth /1578035901/ http://flickr.com/photos/ joebeone /1764153258/ http://flickr.com/photos/ michaelcr /856252290/ http://flickr.com/photos/ scenicaviator /289331019/ http://flickr.com/photos/ 0olong /310216817/ http://flickr.com/photos/ thomashawk /2269208776/ http://flickr.com/photos/ briansolis /1411905457/
Questions? peter.stahl [at] ebay.com josh.williams [at] hotstudio.com

More Related Content

Similar to Checking the "Feel" of your UI with an Interaction Audit

Checking the "Feel" of your UI with an Interaction Audit
Checking the "Feel" of your UI with an Interaction AuditChecking the "Feel" of your UI with an Interaction Audit
Checking the "Feel" of your UI with an Interaction Audit
Peter Stahl
 
Web Marketing Week4
Web Marketing Week4Web Marketing Week4
Web Marketing Week4
cghb1210
 
Startup Metrics for Pirates (Startonomics Beijing, June 2009)
Startup Metrics for Pirates (Startonomics Beijing, June 2009)Startup Metrics for Pirates (Startonomics Beijing, June 2009)
Startup Metrics for Pirates (Startonomics Beijing, June 2009)
Dave McClure
 
Writing Studio
Writing StudioWriting Studio
Writing Studio
albeaudin
 
Web Usability: Making Your Sites More Awesomer
Web Usability: Making Your Sites More AwesomerWeb Usability: Making Your Sites More Awesomer
Web Usability: Making Your Sites More Awesomer
Jennifer Riehle McFarland
 
AMIA Panel: Usability Enhancements
AMIA Panel: Usability EnhancementsAMIA Panel: Usability Enhancements
AMIA Panel: Usability Enhancements
Brian Turner
 
Amia 2011: User Interface Enhancements for UCSF Profiles
Amia 2011: User Interface Enhancements for UCSF ProfilesAmia 2011: User Interface Enhancements for UCSF Profiles
Amia 2011: User Interface Enhancements for UCSF Profiles
CTSI at UCSF
 
RDVO - Building UX Pattern Libraries
RDVO - Building UX Pattern LibrariesRDVO - Building UX Pattern Libraries
RDVO - Building UX Pattern Libraries
Ben Zipkin
 
Web Analytics: A Measurement System of Website
Web Analytics: A Measurement System of WebsiteWeb Analytics: A Measurement System of Website
Web Analytics: A Measurement System of Website
ITDogadjaji.com
 
"Keeping it real” while thinking aloud. Ensuring credibility of eye-tracking ...
"Keeping it real” while thinking aloud. Ensuring credibility of eye-tracking ..."Keeping it real” while thinking aloud. Ensuring credibility of eye-tracking ...
"Keeping it real” while thinking aloud. Ensuring credibility of eye-tracking ...
Symetria
 
Keeping It Real While Thinking Aloudensuring Credibility Of Eyetracking Usabi...
Keeping It Real While Thinking Aloudensuring Credibility Of Eyetracking Usabi...Keeping It Real While Thinking Aloudensuring Credibility Of Eyetracking Usabi...
Keeping It Real While Thinking Aloudensuring Credibility Of Eyetracking Usabi...
Acuity ETS Limited
 
Beginners QA Testing
Beginners QA TestingBeginners QA Testing
Beginners QA Testing
Danielle Mickey
 
Search & Filter Interface Round Up - Usability Marathon - Cueva
Search & Filter Interface Round Up - Usability Marathon - CuevaSearch & Filter Interface Round Up - Usability Marathon - Cueva
Search & Filter Interface Round Up - Usability Marathon - Cueva
Amy Cueva
 
Application Design - Part 2
Application Design - Part 2Application Design - Part 2
Application Design - Part 2
Kelley Howell
 
Systems Thinking - Shekman Tang
Systems Thinking - Shekman TangSystems Thinking - Shekman Tang
Systems Thinking - Shekman Tang
uxbri
 
Digital Media Makeover Marketing Profs B2B Forum July 2011
Digital Media Makeover  Marketing Profs B2B Forum July 2011Digital Media Makeover  Marketing Profs B2B Forum July 2011
Digital Media Makeover Marketing Profs B2B Forum July 2011
Leigh Durst
 
Templates.pptx
Templates.pptxTemplates.pptx
Templates.pptx
ssuser994d18
 
Spicing Up Your Vanilla With a Custom Look and Feel
Spicing Up Your Vanilla With a Custom Look and FeelSpicing Up Your Vanilla With a Custom Look and Feel
Spicing Up Your Vanilla With a Custom Look and Feel
jpberetz
 
Conversion Summit Slides - 1 Sep 2011 - Craig Sullivan
Conversion Summit Slides - 1 Sep 2011 - Craig SullivanConversion Summit Slides - 1 Sep 2011 - Craig Sullivan
Conversion Summit Slides - 1 Sep 2011 - Craig Sullivan
Craig Sullivan
 
eMetrics Stockholm 2009
eMetrics Stockholm 2009eMetrics Stockholm 2009
eMetrics Stockholm 2009
Lars J
 

Similar to Checking the "Feel" of your UI with an Interaction Audit (20)

Checking the "Feel" of your UI with an Interaction Audit
Checking the "Feel" of your UI with an Interaction AuditChecking the "Feel" of your UI with an Interaction Audit
Checking the "Feel" of your UI with an Interaction Audit
 
Web Marketing Week4
Web Marketing Week4Web Marketing Week4
Web Marketing Week4
 
Startup Metrics for Pirates (Startonomics Beijing, June 2009)
Startup Metrics for Pirates (Startonomics Beijing, June 2009)Startup Metrics for Pirates (Startonomics Beijing, June 2009)
Startup Metrics for Pirates (Startonomics Beijing, June 2009)
 
Writing Studio
Writing StudioWriting Studio
Writing Studio
 
Web Usability: Making Your Sites More Awesomer
Web Usability: Making Your Sites More AwesomerWeb Usability: Making Your Sites More Awesomer
Web Usability: Making Your Sites More Awesomer
 
AMIA Panel: Usability Enhancements
AMIA Panel: Usability EnhancementsAMIA Panel: Usability Enhancements
AMIA Panel: Usability Enhancements
 
Amia 2011: User Interface Enhancements for UCSF Profiles
Amia 2011: User Interface Enhancements for UCSF ProfilesAmia 2011: User Interface Enhancements for UCSF Profiles
Amia 2011: User Interface Enhancements for UCSF Profiles
 
RDVO - Building UX Pattern Libraries
RDVO - Building UX Pattern LibrariesRDVO - Building UX Pattern Libraries
RDVO - Building UX Pattern Libraries
 
Web Analytics: A Measurement System of Website
Web Analytics: A Measurement System of WebsiteWeb Analytics: A Measurement System of Website
Web Analytics: A Measurement System of Website
 
"Keeping it real” while thinking aloud. Ensuring credibility of eye-tracking ...
"Keeping it real” while thinking aloud. Ensuring credibility of eye-tracking ..."Keeping it real” while thinking aloud. Ensuring credibility of eye-tracking ...
"Keeping it real” while thinking aloud. Ensuring credibility of eye-tracking ...
 
Keeping It Real While Thinking Aloudensuring Credibility Of Eyetracking Usabi...
Keeping It Real While Thinking Aloudensuring Credibility Of Eyetracking Usabi...Keeping It Real While Thinking Aloudensuring Credibility Of Eyetracking Usabi...
Keeping It Real While Thinking Aloudensuring Credibility Of Eyetracking Usabi...
 
Beginners QA Testing
Beginners QA TestingBeginners QA Testing
Beginners QA Testing
 
Search & Filter Interface Round Up - Usability Marathon - Cueva
Search & Filter Interface Round Up - Usability Marathon - CuevaSearch & Filter Interface Round Up - Usability Marathon - Cueva
Search & Filter Interface Round Up - Usability Marathon - Cueva
 
Application Design - Part 2
Application Design - Part 2Application Design - Part 2
Application Design - Part 2
 
Systems Thinking - Shekman Tang
Systems Thinking - Shekman TangSystems Thinking - Shekman Tang
Systems Thinking - Shekman Tang
 
Digital Media Makeover Marketing Profs B2B Forum July 2011
Digital Media Makeover  Marketing Profs B2B Forum July 2011Digital Media Makeover  Marketing Profs B2B Forum July 2011
Digital Media Makeover Marketing Profs B2B Forum July 2011
 
Templates.pptx
Templates.pptxTemplates.pptx
Templates.pptx
 
Spicing Up Your Vanilla With a Custom Look and Feel
Spicing Up Your Vanilla With a Custom Look and FeelSpicing Up Your Vanilla With a Custom Look and Feel
Spicing Up Your Vanilla With a Custom Look and Feel
 
Conversion Summit Slides - 1 Sep 2011 - Craig Sullivan
Conversion Summit Slides - 1 Sep 2011 - Craig SullivanConversion Summit Slides - 1 Sep 2011 - Craig Sullivan
Conversion Summit Slides - 1 Sep 2011 - Craig Sullivan
 
eMetrics Stockholm 2009
eMetrics Stockholm 2009eMetrics Stockholm 2009
eMetrics Stockholm 2009
 

Recently uploaded

Intel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdfIntel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdf
Tech Guru
 
Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17
Bhajan Mehta
 
UX Webinar Series: Aligning Authentication Experiences with Business Goals
UX Webinar Series: Aligning Authentication Experiences with Business GoalsUX Webinar Series: Aligning Authentication Experiences with Business Goals
UX Webinar Series: Aligning Authentication Experiences with Business Goals
FIDO Alliance
 
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdfLeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
SelfMade bd
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
shanihomely
 
The History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal EmbeddingsThe History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal Embeddings
Zilliz
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
Brian Pichman
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
SubhamMandal40
 
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
FIDO Alliance
 
Discovery Series - Zero to Hero - Task Mining Session 1
Discovery Series - Zero to Hero - Task Mining Session 1Discovery Series - Zero to Hero - Task Mining Session 1
Discovery Series - Zero to Hero - Task Mining Session 1
DianaGray10
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
bellared2
 
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
FIDO Alliance
 
The Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - CoatueThe Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - Coatue
Razin Mustafiz
 
Accelerating Migrations = Recommendations
Accelerating Migrations = RecommendationsAccelerating Migrations = Recommendations
Accelerating Migrations = Recommendations
isBullShit
 
Finetuning GenAI For Hacking and Defending
Finetuning GenAI For Hacking and DefendingFinetuning GenAI For Hacking and Defending
Finetuning GenAI For Hacking and Defending
Priyanka Aash
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
Google Developer Group - Harare
 
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
Zilliz
 
Redefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI CapabilitiesRedefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI Capabilities
Priyanka Aash
 

Recently uploaded (20)

Intel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdfIntel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdf
 
Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17
 
UX Webinar Series: Aligning Authentication Experiences with Business Goals
UX Webinar Series: Aligning Authentication Experiences with Business GoalsUX Webinar Series: Aligning Authentication Experiences with Business Goals
UX Webinar Series: Aligning Authentication Experiences with Business Goals
 
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdfLeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
 
The History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal EmbeddingsThe History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal Embeddings
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
 
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
 
Discovery Series - Zero to Hero - Task Mining Session 1
Discovery Series - Zero to Hero - Task Mining Session 1Discovery Series - Zero to Hero - Task Mining Session 1
Discovery Series - Zero to Hero - Task Mining Session 1
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
 
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
 
The Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - CoatueThe Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - Coatue
 
Accelerating Migrations = Recommendations
Accelerating Migrations = RecommendationsAccelerating Migrations = Recommendations
Accelerating Migrations = Recommendations
 
Finetuning GenAI For Hacking and Defending
Finetuning GenAI For Hacking and DefendingFinetuning GenAI For Hacking and Defending
Finetuning GenAI For Hacking and Defending
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
 
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
 
Redefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI CapabilitiesRedefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI Capabilities
 

Checking the "Feel" of your UI with an Interaction Audit

  • 1. Peter Stahl Josh Damon Williams eBay Hot Studio Checking the Feel of your UI with an Interaction Audit
  • 2. “ Who are these guys?” Peter Stahl Lead User Experience Designer at eBay Design patterns, holistic design Led the interaction audit Plays oboe Josh Damon Williams Senior User Experience Designer at Hot Studio Wide variety of projects and roles Key strategist for interaction audit Plays turntables
  • 3. Interaction Audit team eBay Deborah Adams Estrada, Jennifer Anderson, Jennifer Kelly, Preston Smalley , Peter Stahl, Karenina Susilo Hot Studio Jon Littell, David Paige, Josh Damon Williams Persistent Systems Prasad Bartakke, Chaitrali Dhole, Rajesh Gode
  • 4. What’s in this for you Discover why “Feel” matters Find out what an Interaction Audit is Learn our ground-breaking methodology See scintillating Feel findings Marvel at what an Audit can do for you Ponder exciting future advancements
  • 5. Part 1 What is “Feel”, and why should I care?
  • 7. Look & Feel
  • 10.  
  • 11.  
  • 12.  
  • 13.  
  • 14.  
  • 15. [photo of mouse and/or trackpad and/or Wacom tablet ] Feel: How you operate it with your hands
  • 16.  
  • 17.  
  • 18.  
  • 19.  
  • 20.  
  • 21.  
  • 22.  
  • 23.  
  • 24. Q: What interactive elements to use?
  • 25. Q: What interactive elements to use? A: All of them
  • 26.  
  • 27. Q: What interactive elements to use? A: Hmmm…
  • 28. Feel affects: Learning curve Mental bandwidth needed to operate UI User success (or errors) Site personality Brand promise Adoption (or abandonment)
  • 29. eBay Site Experience: a Holistic View
  • 30. Feel
  • 31. Part 2 What we did
  • 32. Project phases Strategy Data Collection Analysis Recommendations
  • 33. Project phase 1: STRATEGY
  • 34. Ark of the Covenant A “compelling artifact”
  • 35.  
  • 36.  
  • 37. Example flow: New user finds an item, bids for it, registers as member
  • 38. Example flow: User bids on a Watched item, is outbid, rebids
  • 39. Example flow: New seller lists item for sale, creates Seller account
  • 41. Project phase 2: DATA COLLECTION
  • 42. FILE MAKER Ω Our FileMaker Pro database
  • 43. Database Fields (partial list) Very relevant: Task & subtask Step description Page & URL Action (syntactic) Screen shot close-up Instructional text Click/keystroke record Less relevant: Region on page Icons symbol, meaning, behavior Interface elements label, type, style, notes Comments on Feel
  • 44. Project phase 3: ANALYSIS
  • 46. Scrolls unrolled Flows as storyboards
  • 47.  
  • 49. Radial charts to track Feel metrics
  • 50. Emotional flow to track Feel effects
  • 52. Project phase 4: RECOMMENDATIONS
  • 53. [DOCUMENT FORMAT SLIDE (FROM MY NOTEBOOK)]
  • 55. Affordance A visual cue that some interaction is offered Affordance Inconsistency A single visual cue offering multiple interactions
  • 56. Affordance Inconsistencies: Hyperlink User action… System response… Affordance Inconsistencies: Hyperlink Loads new page Clicks link… Immediate in-line response Clicks link…
  • 57. Affordance Inconsistencies: Hyperlink User action… System response… Opens modal dialog box Clicks link… Expands/collapses in-line page content Affordance Inconsistencies: Hyperlink Clicks link…
  • 58. Affordance Inconsistencies: Hyperlink Clicks link… Jump to anchor elsewhere on page Clicks link… Opens content in new browser window Affordance Inconsistencies: Hyperlink User action… System response…
  • 59. Affordance Inconsistencies: Hyperlink Clicks link… Closes a popup layer Clicks link… Adds assistance frame to window User action… System response… Affordance Inconsistencies: Hyperlink
  • 60. Affordance Inconsistencies: Tab Affordance Inconsistencies: Tab
  • 61. Task A path to accomplish an immediate goal Task Inconsistency A single goal accomplished via multiple paths
  • 62. Task Inconsistencies: Filtering Data 1. Submit a form 2. Click tabs 3. Click criteria links 4. Click “toggle” link Task Inconsistencies: Filtering Data
  • 63. 5 x Enable/Disable Form Section Inconsistencies Task Inconsistencies: Enable/Disable Section of a Form 1. Checkbox 2. Tabs 3. Dropdown menu 4. Radio buttons
  • 64. Data Object A representation of a data record or other piece of data Data Object Inconsistency A single data object represented multiple ways
  • 65. Data Object Inconsistencies: Members CAPTURES Data Object Inconsistencies: eBay Member
  • 66. Data Object Inconsistencies: Members Data Object Inconsistencies: eBay Member
  • 68. Part 3 Actions & Future Directions
  • 69. A page from the Interaction Audit
  • 70. Interaction goals Low learning curve, due to… Consistent cues for actions Predictable behavior of affordances Instant recognition of interface elements Allow eBay member content to shine
  • 71.  
  • 72. Clean-up teams The Clickers links and buttons The Swappers tabs and toggles The Submitters forms and form elements The Shufflers sorting and filtering The Disclosers overlays and sections
  • 73. An eBay design pattern
  • 74. Clean-up process Find problem area in the audit report Recommend simpler set of interactions Document as design patterns Engineering creates code components New and upgraded site areas use the cleaned-up interactions
  • 75. What about interaction inconsistencies without obvious solutions? Example: Customize page layout
  • 76. 6. Paired ordered lists w/buttons Task Inconsistencies: Customize page layout 3. Schematic picture with buttons 5. Hyperlinks 2. Dropdown menu 4. Form in floating dialog 1. Form on its own page
  • 77. Basic requirements: restaurant Basic requirements: - Clean dishes & utensils - Courteous staff - Accurate check tabulation - No cockroaches
  • 78. Site-specific values: restaurant Basic requirements: - Clean dishes & utensils - Courteous staff - Accurate check tabulation - No cockroaches Site-Specific Value: Marrying food and wine felicitously So must have: Comprehensive wine list Site-Specific Value: Joy in boundless variety So must have: Extensive menu Site-Specific Value: Convenience So must have: Speedy customer throughput
  • 79. Basic requirements: interaction design Basic requirements: - Navigable interface - Orientation cues - Consistent basic interactions - No cockroaches
  • 80. Site-specific values: interaction design Site-Specific Value: - Plethora of tools to help buyers - Compatibility So must have: - Dense pages - Progressive discovery Site-Specific Value: - Clean, friendly, safe - Tons of fun add-in applications So must have: - Transparency - Visual app framework Site-Specific Value: - Perceived simplicity - Convenient adding & editing of lists So must have: - Sparse pages - Direct manipulation Basic requirements: - Navigable interface - Orientation cues - Consistent basic interactions - No cockroaches
  • 81. Values can vary depending on the conversation
  • 83. Feel metrics: objective Page dimensions height, width Number of interactive entities Hyperlinks, buttons, form elements, icons Interactive density No. of interactive entities ÷ page size “ Jack-in-the-boxiness” No. of mouse-over elements ÷ page size
  • 84. Feel metrics: semi-objective Number of syntactic actions in a task “ Reloadiness” Latencies in response to interactions Number/frequency of tool switches Mouse to keyboard and back Amount of dynamic behavior Pop-up layers, video, “sponginess” (layout changes triggered by mouse-over)
  • 85. Feel metrics: subjective Number of different interaction styles, metaphors, paradigms in a page or task Simplicity/complexity Flatness/bumpiness Flat = uses only hyperlinks & other primitives Bumpy = uses more advanced interactions Cognitive load
  • 86. What we’ve learned Nowadays it’s important to check “Feel” An Interaction Audit can be compelling, actionable, and spark real improvement Audits should focus on flows and be representative of real user experience Simple tools work; storyboards are key Audit for inconsistencies in Affordance, Task, and Data Object representation Clean up obvious problems first Harder problems require site-specific values “ Feel” metrics may hold promise
  • 87. Thank you! peter.stahl [at] ebay.com josh.williams [at] hotstudio.com
  • 88. And thanks to Flickr users who generously license their photos with Creative Commons attribution http://flickr.com/photos/ ihtatho /627226315/ http://flickr.com/photos/ cyberslayer /952121271/ http://flickr.com/photos/ dsevilla /97727582/ http://flickr.com/photos/ [email_address] /2334570947/ http://flickr.com/photos/ amanky /1377593634/ http://flickr.com/photos/ mastrobiggo /2341517672/ http://flickr.com/photos/ shuttleworth /1578035901/ http://flickr.com/photos/ joebeone /1764153258/ http://flickr.com/photos/ michaelcr /856252290/ http://flickr.com/photos/ scenicaviator /289331019/ http://flickr.com/photos/ 0olong /310216817/ http://flickr.com/photos/ thomashawk /2269208776/ http://flickr.com/photos/ briansolis /1411905457/
  • 89. Questions? peter.stahl [at] ebay.com josh.williams [at] hotstudio.com

Editor's Notes

  1. Welcome to our talk. Today we’re going to discuss how to evaluate the feel of a user interface using an interaction audit . (If this isn’t what you came for, now is your chance to find a different session.)