Each year, hot new UX design trends emerge. On one side, UX designers test out new ideas and establish new patterns. On the other, consumers react with their preferences for more efficient and pleasant ways to interact with digital products.

In the crazy profusion of alternatives, some designs are accepted and some are discarded. In the midst of this chaos, the balanced use of aesthetics, efficiency, and usability plays a major role in distinguishing the UX trends that have proved to be the strongest and garnered the most user acceptance.

Designers can come up with the coolest color scheme, the fanciest animation, or the boldest motion transition, but if the human interaction suffers as a result, the UX will be poor and people will quickly move on.

Looking back at 2018, we highlight some of the most notable web and mobile UX design trends in play today.

Seamless, One-page Sites

No more loading pages or hard cut transitions is the promise of seamless sites. All content is placed on one page and is displayed seamlessly without any conventional page-to-page loading routine as a visitor interacts with the site. Data is pulled in the background, and the site is designed in such a way as to provide a fluid and seamless user experience. The “Love for Iceland” site is a great example. The technique doesn’t work for all types of sites, but it provides great UX for smaller, simpler ones.

A great example of web design trends

A seamless site: Love for Iceland (by Veinti Dos Grados)

Purposeful Animation and Motion Design

Purposeful animation and motion design is an emerging UX design trend that works hand-in-hand with seamless one-page sites. Well-designed animation helps to focus people’s attention on specific elements and can create a certain brand aesthetic. Motion and animation can also help with visual hierarchy in UI design—the order in which people take in and process information.

Mobile apps have had this capability for a while, and with increased processing power, smooth animations have become the norm. As with seamless sites, the latest web-browser capabilities present UX designers with a new design opportunity on the desktop.

Seamless animation is one of the UX design trends 2018

Cocoladas creative blog artist preview, a site with motion (by Zhenya Rynzhuk)

UX trends 2018 -- purposeful animation

Blown Art Works and News platform motion design (by Zhenya Rynzhuk)

UX design trends in mobile app trends

3D card flip transition and animation (by Gleb Kuznetsov)

Mobile UX trends 2018

Flip for more detail animation (by Minh Pham)

However, designers are cautioned against copying a hot trend badly, i.e., just for the sake of following a current fad. Animation and motion need to serve a purpose within the context of use to enhance a design. While the system is processing or a page is loading, they may do so, but there’s nothing worse for UX than to create frustration for people by making them wait for a pointless animation to play out.

Hand-drawn, More Personal, Race-neutral Illustrations

More and more custom brand illustrations vs. stale, routine stock imagery are appearing everywhere in digital products. Using illustrations in digital design offers more versatility because they scale more easily to different ratios and screen sizes. What’s more, illustrations can represent a certain brand aesthetic and can be more playful, “softer,” and personal. It’s about appearing less digital in the digital realm.

This UX design trend is also gravitating toward illustrations that are inclusive, i.e., race-neutral, and representative of people of all ages.

Illustrations are also the latest mobile UX design trends

The UX trend is for illustrations to represent all people of all ages and races. (courtesy Shopify UX)

Illustrations are also the latest mobile UX design trends

Todoist app illustrations on "empty state" screens

Custom brand illustrations UX trends 2018

Mozilla's Firefox browser uses stylish custom brand illustrations.

Slack brand illustration UX trends 2018

The Slack homepage

Animated Empty Pages, Error Pages, and Confirmation Pages

Along with the UX design trend for more playful and personal illustrations (above) is a shift toward lively animated empty pages, 404 error pages, and confirmation pages.

The latest web design trends include animated error pages

Airbnb uses a fun animation on 404 error pages.

Animated empty pages another UX trend 2018

WeTransfer displays a playful conclusion page when a file transfer is complete.

Voice UI/Screenless UIs

In the next decade or so, computing will become even more prevalent and will grow beyond single devices and screens. Voice interaction is just the beginning. The need to type or touch a screen is slowly disappearing.

A voice user interface (VUI) already exists on most mobile devices. Whether we say “OK Google” or “Hey Siri,” our devices and apps already blur the line between GUIs and “screenless UIs.” We talk to our devices and they speak back to us. Voice-integrated chatbots are also appearing in various apps.

Whether people want to control their smart home with voice, need the latest traffic, news, and sports, or just want to set multiple timers for different tasks, intelligent voice-enabled assistants are ready to help. Using voice recognition and natural language processing (NLP), many Google apps already spring into action with a voice command if a user wants to translate a phrase into French, search for a nearby place to eat, or find anything at all on the web.

