Aliaksei Miniukovich

Computation of Interface Aesthetics

People prefer attractive interfaces. Designers strive to outmatch competitors, and create apps and websites that stand out. However, significant expenses on design are unaffordable to small companies; instead, they could adopt automatic tools of interface aesthetics evaluation, a cheaper strategy to good design. This paper describes an important step towards such a tool; it presents eight automatic metrics of graphical user interface (GUI) aesthetics. We tested the metrics in two exploratory studies -- on desktop webpages (N = 62) and on iPhone apps (N = 53) -- and found them to function on both GUI types and for both immediate (150ms exposure) and deliberate (4s exposure) aesthetics impressions. Our best-fit regression models explained up to 49% of variance in webpage aesthetics and up to 32% (if app genre is considered) of variance in iPhone app aesthetics. These results confirm past results and suggest the metrics are valid and reliable enough to be widely discussed, and possibly, to be embedded in our prospective GUI evaluation tool, tLight.

Quantification of interface visual complexity

Designers strive for enjoyable user experience (UX) and put a significant effort into making graphical user interfaces (GUI) both usable and beautiful. Our goal is to minimize their effort: with this purpose in mind, we have been studying automatic metrics of GUI qualities. These metrics could enable designers to iterate their designs more quickly. We started from the psychological findings that people tend to prefer simpler things. We then assumed visual complexity determinants also determine visual aesthetics and outlined eight of them as belonging to three dimensions: information amount (visual clutter and color variability), information organization (symmetry, grid, ease-of-grouping and prototypicality), and information discriminability (contour density and figure-ground contrast). We investigated five determinants (visual clutter, symmetry, contour density, figure-ground contrast and color variability) and proposed six associated automatic metrics. These metrics take screenshots of GUI as input and can thus be applied to any type of GUI. We validated the metrics through a user study: we gathered the ratings of immediate impressions of GUI visual complexity and aesthetics, and correlated them with the output of the metrics. The output explained up to 51% of aesthetics ratings and 50% of complexity ratings. This promising result could be further extended towards the creation of tLight, our automatic GUI evaluation tool.

Visual impressions of mobile app interfaces

First impressions are formed very fast but they last. Consecutive approach-avoidance behavior is formed almost instantly and persists over time. The effect of the first impression of graphical user interfaces (GUIs) of desktop webpages on subsequent evaluation is well documented in the literature. Less research has focused on mobile interfaces. To cover this gap, this paper reports two studies. The first study confirmed the persistence of first impressions on mobile interfaces evaluation, although it suggested that exposure time may be longer. The second study extends previous work on automatic evaluation from desktop to mobile interfaces. The linking theme between the studies is that of visual complexity, which is a more objective, yet powerful, predictor of aesthetic evaluation. Using six automatic metrics (color depth, dominant colors, visual clutter, symmetry, figure-ground contrast and edge congestion), in study 2 we explained 40% of variation in subjective complexity scores and 36% of variation in aesthetics scores.

Pick me!: Getting Noticed on Google Play

Almost any search on Google Play returns numerous app suggestions. The user quickly skims through the list and picks a few apps for a closer look. The vast majority of the apps regardless of how well-made they are go unnoticed. App icons uniquely represent each app in Google Play and help apps to get noticed, as we demonstrate in the paper. We reviewed the visual qualities of icons that could make them noticeable and likable. We then computationally measured two of the qualities visual saliency and complexity for 930 icons and linked the computed scores to app popularity (the number of app ratings and installs). The measures explained 38% of variance in the number of ratings, if app genre was accounted for. Not only does such result assert the link between icon properties and app popularity, it also highlights the automatic prediction of app popularity as a promising research direction. HCI researchers, app creators and Google Play (or another mobile marketplace) will benefit from the paper insights on what antecedes app success and how to measure the antecedents.

Visual diversity and user interface quality

