SlideShare a Scribd company logo
1 of 87
Peter Stahl Josh Damon Williams eBay Hot Studio   Checking the Feel  of your UI with an Interaction Audit
What’s in this for you ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
“ Who are these guys?” ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Interaction Audit team ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Part 1 Why audit interactions?
Look & Feel
Look &  Feel
silk
water
 
 
 
 
 
[photo of mouse and/or trackpad and/or Wacom tablet ] Feel: How you operate it with your hands
 
 
 
 
 
 
 
 
[object Object]
[object Object],[object Object]
 
[object Object],[object Object]
Feel affects: ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
eBay Site Experience: a Holistic View
Feel
Part 2 What we did
Project phases ,[object Object],[object Object],[object Object],[object Object]
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) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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)]
[object Object],[object Object],[object Object],[object Object]
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
[object Object],[object Object],[object Object],[object Object]
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
[object Object],[object Object],[object Object],[object Object]
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 ,[object Object],[object Object],[object Object],[object Object],[object Object]
 
Clean-up teams ,[object Object],[object Object],[object Object],[object Object],[object Object]
An eBay design pattern
Clean-up process ,[object Object],[object Object],[object Object],[object Object],[object Object]
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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Feel metrics: semi-objective ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Feel metrics: subjective ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
What we’ve learned ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Thank you!
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

More Related Content

What's hot

Mapping Human-Centric Product Vision (ProductCamp Boston 2016)
Mapping Human-Centric Product Vision (ProductCamp Boston 2016)Mapping Human-Centric Product Vision (ProductCamp Boston 2016)
Mapping Human-Centric Product Vision (ProductCamp Boston 2016)ProductCamp Boston
 
How to make on line forms beautiful
How to make on line forms beautifulHow to make on line forms beautiful
How to make on line forms beautifulUser Vision
 
[Webinar] The growth playbook from $0 to $1 billion - with Mike Volpe
[Webinar] The growth playbook from $0 to $1 billion - with Mike Volpe[Webinar] The growth playbook from $0 to $1 billion - with Mike Volpe
[Webinar] The growth playbook from $0 to $1 billion - with Mike VolpeUserTesting
 
Top 10 tips for maximising accessibility - breakfast briefing March 2016
Top 10 tips for maximising accessibility - breakfast briefing March 2016Top 10 tips for maximising accessibility - breakfast briefing March 2016
Top 10 tips for maximising accessibility - breakfast briefing March 2016User Vision
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentationaayush_jain_87
 
It starts with 'product vision'
It starts with 'product vision'It starts with 'product vision'
It starts with 'product vision'Tarun Singh
 
UX and UI Workshops - User Journey
UX and UI Workshops - User JourneyUX and UI Workshops - User Journey
UX and UI Workshops - User JourneyInwedo
 
Rapid prototyping and how to avoid building a product nobody wants
Rapid prototyping and how to avoid building a product nobody wantsRapid prototyping and how to avoid building a product nobody wants
Rapid prototyping and how to avoid building a product nobody wantsMike Parsons
 
Experience is the new differentiator
Experience is the new differentiatorExperience is the new differentiator
Experience is the new differentiatoraFrogleap
 
How To Build A Mobile App - From Ideation to Launch
How To Build A Mobile App - From Ideation to LaunchHow To Build A Mobile App - From Ideation to Launch
How To Build A Mobile App - From Ideation to LaunchCarlos S. Aquino
 
Usability...Or Strategic User Experience?
Usability...Or Strategic User Experience?Usability...Or Strategic User Experience?
Usability...Or Strategic User Experience?Paul Sherman
 
UX playbook: Real world user exercises
UX playbook: Real world user exercisesUX playbook: Real world user exercises
UX playbook: Real world user exercisesInVision App
 
Selling Usability Into Organizations
Selling Usability Into OrganizationsSelling Usability Into Organizations
Selling Usability Into OrganizationsDaniel Szuc
 
Usability audit
Usability auditUsability audit
Usability auditIdeacto
 
Roadmapping the Product Roadmap (ProductCamp Boston 2016)
Roadmapping the Product Roadmap (ProductCamp Boston 2016)Roadmapping the Product Roadmap (ProductCamp Boston 2016)
Roadmapping the Product Roadmap (ProductCamp Boston 2016)ProductCamp Boston
 
Hamburg Product Tank - Using data to inform product decisions (16.5.14)
Hamburg Product Tank  - Using data to inform product decisions (16.5.14)Hamburg Product Tank  - Using data to inform product decisions (16.5.14)
Hamburg Product Tank - Using data to inform product decisions (16.5.14)Marc Abraham
 
Continuous Design and Delivery
Continuous Design and Delivery Continuous Design and Delivery
Continuous Design and Delivery Thoughtworks
 
