Beautiful interfaces. From user experience to user interface design

: The paper is aimed to explore and to conduct a critical review of the latest position in the debate of the aesthetic dimension of visual design applied to graphical, multimodal and virtual interfaces in the digital field and its impact on the experience of people. The relationship between form and function — aesthetic values and technical issues — has become the juxtaposition between graphic and usability in the digital field. The mobile revolution in 2007 has forced designers to rethink the interaction and interface concepts, since the introduction of the desktop metaphor in 1984. The skeuomorphism style and the transition to flat patterns are a strong evidence of the ongoing discussion about the visual paradigms adopted. Brutalism start by Deville in 2014 is a deep reaction that recalls to design its role and its own value.


Form follows function?
Starting from the Vitruvian definition of the 3 pillars of architecture: "Haec autem ita fieri debent, ut habeatur ratio firmitatis, utilitatis, venustatis."["In tutte queste cose che si hanno da fare devesi avere per scopo la solidità, l'utilità, e la bellezza."](Vitruvio,15) to the three element's of The art & science of web design defined by Jeffrey Veen (2001), the issue of the aesthetic dimension in design disciplines is always central and critical.
The relationship between form and function has become an explicit debate after the industrial revolution representing the opposite position of the aesthetic values and technical issues.The discussion involved along the evolution of design -intended as theoretical, practical and productive discipline -single personalities such as Sullivan and whole school -the Bauhaus above all -or intellectual movements.

S89
Downloaded by [2.233.73.34] at 02:53 06 September 2017 With the digital revolution the discussion as worsened in a juxtaposition between graphic and usability -user experience design vs. user interface design, in recent years -as well reported in many books and guidelines given by Nielsen -the well-known usability guru -in the late '90s.
In a series of best-seller books such as Web usability (2000) or Homepage usability (2002), Nielsen gave a precise indication to "purge" interfaces from visual design and graphical elements in favor of a strict and orthodox respect of usability heuristic as if the visual language would interfere instead of supporting the human-computer interaction.
Although the community of web designers and developers actively supports the adoption of the user-centered approach and of web standards to guarantee accessibility to digital contents, where design of the visual elements -that means, most of the time, the quality of the figurative elements and message representation through the graphic language -were banned, the whole usability of the system fails, as well represented by the two interfaces of figure 1.On the left the alistapart.com-the webzine homepage promoted by Jeffrey Zeldman author and evangelist of the Web standard project movement (1998-2013) with Aaron Gustafson Molly E. Holzschlag, Jeffery Venn, Dave Shea etc.
On the right the homepage of the Jacob Nielsen's useit.comblog (both in the previous version).
Both publications are focused on web usability and standards, but the first one uses the basic rules of visual language -hierarchy, space, alignment, colors, typography -and creates a well-organized and pleasant interface that supports the users in building a strong mental model and cognitive comprehension of the structure.The aesthetic provides a clear and enjoyable experience.
On the other hand, the Nielsen's site just creates two equal areas with no lecture and perception priority, link colors and the underline effect has a heavy visual impact without giving a rhythm to users when skimming and scanning the text.

