A Retrospective
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 the last year, we highlight some of the most notable web and mobile UX design trends in play today.
Web and Mobile UX Design Trends
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 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.
Cocoladas creative blog artist preview, a site with motion (by Zhenya Rynzhuk)
Blown Art Works and News platform motion design (by Zhenya Rynzhuk)
3D card flip transition and animation (by Gleb Kuznetsov)
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.
The UX trend is for illustrations to represent all people of all ages and races. (courtesy Shopify UX)
Todoist app illustrations on “empty state” screens
Mozilla’s Firefox browser uses stylish custom brand illustrations.
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.
Airbnb uses a fun animation on 404 error pages.
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.
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.
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.
This article 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.
Apple uses punchy typography with great impact in its minimalist site designs.
Stripe conveys a sense of sophistication with a bright color scheme and delicate typography.
Mobile-Specific UX Design Trends
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.
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.
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.
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.”
Without hints, hidden gestural interactions remain exactly that: hidden.
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 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 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.”
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.
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.
A login form animation that mixes a little fun into the interaction. (by Darin)
A mobile slider control animation that is meaningful and enhances UX. (by Virgil Pana)
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.
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.
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.
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 gets users going with a quick intro and only asking for an email address.
Some UX Design Trends Are Here to Stay
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.
Originally published at www.toptal.com