What this rising trend means is that people will adapt more and more to these kinds of voice-based interactions. Consequently, designers must also evolve with the trend because soon it will become the norm. UX designers’ jobs will shift to designing “screenless experiences.” We’ll still have our screen-based devices, but it’s going to be more about user flow, efficiency, and visual feedback.

More VUIs everywhere, another UX design trend

Great UX Copy

Words in digital design used to be an afterthought. Most designers are very visual and focus on aesthetics, layout, and visual hierarchy, not text on the screen. In fact, until the very end of a project, when perhaps a “UX writer” comes in or the final copy surfaces somehow, designers still use “Lorem Ipsum” placeholders for text in wireframes and prototypes.

That’s not the case in great UX design. In order to create a perfectly synced, holistic experience in style and tone, images and words on the screen have to work in unison from the start. Today, writing is just as important as interaction design and visual design. Increasingly, it’s about having a conversation; paying attention to the meaning of the words, the efficacy of communication, the overall tone, and the brand’s “voice.”

Words matter and UX copy now matters even more.

Great UX copy is a UX design trend

Mailchimp pays attention to its UX copy. Short and to the point.

Awesome Typography

Paying close attention to UX copy is an emerging UX trend, but how that copy is presented on screen is also increasing in importance. This is where typography comes in. Nowadays, every font imaginable can be used in digital design.

One of our previous articles on typography describes it so well: “Possibly with the exception of color, the typeface styles used in a design have a greater impact on the way a user perceives that design than virtually any other individual design element.”

Great typography can elevate a design from good to amazing.

Typography latest web design trends

Apple uses punchy typography with great impact in its minimalist site designs.

Typography UX design trends 2018

Stripe conveys a sense of sophistication with a bright color scheme and delicate typography.

Progressive Disclosure

Progressive disclosure is a technique in interaction design where only the most important, necessary, and relevant functions are presented at first, and everything else is relegated to a secondary and tertiary screen. It’s been around for a while on websites (especially web-based SaaS applications) and in desktop software design but has become a huge area of focus for mobile UX designers.

However, there’s good and bad with the technique, and it’s quite a balancing act. On one hand, progressive disclosure helps focus users’ attention on the essential content at the moment of interaction. On the other hand, there are risks—the main one being an assumption that the designer knows and understands what the most relevant or important user goal in the moment of interaction is. Fortunately, that danger can be minimized by extensive user research and user testing.

Progressive disclosure is a 2018 mobile app trend.

An example of progressive disclosure in mobile UX design is accessing Wi-Fi settings on an iPhone.

Content vs. Chrome (UI Elements)

Content vs. chrome is about separating the signal (the most important content) from the noise (anything else in the UI), stripping away anything that’s not necessary—making content shine and functionality clear. Mobile UX designers have realized that they must prioritize content over visual clutter. To achieve that goal, the mobile app trend is to go “clean” or minimalist as much as possible.

Despite having been fraught with usability problems, the infamous hamburger menu—which has become a universal shortcut to hide navigation—is here to stay because it reduces visual clutter. Today, designers do anything they can to strip away color and visual distractions on mobile in order to present clean visual designs, and in doing so, boost overall UX.

Mobile UX design trends

Instagram, LinkedIn, and Airbnb, among many others, now prioritize content vs. chrome.

Wider Use of Gestures

Connected to the “content vs. chrome” mobile UX design trend, using more gestural interactions on mobile is driven by many UX designers’ desire to present a visually clean yet highly functional interface. The potential danger that designers should keep in mind is the use of “hidden gestural interactions” where people have no clue that interaction is available—which is a big no-no.

The “lack of a signifier to the affordance,” as UX guru Don Norman would say, is a very similar usability problem to the hamburger menu. Without a strong signifier—a visual clue—interaction remains hidden to most people. Savvy UX designers overcome this problem by using subtle animated hints that make it clear what interactions are available.

Wider use of gestures are a 2018 mobile UX design trend.

The first part is "cool," the 3D swipe gesture, but the second part contains a "hidden gestural interaction," bad. (by Minh Pham)

As Jakob Nielsen wrote many years ago in an article on Gestural Interfaces: A Step Backward in Usability: “Norman pointed out that in the rush to develop gestural (or “natural”) interfaces, well-tested and understood standards of interaction design were being overthrown, ignored, and violated. Yes, new technologies require new methods, but the refusal to follow well-established principles leads to usability disaster.”

UX design trends 2018

Without hints, hidden gestural interactions remain exactly that: hidden.

Clear Visual Hierarchy

This isn’t so much a “new trend” and has been a basic design rule for eons, but because of the deluge of information we’re faced with on a daily basis, it’s become important once again and has been elevated to the level of a new UX design trend. What’s more, it’s a no-brainer when designing for mobile because of their smaller screens.

