Justin Matejka
k j

The Effect of Visual Appearance on the Performance of Continuous Sliders and Visual Analogue Scales

Justin Matejka, Michael Glueck, Tovi Grossman, George Fitzmaurice
January 2016 · Proceedings of the 2016 CHI Conference on Human Factors in Computing Systems (CHI)

Abstract

Sliders and Visual Analogue Scales (VASs) are input mechanisms which allow users to specify a value within a predefined range. At a minimum, sliders and VASs typically consist of a line with the extreme values labeled. Additional decorations such as labels and tick marks can be added to give information about the gradations along the scale and allow for more precise and repeatable selections. There is a rich history of research about the effect of labelling in discrete scales (i.e., Likert scales), however the effect of decorations on continuous scales has not been rigorously explored. In this paper we perform a 2,000 user, 250,000 trial online experiment to study the effects of slider appearance, and find that decorations along the slider considerably bias the distribution of responses received. Using two separate experimental tasks, the trade-offs between bias, accuracy, and speed-of-use are explored and design recommendations for optimal slider implementations are proposed.

DOI PDF

Figures

Figure 1. Distribution of survey responses when asked to “rate the blackness” of 50 shades of grey, spread at perceptually equal distances between white and black. The only difference between the surveys is the visual presentation of the slider (on the left), shown with no tick marks, or 5 tick marks. Arrows on the x-axis of the graphs indicate the locations of the tick marks.
Figure 2. 50 shades of grey used for the perceptual judgment task of Study #1, selected at perceptually equal distances using the CIE L*a*b* colour system.
Figure 3. Response distributions for two representative shades of grey from a pilot study.
Figure 4. The two steps of a single trial.
Figure 5. Example low and high-bias rating distributions.
Figure 6. Slider conditions used to answer the question "Do Ticks Matter?"
Figure 7. Distribution of responses for the No Ticks and 5 Ticks conditions. The red line at ‘1x’ shows the expected number of results in each bucket of the histogram. The x- axis labels (and dashed lines) show the location of the tick marks displayed on the slider.
Figure 8. Mean bias scores for the No Ticks and 5 Ticks conditions. Error bars show 95% CIs.
Figure 9. Slider conditions used to investigate the effect on varying the number of ticks.
Figure 10. Distributions of responses for the various number-of-tick conditions.
Figure 11. Mean bias scores for varying number of tick marks. Error bars show 95% CIs.
Figure 12. Variations on the visual weight of tick marks.
Figure 13. Distributions of responses for the tested weight-of-tick conditions.
Figure 14. Mean bias scores for varying the weight of the tick marks. Error bars show 95% CIs.
Figure 15. Sliders used to test the effect of “major” and “minor” ticks on the same scale
Figure 16. Results for Major/Minor Tick Mark examples.
Figure 17. Mean bias results for the Major/Minor tick mark conditions.
Figure 18. Thumb slider styles used.
Figure 19. Mean bias scores for varying the shape of the thumb slider. Error bars show 95% CIs.
Figure 20. Sliders to test the effect of the combination of labels and ticks.
Figure 21. Results for ticks and/or labels.
Figure 22. Mean bias scores for ticks and/or labels.
Figure 23. Two variations of a “banded” slider.
Figure 24. Results for banded slider variations.
Figure 25. Mean bias scores for the banded and banded (hollow) conditions. No Ticks and 11 Ticks are included for comparison. Error bars show 95% CIs.
Figure 26. Dynamically labelled slider design.
Figure 27. Distribution of results for the dynamic slider.
Figure 28. Bias comparison between Dynamic and No Ticks.
Figure 29. Slider designs tested in the second set of objective precision experiments.
Figure 30. “Error maps” for the 5 Labels and 11 Ticks conditions from the second set of experiments.
Figure 31. Speed vs. Precision results from the second set of experiments. Error bars show the 95% CIs for completion time vertically, and for mean absolute error horizontally. (Note: horizontal error bars on the most precise conditions are too short to extend beyond the bounds of their mark.)
Figure 32. Bias vs. Precision results. Bias is measured using the perceptual judgement greyscale task, while precision (and speed) are measured using the objective percentage finding task. The best combination of properties is “High Precision” and “Low Bias”, in the lower left hand corner.

BibTeX

@inproceedings{10.1145/2858036.2858063,
 abstract = {Sliders and Visual Analogue Scales (VASs) are input mechanisms which allow users to specify a value within a predefined range. At a minimum, sliders and VASs typically consist of a line with the extreme values labeled. Additional decorations such as labels and tick marks can be added to give information about the gradations along the scale and allow for more precise and repeatable selections. There is a rich history of research about the effect of labelling in discrete scales (i.e., Likert scales), however the effect of decorations on continuous scales has not been rigorously explored. In this paper we perform a 2,000 user, 250,000 trial online experiment to study the effects of slider appearance, and find that decorations along the slider considerably bias the distribution of responses received. Using two separate experimental tasks, the trade-offs between bias, accuracy, and speed-of-use are explored and design recommendations for optimal slider implementations are proposed.},
 address = {New York, NY, USA},
 author = {Matejka, Justin and Glueck, Michael and Grossman, Tovi and Fitzmaurice, George},
 booktitle = {Proceedings of the 2016 CHI Conference on Human Factors in Computing Systems},
 doi = {10.1145/2858036.2858063},
 isbn = {9781450333627},
 keywords = {visual analogue scales, slider, crowdsourced study, tick marks},
 location = {San Jose, California, USA},
 numpages = {12},
 pages = {5421–5432},
 publisher = {Association for Computing Machinery},
 series = {CHI '16},
 title = {The Effect of Visual Appearance on the Performance of Continuous Sliders and Visual Analogue Scales},
 url = {https://doi.org/10.1145/2858036.2858063},
 year = {2016}
}