Responsive List Width for Portable Devices With Different Widths of Screen

Abstract

With the increasing use of large-screen portable devices and the prevalence of list-based user interfaces, it has become critically important to design list interfaces that are visually appealing and user-friendly across various devices and screen sizes. The rules for adapting list-based user interfaces on large screens warrant investigation. Thus, the present study aimed to determine the responsive list width that can enhance visual search efficiency and improve user experience on portable devices with different widths of screen. Two experiments were conducted, in which we manipulated the width of single-column and parent-child lists on portable devices with medium- (Experiment 1; N = 80) and large-width screens (Experiment 2; N = 41), varying the range of list width from very narrow to very wide. Results show that for the single-column lists on a medium-width screen, users demonstrated the highest level of preference and gave the highest ratings for satisfaction and visual aesthetics when the lists were moderately wide. For the single-column lists on a large-width screen, users preferred both the moderately-narrow and moderately-wide lists. However, for parent-child lists, the results show that both the moderately-wide and very-wide lists were favored on both the medium-width and large-width screens. These findings may be attributed to users’ preference for the appropriate white space on different screens, thereby providing useful guidelines for the responsive design of lists on portable devices.

Keywords

• Foldable mobile phone
• list width
• responsive UI design
• tablet
• user experience