It’s important to always pay close attention to visual hierarchy in UI design. Visual hierarchy determines the order in which people take in and process information, and it’s a vital part of creating an optimal user experience.

Mobile UX trend: Clear visual hierarchy

Mobile app trend: Clearly defined visual hierarchy (design by Andrew Lefurge)

Better Use of Mobile Device Features

To provide better user experiences, more and more sites and apps are taking advantage of various built-in mobile functionalities, such as the camera, microphone, speaker, fingerprint scanner, GPS, and so on. When designing mobile apps, astute designers are taking advantage of biometric authentication in order to provide smoother interactions and better security.

Speedy checkout on many eCommerce sites has become child’s play due to integrated systems (like Apple Pay and Google Pay) that can be securely authenticated. Mobile voice search and navigation is now a breeze with the built-in microphone, GPS, and speaker, and various barcode-scanning, computer vision, and augmented reality applications are now made possible because of the ubiquitous mobile camera.

Today, smart UX designers are taking product design to the next level by fully utilizing as many built-in mobile device functionalities as possible.

Mobile app trends include easy checkout with Apple Pay and Google Pay

Mobile app trends include easy eCommerce checkouts with Apple Pay and Google Pay.

Augmented Reality

AR applications connect both real and virtual worlds by superimposing a computer-generated image on a user’s view of the real world and thereby expanding reality by displaying useful, complementary information on a mobile device.

“I see AR as being profound” and “AR is going to change everything,” says Tim Cook, CEO of Apple, who is clearly a big fan.

It’s the complementary nature of AR that’s important for designers to consider. Many people see it as something that will be an essential part of eCommerce. From virtual makeup and hair to trying on shoes, sunglasses, hats, bags and various outfits, AR in eCommerce is going to be the defining norm. For example, Housecraft uses a mobile device’s camera and the power of augmented reality to let people place fully rendered 3D models anywhere.

Pioneering designers on the cutting edge today are constantly thinking about AR and how it could enhance a product’s design. Can innovative new apps be designed that incorporate AR? Could an existing app benefit from its use?

From cars to fashion to furniture and architecture, in Tim Cook’s words: “I don’t think there is any sector or industry that will be untouched by AR.”

Augmented reality is one of the latest UX design trends

Emotional Design, Emotional Experiences

Everything around us has been designed in some way, and all design ultimately produces an emotion. We experience an emotional reaction to our environment moment-by-moment; a like or a dislike, elation, joy, frustration. We “feel” it. It’s personal.

Emotional design took center stage in 2018. Whether employing neuroscience, persuasive design, or the triad of emotional design (visceral, behavioral, and reflective), product designers are realizing more and more that users are human, and digital interactions produce both positive and negative emotions.

Today, successful brands connect with users more effectively through storytelling and a narrative and aim to be more conversational (see below). Successful digital products tend to feel more natural—less cold, less digital. UX designers strive to eliminate frustrations, but in addition, aim to find opportunities that bring customers pleasure and turn critical moments into positive emotional experiences.

Latest design trend: Emotional design

Fun UI Animations Boosting UX

When it makes sense, well-executed animations can make a UI feel more natural and can create a more personal, engaged emotional experience, but only if designed to enhance the experience. There are far too many pointless UI animations found on Dribbble that serve absolutely no purpose. For that reason, fancy animation simply for the sake of showing off is a cheap trick and not something UX designers worth their salt would want in their designs.

Mobile UX design trends, fun UI animations

A login form animation that mixes a little fun into the interaction. (by Darin)

UX trends 2018, fun UI micro-animations

A mobile slider control animation that is meaningful and enhances UX. (by Virgil Pana)

Conversational Design (Chatbots, etc.)

According to Gartner, chatbots will power 85% of all customer service interactions by the year 2020. The average person will have more conversations with bots than with their partner. (Now that’s a little unsettling!)

Brands want to connect more deeply with customers—tell stories, form narratives and have “conversations.” A conversational user interface is often a chatbot—software that mimics a conversation with a real person via text or voice.

Designing chatbots requires a big adjustment in the way designers think about these new UIs because chatbot design has its own set of pitfalls. Though designers have a wide range of tools and skills at their fingertips, they must adjust their perspective in order to adapt to the shift and make the effort to improve their competency with conversational interfaces.

Chatbot trends

Chatbots demonstrate personality through tone of voice. Above is a set of diverse tones of voice from The New York Times, Spotify and PennyCat. (from an article on chatbot UX design by Merve Postalcıoğlu)

