Sep 12 2012

We Want More By Seeing Less

header

We’ve seen it in web interfaces for a number of years now, and 2012 seems to be the year in which mobile UI design embraces it too: minimalistic design. Almost every week, a new minimalistic application shoots into the top charts of the mobile markets; from the stylistic todo list Clear, the color interpreted weather application Solar, and to the almost empty typewriter Pop. Everybody wants to ride the wave. Antoine De Saint-Exupery once told us: “Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” We all agree that less is more… but how far can we go in stripping UI down before hitting the balance between functionality and experience?

Back in Time

The Night Watch (1639 – 1642) by Rembrandt. Overwhelming painting in Rijksmuseum Amsterdam.

Ever heard of that tiny, flat and rainy area in the center of Europe named the Netherlands? Well… that’s where I was born. Despite being such a small country in the world, it was home to many great masters in visual arts. A personal favourite is the painter Rembrandt, whose masterpiece, The Night Watch, is a massive 16×12 ft. painting with detailing like no other. Yet with every development in art & design, countermovements evolve sooner or later and question the motives and values of each new trend. So in contrast to all of the details, vibrance in colors, and depth in layers, De Stijl evolved: a major movement lead by famous artists in which there was only room for a few primary colors, orthogonal angles, and basic shapes. It became part of the minimalistic style that evolved in the decades to come, leaving a lasting impression in all kinds of art: from music to architecture, and even from paintings to interfaces. Mondriaan paintings are a world famous example of the success found in the minimalistic movement, consisting of just a few lines and colors, but roughly worth up to 30 million dollar if you own one. Yep, I’m not kiddin’. Make sure to clear out your basement one of these day.

Victory Boogie Woogie (1942 – 1944) by Mondriaan. One of his more complex minimalistic work.

It always amazed me how a seemingly simple painting could be worth so much. “Even I could have done that!” is what you hear most. But the point is, you couldn’t. Those lines, colors, and different size shapes (as visible in the painting above) represent the short melodic lines that intertwine with rhythmic patterns in Jazz music, as was popular in New York City during the 1940′s. Mondriaan’s ability to give meaning to seemingly abstract objects makes it something more than the sum of his brushstrokes. As with every design, it’s not just the result that counts, it’s the story it tells. When designing an interface, clients don’t just pay for five buttons and a nice stylesheet. They pay for the process, for knowing that our design tells their story with all the iterations it took to validate that. We are the painters of the 21st century. We just have to make sure that our own digital brushstrokes tell a story too. The client’s story.

So far the trip back in time. Are you still with me? Nice.

Minimalism Doesn’t Equal Simplicity.

So what makes minimalistic design so appealing in the first place? A popular position is it’s the desire for simplicity. The way we interact with the digital world has made huge steps of progression over the past decade, and with each technological evolution, more interaction possibilities emerge. Websites get bloated, interfaces get cluttered, and users get frustrated. We are often selling products that are better and improved, yet I find those words just to be synonyms for even more. Therefore, as a countermovement, we started seeing desktop interfaces, websites, and even mobile applications now, try to strip interfaces down in reaction to the increasing detail that has emerged on our digital canvases. The challenge is, however, that users demand a high level of functionality in an unintrusive way. The desire for simple, yet intuitive design in products, interfaces, and in the user experience, is what sells nowadays. And that’s where we as UX/UI designers come into play. To the rescue!

But how do you measure simplicity? That’s a difficult one, right?… Is it the time it takes for you to achieve your specific task? Is it the number of clicks before reaching a navigation level? Or is it the pixel distance covered by your mouse when browsing a website? It’s hard to define some things as complex as the user experience. John Meada wrote the interesting The Laws of Simplicty. I’ll spare you a complete review, but it’s a great book describing 10 laws of simplicity, of which reduction, organisation and time are among the most important ones. Reduction of interfacing components is one way of reaching a more simplistic interface, yet it’s only effective if the sum of all those laws remains the same. If removing a button leads to an increasing learning curve or the time it takes to complete a task: you’ve failed. So in his mind, simplicity can only be defined as equation of variables. It’s the sum of different aspects that defines the user experience, and a minimalistic user interface is just one way to achieve your goal.

Windows 8, the new flagship to represent the Metro design language.

