towards an evaluation of graphical user interfaces aesthetics based on metrics
DESCRIPTION
—The graphical user interface (GUI) of an interactive system is nowadays the most frequently used interaction modality. While the contents are of high importance, the Look and Feel is an equally essential factor determining the GUI quality that is impacted by several determinants such as but not limited to aesthetics, pleasurability, fun, etc. Therefore, GUIs aesthetics is a potential element to focus on in order to facilitate communication between device and user. On that basis, one question that comes up is: “Is it possible to evaluate the quality of a GUI by estimating its aesthetics through a series of measurable geometric metrics?”. This paper suggests possible directions to address the previous question by, first, introducing a simplifying model of GUIs aesthetics that captures aesthetics aspects and regions-related metrics. In a second phase, a methodology for the evaluation of GUIs aesthetics is defined based on the underlying model. The paper finally puts forwards a model-based implementation of the aforementioned methodology in the form of a web service tool for metric-based evaluation of GUIs and discuss the results of a survey on users aesthetics perceptions. This paper has been presented at the IEEE eighth International Conference on Research Challenges in Information Science RCIS'2014 5marrakech, May 28-30, 2014).TRANSCRIPT
- 1. Towards an Evaluation of Graphical User Interfaces Aesthetics based on Metrics Mathieu Zen & Jean Vanderdonckt Louvain School of Management Universit catholique de Louvain
2. Outline Context and motivations Related Literature Metrics-based Model proposal INFRARED: A Method For UI Evaluation QUESTIM : Tool Implementation Pilot Study on Users Perceptions 2 3. Context and motivations Not only in work definitely undertaken from artistic impulse, but in all the products of his industry, in his choice of locality, [] his clothes and his implements, man shows that he is affected by appearance, by something that causes him pleasure over and above the immediate utility of object. The Origin of the Aesthetic Emotion Felix Clay, 1908 3 4. Context and motivations 4 Bounce rate : 40% 60% of our brain is dedicated to vision Design appreciation is the first interaction with a UI and takes less than a half second Ciscos white paper forecasts : 1.4 mobile device per capita by 2018 5. 5 Context and motivations Source: http://labos-education.unsa.org/ 6. 6 Context and motivations Source: http://www.screen-impact.com/ 7. Problem statement How to evaluate the quality of a User Interface ? Qualitative evaluation process Long and Cumbersome Final Quantitative evaluation process Quick Objective Central statement Central statement State of the Art Model Tool Validation 7 8. Central statement Research question: How to model a quantitative evaluation of GUIs aesthetics? Methodology Systematic Literature Review (SLR) Metrics-based model for GUI evaluation Method implementation Empirical validation Central statement State of the Art Model Tool Validation 8 9. Central statement 9 Scope Central statement State of the Art Model Tool Validation 10. State of the Art A qualitative approach Central statement State of the Art Model Tool Validation 10 The power of the center - ARNHEIM - 1983 11. State of the Art A qualitative approach VISUAL TECHNIQUE 11 Central statement State of the Art Model Tool Validation 12. State of the Art Quantifying aesthetics 12 Central statement State of the Art Model Tool Validation 13. State of the Art Quantifying aesthetics AESTHETICS METRIC 13 Central statement State of the Art Model Tool Validation 14. State of the Art Shortcomings No metrics validation Lots of formulas Lots of interpretations Two main issues with metrics: REPRESENTATIVENESS RELEVANCE 14 Central statement State of the Art Model Tool Validation 15. Metrics Proposal 15 Central statement State of the Art Proposal Tool Validation Set of metrics Balance Symmetry Density Complexity Proportion Regularity Spacing Economy Homogeneity Rhythm Concentricity Alignment 16. Metrics Proposal New metrics 16 Central statement State of the Art Proposal Tool Validation ddiag d 17. Method proposal 17 Central statement State of the Art Proposal Tool Validation A method for GUIs aesthetics evaluation INFRARED (1) 18. Method proposal 18 Central statement State of the Art Proposal Tool Validation A method for GUIs aesthetics evaluation INFRARED (2) 19. Method proposal 19 Central statement State of the Art Proposal Tool Validation A method for GUIs aesthetics evaluation INFRARED (3) 20. Method proposal 20 Central statement State of the Art Proposal Tool Validation A method for GUIs aesthetics evaluation INFRARED (4) 21. Method proposal 21 Central statement State of the Art Proposal Tool Validation 22. Model proposal Central statement State of the Art Proposal Tool Validation 22 23. Tool implementation QUESTIM : QUality ESTImator tool based on Metrics Central statement State of the Art Model Tool Validation 23 24. Tool implementation 24 Central statement State of the Art Model Tool Validation 25. Validation Central statement State of the Art Model Tool Validation 25 Two main issues: REPRESENTATIVENESS e.g. Does the formula for balance represents human perception of balance? RELEVANCE e.g. Does the balance property of a UI enhance its aesthetics perception? 26. Pilot Study 26 Experiment with 25 subjects Under and postgraduate students 4 UIs 12 Visual techniques 5-points Likert scale GOAL : Compare Users Perceptions with values given by the metrics REPRESENTATIVENESS Central statement State of the Art Model Tool Validation 27. 27 Central statement State of the Art Model Tool Validation 28. 28 Central statement State of the Art Model Tool Validation 29. Pilot Study 29 Hypothesis H1 : There is a perfect similarity between scores of metrics and users reviews. H2 : There is a relative similarity between scores of metrics and users reviews. Central statement State of the Art Model Tool Validation 30. Pilot Study 30 H1 : One-Sample Wilcoxon Signed Rank Test Central statement State of the Art Model Tool Validation 31. Pilot Study 31 H2 : Match-Paired Wilcoxon Signed Rank Test Central statement State of the Art Model Tool Validation 32. Pilot Study 32 H2 : Friedman 2-Way ANOVA by Ranks Central statement State of the Art Model Tool Validation 33. Pilot Study 33 H2 : Metrics Ranking Central statement State of the Art Model Tool Validation 34. Pilot Study 34 Discussion 4/12 representative metrics Study at a larger scale is needed (only 4 UIs) Subjective nature of the UI grid Central statement State of the Art Model Tool Validation 35. Conclusions Qualitative evaluation Final and long process, subjective Quantitative evaluation Quick and objective feedback Metrics Relevance and Representativeness 35 36. Future work QUESTIM Automatic regions detection Further empirical validation Relevance Investigate professional designers methods to improve GUI aesthetics Representativeness Reproduce pilot study at a larger scale 36 37. Questions? 37