ACM Interactions

Lately, flat design has been a topic of conversation in the design community. It seems there are two main camps: those who love it and those who don’t.  Flat design is in no way new to the screen.  Some websites have, for a while now, approached flat design as a mix of flat and raised presentation, reserving the raised effect for controls such as buttons. Some sights have been full-on flat in their presentation. It was not until Microsoft released the Metro UI for Windows 8 that the discussions really ramped up. Apple’s iOS 7 will now take on some flat attributes as will parts of Apple’s OS 10 applications.

Looking back, Windows 2.0 was flat until Windows 3.0 adorned a 3D-look to buttons and controls. The Apple OS was black and white and had flat graphics, until some slight beveling treatment came into play on buttons and controls as well. As the capability for richer and more lifelike graphics became possible, these environments expanded on the idea of creating an experience that would look and feel tangible, by enhancing the depth of the graphics. These were referred to as “cool” and “sexy.” Clearly, these graphics had appeal. No more battleship gray bevels!

It seems, however, that just as the appeal and fascination with the gray bevel wore off, so too has the appeal for glossy graphics. I have heard debates declaring the previous 3D graphics are “Too rich and feel heavy.” On the flip side comes the feedback on flat graphics: “Look juvenile and too playful.”  I often hear that “modern design is cold and not homey enough.” I also hear that flat design is “lighter on the eye.” This feedback has me wondering if these trends are more form than function or not, and if not, then how are these trends impacting functionality?

Don Norman originally compared affordances of the physical world to those of the metaphorical world of computing. He later restated his take on what an affordance is, declaring computer affordances to be more of “perceived affordances” than actual physical affordances. Without going too deep into the history of affordances, a perceived affordance is the quality of an object that suggests how it might be used. As Norman explains: “Does the user perceive that clicking on that object is a meaningful, useful action, with a known outcome?”

What do users of a flat interface perceive as clickable? Much has changed in the flat interface and I am not only referring to Windows but to the computing community in general. Gray controls are no longer necessarily perceived as disabled. Are our perceptions changing based on familiarity with computers? Have users evolved enough to know what to click on based on familiarity? For example, is a beveled gripper control more recognizable than a flat control? Or is the flat presentation of the control perceived as a control, based on experience only, the pattern and location of the shapes or both? 

Users know and have known that shape, text, and placement are all affordances that, as Norman suggests, are perceived as such based on these attributes and not the depth of glossy 3D graphics. An arrow is an affordance even if it’s flat and the visual language of an arrow always tells us it implies direction. A rectangle with text is perceived as a button that issues the command specified in the text, when clicked. Although visual patterns that are used consistently create a language that is discovered and learned by the user, what I am seeing is a wide variety of patterns that are offered depending on the product, platform, and environment.  I would be curious to know the impact of such variety, on users, if any.

Another trend that is appearing alongside flat design is what I consider to be a type of “context-based” design. It used to be that controls that were not available were disabled and not moved in and out of the UI, as the movement was deemed “too disruptive.”  This rule of thumb is often still in use, however, increasingly the pattern is to design controls that come and go, rather than enable and disable, depending on what object or task I am focused on. Everything from commands to scroll bars comes and goes, depending on what has focus and the context of the task. This does seem like a way to simplify the visual presentation, fit more functionality into a single experience, and create a more directed and focused task.  I have to say that although I often do a double take on a scroll bar that miraculously appears and grabs the corner of my eye; I much appreciate the simplicity of not having multiple scroll bars display at once. I do wonder about the discoverability of some pop-up controls and if the simplicity in these cases pays off in the experience or not.

What I find interesting is that this seems like a very exploratory time for the interface. I, for one, find it exciting and liberating to explore the experience and have a bit of flexibility and freedom.  If this freedom is due to an evolving and exploratory user base, with new expectations, then simpler more directed interaction, flat or otherwise, may be something that we can afford after all.

Monica Granfield