Since I can’t write an article on minimalistic design without mentioning Microsoft’s new kid on the block anyway, let’s use the opportunity for an example here. Metro (or ‘Microsoft Design Language’ as it is called now) is the minimalistic design language adapted and developed by Microsoft ever since 2006. It took its inspiration from traffic signs in public transportation, focusing on clear typography and visual hierarchy. All content, no chrome. Whether you like it or not, the minimalistic approach comes from a place authentic, and makes sense when it comes to interaction. I’ve been playing around with it ever since they launched the first Windows Phone 7, end of 2010. Apart from the lacking functionality in the mobile OS at the time, the interface worked well. There is only one problem with their Metro design language: it’s everywhere.

When I was involved in developing my first Windows Phone 7 application, I had a hard time squeezing a quality user experience in the minimalistic structure Microsoft lays upon you. To create a native experience that feels worthy of the user, you are restricted by design guidelines that limit your options in navigation & presentation of data. So no matter how much I liked Metro, forcing a minimalistic style on interfaces simply didn’t work well with my purpose of building a solid user experience. Minimalism is a choice of words, and sometimes there are just more effective ways to tell the same story.

App to App

Let’s rewind. Seven paragraphs to be exact. I started writing this article noticing the popularity of minimalistic applications. Now that we’ve discussed why and how minimalistic design is applied effectively, it’s an interesting experiment to give those applications a better look. Yes that’s right: I’ll be spending my hard-earned 99 cents for the greater good here. Let the games begin.

Solar vs. Weather. I almost thought they provide instructions on their own website! Oh wait, they do.

Solar is a stylish weather application using colors and gestures to display the weather. Different gradients indicate both temperature and weather type, and by swiping the screen, you can see today’s forecast as the colors change over time on the speed of your gesture. It takes about a minute to figure out the interaction (what does what color mean exactly?) and another minute to find the app’s main functionality (you can pull down to get a 3 day forecast, but there’s absolutely no visible indication that there’s something to even pull down); and this onboarding experience is far too much for a weather application. If John Meada hadn’t released his book already, I’m sure this application would have been a great contender for a case study.

Have you ever thought about turning your chair upside down, to see if it’s raining outside? Well that’s how irrational Solar feels. By forcing a minimalistic design on the provided functionality, an interface feels less simplistic. The reduction of meaningful information leads to confusion, and in the end: a flawed user experience. I know in this case we are just talking about a weather application that has to stand out from hundreds of others in the mobile markets… but hey, while the default Apple weather application isn’t a stunner either, at least it tells me all I need to know without having to swipe and pull around on my screen. Style wears off quickly; the user experience will last for years.

Heading over to Clear, a todo application filling your screen with bright colored blocks reflecting the importance of your tasks. Adding, completing and deleting objects is done using gestures, leaving the application entirely buttonless.

Realmacsoftware’s Clear vs. Apple’s Reminders. Minimalism vs. Skeuomorphism

Do we actually need a todo application like Clear? It’s probably that most of us never thought about it, but reading reviews in the mobile markets, it’s hard to deny people are welcoming it into their daily lives. Compared to Apple’s own built-in application Reminders, it’s reasonable to understand that some people just don’t need to add alarms to their tasks, add dates to each entry, and use the battery consuming geolocate function. They just want to add todo’s & save a few seconds for each time they use the application. I can’t say that I’m a huge fan of the over-simplified way of structuring tasks, but I have to admit… it works. The gestures actually make sense, the object animations help you understand the interaction, and it’s as fast as Usain Bolt on the 100 meters.

The application retains the basic functionality, without sacrificing any of the user experience. Doing this, they’ve managed to give meaning to seemingly abstract, bright, colourful blocks. And all it took was placing them in the right context, with the right logic.

Just as Mondriaan did in the 1940′s.

Web to Web

Remember the days when we used Yahoo, Altavista or even Lycos to do our daily internet searches? Dig deep. We’re sort of into historic mode already, aren’t we? When you dive into the wayback machine, it’s interesting to see that all of those websites pushed an enormous amount of information in your face, categorising every possible interest the user might have, and providing a small search box hidden in between. Google on the other hand, never showed any of that, from the very first day it went online.

Search engines in 2002. Yes, you can search here too, somewhere.

