We’ve been writing recently about conversion rate optimisation and offered 3 Easy Tips to Improve your UX Design. But let’s not forget the critical role of the UI in the user’s decision-making process and overall experience. At Equals Creative, we keep a close eye on the latest and most popular UI trends; helping our clients to create the most intuitive user experiences.
We review the UI trends of 2016 and offer our top tips for seamless UI design and optimum conversion.
One: Big, bold colour
The energy of material design is not just influencing design style. The UI colour trends of 2016 are much bigger, bolder and brighter than ever before. Where flat design was complemented by white space and subtle colour schemes, material design is paired with vibrant colour schemes and backgrounds. 80’s vibes are prominent, and gradients are back in full swing. Intense, luminous and radiant colour schemes offer a fresher and more contemporary experience than we’re accustomed to in flat design. In their style article, Google summarises material design colour schemes as “inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights”
Top tip: Google recommends taking colour palette inspiration from contemporary architecture, road signs and athletic courts. Be creative and play around with unexpected combinations of primary, secondary and accent colours.
Two: Material vs Flat Design
The life-like skeuomorphic design trend now seems a thing of the past thanks to flat design, it’s cleaner and more contemporary counterpart. When Google came to the fore with their own design standards, they took flat design and added just a hint of skeuomorphism (shadows, movements). Google’s material design is considered more intuitive and palatable, making the UI easier for the user to grasp.
In 2016, UI design leans towards a compromise between material and flat design. Poor execution of either style can make the UI confusing; extreme flat design can be simplistic and unintuitive; material design overkill can be clumsy and confusing. UI design in 2016 definitely says ‘less is more’.
Top Tip: Stick to subtle uses of depth and motion in UI design to help guide a user to parts of your design.
Three: The Hamburger Menu
The Hamburger icon has been adopted extensively over the last few years to display site menus, and it’s still one of the most popular UI trends in 2016. With the desire for evermore sleek and clean design, unnecessary content has been stripped away and the hamburger icon has become an intuitive and iconic navigation feature. In the endeavour for this cleaner design however, there is a temptation to hide too much content under the hamburger menu. Whilst this may work for some sites it won’t for others.
If discoverability is an overriding factor for your site, don’t be tempted to hide your navigation away.
Top tip: Try putting your hamburger icon in a box to highlight it – this can increase click rate
Four: Smooth scrolling and anchor points
With potentially large quantities of content on single pages, users should feel able to navigate easily to their desired location. Smooth scrolling enables the user to do this. The gliding effect of smooth scrolling is more aesthetically pleasing than instant jumping and allows the user to gauge their navigation path to a particular anchor point, enhancing the storytelling element of the site and creating a more engaging experience for the user. If you’re using smooth scrolling on your site try not to overuse it and dictate your site’s story, this creates an unnatural and restricted user experience. The reading experience should be optimised, but ultimately, left in the hands of the user.
Top tip: Keep smooth scrolling natural and intuitive, not forced and controlled.
Five: Animated loaders and spinners
There’s no getting away from how important site load speed is for your customer. But if you are concerned with slow load speed, animations can help to distract or engage users during tedious loading intervals, and 2016 has seen some interesting trends in this realm. We love Slack’s loading gif for it’s smoothness, simplicity and fun. Slack’s four colours link up to represent a hashtag and connecting with contacts. The sign of a great loading gif is that it becomes engrained in the UX; we anticipate it’s arrival and it becomes a familiar and comfortable part of our experience, as opposed to an obstacle standing in our way.
The interactive nature of apps is the ideal environment for loaders and spinners. Consuming content via websites is arguably more one-directional, so users can become impatient when waiting for a page to load. Loading animations can draw unwanted attention to the load time, interfering with the site experience and irritating the user further. Youtube overcomes this with it’s subtle loading bar which hints at load time rather than emphasising it.
Top Tip: With easy tweening, Flash helps you create more natural movement and a smoother more lifelike gif.
Six: High definition video: The new hero image
The ever-popular hero image – the large banner image at the top of a page – is often the first thing a user will see when they reach a site. The hero image can be very successful; vision is our strongest sense, and users are consuming content in more condensed ways than ever. This makes the hero images excellent for summing up a brand’s message or a content theme. With the success of the hero image trend, hero video offers an inevitable progression to powerful moving images. Video is an extremely engaging and dynamic tool, and when used in UI design can offer even more impact than images. With screen resolutions improving and internet speeds increasing, the opportunity for streaming high quality and longer hero video increases.
“Hero video offers an inevitable progression to powerful moving images”
Video can be one of the most effective ways to impress a user in the few short seconds you have to reach them. But a great hero video is no mean feat. With plenty of variables to perfect like great quality audio and visuals, the right music for your brand, framing and lighting to name a few, it’s best to seek specialist guidance if you want your hero video to do your brand justice.
Top tip: If you can afford to hire a professional in to produce your video, it’s well worth the money invested. Hero videos speak volumes about your site and your brand and a poorly executed video can be extremely detrimental to conversion.