Leave The Fluff Behind - How to Make Developers Love Your Marketing
 Leave The Fluff Behind - How to Make Developers Love Your Marketing Leave The Fluff Behind - How to Make Developers Love Your Marketing
Leave The Fluff Behind - How to Make Developers Love Your MarketingKushlani De Silva
 

What's hot (20)

Mapping Human-Centric Product Vision (ProductCamp Boston 2016)
Mapping Human-Centric Product Vision (ProductCamp Boston 2016)Mapping Human-Centric Product Vision (ProductCamp Boston 2016)
Mapping Human-Centric Product Vision (ProductCamp Boston 2016)
 
How to make on line forms beautiful
How to make on line forms beautifulHow to make on line forms beautiful
How to make on line forms beautiful
 
[Webinar] The growth playbook from $0 to $1 billion - with Mike Volpe
[Webinar] The growth playbook from $0 to $1 billion - with Mike Volpe[Webinar] The growth playbook from $0 to $1 billion - with Mike Volpe
[Webinar] The growth playbook from $0 to $1 billion - with Mike Volpe
 
Top 10 tips for maximising accessibility - breakfast briefing March 2016
Top 10 tips for maximising accessibility - breakfast briefing March 2016Top 10 tips for maximising accessibility - breakfast briefing March 2016
Top 10 tips for maximising accessibility - breakfast briefing March 2016
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentation
 
It starts with 'product vision'
It starts with 'product vision'It starts with 'product vision'
It starts with 'product vision'
 
UX and UI Workshops - User Journey
UX and UI Workshops - User JourneyUX and UI Workshops - User Journey
UX and UI Workshops - User Journey
 
Rapid prototyping and how to avoid building a product nobody wants
Rapid prototyping and how to avoid building a product nobody wantsRapid prototyping and how to avoid building a product nobody wants
Rapid prototyping and how to avoid building a product nobody wants
 
Experience is the new differentiator
Experience is the new differentiatorExperience is the new differentiator
Experience is the new differentiator
 
Mvp tools
Mvp toolsMvp tools
Mvp tools
 
How To Build A Mobile App - From Ideation to Launch
How To Build A Mobile App - From Ideation to LaunchHow To Build A Mobile App - From Ideation to Launch
How To Build A Mobile App - From Ideation to Launch
 
Usability...Or Strategic User Experience?
Usability...Or Strategic User Experience?Usability...Or Strategic User Experience?
Usability...Or Strategic User Experience?
 
UX playbook: Real world user exercises
UX playbook: Real world user exercisesUX playbook: Real world user exercises
UX playbook: Real world user exercises
 
Selling Usability Into Organizations
Selling Usability Into OrganizationsSelling Usability Into Organizations
Selling Usability Into Organizations
 
Usability audit
Usability auditUsability audit
Usability audit
 
Roadmapping the Product Roadmap (ProductCamp Boston 2016)
Roadmapping the Product Roadmap (ProductCamp Boston 2016)Roadmapping the Product Roadmap (ProductCamp Boston 2016)
Roadmapping the Product Roadmap (ProductCamp Boston 2016)
 
Hamburg Product Tank - Using data to inform product decisions (16.5.14)
Hamburg Product Tank  - Using data to inform product decisions (16.5.14)Hamburg Product Tank  - Using data to inform product decisions (16.5.14)
Hamburg Product Tank - Using data to inform product decisions (16.5.14)
 
Continuous Design and Delivery
Continuous Design and Delivery Continuous Design and Delivery
Continuous Design and Delivery
 
Best practices for UI/UX in eCommerce
Best practices for UI/UX in eCommerceBest practices for UI/UX in eCommerce
Best practices for UI/UX in eCommerce
 
Leave The Fluff Behind - How to Make Developers Love Your Marketing
 Leave The Fluff Behind - How to Make Developers Love Your Marketing Leave The Fluff Behind - How to Make Developers Love Your Marketing
Leave The Fluff Behind - How to Make Developers Love Your Marketing
 

Viewers also liked

UX - A Checklist for Real Websites
UX - A Checklist for Real WebsitesUX - A Checklist for Real Websites
UX - A Checklist for Real WebsitesSonja Leix
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!Jayan Narayanan
 
Making Happy Users: The Science Behind Great User Experiences
Making Happy Users: The Science Behind Great User ExperiencesMaking Happy Users: The Science Behind Great User Experiences
Making Happy Users: The Science Behind Great User ExperiencesHilary Little
 
Good user interface principles
Good user interface principlesGood user interface principles
Good user interface principlesAryan Rathore
 