What’s the point in showing the user a hundred possible interests on screen, while providing him a single search bar that can get him to that exact same point, even more tailored to his own input? Because they shifted the focus of the interaction model from presenting data into processing data, they could build up their interface with just a few objects, making it intuitive to follow through the story they wanted to tell you. I showed the stripped down screenshot (see below) to a number of friends, and it still downright amazes me how just the positioning, length & blue outlining of a simple text area can demand interaction. We all know that by typing in a word and pressing enter, we get the search results we look for. It’s not the Google logo that tells you to do that, it’s not the “I’m Feeling Lucky” button that explains how to do it… it’s just an ordinary shape that demands it; orthogonal angels, colored lines, and placed in the right context, with the right logic.

Google proved that it’s not about stripping away elements, it’s about adding just enough to let them tell your story. Minimalism is the means to the end. That they only needed one textarea and button to do it is irrelevant. What matters is, where others felt they had to support people in their interaction, Google trusted users in doing the right thing by providing just enough visible cues to make it happen. And they did. Successfully. Just bring a visit to Yahoo, Altavista or Bing and have a look on how their interfaces look like nowadays.

One text area, active state, centered position, fixed length, and blue outlines. You know what I’m talking about.

Conclusion

Rembrandt’s detailed portraits, or Mondriaan’s minimalistic work, I like them both. In the end it all boils down to two simple words: User Experience. So how far can we go in stripping user interfaces down before hitting the balance between functionality and experience? It simply depends on each specific design. Personally, I don’t think minimalism is just about the number of objects on your screen. It’s about the meaning they represent to the users. Some interfaces can flourish using just one button to establish a great user experience, others will need ten buttons while feeling just as minimalistic. It’s all about what your interface needs to convey, about the story you want to tell with your digital brushstrokes.

In any way, a minimalistic design needs to be the goal to achieving simplicity. Not the other way around. And how do you know when you’ve reached that balance? You go out into the world and test with real people. That’s how design works.

About the Author:

Frank de Jong is full-time UX / IX designer at daytime, guest writer for the digital-telepathy blog in evenings, and freelance designer after midnight. Lived in California, lives in Amsterdam, and loves to travel. Sharing thoughts & joining discussions is how we learn together. Talk to me on Twitter.

Leave a Response

5 Responses

  1. Sep 12 2012
    Jason Amunwa

    Awesome post, Frank! I totally agree that while hot trends will always come and go, we can’t lose sight of the user experience as our North Star.

    Currently, there’s a backlash brewing against the skeuomorphic movement, especially as it’s represented in iOS and OSX (http://www.fastcodesign.com/1669879/can-we-please-move-past-apples-silly-faux-real-uis). Personally, I agree with the reasons behind designing digital objects in this way, but it doesn’t necessarily mean we should blindly design everything to look like analog objects.

    Simplicity and user experience – these are the things we need to constantly remind ourselves of as we create.

  2. Sep 22 2012
    Shawn Adrian

    One of the best minimalism related posts I’ve read in quite some time. Thanks for taking the time to write it in such detail. Contrasting Google’s homepage with the other search engines, then relating it back to Mondrian really brought your point home. Nice!

    • Oct 10 2012
      Frank de Jong

      Thanks Shawn. I’m glad you enjoyed the angle of the article!

  3. Oct 26 2012
    lauren

    I design UI and UX, and have an almost a literal allergy to skeuomorphism. However, I have been finding the same kinds of issues raised in the article – while a clean, buttonless UI can feel like a clear blue sky it actually makes the app more complicated to use and alienates the user. I’m still looking for that balance between the UI that is as discoverable as it is invisible.

    • Oct 26 2012
      chau

      Lauren,
      That balance that you struggle with is all too familiar! Good design often requires many tradeoffs..

      I think the appeal to a minimalistic UI is just as you described–as discoverable as it is invisible. Minimalism offers the user this experience, which encourages exploration.

      But I can’t say that skeumorphism has a bad rep in my book. I’ve seen some beautifully designed, functional examples of this style. As Frank put it: “with every development in art & design, countermovements evolve sooner or later and question the motives and values of each new trend”. While there has been a backlash against skeumorphism, when implemented correctly, it is a design style (just like minimalism) that could effectively achieve your goal (aka the user’s and your client’s goals).

  4. Pingback: 4 Important Details that Create Intuitive Mobile Experiences