SlideShare uma empresa Scribd logo
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

Mais conteúdo relacionado

Destaque

Curtis Walters Esafety quiz1
Curtis Walters Esafety quiz1Curtis Walters Esafety quiz1
Curtis Walters Esafety quiz1
guest853750
 
Archive It Dlc Oct08
Archive It Dlc Oct08Archive It Dlc Oct08
Archive It Dlc Oct08
James Jacobs
 
Deber Fabricio V
Deber Fabricio VDeber Fabricio V
Deber Fabricio V
guesta1e0b
 
Trioterol
TrioterolTrioterol
Trioterol
aleegb
 
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
 
sam healey pp
sam healey ppsam healey pp
sam healey pp
guest3fe32
 
WhyNot05 Ciel & Pilar Habito
WhyNot05 Ciel & Pilar HabitoWhyNot05 Ciel & Pilar Habito
WhyNot05 Ciel & Pilar Habito
WhyNot 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 Halifax
cmspinto
 
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, Itziar
alkartukohf
 
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 Tail
ethansen
 
Whynot4 Gabe Mercado Jpg
Whynot4 Gabe Mercado JpgWhynot4 Gabe Mercado Jpg
Whynot4 Gabe Mercado Jpg
WhyNot Forum
 
lecture 4
lecture 4lecture 4
lecture 4
sajinsc
 
Dispositivos De Entrada
Dispositivos De EntradaDispositivos De Entrada
Dispositivos De Entrada
SoledadAguirre
 
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
 

Destaque (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
 

Semelhante a 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 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
 
AMIA Panel: Usability Enhancements
AMIA Panel: Usability EnhancementsAMIA Panel: Usability Enhancements
AMIA Panel: Usability Enhancements
Brian Turner
 
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
 

Semelhante a 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 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
 
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
 

Último

一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
21uul8se
 
一比一原版英国伦敦大学毕业证(London学位证)如何办理
一比一原版英国伦敦大学毕业证(London学位证)如何办理一比一原版英国伦敦大学毕业证(London学位证)如何办理
一比一原版英国伦敦大学毕业证(London学位证)如何办理
k4krdgxx
 
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
bz42w9z0
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
zv943dhb
 
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
twqryq79
 
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
batchelorerbm45967
 
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
02tygie
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
t34zod9l
 
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
ynrtjotp
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
qa8dk1wm
 
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
10h6bbc4
 
Plastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdfPlastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdf
RPWORLD Manufacturing
 
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
stgq9v39
 
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
w26izoeb
 
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
i990go7o
 

Último (20)

一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
 
一比一原版英国伦敦大学毕业证(London学位证)如何办理
一比一原版英国伦敦大学毕业证(London学位证)如何办理一比一原版英国伦敦大学毕业证(London学位证)如何办理
一比一原版英国伦敦大学毕业证(London学位证)如何办理
 
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
 
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
 
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
 
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
 
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
 
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
 
Plastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdfPlastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdf
 
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
 
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
 
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
 

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

Notas do Editor

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