Under the lens #6: Flat UI design – Gnosh

First off, I do know that flat design is a dated language (all hail material design!), but this is not an article which will tell you about what it is (maybe a little for my non-designer friends!)

I’m a big fan of the flat design language, but only when its done right. It pains me when I stumble upon flat design that is poorly executed in webpages and apps. This article is about one such application of flat design.

Background

As the name implies, the elements are flat, meaning they do not have any depth. (Shallow beings, huh?). Every element be it a button, an image or a video is essentially on the same plane.

This simplicity is what makes this design language attractive. It is simple, clean and easy to implement. When used in the right way, it can make any webpage look and feel elegant and modern. It is a paradigm shift in design where people transitioned from wanting to fill up the entire screen with content, relevant or not, to wanting to leave generous amounts of negative space.

It is, in most cases, stripped down to display only the most important content, content that deserves our attention. Another huge advantage of flat design is the absence of effects like shadows, depth, highlights, textures etc. This makes tweaking and iterating the design easier than before. Here are a few examples of flat design interfaces.

Example4

Example1

BG

With that said about flat design, lets meet the star of today’s roast, www.gnosh.co.uk. Please visit it if you can/want/feel like it. If you can find out what the website is about in the first few seconds, I salute you. I had to scroll down and hunt for what the website is about.

Main page pic

The Bad

It has the flat design language? yes. It looks modern and trendy? yes. It looks awesome? yes. It is easy to use? NO!! Absolutely not.
The entire page is filled with text in a variety of sizes, styles and orientations. So, which of these text are buttons and actionable items? OOH! I like guessing games! -_-

Have a look at a few examples below:

Clickable?1For example, not all of the awards are clickable.

Clickable?2You’d think that you could click on that arrow/box/shared/wherever on that card, but NO.

Clickable?3And no, neither the sharing, the up nor the down words are clickable.

So, which is a button and which is just plain text? There’s nothing to distinguish actionable from non-actionable items on the page. Buttons w/o borders like in pictures above are not immediately evident that they are buttons. I ended up clicking all over the page trying to find which text was clickable. Their page analytics must’ve definitely gotten excited by all those clicks hahaha!

Some text which actually look like they are clickable are not.

Shared
Well, it says “share” and it is underlined. So, it must either be a share button or a link right? right? Wrong. It was just the background. All these small misuses of flat design principles have turned using this website into a cumbersome experience.

Another aspect which bothered me a bit was the near whimsical arrangement of the elements. Theres a semblance of a grid system, but mostly looks random. Why am I not bothered much by this? You’ll see!

The Good

I’m done with the negatives and I have to give credit where it is due.
I’d like to begin with the overall design and layout: Very bold, very different and an awesome attempt, I have to say. I’ve personally not seen a layout as different as this one. The designers have used negative space very well IMO.
This is the one single design aspect which reduced the impact of the random arrangement of the elements on the screen. The negative spaces helps the eye move freely thought-out the page and gives some much needed breathing space. Though I must admit I experienced a little discomfort after spending sometime scrolling up and down the page. Could be due to the scattered elements? Maybe…

Takeaway

So, what did I learn from this? To be very careful using flat design language. I learned the importance of using borders as visual indicators of actionable areas and more importantly, this served as an excellent example on how the right use of negative space in your layout can have a positive impact on the perceived ease of use.
The most important of all, I learnt to not sacrifice user-experience for the sake of design.

Well hey,

Design is not just what it looks like and feels like. Design is how it works.

– Steve Jobs.

Cheers!

Enter your email address to follow this blog and receive notifications of new posts by email.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s