Oct 212013
 

In recent years the big players in software have adopted modernist design for their user interfaces. With this redesign, digital comes of age, with a look and feel that’s no longer bound by last century’s conventions or by those new to computing. A modernist user interface focuses people on their current task, supports fast-paced use, and embraces the fact that the interfaces are digital. The intent is to help people to learn and to use software more easily—and you’ve no doubt seen and used modernist interfaces, especially on your phones and tablets, in Google products, and on Windows 8 and later.

It’s easy to reduce modernism to two guidelines: put less on the screen, and make what’s still there look flatter. While modernist software works well, blindly applying those two guidelines without understanding the underlying principles can lead to puzzling and inconsistent experiences. In some cases—including in products by Apple and Microsoft—fewer items and less visual detail on screen has resulted in the removal or omission of the necessary cues that separate content from controls, the cues that allow people to learn and use the software effectively.

Fewer elements on the screen

Modernism calls for a simpler interface. With fewer choices on the screen at any given time, people can work faster and people are more likely to choose what they need—provided the right elements are present at the right time. To get this right requires an excellent understanding of the tasks customers need to do, and when. Research on customers before the design stage is key, and testing with customers during the design stage is key. Simply putting less on the screen without testing how the interface performs in the hands of customers is a gamble.

Visually simpler elements on the screen

Modernism calls for an interface that is stripped of distracting ornamentation. With less visual noise on the screen, the interface is less demanding and—again—easier and faster to use. Simply removing extra lines, extra colours, and extra words without testing how the interface performs in the hands of users is a gamble. Here’s why.

In the illustration, example 1 shows a button that clearly has affordance. On screen, the button looks like a 3D object that we could press in the real world. The button’s gradient fill and shadow make it appear 3D. Most people know this 3D appearance from earlier versions of Windows and from the first editions of iPhone.

Examples of visual affordance

In example 2, the 3D appearance and shadow are removed. Most people first noticed this flattened look for buttons in Google Chrome and for tiles in Windows 8. With most of the affordances stripped away, in some contexts people have trouble recognising that these boxes are buttons to click or tap, or an object to drag or swipe.

It is possible to strip away the ornamentation without going too far. In example 2, the Search button (far right) has a slight gradient, slightly rounded corners, and a slight shadow on roll-over, all of which subtly help identify this element as a button. This button is from Google Gmail’s search box.

Example 3 shows “buttons” that have the background rectangle removed, leaving only text. For many years, blue text —especially when underlined—was used to identify a hyperlink. Most people know this link appearance from the Internet’s first two decades.

Examples of visual affordance

In example 4, the colour and underline are also removed. You may have noticed these plain, modernist links in mobile devices such as Windows Phone and applications such as Microsoft Zune. With the colour stripped away, in some contexts people have trouble recognising which text is a link to click, tap, or swipe.

It is possible to strip away the background colour and text decoration and still provide cues that people can interact with this text. For example, in the illustration, below, the row of links extends off the right edge of the screen to suggest they can be swiped. Extending off the screen is easy to do, for example by enlarging the text.

Swiping to see more

Example 5 shows two icons that have lots of realistic detail. This resemblance to physical objects is called skeuomorphism. For many years, skeuomorphism increased as improvements to computer screens allowed more colour, better display resolution, and thus more realism. During this time, each icon typically also had a label to help make the icon’s meaning clear.

Examples of visual affordance

In example 6, the skeuomorphism and labels have disappeared, or are hidden. Most people first noticed the flattened, modernist icons in Google apps and in Microsoft Office 2013. In some contexts, people don’t recognise the icons without their labels, and either don’t know how to or don’t think to reveal the labels.

It is possible to see the labels on demand. For example, Windows Phone provides an icon to tap that reveals the labels, as illustrated below.

New cues for digital interfaces

The ellipsis (the “…”) is a cue to users that “there’s more.” This cue is necessary—so it hasn’t been stripped away in this modernist design. This is also an example of a cue that’s natively digital. It’s not possible in the physical world to show and hide content because paper is static, not interactive.

On earlier iPhones and iPads, some apps would use skeuomorphic detail to cue people about how an app functioned. For example, an image of spiral-coil binding (below, left) signals that there may be more content on another page, and page-curl transitions that mimic a turning page reinforce this as the user navigates from screen to screen. In contrast, the more modernist design (below right) uses a cue that’s only possible in the digital world. The screen uses content peeking (look closely at the right edge) to signal that there is more content on another page.

Skeuomorphism

Some design challenges, as the content-peeking example shows, have excellent solutions that comply with modernist design principles: simple, less on the screen, and natively digital. Other design challenges have yet to be solved.

Natively digital

One example of an unsolved challenge is the Windows Phone calculator, whose functions change when the device is rotated. Rotating the device causes the calculator to switch from standard calculator to scientific calculator if rotated clockwise, and from standard calculate to binary-and-hexadecimal calculator if rotated counter clockwise. This exemplifies what it means to be truly digital—in the real world, a calculator on your desk cannot change its buttons, no matter how you rotate it.

Windows Phone calculator

However, the current design fails because there is nothing in the interface to suggest that these functional changes will occur, so there’s no reason to rotate the screen in order to discover them. This design challenge calls for a solution—a visible button or icon or other explicit path—that clearly toggles through the calculator’s three states, for example by forcing the screen orientation to change for at least a few seconds, and temporarily ignoring the device’s current physical orientation, or perhaps locking it in place.

User interfaces that enable full product use

To be “usable” requires not only that people can successfully use software tools to perform their tasks, but also that they can locate and recognise those tools. This used to be easier to accomplish when there were fewer platforms.

The big players are changing the way user interfaces look and feel by applying modernist design to make the truly digital. At the same time, software is changing because the way people use it, where they use it, and with whom they use it is changing. As development teams continue to provide possibilities, they need to work with interface designers, usability analysts, and members of their target audience—the users or customers. Together, we can ensure the new interactions and simplified interfaces we design and build will tell people how the interface works and both help and remind people to find the functions and content they need. It’s not about making things flat and removing clutter; it’s about getting the interface right while applying modernist principles so people can use the product fully.

Postscript
I came across a video, titled Everything is a remix, that explains the “why” of modernism.

  3 Responses to “Modernist design: Beyond flat and simple”

  1. I was never a fan of the super juicy and glossy buttons of the early two thousands. I think it may have been a product of the fact that computers could process and display more information. Also photoshop and other visual design software was becoming more powerful and designers were getting excited.

    What we’re seeing now is the extreme response to all those candy buttons and hi-res photo icons. While I find it frustrating sometimes, I do feel like we had to strip away everything to give ourselves a new blank canvas.

    What we will see is a creation of new visual indicators. New patterns and way finding cues. But also a return to the tried and true.

  2. Excellent article! Thanks, Jerome. I learned a lot. As a late adopter of the smart phone and Windows 8 operating system (I’m still on Vista), this is all still new to me. You helped me understand what to expect! :-)

  3. Wonderful, wonderful article. I love how you make sure that affordances are the primary theme, and not just the tired trope of skeuomorphism.

    This whole debate reminds me of something one of our execs (by no means a technical person) said about one of our designs that had gone a little too far to the other side: “It’s so simple, it’s hard.”

    BTW, I recently tested some content-peeking, and it did not do well. Some users who were as sophisticated and techy as the designers who put it together did okay, but the rest had trouble.

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>