Do larger and brighter elements capture our attention? The first empirical study on how users pay visual attention to mobile app designs shows that larger and brighter elements do not catch our eyes as expected.
We tend to believe that larger and brighter things attract visual attention to screens. But this is not necessarily true about mobile applications. A research performed by Aalto University as part of an International Collaboration conducted an empirical study on how user’s eyes follow commonly used mobile app elements. Mobile phones and tablets are widely used nowadays. Earlier research on what attracts visual attention, or visual saliency was regarding desktop and web interfaces.
The correlation between mobile app elements and human eyes is being studied in the work by Aalto University. ‘Apps appear differently on a phone than on a desktop computer or browser: they’re on a smaller screen which simply fits fewer elements and, instead of a horizontal view, mobile devices typically use a vertical layout. Until now it was unclear how these features would affect how apps actually attract our eyes’, explains Aalto University professor Antti Oulasvirta.
The study made use of a large set of representative mobile interfaces and eye tracking to see how users look at screenshots of mobile apps, for both Android and Apple iOS devices. Previous studies asserted that our eyes jump to bigger or brighter elements and stay there longer. It was also concluded that when we look at certain kinds of images, our attention is drawn to the center of screen and also spread horizontally across the screen, rather than vertically. But this is found to be less applicable on mobile interfaces.
Lead author and post-doctoral Researcher Luis Leiva suggests that one possible reason for why bright colors didn’t affect how people fixate on app details is that the mobile interface is full of glossy and colorful elements. ‘So everything on the screen can potentially catch your attention, it’s just how they are designed. It seems that when everything is made to stand out, nothing pops out in the end’, says Leiva.
Some other design principles are predominant for mobile apps. Gaze, for instance, drifts to the top left corner indicating exploration or scanning. Text is important as it relays information. Users prefer to focus on text elements of a mobile app as parts of icons, labels and logos. More frequent attention was given to image elements meanwhile the average length of time spent on images was similar to other app elements. Though people notice faces, when they are accompanied by text, eyes give more attention to the location of text.
Design composition is really important for the interfaces. ‘Various factors influence where our visual attention goes. For photos, these factors include color, edges, texture and motion. But when it comes to generated visual content, such as graphical user interfaces, design composition is a critical factor to consider’, says Dr. Hamed Tavakoli, a member of the Aalto University research team.
The study was collaborated internationally with IIT Goa (India), Yildiz Technical University (Turkey) and Huawei Technologies (China). The team also presented the findings at Mobile HCI’20, the flagship conference on Human-Computer Interaction with mobile devices and services, held on 6th October 2020.