Break Rules
To design better products

May 30, 2013 - Comments

We live in a cross-platform and multi-device world. Most of us switch between a smartphone, tablet and laptop throughout the day depending on our needs. As designers and engineers, we have to adapt our product to various operating systems and platforms, each of which has their own guidelines, interaction patterns, and of course interface.

The way Wunderlist feels and acts should remain consistent regardless of what device you’re using now or in the future. Our ultimate goal is to keep the complex technology running our product hidden behind an intuitive human experience across all devices.

As the definition of device expands, we find it’s increasingly necessary to break with existing convention. We need to define new interaction paradigms - the guiding principles that describe distinct concepts, thought models or behavior patterns. Here’s how we approach our design decisions at 6Wunderkinder:

Know the rules

Designing a product that people love means deeply understanding how people interact with it. And it’s not only how people use our product, but why and where as well. Every product is a result of certain paradigms and the design decisions we as product designers make based on them.

Keeping paradigms consistent is essential in product design since people form habits once they become comfortable with how a product works. These guiding principles become even more important once other developers build products on top of your platform. Because of this, companies like Google, Apple, and Microsoft decide on specific paradigms for developers to follow to ensure consistent behavior and interaction flow within their operating systems.

Since human beings develop habits quickly, the closer we stick to the paradigms, the more natural our product will feel. Since our 6Wunderkinder team designs software that runs across multiple operating systems, we need to follow different paradigms on each platform in order to make Wunderlist easy to use on different devices. But sometimes we come across a situation where sticking to the rules would mean complicating the experience for our users.

Break the rules

Whenever we identify a problem that would compromise the consistency of the cross-platform Wunderlist experience, we invest a lot of effort to reach a solution that is simpler and more natural than the existing paradigm. That’s when we push boundaries, break rules, and eventually move interaction design forward.

When Twitter introduced “Pull to Refresh” some years ago, it replaced an inelegant refresh button with a very simple gesture. And today, whether we're on our iPhone, iPad, Android, or Mac, we couldn't imagine it any other way. The simple and playful pull-to-refresh interaction is a great example of how to break conflicting paradigm rules and invent new ones that work across multiple platforms with ease and eventually feel natural to people.

This is how design paradigms evolve. With the introduction of Wunderlist 2, we established two new design paradigms, each of which we feel is moving application design forward in small evolutionary steps. The Detail View and Minified View were different from anything we had seen on mobile or desktop.

Detail View – When we designed the Detail View for Wunderlist, we followed a very simple metaphor of three sheets of paper. Our goal was to allow a user to quickly move from the details of a to-do to the sidebar with an overview of all lists with just two simple swipes – no tapping at a certain corner of the screen or page transitions required. We also aimed to keep the context of the list you were in without having to move to another fullscreen page with a heavy title bar. The introduction of the Detail View has made the interaction faster and more natural, while increasing the amount of space available to display all the information our users find important.

Minified View – With the introduction of the Minified View in Wunderlist, we were evolving the existing paradigm of application windows in a desktop app. Specifically, we were thinking of different scenarios where it would make sense to resize your window in order to use Wunderlist alongside another app. The app window’s responsive behavior while inspired by modern responsive websites was completely new to desktop applications. We figured that the app window should resize while rearranging its elements in a way that left the remaining space perfectly useable for the current list.

Define new rules

The best part about our job is seeing our work inspire others. And it’s even better when the concepts they adopt from us become new paradigms of their own. After the launch of Wunderlist 2, a number of developers and designers asked if we could provide some guidance on the Detail View interaction. So, we open-sourced the code for Android some months ago. Since then, we’ve seen even more products picking up our concept of the Detail View and building it into their apps. Here’s a small sample:

As product designers, we respect the existing paradigms and guidelines of each platform, but ultimately make decisions based on our users’ needs. Whenever we find conflicting interactions across platforms, we try to come up with a better solution. It’s easy to follow guidelines. It’s harder to know when to break them. We want to encourage all developers and designers to question existing paradigms and push boundaries with the end goal of making products easier and more enjoyable to use.

Follow us on Facebook, Twitter or Google+ for our latest news.

comments powered by Disqus