2016 has been a great year for UX and UI. As we head into the fourth quarter, there are already a breadth of developments to ponder.
We've seen huge growth in app-driven companies, and those brands synonymous with high-quality user journeys. Think of Instagram, Airbnb and Apple Music – all celebrated by their users for their superior usability.
But what’s next for user experience and UI design? How can brands better improve experiences and interactions? And how can we pave the way for cleaner, simpler journeys?
Animations and interactions
Material Design, a new design language from Google, has fundamentally changed the way designers can create immersive, multi-layered experiences for their users. We've seen significant growth in animations and interactions since Google implemented Material Design across the latest versions of Android and many other Google products.
Suddenly, digital interfaces achieve what they always promised: they excite and engage users. Introducing animations to a design gives fluidity to the user experience as well as making it pleasurable. As skeuomorphic design falls further out of fashion, we can focus on how animated interactions should best serve user needs and not be abused for the sake of a flashy experience.
Interaction design has improved. Now layouts need to catch up. I expect to see a stronger implementation next year of both cards and grids, which offer systematic design patterns for mobile devices. By de-cluttering layouts and implementing strong interaction points, brands will be able to combine smooth animations with logically-organised content.
Brands will achieve more impact by making user interactions reactive – changing the colour of a button, for example, once it's been selected. As Newton’s Third Law said: ‘For every action, there is an equal and opposite reaction’. In this instance, the reaction should be some form of movement or to tactile response for the user.
image by Ehsan Rahimi
Invisible design is a term used to describe steps within a user journey that feel simple and seamless to the user. Uber has mastered this by allowing users to photograph their credit card to automatically retrieve their bank details and add them to the app. The result: the user bypasses an often annoying and disruptive step with just a few simple steps.
Invisible design allows for a smooth user experience with the simplest of steps rather than asking the user to do too much. I expect to see more brands target the input-heavy areas of their services and reduce their friction using invisible design. Rather than thinking about the user journey in steps, brands should think about how to simplify the whole journey using the correct UX techniques.
Dropbox is also a good example of how invisible design can be used. Instead of clicking ‘upload file’, browsing to locate it, and then finally uploading the file, Dropbox allows users to drag files straight from their file browser. By adopting native operating system practices that have been embedded in users for years, Dropbox has successfully achieved invisible design.
In addition to invisible design, we expect to see a stronger presence of ‘micro interactions’ in 2017. Micro interactions are small design choices used as cues to make the user perform a particular action. This can be as simple as animating a rollover or transitioning from one area to another.
Micro interactions are an example of detailed UI design, and they can fully strengthen any interface. They're closely linked with animations and interactions, and that relationship is set to get closer.
image by webdesignerdepot.com
The success of Dropbox and Uber’s invisible design stems from their attempts to fix critical failures in their products. If an experience is too difficult for a user, they will drop out of a product and find another.
Understanding and discovering all the drop-off points in an interface is key to its success, as it ensures all the mechanics are in place to help users convert or reach the desired goal.
UX designers should always think about how and why a user may bounce off a page or not perform an interaction. User testing goes hand-in-hand with this and, by creating several viable successful journeys, we must also consider how the journey can fail.
By looking into this in more detail and creating failing user flows we can better understand and assist our users.
Responsive design has become a mainstay of digital in the last few years. We now have to discover how we can improve and innovate responsive design further.
With thousands of devices used to browse millions of responsive sites daily, we must fine-tune our elements and allow them to accommodate every dimension and screen size. A way to achieve this is to think about everything as its own responsive element. By observing how each element can rebuild itself, we can then fully optimise a layout to accommodate as many devices as possible.
Although many digital teams have got to grips with responsive design, the stress of so many devices can put a strain on project budget and timeline. However, with the help of many UI frameworks, we can ensure consistency across devices.
image by Karol Podlesny
With products such as Pattern Labs and Hologram proving successful, we are probably going to see an increase of UI frameworks. Twitter Bootstrap, Zurb Foundation, Onsen, UI Kit and Google’s Material Design have all made progress in this area, but designers will be keen to create and modify their own frameworks for clients.
These UI frameworks have full animations, alignment, typographic and interactions implemented out-of-the-box. All it would take is to find or create a solid UI framework and ‘re-skin’ it per design. If a brand requires style changes to its global portfolio of products, a framework can make the amends quickly and consistently.
Another huge benefit of creating individual UI elements is consistency and the ease of building pages. Although designers believe that time spent on alignment and the correct font weight is time better spent elsewhere, we must not forget the positive re-enforcement users feel when they use a perfectly laid out design.
Users may not consciously notice the small details and design choices, but they're there for a reason. This reason is to increase the credibility and usability of a website by holding up every element to scrutiny. Using strong UI frameworks allows elements to be integrated easily and ensures no detail goes missed or forgotten.
Parallax scrolling looks and feels great, but can sometimes struggle to perform on low-specification machines. By incorporating smooth, optimised, frontend coding, much like Google has with Material Design, we can make very pleasurable pages that scroll seamlessly and also work on multiple devices.
Luckily, smartphone specifications are improving everyday. Technology has increased so extensively in recent years that my Samsung S6 is many times more powerful than my first PC. And with the increase of bandwidth being offered to wireless devices, we can start to increase page sizes as the load time is unaffected (thanks to higher speeds such as 4G).
With better specifications comes better animations and scrolling. As CSS3 is constantly refined, large repositories now exist online that predefine animations to work across all browsers and devices. We should expect to see some really interesting sites that have smooth scrolling implemented.
This year we've seen visual updates to Instagram, Airbnb, and Apple Music. These updates have stripped back the app design, replacing it with black and white elements (used sparingly) with very small injections of colour.
This design method is to support a theory that users do not need to see a massive amount of personality in apps. Instead they must reach the goal of conversion without being distracted by overly-designed elements – an approach known as minimal design.
Minimal design incorporates strong typography and bold font weights, which helps funnel the user in the right direction by using fonts as a hierarchy tool. Some critics say this can come across too minimal and does not support brand breadth.
In my opinion, offering a basic look and feel with small injections of branding can make for a neat user experience.
UX and UI hold the crown
Many digital trends come and go, but the growth of (and attention to) UX and UI is here to stay.
Brands are beginning to understand the fundamental importance of meeting user needs. From the alignment and animations of individual elements, to fun interfaces and interactions, we'll see a huge growth in how UX and UI will support relentless device growth.
The result should be a more considered user experience for every digital service that continually keeps the user front and centre.