Missing in action
According to the ISO definition proposed and shared in 1998: "usability is the ease of use and learnability of a human-made object such as a tool or device.In software engineering, usability is the degree to which a software can be used by specified consumers to achieve quantified objectives with effectiveness, efficiency, and satisfaction in a quantified context of use" (ISO 9241-11, 1998) If the first two parameters -effectiveness and efficiency -are well known, tested, and investigated, the third -satisfaction -is often ignored, although is the one aimed to evaluate the qualitative aspects of the experience such as pleasantness, comfort, and the overall appreciation of the users.
Quantitative performances of an interaction could be measured using criteria like time of execution, numbers of failures or succeeding in completing the tasks and so on.On the other hand, feedbacks on more personal opinions and feeling or emotional reactions are not as easy to collect and understand.Therefore the human-computer interaction, usability, and user experience design debate have often ignored the "dark side" of user experience -that means the visual, aesthetic, and emotional aspects -in order to raise and consolidate a strong and shared method among theorists, scholars, and practitioners.
The mantra of this cultural approach could be: "it's ugly, but it works" and it is well exemplified by a lot of big portals and platforms of the first generation of websites -developed in the late '90s -and the web 2.0 era -introduced by the O'Reilly definition in 2002 -i.e.Wikipedia, Reddit, Craiglist (see figure 2).They have millions of unique visitors, monthly page views and votes although they have no look & feel at all -visual values and interface design -they "just work" in solving a problem.
Besides this approach in building and evaluating website interactions based on usability culture of the late '80s and '90s, two Japanese researchers, Masaaki Kurosu and Kaori Kashimura introduced in 1995 the concept of apparent usability opposite to inherent usability in digital systems.The experimental research looks at the statistical correlation between the two aspects of usability.What emerges from the study is that "the apparent usability is less correlated with the inherent usability compared to the apparent beauty which showed the correlation coefficient of 0.589.This suggests that the user may be strongly affected by the aesthetic aspect of the interface even when they try to evaluate the interface in its functional aspects and it is suggested that the interface designers should strive not only to improve the inherent usability but also brush up the apparent usability or the aesthetic aspect of the interface" (Kurosu & Kashimura, 1995: 293).
The results suggest to designers to improve the apparent usability, they mean, the aesthetic aspects of the interfaces.This shift of focus -from rational to emotional elements-restores the centrality of visual design and its languages.This issue has been widely and in-depth reviewed by other authors including Tractinsky, Katz & Ikar (2000), Donald Norman (2002and 2004), Lavia & Tractinsky (2004).
In particular, the experimental studies conducted by Tractinsky explicitly introduce again the concept of beauty and aesthetic proving and claiming the role of them in the user experience.
"This study demonstrated once again the tight relationships between users' initial perceptions of interface aesthetics and their perceptions of the system's usability.Moreover, we showed that these relations endure even after actual use of the system.We believe that these results shed new light on the role of aesthetics in HCI design and its effects on how users experience their interaction with computerized systems.The results of this study are commensurate with social psychology findings that people associate a person's physical attractiveness with other personal attributes.Similarly, research in the areas of marketing and consumer behavior indicate that aesthetic features of the shopping environment are perceived as S91 Downloaded by [2.233.73.34] at 02:53 06 September 2017 related to other, seemingly independent attributes (e.g.functional) of that environment.
[…] Yet, we believe that there is sufficient evidence already to justify the elevation of the issue of aesthetic design from its current standing at the cellars of HCI research."(Tractinsky, Katz & Ikar, 2000: 142) In this debate what seems to miss is the voice of visual and interface designers.Human-computer interaction experts, usability experts, user experience designers, cognitive psychologists have been participating and involved in the evolution of the last 20 years of web and applications evolutions when designers keep silently doing their jobs.
Despite the first generation of UI designer has been deeply committed to finding a new expressive way to let people interact inside the graphical user interfaces digital ecosystem is difficult to recognize a theoretic contribution and a strong cultural evolution beyond the trends.

From metaphors to flatness
As happened to many design and technologies innovationmoreover in immaterial fieldwhen introduced in the mass market, also the operative systems or software have adopted a mimetic approach to existing material references and/or physical patterns already familiar to the users.Even for early adoptertherefore people susceptible and motivated to learn the new mindset of interaction according to the diffusion of innovation theory by Rogers (1962) the experience should be supported by a recognizable mental model based on the memories and previous interactions with similar artifact already embedded in people mind.

