Exploring an Effective Visual Cue Design

keywords: quantitative study, A/B testing, multivariate testing, web application, accessibility, aging and technology

Related publication: CHI 2024 [pdf]

The Problem

The previous study used simple red shapes that only considered the saliency of the visual cue.
The visual feedback should be carefully designed because there's a risk of reducing usability by overwhelming users with excessive highlights, especially on already-crowded screens.

We chose to explore the way that would be minimally disorienting to users by visually emphasizing the three relevant features right on the users’ current UI view.



Approach & Method

Candidate Designs

We reviewed similar designs in other HCI tasks and chose four visual cues after several iterations.



Multivariate Testing

To evaluate what type of visual cues would be helpful, and to test whether reducing the feature search space enhances older adults' efficiency and accuracy in mobile UI navigation, we conducted a controlled experiment with older and younger adults.
  • IV: Type of visual feedback
  • DV: Time, Task success, Error count, user satisfaction


Task Design
  1. The task description was first provided to the participant, along with a Start button.
  2. When the Start button clicked, the UI was rendered.
  3. Participants could click unlimited times at unlimited places on the UI image within 13 seconds.
  4. When participants clicked on a correct UI element, the experiment moved on to the next task.
  5. If not, the task would then reappear with some type of visual cue, randomly chosen from the four options.
  6. Participants could click unlimited times at unlimited places on the UI image.


  • 24 tasks were created using six feature-rich applications.
  • Participants were provided with an introductory video that explained the concept of each mobile app.
  • The experiment was performed online via a responsive web application.
  • Preference for the different types of visual feedback was collected after the study.




Experiment App Implementation

Implementation
  • Web interface: HTML, JavaScript, jQuery
  • Server: javaScript
  • Hosting: Amazon AWS


User Study & Data analysis

Participants
  • 28 older adults (60+) and 28 younger adults participated.
  • 23 used mobile devices and 33 used computers (No significant difference in efficiency and accuracy).
  • There were no significant differences in familiarity with apps used in the study between older adults and younger adults.


Study Objectives
  • To identify the type of visual cue that helps older adults the most in UI navigation.
  • To determine if reducing the search space helps older adults find mobile UI features quickly.

Hypotheses
  1. Older adults (OA) will be less efficient and less accurate in finding features than younger adults (YA).
  2. OA will be more efficient and more accurate in finding features with a reduced search space than without.
  3. There will be no large effect of age (OA vs. YA) on the efficiency and accuracy of finding features when using a reduced search space.

Data Analysis
  • R was used for the analysis.
  • Conducted a univariate outlier analysis.
  • A GLMM with standard repeated measures REML technique was used that handled participants as a random factor.
  • For GLMM,the R lme4 package was used.
  • The initial level of significance(𝛼) was set to.05.


Result Highlight

Highlighted with Context or Weighted Zoom is the best option.




  • Older users were more efficient when options were highlighted along with their context or with a weighted zoom than when just highlighted.
  • Participants also preferred these two the most.


All hypotheses were suported.




  • For the 3rd hypothesis, no significant difference in task completion time and error rate between OA and YA when the search space was reduced.
  • Equivalence test was found significant for completion time and error rate, based on equivalence bounds derived from the smallest effect size of interest.


Resources