Käyttöliittymäasettelun optimointi tyyliohjeiden mukaan

Designing and maintaining consistent graphical user interfaces (GUIs) across different products can improve product usability by making it easy to transfer learning from one system to another. GUI consistency is usually pursued by using standard GUI components and developing layout guidelines for using them. However, developing and following layout guidelines is challenging, because it is easy for guidelines to be ambiguous, conflicting, too many, or simply poorly communicated. Designers can also often forget, misunderstand, or misapply guidelines. Fixing misapplied guidelines, or updating an old GUI to new guidelines can also require considerable manual work. This thesis presents Design Mentor, a tool for optimising GUI layouts according to design system layout guidelines while minimising semantic changes to the input layout. This is achieved through constraint-based optimisation using Mixed-Integer Linear Programming (MILP). Prior work in automated layout generation has largerly focused on generating diverse alternative layouts in the early stages of the design process. Design Mentor differs from prior work by supporting the final stages of GUI design, providing robust integration with existing tools, and inferring high-level constraints from the input layout itself. The author demonstrates how Design Mentor is able to enforce design system guidelines to a layout in real-time during a design process while providing a high degree of control to the designer over the semantic aspects of the layout. Interviews with potential users suggest that this approach to layout optimisation can also support design exploration as well, by providing a polished preview of the current design draft.Graafisten käyttöliittymien yhtenäistäminen voi parantaa digitaalisten tuotteiden käytettävyyttä, sillä käyttäjä voi hyödyntää aiemmin oppimaansa vaihtaessaan järjestelmästä toiseen. Tyypillisin keino yhtenäisten käyttöliittymien suunnitteluun on hyödyntää vakioituja käyttöliittymäkomponentteja ja kehittää tyyliohjeita näiden komponenttien asetteluun. Tyyliohjeiden seuraaminen on kuitenkin haastavaa, sillä ohjeet saattavat helposti olla epäselviä, ristiriitaisia, liian laajoja tai huonosti kommunikoituja. Suunnittelijat saattavat usein unohtaa osan ohjeista sekä ymmärtää tai soveltaa niitä väärin. Virheiden korjaaminen tai vanhojen käyttöliittymien päivittäminen uusien ohjeiden mukaiseksi edellyttää usein myös paljon työtä. Tämä diplomityö esittelee Design Mentor -työkalun, joka soveltaa kokonaislukuoptimointia graafisten käyttöliittymien optimointiin tyyliohjeiden mukaisiksi minimoiden semanttiset muutokset käyttöliittymien asetteluun. Aiempi tutkimus käyttöliittymien asettelun automatisoinnissa on keskittynyt lähinnä vaihtoehtoisten asettelujen tuottamiseen suunnitteluprosessin alkuvaiheissa. Design Mentor eroaa aiemmista ratkaisuista keskittymällä suunnitteluprosessin loppuvaiheeseen, tukemalla olemassa olevia käyttöliittymien suunnittelutyökaluja sekä päättelemällä korkean tason optimointirajoitteita annetusta käyttöliittymästä itsestään. Diplomityö osoittaa, että Design Mentor kykenee optimoimaan käyttöliittymiä tyyliohjeiden mukaiseksi reaaliajassa suunnitteluprosessin aikana siten, että käyttäjä säilyttää hallinnan käyttöliittymäasettelun semanttisissa valinnoissa, kuten komponenttien järjestyksessä ja hierarkiassa. Toteutettujen käyttäjähaastattelujen perusteella on aihetta myös uskoa, että Design Mentor voi tukea käyttäjien luovuutta nopeuttamalla erilaisten käyttöliittymäasettelujen kokeilua