Designing Touchscreen Menu Interfaces for In-Vehicle Infotainment Systems: the Effect of Depth and Breadth Trade-off and Task Types on Visual-Manual Distraction

TL;DR

This study examines how in-vehicle touchscreen menu depth and breadth interact with different secondary tasks to influence visual-manual distraction during driving. Using a driving simulator with eye-tracking, four layouts (1×8, 2×4, 4×2, 8×1) and three task types (Search, Systematic, Memorize) were tested on 28 participants, measuring task performance, driving telemetry, and gaze behavior. Memory tasks imposed the highest workload and disrupted driving control, while completion time and gaze metrics increased with menu depth, revealing task-dependent trade-offs: Systematic interaction shows a monotonic rise in visual demand with depth, whereas Search and Memorize exhibit optima at mid-range layouts favoring breadth. The results yield design guidance that emphasizes discrete navigation and layout choices tailored to the cognitive demands of the secondary task to minimize visual-manual distraction in safety-critical driving contexts.

Abstract

Multitasking with a touch screen user-interface while driving is known to impact negatively driving performance and safety. Literature shows that list scrolling interfaces generate more visual-manual distraction than structured menus and sequential navigation. Depth and breadth trade-offs for structured navigation have been studied. However, little is known on how secondary task characteristics interact with those trade-offs. In this study, we make the hypothesis that both menu's depth and task complexity interact in generating visual-manual distraction. Using a driving simulation setup, we collected telemetry and eye-tracking data to evaluate driving performance. Participants were multitasking with a mobile app, presenting a range of eight depth and breadth trade-offs under three types of secondary tasks, involving different cognitive operations (Systematic reading, Search for an item, Memorize items' state). The results confirm our hypothesis. Systematic interaction with menu items generated a visual demand that increased with menu's depth, while visual demand reach an optimum for Search and Memory tasks. We discuss implications for design: In a multitasking context, display design effectiveness must be assessed while considering menu's layout but also cognitive processes involved.

Figures (8)

• Figure 1: Experimental task (left) and set-up (right): In each of the three trials, participants were to follow the lead car while they interacted with a docked smartphone in the driving simulator.
• Figure 2: Schema describing the different layouts used in this experiment: For a constant menu length, higher breadth implies more items displayed on fewer screens, while higher depth implies fewer items displayed per screen but distributed across more screens.
• Figure 3: Representation of the three tasks used in this experiment under a one-page layout (see text for explanations).
• Figure 4: NASA-TLX rankings for the three tasks: The global workload estimation was higher for the Memory condition, while the two other tasks were much closer to each other. However, the weights of the Effort and Mental scales were stronger in Systematic than in Search, which in turns presented a higher weight for the Performance compoenent.
• Figure 5: Completion time increases gradually with the number of pages to navigate through. In the Memory condition, this pattern is less clear and participants took a much longer time to complete the task than in other conditions.