BSC CSIT Final Year Internship Experience Report on SEO
BSC CSIT Final Year Internship Experience Report on SEOBSC CSIT Final Year Internship Experience Report on SEO
BSC CSIT Final Year Internship Experience Report on SEOSirish Paudel
 
Ux design vs ui design
Ux design vs ui designUx design vs ui design
Ux design vs ui designOodlesstudio
 
Re:ゼロから始めるUI/UX生活
Re:ゼロから始めるUI/UX生活Re:ゼロから始めるUI/UX生活
Re:ゼロから始めるUI/UX生活Hiroaki Sano
 
User Experience Trends in Banking
User Experience Trends in BankingUser Experience Trends in Banking
User Experience Trends in BankingBackbase
 
Putting the "User" back in User Experience
Putting the "User" back in User ExperiencePutting the "User" back in User Experience
Putting the "User" back in User ExperienceJeremy Johnson
 
Visualising the User Experience
Visualising the User ExperienceVisualising the User Experience
Visualising the User ExperienceGrant Robinson
 
GE User Experience Playbook
GE User Experience PlaybookGE User Experience Playbook
GE User Experience PlaybookMelinda Belcher
 
Designing A Great User Experience
Designing A Great User ExperienceDesigning A Great User Experience
Designing A Great User ExperienceSteve Hickey
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignKoombea
 
User experience doesn't happen on a screen: It happens in the mind.
User experience doesn't happen on a screen: It happens in the mind.User experience doesn't happen on a screen: It happens in the mind.
User experience doesn't happen on a screen: It happens in the mind.John Whalen
 

Viewers also liked (17)

UX - A Checklist for Real Websites
UX - A Checklist for Real WebsitesUX - A Checklist for Real Websites
UX - A Checklist for Real Websites
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
Making Happy Users: The Science Behind Great User Experiences
Making Happy Users: The Science Behind Great User ExperiencesMaking Happy Users: The Science Behind Great User Experiences
Making Happy Users: The Science Behind Great User Experiences
 
Good user interface principles
Good user interface principlesGood user interface principles
Good user interface principles
 
BSC CSIT Final Year Internship Experience Report on SEO
BSC CSIT Final Year Internship Experience Report on SEOBSC CSIT Final Year Internship Experience Report on SEO
BSC CSIT Final Year Internship Experience Report on SEO
 
Ux design vs ui design
Ux design vs ui designUx design vs ui design
Ux design vs ui design
 
User interface design
User interface designUser interface design
User interface design
 
Re:ゼロから始めるUI/UX生活
Re:ゼロから始めるUI/UX生活Re:ゼロから始めるUI/UX生活
Re:ゼロから始めるUI/UX生活
 
DIY UX Audit
DIY UX AuditDIY UX Audit
DIY UX Audit
 
Audit Report
Audit ReportAudit Report
Audit Report
 
User Experience Trends in Banking
User Experience Trends in BankingUser Experience Trends in Banking
User Experience Trends in Banking
 
Putting the "User" back in User Experience
Putting the "User" back in User ExperiencePutting the "User" back in User Experience
Putting the "User" back in User Experience
 
Visualising the User Experience
Visualising the User ExperienceVisualising the User Experience
Visualising the User Experience
 
GE User Experience Playbook
GE User Experience PlaybookGE User Experience Playbook
GE User Experience Playbook
 
Designing A Great User Experience
Designing A Great User ExperienceDesigning A Great User Experience
Designing A Great User Experience
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
User experience doesn't happen on a screen: It happens in the mind.
User experience doesn't happen on a screen: It happens in the mind.User experience doesn't happen on a screen: It happens in the mind.
User experience doesn't happen on a screen: It happens in the mind.
 

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 Auditjoshdamon
 
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 AuditPeter Stahl
 
Web Marketing Week4
Web Marketing Week4Web Marketing Week4
Web Marketing Week4cghb1210
 
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 AwesomerJennifer Riehle McFarland
 
Writing Studio
Writing StudioWriting Studio
Writing Studioalbeaudin
 
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
 
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 ProfilesCTSI at UCSF
 
AMIA Panel: Usability Enhancements
AMIA Panel: Usability EnhancementsAMIA Panel: Usability Enhancements
AMIA Panel: Usability EnhancementsBrian Turner
 
"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
 
SIMS Quantitative Course Lecture 1
SIMS Quantitative Course Lecture 1SIMS Quantitative Course Lecture 1
SIMS Quantitative Course Lecture 1Rashmi Sinha
 
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 WebsiteITDogadjaji.com
 
Application Design - Part 2
Application Design - Part 2Application Design - Part 2
Application Design - Part 2Kelley Howell
 
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 Feeljpberetz
 
