How to separate gimmicks from real UX solutions

One of my biggest problems as a web designer, specially when dealing with UX / UI design, is learning to quickly separate those trends that are here to stay from the gimmicks that will become outdated in less than a few months.

Trends in web design are pretty much like music these days. Some songs come into the spotlight for their 15 minutes of fame only to be replaced by the next big hit just as quickly, whereas some become part of our collective culture and survive being massively overplayed. The majority go unnoticed, regardless of their qualities.

Only a very selected few go on to become classics.

One of the best examples of this is the so-called “hamburger” collapsed menu icon, now part of our everyday online life.

And while inspiration and curiosity play a big role in creativity, sometimes I see myself infatuated with some revolutionary idea to the point where I let it them influence a design just to fit it in.

I think that, as a professional, I should know better. Clients expect me and my team to be strong in our convictions and, if we can be swayed by something sparkly, then we are no more qualified to make these decisions than a client acting on instinct. We need to be able to stay strong and unbiased, as very often, clients will be the ones pushing for a new trend without realising the trade-off that comes with being experimental.

Our job is to condense our hands on experiences into information that will help our clients reach a position where they can make an educated decision themselves. And they need to do it trusting the fact that we can see through passing fads.

That’s why I tend to use small pet projects as the playground for any wild ideas that I come across. I can then take them for a test drive until I build my own opinion on their pros and cons. Whilst I cannot afford to do that with each of them, I can still make a small code-pen (an online sandbox to visually showcase small snippets of code), or simply keep an eye on how others are using them so I can still have an opinion without the actual leg-work.

That doesn’t mean we can monitor all trends, all the time; but we will know where to look when a client throws us a curve ball.

A Case Study: When long menus become a problem, prioritise.

For the sake of illustration, I have a perfect example to showcase our approach to trends.

We have always struggled when clients decide to add most of the pages on their website to their header menu. In our opinion, to give all pages the same priority means long horizontal lists that split user attention and causes confusion when deciding where to go next.

The more options, the more likely they are to not choose any.

wireframe-design-small-screen-final

In smaller screens, the menu will hide some of the low priority items within the menu toggle so they are still within reach but making the remaining items stand out more, perfect for “Call to Action” or those links used more often.

While big screens are perfect for this kind of menus, this forces us to collapse all the menu items as soon as they don’t fit the width of the screen. This will happen as soon as we hit a 12″ laptop, leaving a lot of users with a hamburger icon, even though there is still space on their screen.

wireframe-design-mobile-view

On mobile, the menu will collapse to the last few items, so at least the user can access quick links like “Contact Us”, or “Shop”.

The priority menu pattern dictates that instead of showing “all or nothing”, it is preferable to only move low priority items to the collapsed menu, leaving the most important items visible for longer until there is no option other than to hide them. While before it required some clever bespoke javascript, there are now plugins available like PriorityNav, making it more convenient and ready to go into your development workflow.

All of a sudden, we have found a perfect answer for a question that baffled us before. This addition is not something we have added as the new default but instead allows us to provide more options to some clients with heavy informational websites.

When in doubt, choose experience over novelty

There is always challenges when trying to balance staying up to date and the risks of thinking outside-the-box, as priorities are very different for every client. That is the main reason why the majority of corporate websites move at a slower pace than the rest of the internet.

While it may be frustrating from a designer or a developer point of view, it is us who need to offer real alternatives that transcend the simple gimmick and offers real value to both users and clients.

About the author:

Rubén Madila

With an eager eye for all things digital and a passion for creating, the web was the only place for Rubén to achieve his career ambitions. After training and working in a wide range of companies across London, he decided that the only way of doing the best possible job is to work directly with the client to produce the best results.