Year: 2024
Type: dissertation
Abstract: Use of design guidelines in user interface design is very common and usually even desired, but currently there are no user friendly tools for analyzing design guideline violations during the design phase. Some tools for this problem exist, but those rely heavily on user annotating the UI elements during the validation process. This creates unnecessary friction which might cause the designer to do the validation manually, which causes human errors. This thesis focused on creating a prototype which utilises OpenAI’s GPT-4V model to evaluate the given design screenshot against Google’s Material Designs guidelines. From Material Design the "Don’t" examples of component specific visual guidelines were used. To provide the required understanding for creating the prototype a literature review was conducted in the beginning. The literature review consisted of reviewing design guidelines, design guideline evaluation methods and generative AI. The accuracy of the prototype was calculated by first manually evaluating 50 designs combined from Material Design Figma kit and Rico dataset and then using the prototype to evaluate them again. The evaluation results gathered from using the prototype were rather poor, the prototype achieved precision of 12,6% and recall of 28,6%. The prototype did a poor job on find the actual violations, but was rather good on understanding the designs in general. Based on the gathered information from the research a possible commercial solution was presented. A Figma plugin could be developed which would utilize the underlying technology of the prototype presented in this thesis. A Figma plugin could then be used to gather more contextual information of the designs to make the evaluation results more accurate.
Source: Aaltodoc (Aalto University)
Author: Väisänen, Aleksi
Language: English
Subfield: Human-Computer Interaction
Field: Computer Science
Domain: Physical Sciences
Open Access status: green
OpenAlex ID: W7011691681