SlideShare a Scribd company logo
1 of 89
Peter Stahl Josh Damon Williams eBay Hot Studio   Checking the Feel  of your UI with an Interaction Audit
“ 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]
What’s in this for you ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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
 
 
 
 
 
 
 
 
[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)]
Affordance Task Data Object
[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! josh.williams [at] hotstudio.com hottub.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

Viewers also liked

Curtis Walters Esafety quiz1
Curtis Walters Esafety quiz1Curtis Walters Esafety quiz1
Curtis Walters Esafety quiz1guest853750
 
Archive It Dlc Oct08
Archive It Dlc Oct08Archive It Dlc Oct08
Archive It Dlc Oct08James Jacobs
 
Deber Fabricio V
Deber Fabricio VDeber Fabricio V
Deber Fabricio Vguesta1e0b
 
Trioterol
TrioterolTrioterol
Trioterolaleegb
 
Securing Buy-In For Affiliate Marketing Budget - Chris King/BT, Chris Bishop/...
Securing Buy-In For Affiliate Marketing Budget - Chris King/BT, Chris Bishop/...Securing Buy-In For Affiliate Marketing Budget - Chris King/BT, Chris Bishop/...
Securing Buy-In For Affiliate Marketing Budget - Chris King/BT, Chris Bishop/...auexpo Conference
 
WhyNot05 Ciel & Pilar Habito
WhyNot05 Ciel & Pilar HabitoWhyNot05 Ciel & Pilar Habito
WhyNot05 Ciel & Pilar HabitoWhyNot Forum
 
使用Nginx轻松实现开源负载均衡
使用Nginx轻松实现开源负载均衡使用Nginx轻松实现开源负载均衡
使用Nginx轻松实现开源负载均衡Cary Yang
 
31 E30 Eco System Concept Halifax
31 E30 Eco System Concept Halifax31 E30 Eco System Concept Halifax
31 E30 Eco System Concept Halifaxcmspinto
 
lekcia
lekcialekcia
lekciaokovru
 
4 B 0809 Gosaria Aitziber, Ane, Itziar
4 B 0809 Gosaria Aitziber, Ane, Itziar4 B 0809 Gosaria Aitziber, Ane, Itziar
4 B 0809 Gosaria Aitziber, Ane, Itziaralkartukohf
 
4 B 0809 Gosaria, Aitziber, Itziar, Ane
4 B 0809 Gosaria, Aitziber, Itziar, Ane4 B 0809 Gosaria, Aitziber, Itziar, Ane
4 B 0809 Gosaria, Aitziber, Itziar, Anealkartukohf
 
New Media & Social Technologies - 3 The Long Tail
New Media & Social Technologies - 3 The Long TailNew Media & Social Technologies - 3 The Long Tail
New Media & Social Technologies - 3 The Long Tailethansen
 
Whynot4 Gabe Mercado Jpg
Whynot4 Gabe Mercado JpgWhynot4 Gabe Mercado Jpg
Whynot4 Gabe Mercado JpgWhyNot Forum
 
lecture 4
lecture 4lecture 4
lecture 4sajinsc
 
Dispositivos De Entrada
Dispositivos De EntradaDispositivos De Entrada
Dispositivos De EntradaSoledadAguirre
 
4 A 0809 Gosaria Xabier, Andoni, Irene
4 A 0809 Gosaria Xabier, Andoni, Irene4 A 0809 Gosaria Xabier, Andoni, Irene
4 A 0809 Gosaria Xabier, Andoni, Irenealkartukohf
 
4 B 0809 Dutxa Aitzol Clara Aitor Calvo
4 B 0809 Dutxa Aitzol Clara Aitor Calvo4 B 0809 Dutxa Aitzol Clara Aitor Calvo
4 B 0809 Dutxa Aitzol Clara Aitor Calvoalkartukohf
 

Viewers also liked (18)

Curtis Walters Esafety quiz1
Curtis Walters Esafety quiz1Curtis Walters Esafety quiz1
Curtis Walters Esafety quiz1
 
Archive It Dlc Oct08
Archive It Dlc Oct08Archive It Dlc Oct08
Archive It Dlc Oct08
 
Deber Fabricio V
Deber Fabricio VDeber Fabricio V
Deber Fabricio V
 
Trioterol
TrioterolTrioterol
Trioterol
 
Securing Buy-In For Affiliate Marketing Budget - Chris King/BT, Chris Bishop/...
Securing Buy-In For Affiliate Marketing Budget - Chris King/BT, Chris Bishop/...Securing Buy-In For Affiliate Marketing Budget - Chris King/BT, Chris Bishop/...
Securing Buy-In For Affiliate Marketing Budget - Chris King/BT, Chris Bishop/...
 
sam healey pp
sam healey ppsam healey pp
sam healey pp
 
WhyNot05 Ciel & Pilar Habito
WhyNot05 Ciel & Pilar HabitoWhyNot05 Ciel & Pilar Habito
WhyNot05 Ciel & Pilar Habito
 
使用Nginx轻松实现开源负载均衡
使用Nginx轻松实现开源负载均衡使用Nginx轻松实现开源负载均衡
使用Nginx轻松实现开源负载均衡
 
31 E30 Eco System Concept Halifax
31 E30 Eco System Concept Halifax31 E30 Eco System Concept Halifax
31 E30 Eco System Concept Halifax
 
lekcia
lekcialekcia
lekcia
 
4 B 0809 Gosaria Aitziber, Ane, Itziar
4 B 0809 Gosaria Aitziber, Ane, Itziar4 B 0809 Gosaria Aitziber, Ane, Itziar
4 B 0809 Gosaria Aitziber, Ane, Itziar
 
4 B 0809 Gosaria, Aitziber, Itziar, Ane
4 B 0809 Gosaria, Aitziber, Itziar, Ane4 B 0809 Gosaria, Aitziber, Itziar, Ane
4 B 0809 Gosaria, Aitziber, Itziar, Ane
 
New Media & Social Technologies - 3 The Long Tail
New Media & Social Technologies - 3 The Long TailNew Media & Social Technologies - 3 The Long Tail
New Media & Social Technologies - 3 The Long Tail
 
Whynot4 Gabe Mercado Jpg
Whynot4 Gabe Mercado JpgWhynot4 Gabe Mercado Jpg
Whynot4 Gabe Mercado Jpg
 
lecture 4
lecture 4lecture 4
lecture 4
 
Dispositivos De Entrada
Dispositivos De EntradaDispositivos De Entrada
Dispositivos De Entrada
 
4 A 0809 Gosaria Xabier, Andoni, Irene
4 A 0809 Gosaria Xabier, Andoni, Irene4 A 0809 Gosaria Xabier, Andoni, Irene
4 A 0809 Gosaria Xabier, Andoni, Irene
 
4 B 0809 Dutxa Aitzol Clara Aitor Calvo
4 B 0809 Dutxa Aitzol Clara Aitor Calvo4 B 0809 Dutxa Aitzol Clara Aitor Calvo
4 B 0809 Dutxa Aitzol Clara Aitor Calvo
 

Similar to Interaction Audit Reveals How to Improve UI "Feel

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
 
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 Studioalbeaudin
 
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
 
AMIA Panel: Usability Enhancements
AMIA Panel: Usability EnhancementsAMIA Panel: Usability Enhancements
AMIA Panel: Usability EnhancementsBrian 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 ProfilesCTSI at UCSF
 
RDVO - Building UX Pattern Libraries
RDVO - Building UX Pattern LibrariesRDVO - Building UX Pattern Libraries
RDVO - Building UX Pattern LibrariesBen 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 WebsiteITDogadjaji.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
 
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
 
Application Design - Part 2
Application Design - Part 2Application Design - Part 2
Application Design - Part 2Kelley Howell
 
Systems Thinking - Shekman Tang
Systems Thinking - Shekman TangSystems Thinking - Shekman Tang
Systems Thinking - Shekman Tanguxbri
 
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
 
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
 
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 SullivanCraig Sullivan
 
eMetrics Stockholm 2009
eMetrics Stockholm 2009eMetrics Stockholm 2009
eMetrics Stockholm 2009Lars J
 

Similar to Interaction Audit Reveals How to Improve UI "Feel (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

Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
TYPES-OF-VOLCANOES-AND-VOLCANIC-ERUPTIOn
TYPES-OF-VOLCANOES-AND-VOLCANIC-ERUPTIOnTYPES-OF-VOLCANOES-AND-VOLCANIC-ERUPTIOn
TYPES-OF-VOLCANOES-AND-VOLCANIC-ERUPTIOnbeetchunknown
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic global solution
 
澳洲UQ学位证,昆士兰大学毕业证书1:1制作
澳洲UQ学位证,昆士兰大学毕业证书1:1制作澳洲UQ学位证,昆士兰大学毕业证书1:1制作
澳洲UQ学位证,昆士兰大学毕业证书1:1制作aecnsnzk
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道yrolcks
 
Pearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxPearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxDanielTamiru4
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Associazione Digital Days
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIyuj
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10uasjlagroup
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfShivakumar Viswanathan
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxmarckustrevion
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改yuu sss
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 

Recently uploaded (20)

Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
TYPES-OF-VOLCANOES-AND-VOLCANIC-ERUPTIOn
TYPES-OF-VOLCANOES-AND-VOLCANIC-ERUPTIOnTYPES-OF-VOLCANOES-AND-VOLCANIC-ERUPTIOn
TYPES-OF-VOLCANOES-AND-VOLCANIC-ERUPTIOn
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing services
 
澳洲UQ学位证,昆士兰大学毕业证书1:1制作
澳洲UQ学位证,昆士兰大学毕业证书1:1制作澳洲UQ学位证,昆士兰大学毕业证书1:1制作
澳洲UQ学位证,昆士兰大学毕业证书1:1制作
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
 
Pearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxPearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptx
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptx
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 

Interaction Audit Reveals How to Improve UI "Feel

  • 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 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.
  • 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
  • 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.
  • 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.
  • 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.
  • 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.
  • 71.  
  • 72.
  • 73. An eBay design pattern
  • 74.
  • 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.
  • 84.
  • 85.
  • 86.
  • 87. Thank you! josh.williams [at] hotstudio.com hottub.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.)