Guidelines supported evaluation of user interfaces with generative AI
Loading...
URL
Journal Title
Journal ISSN
Volume Title
Perustieteiden korkeakoulu |
Master's thesis
Unless otherwise stated, all rights belong to the author. You may download, display and print this publication for Your own personal use. Commercial use is prohibited.
Authors
Date
2024-05-20
Department
Major/Subject
Human-Computer Interaction
Mcode
SCI3097
Degree programme
Master’s Programme in Computer, Communication and Information Sciences
Language
en
Pages
62
Series
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.Suunnitteluohjeiden käyttö käyttöliittymäsuunnittelussa on hyvin yleistä ja yleisesti toivottua, mutta tällä hetkellä ei ole olemassa käyttäjäystävällisiä työkaluja suunnitteluohjeiden oikeaoppisen käytön analysointiin. Joitakin työkaluja tähän ongelmaan on olemassa, mutta ne luottavat siihen, että käyttäjä määrittelee käyttöliittymän osat käsin. Tämä luo tarpeetonta kitkaa, joka saattaa johtaa suunnittelijan suorittamaan analysoinnin manuaalisesti mikä lisää riskiä inhimillisille virheille. Tämä opinnäytetyö keskittyi OpenAI:n GPT-4V mallia hyödyntävän prototyypin luomiseen, jonka tehtävä on arvioida annettu kuvakaappaus käyttöliittymäsuunnitelmasta Googlen Material Design suunnitteluohjeistoa vastaan. Tähän arviointiin käytettiin Material Designin "Don't" -esimerkkejä komponenttikohtaisista visuaalisista ohjeista. Ennen prototyypin luontia suoritettiin kirjallisuustutkimus. Kirjallisuustutkimuksessa tarkasteltiin yleisesti suunnitteluohjeita, käyttöliittymäsuunnitelmien arviointia suunnitteluohjeita vastaan ja generatiivista tekoälyä. Prototyypin tarkkuus laskettiin arvioimalla ensin manuaalisesti 50 käyttöliittymäsuunnitelmaa käyttäen keräämällä ne Material Designin Figma -esimerkeistä ja Rico-aineistosta. Lopuksi näitä manuaalisia arviointeja verrattiin prototyypin tuottamiin arviointeihin. Prototyypin tuottama arviointitarkkuus oli melko huono. Prototyyppi saavutti 12,6 % precision-arvon ja 28,6 % recall-arvon. Prototyyppi toimi huonosti todellisten rikkomusten löytämisessä, mutta ymmärsi melko hyvin käyttöliittymäsuunnitelmaa yleisellä tasolla. Opinnäytetyössä saadun tiedon perusteella ehdotettiin mahdollista kaupallista sovellusta. Käyttämällä opinnäytetyössä kehitetyn prototyypin teknologiaa Figma lisäosan taustalla olisi mahdollista kerätä kontekstuaalista tietoa käyttöliittymäsuunnitelmasta, joka voisi parantaa saatuja arviointituloksia.Description
Supervisor
Nieminen, MarkoThesis advisor
Nieminen, MarkoKeywords
design guidelines, evaluation, generative AI, GPT-4