An Eye-tracking Study of Mobile User Interfaces
No Thumbnail Available
URL
Journal Title
Journal ISSN
Volume Title
Sähkötekniikan korkeakoulu |
Master's thesis
Authors
Date
2020-01-20
Department
Major/Subject
Communications Engineering
Mcode
ELEC3029
Degree programme
CCIS - Master’s Programme in Computer, Communication and Information Sciences (TS2013)
Language
en
Pages
83+16
Series
Abstract
Mobile user interface design has become so important that it influences the user experience when interacting with mobile technology. It is of high research value to investigate about human visual perception with mobile user interface. While there are related researches with natural image or web interfaces, seldom has empirical research been focused on mobile user interfaces. Meanwhile, existing research tend to adopt image-based methods by analysing in pixel level. This thesis takes a special look at element level features, investigates their effects. Three perspectives were investigated through a controlled eye-tracking study with 30 participants: visual search(84 UIs and 770+ UI elements), visual saliency (193 UIs) and visual aesthetic (125 UIs). For visual saliency, strong top-left concentration of fixation and P-shaped pattern was found evident. The distribution of first three fixations was found to be in line with web interfaces. No central bias, horizontal bias or F-bias was suggested by the result. Evidence for face bias and a text-over-face phenomenon was found. Strong semantic bias toward image and textual elements was evident, and features such as element area proportion and element color contrast ratio were found to be of positive relation with saliency. For visual search, three echelons of element types were found in terms of search speed. With element types "Dialog-box" and "View" being the easiest ones to search for, "Card" being moderate and "Input", "list-item", "Icon" are the relatively hard ones. Element area proportion and color contrast ratio were found to have strong and weak positive relation with search speed. The result indicated they have influence on both top-down and bottom-up visual activation. Besides, searching strategies for grid layout and list layout were identified by analyzing user's searching gaze path. For visual aesthetic, empirical analysis were made to justify the survey result. Metrics of information amount and information arrangement were proposed. Correlation test suggested number of elements and number of colors had strong negative with visual aesthetic and visual complexity judgement. The study also contributes to a rich annotated data set of mobile user interfaces with high-fidelity eye-tracking data.Description
Supervisor
Oulasvirta, AnttiThesis advisor
Dayama, NirajKeywords
visual saliency, visual search, visual aesthetic, user interface design