GUI: the visual rhetoric of metaphors
The first operating system of the Apple based on a graphical interfacelaunched in 1984reproduced the office environment to simulate everyday interaction such as archiving documentsfolders and filesthrowing stuff and garbage awaythe bucketmoving object on the tables etc.
All these activities are dissimulated in the desktop metaphor designed by Susan Kare in 1980-84 and shaped according to the real world.
Kare has a fine-arts background that mixed with the ideas of Steve Jobs on good typography give birth to an original digital aesthetic.Minimalism, essentiality, white space are the guiding rules of the visual composition and rhythm of the lay-out completed with smart, basic and user-friendly icons and a clear and elegant font.The careful modulation of pixels in their essential composition creates a colorful and expressive language just using black and white and grayscale.Elefont, Chicago, Monaco, and Geneva were specifically designed to guarantee a pleasant readability, high legibility and aesthetic quality similar to the analogical typography although still rendered without the antialiasing correction.
With the revolution of the Internet in 1993, the metaphorical approach and visual language have been extended to website and new visual design patterns have been established according to two different perspectives on page design for the net.One first attempt to create a specific iconography for the web is due to the effort of David Siegel (1997).The inventor of the transparent dot and the workaround of table grid used to create visual layout mixed both his editorial and typographical culture and his coding and markup knowledge.The result was an almost original aesthetic able to balance the interactive componentsspecific of the medium a limited by the poor expressive control of the HTML, the markup language used to compile the semantic structure and contentrapidly become a standard de facto.The visual metaphor and allegories try to connect the visual world with the material of physical elementspapers, 3D bottoms, shaded boxes, brick walls etc. -were progressively dismissed and a new language of web design try to give voice to the issues, peculiarities, and potentialities of the new-media.
The first generation of web design were artist, pioneers, and practitioners at the same time: Mike China, Todd Purgason, Amy Franceschini, Niko Stumpo, Joshua Davis, Jugo Nakamura, Brendan Dawes, Irene Chan are some of the protagonists involved in the on line art gallery The Remedy Project published since 1997 or cited in New masters of Flash (Bauman & Davis, 2000) as Flash designer and innovators.Many of this protagonist were keen to mould technologies -although limits S93 Downloaded by [2.233.73.34] at 02:53 06 September 2017 and inadequate -as a design tool able to shape a new visual culture, an interactive and hypertextual language and a multimodal aesthetic.(2003) now at its 3rd editiona webzine -A list apartand The web standard project (1998)(1999)(2000)(2001)(2002)(2003) to the design debate sustaining and spreading a design approach based on standards.The introduction of CSS allows the creative and developers community to separate the content and its structuresbuild with the semantic HTMLfrom its presentation: the visual part.This has become a massively adopted way to think and develop interfaces but also it gave rise to a strong expressive approval and an overall flattering of the expressive issue in digital design.This approach flows in the mainstream on which styling and trends of the next decade are rooted.
If standards have simplified and improved the web, the user experience and the access to information, on the other hand, they have turned off the original expressive research, oversimplifying in a series of recurring patterns and trends related to the software possibilities the aesthetic of the digital design.Ifgenerally speaking -3D effects, materiality, and touch-feeling are the basic design patterns of the representation language of skeuomorph-interfaces, colors, and their conceptual use is directly drawn from the world.Elements are rendered through textures and hues or tints which depict explicitly physical objects that are intended to symbolize or, at least, visually synthesize.
A leather-bound diary, a '50s radio microphone, a 3D compass where the icon that once tappedone of the gesture to interact with touch interfaces listed by Villamore, Willis and Wroblewski (2010) launch the applications.
The aesthetic seems to come out directly from the visual mimesis with the real world in a sort of revival of the motto form follow function, but in this case, the function is a digital service or features embedded in a mobile device and the semiotic and symbolic referent is a concrete vintage object.