Live graphical user interfaces (GUIs) do change responding to user actions, unlike GUI screenshots, which are often used in studies. The user experiences and is affected by transitions between the layouts (e.g., webpages or mobile app screens) of interactive systems. Such transitions affect the overall impression of system quality and should be accounted for by any model or computational method estimating the quality and claiming high ecological validity. However, the recent efforts aspiring to predict GUI quality computationally have only relied on homepages or home screens of apps, or their screenshots. The dynamics of GUI -- GUI change across pages and layouts, or shorter, visual diversity -- have been given little attention. Here we present an initial exploration of GUI visual diversity. In three studies, we demonstrate that a) GUI diversity can be measured computationally; b) GUI diversity correlates with GUI aesthetics impression and other, more high-level GUI-preference constructs; and c) GUI diversity matters in both website and mobile app contexts. We believe the concept of GUI visual diversity deserves further studies.

Design Guidelines for Web Readability

Reading is fundamental to interactive-system use, but around 800 million of people might struggle with it due to literacy difficulties. Few websites are designed for high readability, as readability remains an underinvestigated facet of User Experience. Existing readability guidelines have multiple issues: they are too many or too generic, poorly worded, and often lack cognitive grounding. This paper developed a set of 61 readability guidelines in a series of workshops with design and dyslexia experts. A user study with dyslexic and average readers further narrowed the 61-guideline set down to a core set of 12 guidelines -- an acceptably small set to keep in mind while designing. The core-set guidelines address reformatting -- such as using larger fonts and narrower content columns, or avoiding underlining and italics -- and may well aply to the interactive system other than websites.

Twitterradio: translating tweets into music

TwitterRadio is an interactive installation designed to explore the social world of Twitter through music. The idea behind this project is to access the musical domain to display information about the latest trends and news. The system automatically generates tonal compositions that are supposed to match the emotional contents of the tweets, as well as their frequency. TwitterRadio, being an audio-only interactive system, offers more passive enjoyment compared to traditional Interactivity demos. However, the interaction with TwitterRadio can span across a couple of levels, according to their involvement degree. Visitors can limit themselves to listening to the generated music and experience the tweets mood, or enter new hashtags.

Aalto Interface Metrics (AIM): A Service and Codebase for Computational GUI Evaluation

Aalto Interface Metrics (AIM) pools several empirically validated models and metrics of user perception and attention into an easy-to-use online service for the evaluation of graphical user interface (GUI) designs. Users input a GUI design via URL, and select from a list of 17 different metrics covering aspects ranging from visual clutter to visual learnability. AIM presents detailed breakdowns, visualizations, and statistical comparisons, enabling designers and practitioners to detect shortcomings and possible improvements. The web service and code repository are available at interfacemetrics.aalto.fi.

Visual complexity of graphical user interfaces

Graphical User Interfaces (GUIs) of low visual complexity tend to have higher aesthetics, usability and accessibility, and result in higher user satisfaction. Despite a few authors recently used or studied visual complexity, the concept of visual complexity still needs to be better defined for the use in HCI research and GUI design, with its underlying aspects systematized and operationalized, and different measures validated. This paper reviews the aspects of GUI visual complexity and operationalizes four aspects with nine computation-based measures in total. Two user studies validated the measures on two types of stimuli - webpages (study 1, n = 55) and book pages (study 2, n = 150) - with two user groups, dyslexics (people with reading difficulties) and typical readers. The same complexity aspects could be expected to determine complexity perception for both GUI types, whereas different complexity aspects could be expected to determine complexity perception for dyslexics, relative to typical readers. However, the studies showed little to no difference between dyslexics and average readers, whereas web pages did differ from book pages in what aspects made them seem complex. It was not the intergroup differences, but the stimulus type that defined criteria to judge visual complexity. Future research and visual design could rely on the visual complexity aspects outlined in this paper.

Webpage Aesthetics: One Size Doesn't Fit All

Webpages vary drastically in their look and feel: the presence of images is a major discriminating factor. Some webpages contain mainly text; others exploit flashy ads and a variety of eye-catching pictures. In this paper, we investigate the impact of graphics on webpage aesthetics perception and computation. We split webpages in three categories -- small, moderate and high amount of graphics -- and analyzed how different visual features predicted aesthetics for the different categories. Significant between-category differences were found, e.g., the amount of white space decreased aesthetics for the high-graphic webpages, but not for other webpages; more on-page main colors increased aesthetics for the low-graphic webpages, but decreased for the high-graphic webpages. We suggest future research investigates separately webpages with low and high graphic amount. No single improvement recipe may exist for all webpages; a more fruitful strategy would be suggesting different improvements for different types of webpages.