Checking the "Feel" of your UI with an Interaction Audit
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 8,346 views

 

Statistics

Views

Total Views
8,346
Slideshare-icon Views on SlideShare
8,171
Embed Views
175

Actions

Likes
23
Downloads
183
Comments
2

8 Embeds 175

http://www.iasummit.org 109
http://www.hotstudio.com 37
http://hottub.hotstudio.com 21
http://www.techgig.com 4
http://static.slideshare.net 1
http://www.slideshare.net 1
http://safe.tumblr.com 1
http://hot.thrillabyte.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Nice Presentation :)
    Are you sure you want to
    Your message goes here
    Processing…
  • Any chance of syncing up this presentation with the audio that Jeff Parks collected here: http://www.boxesandarrows.com/view/ia-summit-2008-day-3
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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.)

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

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