2020 UI/UX Trends

As we say goodbye to another year and say hello to 2020, here are some UI/UX trends that found footing in 2019 and are looking to be fully embraced in 2020, along with some new trends looking to get established in the minds and hearts of designers and developers across the globe.

 

Let's Start With the Oldies But Goodies

Evolving the world of animations.

The thought that complex animations will weigh down a site and make for a sluggish flow to a website’s experience. There are products available now use plugins and dev tools to optimize for creating smooth interactive animations. These tools offer a lot of control of parameters, easing curves, blending modes, filters, svg morphing. Well created animation will also benefit in sites that are engaged in storytelling. An example of one of the products is Greensock.

 

White space - the fight continues.

It remains - the struggle to convince some clients about the benefits of white space. This is becoming more important, especially when more sites are focused on the user experience formed around a narrative. If a message or an image needs the full attention of the user, it needs to be removed from other distracting elements. So by surrounding this element with white space, you’re allowing the user to take in that element and have the time to process it. It is believed that we process condensed information longer with less comprehension.

 

Don't Call It a Comeback

Go boldly, typography.

The last couple of years, the core user experience of websites and apps are based around typography, sometimes without any images. And after years of going with a very clean, elegant and thin fonts, bold typography is back. And not only bold, but very large and sometimes the type if overlapping other design elements such as patterns, textures and images.

 

Color palettes - make room for gradients.

After years of flat design where mostly solid colors were used, color gradients are making a comeback. Color gradients are used in large color blocks, hover effects and in typography. Effective uses of gradients can help form emotions from the users and to set the tone for the subject matter.

 

2020 and Beyond

Let's chat about chatbots.

While right now chatbots have limitations of how far they can advance a conversation, the need for instant gratification and more realistic interactions will only push advancements further. As the technology evolves, allows it to respond to customers even if they switch topics—which most chatbots can’t do.

 

An end to the mindless scroll. Custom navigation.

The user can get in a state of constant scroll. But if they are introduced to different scrolling and navigation for a specific component on a webpage, it will keep the user engaged.

For instance, if a webpage had traditional vertical scrolling at the beginning, then moves to a horizontal scrolling for a history/timeline section, the user would notice the change and be more curious about why the change happened and what is new in the section. You throw in new navigational elements throughout the history/timeline component (CTAs to learn more about a specific topic) then you have the user’s full attention.

 

That's right user, you did that. User-triggered animations and microanimations.

A growing trend is having animations triggered by an action from the user. Attention to detail is key in creating compelling microanimatins. What users have been used to for years, is simple hover effects on buttons, image hovers, etc. This will take user interaction to the  next level. Two main things make micoanimations key to the future of UI/UX. Humans are drawn to movement and by verification of their interaction.

These can also expand the brand presence. For an example, if content is loading, instead of the common wheel of death, the loading indicator can represent the feel/tone of the brand.

Where we believe we are heading in regards to microanimations is each interaction will have a corresponding microanimation.

 

Stop interrupting me. Uninterrupted UX.

Uninterrupted UX is all about creating an efficient and seamless process and reducing the amount of distractions. Designer and developers need to start thinking of better ways of drawing the user’s attention instead of having pop-ups and interactions that automatically happen without the user first engaging to make the interaction take place.

Along with reducing distractions, the steps required for the user to complete a task, needs to be condensed. This is extremely important when it comes to ecommerce. The more steps the user is required to complete their transaction, the more time the user has to second guess their purchase or to become frustrated with the process. Currently in mobile experiences, we are seeing the trend of users being able to complete a transaction all with just face id. Websites need to take a cue from this simplified transaction and create the necessary steps to make the desktop version more simple and streamlined.

 

Data + visual = data visualization.

Data visualization is not only charts and graphs designed into a digestible piece. Depending on what the user may appreciate, we are free to select data sources and present them in a graphic way. One of the best ways to make sure your message gets the necessary attention, is by presenting data visually. It’s also possible to uncover surprising patterns and observations that wouldn’t be apparent from looking at stats alone.