RDVO - Building UX Pattern Libraries
RDVO - Building UX Pattern LibrariesRDVO - Building UX Pattern Libraries
RDVO - Building UX Pattern LibrariesBen Zipkin
 
Systems Thinking - Shekman Tang
Systems Thinking - Shekman TangSystems Thinking - Shekman Tang
Systems Thinking - Shekman Tanguxbri
 
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 - CuevaAmy Cueva
 
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 2011Leigh Durst
 

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
 
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
 
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
 
Writing Studio
Writing StudioWriting Studio
Writing Studio
 
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)
 
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
 
AMIA Panel: Usability Enhancements
AMIA Panel: Usability EnhancementsAMIA Panel: Usability Enhancements
AMIA Panel: Usability Enhancements
 
"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...
 
SIMS Quantitative Course Lecture 1
SIMS Quantitative Course Lecture 1SIMS Quantitative Course Lecture 1
SIMS Quantitative Course Lecture 1
 
Beginners QA Testing
Beginners QA TestingBeginners QA Testing
Beginners QA Testing
 
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
 
Application Design - Part 2
Application Design - Part 2Application Design - Part 2
Application Design - Part 2
 
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
 
RDVO - Building UX Pattern Libraries
RDVO - Building UX Pattern LibrariesRDVO - Building UX Pattern Libraries
RDVO - Building UX Pattern Libraries
 
Systems Thinking - Shekman Tang
Systems Thinking - Shekman TangSystems Thinking - Shekman Tang
Systems Thinking - Shekman Tang
 
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
 
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
 

Recently uploaded

Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Skynet Technologies
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxCyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxMasterG
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Hiroshi SHIBATA
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGDSC PJATK
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...marcuskenyatta275
 
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 2024Patrick Viafore
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsLeah Henrickson
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Paige Cruz
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?Mark Billinghurst
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctBrainSell Technologies
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingScyllaDB
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityVictorSzoltysek
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxFIDO Alliance
 
Vector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxVector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxjbellis
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireExakis Nelite
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform EngineeringMarcus Vechiato
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!Memoori
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfalexjohnson7307
 

Recently uploaded (20)

Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxCyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
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
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
Vector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxVector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptx
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 

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.
  • 3.
  • 4.
  • 5. Part 1 Why audit interactions?
  • 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.
  • 25.
  • 26.  
  • 27.
  • 28.
  • 29. eBay Site Experience: a Holistic View
  • 30. Feel
  • 31. Part 2 What we did
  • 32.
  • 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.
  • 44. Project phase 3: ANALYSIS
  • 46. Scrolls unrolled Flows as storyboards
  • 48. Radial charts to track Feel metrics
  • 49. Emotional flow to track Feel effects
  • 51. Project phase 4: RECOMMENDATIONS
  • 52. [DOCUMENT FORMAT SLIDE (FROM MY NOTEBOOK)]
  • 53.
  • 54. Affordance Inconsistencies: Hyperlink User action… System response… Affordance Inconsistencies: Hyperlink Loads new page Clicks link… Immediate in-line response Clicks link…
  • 55. Affordance Inconsistencies: Hyperlink User action… System response… Opens modal dialog box Clicks link… Expands/collapses in-line page content Affordance Inconsistencies: Hyperlink Clicks link…
  • 56. 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…
  • 57. Affordance Inconsistencies: Hyperlink Clicks link… Closes a popup layer Clicks link… Adds assistance frame to window User action… System response… Affordance Inconsistencies: Hyperlink
  • 58. Affordance Inconsistencies: Tab Affordance Inconsistencies: Tab
  • 59.
  • 60. Task Inconsistencies: Filtering Data 1. Submit a form 2. Click tabs 3. Click criteria links 4. Click “toggle” link Task Inconsistencies: Filtering Data
  • 61. 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
  • 62.
  • 63. Data Object Inconsistencies: Members CAPTURES Data Object Inconsistencies: eBay Member
  • 64. Data Object Inconsistencies: Members Data Object Inconsistencies: eBay Member
  • 66. Part 3 Actions & Future Directions
  • 67. A page from the Interaction Audit
  • 68.
  • 69.  
  • 70.
  • 71. An eBay design pattern
  • 72.
  • 73. What about interaction inconsistencies without obvious solutions? Example: Customize page layout
  • 74. 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
  • 75. Basic requirements: restaurant Basic requirements: - Clean dishes & utensils - Courteous staff - Accurate check tabulation - No cockroaches
  • 76. 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
  • 77. Basic requirements: interaction design Basic requirements: - Navigable interface - Orientation cues - Consistent basic interactions - No cockroaches
  • 78. 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
  • 79. Values can vary depending on the conversation
  • 81.
  • 82.
  • 83.
  • 84.
  • 86. 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/

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.)