Material design: a touch of abstraction
The transition to iOS7 in 2012-13 (Wingfield and Bilton, 2012) ends the pioneer phase of the mobile revolution: new generation of devices have been introduced -not only smartphones but also tablet, phablet, wearables and IoT-new brands have been raised in the market older player in IT and hardware field are missing the wave or definitely disappearing acquired or exhausted being no more able to compete in a new challenging world.This transition phase represents the required time to normalize the first generation approach, preparing the field for experimenting and addressing further exploration to potentiality and specific features of the devices.
Mobile OS and apps design free themselves from realistic patterns and embrace the new language of the so-called flat design.The flat interfacesbi-dimensional to differentiate from the 3D effects, S95 Downloaded by [2.233.73.34]At its very first launch, flat design of iOS 7 was mainly concerned with simplification of the whole user, experience, both in the emotional and mental model and in the technical aspects.Loosing 3D and shaded effects, the vintage look and the dark, heavy metaphor referring to the '50s object almost unknown to the younger digital natives and millennials generations, immediately give a new perspective.
As reported by Matt Gemmell in a deep-debated and well-documented post "iOS 7 is much, much lighter -in the color sense, and consequently also in visual weight.Breathable whitespace is everywhere, and is used to unify… The overall impression is of brightness and openness.iOS 7's new look is bold, opinionated and readable."(Gemmell, 2013).
So, the new wave of bi-dimensional visual elements, surrounded by a wide amount of white negative space let the chromatic choices speaking loudly, although not always clearly, according to the UI Design Basics section of the iOS Human Interface Guideline released by Apple.
Soon after, Google creates and launched a document -Material design -in 2014, in which theoretical concepts, principles and practical examples are given and explained to allow pros to better design apps coherent with the whole approach of Android development and framework.In this interactive guide the philosophical perspective is declared and discussed to understand the declination of single principles, their use and implementation: it is a declaration of the aesthetic language, rapidly became "the" visual language of contemporary mobile and responsive app and sites.
The declared aim of Google is to create a visual language that "synthesizes the classic principles of good design with the innovation and possibility of technology and science" but the declared material metaphor has a very different interpretation compared to skeuomorphism.It grounds in tactile reality, inspired by study of paper and Ink, but "yet open to imagination and magic."(Google, 2014) But the concept of materiality, in this new context, means multi-layered, tactile, 2-dimensional, flat, geometrical surfaces barely differentiated by lightning effects and animations.Dramatic changes of bold background colors indicate space articulations or subdivisions and cognitive organization of the interface structure.
In the absence of more explicit references to patterns or systems already known by the user the visual grammar and the language of graphic design become the conceptual tools to create the new imaginary as declared: in the fifth principle of the nine conceptual premises: "Content is bold, graphic, and intentional: bold design creates hierarchy, meaning, and focus.
Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create immersion and clarity."(Google, 2014) In the end, flat firstly and material design next introduces a bold use of colors in a very abstract and connotative way.Colors become "unnatural", saturated, vivid, acid.Contrasts are strong and effective and they become one of the main expressive assets of the mobile interface design.

The Brutalism manifesto
Brutalism was born as a reaction to issues of usability, features that have overwritten the expressive instances of design and its own nature.
"Brutalism" (or "New Brutalism") is a term which has been rattling round architectural schools for over half a century.It refers to a raw form of architecture with characteristics such as rough unfinished surfaces, unusual shapes, solid materials (like concrete), massive forms, and contrasting small features.
Brutalist websites, like their architectural cousins, are an antidote to the more popular, softer web.We live in an age of emotional web design; where we as interface and experience designers climb over each other to offer users empathy and understanding.Where products entice customers in the friendliest, easiest ways possible.Colors are inviting, images are polished, the type is smooth and crafted.
Looking at brutalist websites, adjectives such as these spring to mind: harsh, rough, rugged, uncomfortable, raw, confrontational, cynical.
It's a school of thinking I like; you could argue my own website (which I haven't changed in a while) has a touch of brutality" (Yates, 2016) The informal movement was started in 2014 by the creative director Pascal Deville (2014) in his site brutalistwebsites.comwhere he collects brutal interfaces.Brutalism is not just a matter of formal aesthetic and visual surfaces, but it represents a deep change in digital design culture.Brutalism is more about code, and the graphic expression is a direct consequence of the technological background.Raw code and a crude form are the basis of a simple, not optimized -we could say anti-standard -way to write directly and manually the markup structure and decoration.Times New Roman, Courier, Arial and few other system fonts are the solely used in a sort of self-limitation and browser-safe revival.
" [Brutalism] is interesting to me… because it doesn't necessarily have a defined set of aesthetic signifiers.What defines those signifiers is decided by the platform it's built on."says Jake Tobin in a recent interview echoes by Nathaniel Smith, of tilde.town:"I designed a brutalist website to show that we can still do wonderful things together on the web without so-called 'best practices'".(Archement, 2016) It sounds like a return to an original Eldorado of the late '90s driven by simple and effective attempt to find a concrete, warm, fuzzy expressive language.Yates recalls the good old times when colors were limited by the 216 browsers safe palette and red, blue, gray were enough.Images iconography draws to a time and to a language prior to the glossy and trendy world of Instagram.Verbal language claim for itself a real vocabulary, brutal and free.

