2 years ago

Making something simple is hard. Anyone that’s tried it is nodding their heads right now. If you throw in client agendas, multiple opinions, user expectations, feasibility, and a sprinkling of compatibility issues it becomes Mission Impossible (the first one).

This is something I do for a living. And for fun.

What is it?

Designing an elegant solution is the best part about my job. It can be applied to any project, even the ones that at first seem mundane.

An elegant solution is anything that leverages opportunities not previously considered for a new or existing problem. The problem can be mechanical / functional or more esoteric like user experience or branding.

Consider the humble hamburger menu. Animating the parallel bars into an X that closes the window provides context, requires no extra “learning” and is an efficient use of space.

I also found a website that, upon clicking an item changed the cursor into an X (viable is this use case because that was the single available option in that state) giving the sensation that your cursor absorbed the button.

alt

To make something simple but also engaging you must leverage all available elements. That’s not to say add more things to your design, quite the contrary. It’s about using what you have more effectively, or creatively. The end result will be a truly engaging experience for the user.

At the Core

The elegant solution method applies to all aspects of design. At the core of an elegant solution is the abolishment of preconceived notions. Things such as “all clickable links must be blue and underlined” or “scrolling down is the best way to navigate a website.” Conventions are the death of innovation.

An elegant solution can be measured by its objective. The “pull to refresh” feature on mobile, was an elegant solution. It was a naturalised extension of an existing “learned” gesture with the objective: I want to see more. The feed or list responds to the new state by “sticking to the top,” and releasing draws new content. The action is connected to the objective and is very intuitive.

alt

From a technical perspective the pull to refresh feature has been made obsolete. Faster internet speeds allow many apps to simply auto-update. However, the feature has prevailed, why?

Well the transition will eventually be made but having the feature there gives the user certainty; confirmation that they are viewing the latest information. This is very important for the target user. In the meantime UI designers have taken advantage of the feature and added some novel animations that are both functional and engaging.

alt

In an out-of-character move for Facebook (being innovative), they introduced their own adaptation of the gesture. When inside an image or video scrolling up will exit / close it.

This is an elegant solution as it is ergonomic for the user, the action is tied to the objective, and plays to the scrolling / feed nature of the app.

alt

Introducing your own conventions

I applaud Google for their innovations in UI with their material design. Each execution is driven by a set of governing principles that define not just WHY but HOW.

Above this is the willingness to take risks and try something new. The evolution of the “pull to refresh” feature in their app was a response to new larger mobile devices (I suspect). It could also be an extension of the thoughts behind the single objective button. (The action changes based on the content) see below:

alt

I’m sure a lot of you have not used (or even seen) this feature. SImilar to the “shake to undo” feature Apple tried to introduce, it may not catch on or it could come to redefine the users understanding of this gesture forever.

alt

Esoteric elegant solution

One of my favourite new toys is dynamic branding. Brands that are agile, that can evolve, be more engaging and more memorable that any static logo. They are an elegant solution to applying a brand to a multitude of instances without becoming sterile and bland. They are very good for brands that are creative or innovative.

alt

The standard is not enough

Elegant solutions first and foremost break from conventions. A perfectly adequate solution is not elegant. It is about re-thinking the standard and approaching problems from a new (or revised) angle. Whether you take into account new technologies, new trends, or just your own creativity.

The Bauhaus believed there was no distinction between form and function. I would revise this to be; form and function must both work towards creating an engaging experience for the user.