Razvoj modela za samodejno določanje in prilagoditev barv uporabniškega vmesnika

Weingerl, Primož (author), Javoršek, Dejana (mentor)

Barva igra pomembno vlogo pri vizualni podobi uporabniškega vmesnika in ima velik vpliv na uporabniško izkušnjo. Za dosego privlačnih in uporabniku prijaznih uporabniških vmesnikov je priporočeno, da so barve njihovih elementov v skladju z uporabljenimi slikami. Slednje predstavlja velik izziv, saj so slike pogosto barvno raznolike, hkrati pa jih lahko spreminjajo uredniki oz. avtorji, ki nimajo oblikovalskega znanja. Zato smo v okviru pričujoče doktorske disertacije izdelali model, ki na podlagi slike samodejno določi in prilagodi barve uporabniškega vmesnika. Pri določitvi barv izhaja model iz najbolj izstopajočih barv slike – barve, ki so na sliki najbolj opazne, pri izračunu barv pa upošteva tako estetski vidik (barvna harmonija, skladnost) kakor tudi vidik uporabnosti (kontrast med barvami, raznolikost barv, namembnost barv, moč barv). Za dosego omenjenih lastnosti model vključuje novo metodo za ekstrahiranje barv s slike in nov model za določitev barvne teme uporabniškega vmesnika. Izdelan model smo implementirali znotraj spletne aplikacije katere vizualno podobo so ovrednotili uporabniki. Po njihovem mnenju izdelan model samodejno določi barve, ki so skladne s prikazano sliko, estetske oz. privlačne, harmonične in uporabne (opazne, kontrastne in čitljive). Pomembna je tudi ugotovitev, da lahko barvno harmonijo dosežemo zgolj z uporabo izstopajočih barv slike, brez upoštevanja razmerij barvnih tonov, kar nakazuje, da je zaznana barvna harmonija odvisna tudi od konteksta uporabe barv. Izdelan model ima številne aplikativne možnosti in je lahko uporabljen znotraj različnih orodij, npr. za samodejno določitev statične barvne teme spletnega mesta glede na poljubno izbrano sliko (npr. logotip ali sliko produkta) ali pa za samodejno dinamično določitev barv elementov glede na osrednjo oz. aktivno sliko – sliko, ki je vidna istočasno z elementi.

• Language: Slovenian
• Keywords: uporabniški vmesnik, uporabniška izkušnja, barvna tema, ekstrahiranje barv iz slike, barvna harmonija, zaznava izstopajočih barv, CAM02-UCS, CIECAM02
• Work type: Doctoral dissertation
• Organization: NTF - Faculty of Natural Sciences and Engineering
• Year: 2022
• PID: 20.500.12556/RUL-137981
• Publication date in RUL: 07.07.2022

Secondary language

• Language: English
• Title: Developing a model for automatic adjustment and selection of user interface colors

Abstract

Color plays an important role in the design of user interfaces and has a major impact on user experience. To create aesthetic and user-friendly interfaces, it is necessary that the colors of the user interface are coherent with the images. The latter can be hard to achieve since the images are often color diverse and frequently changed by editors or authors who do not have sufficient design skills or knowledge. In order to solve this problem, we have developed a model that automatically selects and adjusts user interface colors based on the most prominent colors of the image – the colors that are most noticeable in the image. For that purpose, the model includes a new method for extracting colors from the image and a new model for creating color themes for the user interface. The model for generating color themes considers both the aesthetic (color harmony, coherence with images) and the usability (color contrast, color diversity, color strength) aspects. In addition, the model can be adjusted to fit the user's needs and demands. To test and evaluate the model, we implemented it inside a web-based application where colors were automatically selected based on the main image of the page. The evaluation of the model was conducted by the users who are mainly professional designers. According to their opinion, the model automatically selects the colors that are coherent with the image, aesthetic (attractive and harmonious), and usable (prominent, contrastive, and legible). An important observation was also that color harmony can be achieved solely by using the most prominent colors of the image (regardless of their hues), suggesting that color harmony is strongly influenced by the context of use. The presented model has high practical importance since it can be used in different applications and tools. It can be used for the automatic selection of a website color theme based on a certain image (e.g. company logo or product image) or to dynamically adjust the color of elements, according to the main image – an image that is visible at the same time as the elements.

• Keywords: user interface, user experience, color theme, image color extraction, color harmony, prominent colors, CAM02-UCS, CIECAM02