Notes on Form Usability: 5 Requirements for Slider Interfaces

From a 09/15/15 post by Christian Holst at baymard.com, link here. 

Holst tested 18 major e-commerce sites for a study on filtering and found sliders were problematic

• Dual-point (i.e. max and min) sliders for price and budget were misunderstood by more than half of users and provoked numerous other interaction issues
• Most slider handles are overly sensitive which makes it hard to hit the value correctly
• Only 15% of the top 50 e-commerce sites use sliders

5 Implementation Details

1. Linear budget sliders use 50% of the width to control just 5-10% of products
   1. Sliders are extremely sensitive when users are trying to set common values
   2. 83% of the top 50 e-commerce sites that have sliders had this problem
   3. Read the post for some technical implementation strategies to overcome this problem—it’s too complex to paraphrase!
2. Handle Design Affordances
   1. More than 50% of users misunderstood how dual-point (i.e. max and min) sliders work
   2. Affordances such as arrows pointing in opposite directions can help fix this
3. Interpreting Mouse Clicks
   1. For single point sliders, users commonly click at a certain point–the handle should jump there
   2. This should be disabled for double point sliders–users misinterpret it and we can’t accurately predicts which value the user wants to set. Give the user an instructional tip instead about dragging the handles
4. Text Field Fallback
   1. Sliders controlling numeric filtering values such as price should also have text input fields for alternative use–some users prefer bringing up the keyboard and typing to using sliders, esp when defining precise values
5. Live Update Results
   1. Pair sliders with a live-update results visual representation, easier to use and encourages exploration. But keep in mind low latency is essential, less than 500ms

Christian Holst is co-founder of Baymard Institute where he writes bi-weekly articles on web usability and e-commerce optimization. He’s also the author of the E-Commerce Checkout Usability and Mobile E-Commerce Usability research reports. (via smashing magazine.com)

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.