Advanced Personalization

Advanced personalization means delivering hyper-localized, super-personalized content and tailor-made UIs based on a whole host of factors. It’s the opposite of one size fits all. It’s about delivering what people desire in the moment, contextually; the right things, at the right time, in the right way. It’s about giving all users the best experience possible.

The widespread deployment of artificial intelligence (AI) and machine learning (ML) is already enabling more advanced personalization of digital content and eCommerce. Increasingly, consuming news and sports, checking the weather and traffic, and shopping online for groceries will be a lot smoother and more personalized using predictive analytics, anticipatory design, and tailored UIs. Tailored user interfaces make it possible to deliver experiences that include all people regardless of limitations or disabilities.

With the help of their UX designers, innovative companies will soon be launching products that use AI to enable more natural interactions and provide more personalized experiences. Designers may miss out unless they get ahead of the tech curve and consider how these new technologies could be taken advantage of in order to heighten the UX of digital products.

Google Now Predictive Personal Assistant mobile UX design trend

If Google doesn't think you need something at the moment, it won't be displayed. It's the embodiment of anticipatory design.

Full-screen Experiences, HD Quality Videos

In this day and age, HD-quality videos and high-resolution images are showcased on beautiful edge-to-edge screens everywhere. YouTube lets people go full-screen with HD videos that cover the iPhone X’s entire screen for an awesome experience. Mobile devices such as the Galaxy S9 and iPhone X allow “frameless design,” full-screen app experiences that are a force behind the trend of extending visual elements to fill the screen.

It’s critical that designers make sure the user interface is clean and minimalist—free from clutter and any unnecessary navigation elements that may distract users’ attention—and that all content (images and videos) is HD quality. The main idea behind the full-screen experience is that nothing should stand between the user and the content.

UX trends 2018 mobile app trends

Pixar app (by Happy Co.)

Rapid Onboarding, Fewer Tutorials

Nearly one in four users will abandon a mobile app after using it just once. Good onboarding that improves user retention makes a great first impression, gives users a quick introduction, and clearly communicates its value proposition.

User onboarding has become widespread on mobile. Maybe even a little too much. The new mobile UX design trend is a more seamless kickstart to the freshly-installed app, which means fewer onboarding screens and tutorials. What this means for designers is more focus on really understanding who the users are and really designing experiences that are intuitive—so no tutorials needed. It works “right out of the box.”

A user interface is like a joke: If you have to explain it, it doesn’t work.

What not to do right away: Don’t ask users to allow notifications or access to their location, contacts, camera or microphone, etc., or ask them to sign up until they’re well into using the app.

Tumblr onboarding UX mobile UX trends 2018

Tumblr gets users going with a quick intro and only asking for an email address.

Some UX designers may resist design trends because they don’t want to be seen as “followers.” However, although keeping up with UX design trends can be a trap if not done judiciously, keeping abreast of what is current is crucial. Doing so can help a UX designer to become, or continue to be, contemporary. Additionally, typically filtered through UX design experiments, UX design trends have been proved to work, and as such, they can boost UX designers’ efforts to meet people’s high expectations.

Some UX design trends will become the norm, and some will simply fade away. Through a process of ruthless elimination, only the strongest and most useful will survive, which is great for advancing the art and science of exceptional user experience design.

• • •

Further reading on the Toptal Design Blog:

Understanding the Basics

What is visual hierarchy in web design?

Visual hierarchy in web design focuses the visitor’s attention to specific parts of the page as they visually scan the content of that page. A clear sense of visual hierarchy guides people toward content or actions of importance. In a digital product it could be brand messaging or a primary call to action.

About the author

Miklos Philips, United Kingdom
member since April 26, 2016
Miklos is a UX strategist and lead product designer with more than 18 years of experience. As a full-spectrum product designer, he mediates between user needs, business objectives, and technical feasibility resulting in product designs that work for the intended audience and impact the bottom line. [click to continue...]
Hiring? Meet the Top 10 Freelance UX Designers for Hire in February 2019

Comments

Aleks Pedchenko
These are all wonderful techniques that help us. But the harsh truth suggests that most sites and applications are still very bad in the UX sense.
comments powered by Disqus
Subscribe
Free email updates
Get the latest content first.
No spam. Just great articles & insights.
Free email updates
Get the latest content first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.
Trending articles
Relevant Technologies
About the author
Miklos Philips
UX Designer
Miklos is a UX strategist and lead product designer with more than 18 years of experience. As a full-spectrum product designer, he mediates between user needs, business objectives, and technical feasibility resulting in product designs that work for the intended audience and impact the bottom line.