To take the visuals to the next level, adding user interactions will help the users gain the information they are most interested in. For an example, if a graphic is representing several statistics, let the user engage one of them to learn more details regarding that one stat.

 

Goodbye little arrow. The cursor 2.0

More and more sites are taking the cursor the next level. Most sites have a circle as the visual representation and some sites us a custom icons as the indicator. In some instances, the cursor will lock into place over certain key interactions like the menu icon. The cursor can also change depending on the type of content it is hovering over. As an example, a circle cursor could change to a play button when it hovers over a video component. This a very useful to help reinforce to the user that a different type of interaction is now possible.

 

Tell me something. The art of storytelling.

Digital storytelling is continuing to evolve. We believe most companies feel that they don’t have a compelling story of their company, services or products, or that their websites shouldn’t focus on it. You don’t have to be a charitable organization to have a impactful narrative. Every company has a story of what it does or why it does it. Helping the user understand those reasons, makes the user feel part of the story furthers the connection a user can have with a brand or a company. Storytelling can also help guide the user through the site and keep the user engaged throughout the experience.

 

More the merrier. Blended experiences.

Sites typically have different types of content separated by components. A growing trend to blend all types of content together. What we’re seeing is a website that does not consist of screens, illustrations, and videos. It’s the composition of all. Like with most of these new trends, it allows the website to engage with storytelling. If an autoplay video makes sense being associated with another visual, that should be allowed to happen instead of each of those things being in a separate composition. This keeps the user visually engaged with what is being presented as they scroll. It shakes things up from what the user is typically seeing across the web.

 

What makes a hero. Text only heroes.

This “text-only” trend is intriguing in that it’s removing the typical background image and just letting typography do the work. And depending on the purpose of that particular page - it helps get right to the point and informs the user about the content of the page. Users and designers alike, have gotten so use to the layout having a hero image that we haven’t stopped to question why that image is there and what is it’s purpose. Text can be treated in so many engaging and visually stunning ways, we shouldn’t fear the top of a page would be less visually appealing without some random image representing a company blog.

 

Darth Vadar would be proud. Sites turning to the dark mode.

This past year, we saw the popularity when dark mode came to iOS. Websites tend to be on the light side because in the design and development phase, we see it as a blank canvas which then to place a brand experience on top of. Another key reason was the belief that we needed webpages to be able to be printed for the user to have paper version of the content. But more and more sites are deciding to have a darker palette. As long as the visuals and text don’t suffer from visibility, there isn’t an issue with flipping the color spectrums. This also let’s a company’s true brand shine if that is the color palette that represents them.

 

The red or blue pill. The rise of AR.

Every time you take a minute and think about the possibilities of AR, 10 new ideas pop up. We typically think of AR in terms of shopping and navigation. But that is just the start. Every industry - from healthcare, automotive, education, government, etc., etc. is seeing the possibilities AR can bring. And even though AR has been around for awhile, more designers and developers are now getting the chance to experiment and develop experiences using AR due to easy-to-use software development kits from both Apple (called ARKit) and Google (called ARCore). And some of the issues that AR has been running into are being solved, such as environmental constraints and avoiding the loss of signal with geolocation forecasting.

With AR, we are now seeing our own day-to-day lives blend with digital experiences. Interactions with companies and products, will be something we don’t even have to think about. It will be a information gathering tool without any of the hurdles.

 

The responsibility lies with us all. Accessibility.

While accessibility isn’t trendy and stylish - it needs to be at the highest of importance to every designer and developer. The internet is a tool that needs to be easily used for everyone. Colors, typography, animations, all need to be under the microscope when it comes to accessibility. There are tools available that will do an audit of your site and provide and grade on the level of accessibility. The one upside for the digital experience compared to it’s counterpart - print - is that if there is an issue with a site’s accessibility, there a simple changes that can take place to improve it.

 

RECENT POSTS