Conclusions
The contemporary evolution of user interface aesthetic seems to follow a parabolic path.Starting from the '90s the first protagonists attempt to shape technologies, software and code to the S98 Downloaded by [2.233.73.34] at 02:53 06 September 2017 expressive issues of visual language.Afterward standards, usability paradigms, and patterns have rewritten the priority of design excluding or, at least, limiting formal aspects and perceived pleasantness as negative components of the people experience.
Nevertheless, a new consciousness is emerging both in the cognitive, user experience studies field and in the new designer's generations.
On one hand the theoretical cultural is giving new space to emotional dimension of design and interactive artifact as a value and a contribution to functional aspects and usability issues.On the other digital designers claim for an experimental, personal place to express a new aesthetic and vision.The exploration of a new language shaped by the medium is creating a retrospectiveavantgarde an apparent contradiction.The search for roots and rejection of standardization produce an original mix of backward expressive elements and innovative way to use the technology -markup and scripting language -as an alternative vocabulary.The exploration assumes new eyes and perspectives to see the existing context, deny it and rebuilt according to a new sensibility and a new freedom.
Furthermore, aptic interfaces, environmental interactions, internet of things, smart objects, ubiquitous computing, augmented, virtual reality and the 3-dimensional evolution of interactive experiences are opening new possibilities to a multimodal and spatial aesthetic involving a multi sensorial-interactions.They could refer to already seen imaginary like the ones proposed in sci-fi and cyber movies -Minority Reports in primis -or inventing an original universe of sign, symbols and aesthetic values as called for by Gabo Arora, ONU creative director, and virtual reality designer.

Figure 1 .
Figure 1.The homepage of "A list apart" the webzine founded by Jeffrey Zeldman to promote web standards and digital design future (on the left).The homepage of "useit" the Jacob Nielsen's blog aimed to spread usability issues and approaches to web design (on the right).

Figure 2 .
Figure 2.An entry of Wikipedia -The history of ugliness by Umberto Eco -visualized in the standard mode, on the left, and presented by Wikivand®, a browser add-on, aimed to improve the visual aesthetic and interface performance f the free encyclopedia, on the right.

Figure 3 .
Figure 3. Pictures of The Remedi Project artworks: Munkowitz and Niko Stumpo: football-themed interactive piece (on the left, available at gmuk.com); Squid Soup (unknown artist) interactive artwork based on onomatopoeia and sound (on the right, available at https://ollenga.wordpress.com/category/sketch/)

Figure 4 .
Figure 4. Davis Siegel's homepage in 1996: the template is realized using HTML and images simulating typography (right); The CSS Zen Garden template launched in 2001 by Molly E. Holzschlag and Dave Shea based on the user-generated variation in CSS of the original template HTML (right) at 02:53 06 September 2017 synesthetic, tactile and shadesfind a symbolic and minimal way to communicate to users although maintaining an almost clear affordance according to Norman Affordances and Design and Bagnara & Broadbent studies (1993).

Figure 5 .
Figure 5. Skeuomorphic interface in iOS 6 (left); flat design in iOS 7 (center); the detail of audio recording built-in app interface based on the '50s iconography (right)

Figure 6 .
Figure 6.lifeactionrevival.orghomepage: an example of brutal interface where all the expressive elements are represented: brutal images with default 3D borders, limited color palette (gray, pale yellow and blue), basic typography (Helvetica and Times New Roman)