UI Design trends to watch in 2024
In this piece, we will explore the top three UI design trends that we believe will dominate 2024. We will discover how these design trends work and the ways in which UI designers, web developers and digital marketers can incorporate them into their design projects.
Trend 1: Virtual Reality (VR) and Augmented Reality (AR) in UI design
VR vs AR:
VR creates a highly immersive simulated environment that users can interact with and use multiple senses to physically experience.
Augmented reality (AR) involves overlaying digital content or objects onto the real world, allowing users to interact with both the physical space and virtual elements simultaneously.
What does it mean for designers?
When designing for augmented reality (AR) and virtual reality (VR), it’s important to consider that the interactions will primarily be virtual, and the haptic feedback (physical feedback) will be specific to each device and not standardised initially. Designers need to account for virtual interactions such as long-press, short-press, swipe, flick, etc., while also considering the depth and spatial targeting of the user’s actions. This varied spectrum of possible interactions gives rise to a multitude of questions. How deep did the user press? Where in space are they targeting? Do you have fixed or dynamic depth? How far out is the object of interaction? These are all questions and challenges that designers will need to get used to solving.
Designers should be prepared for a variety of input types and realise that interactions in AR/VR are often of a mixed nature and not purely gestural. Visual interactions such as eye movement tracking, thumb controls, speech recognition, head-tilt gestures, and more can all be involved in the user’s experience.
When designing for AR/VR, it’s crucial to recognise that the focus is no longer on designing for a specific device size but rather for the human eye itself, considering the visual capabilities and limitations of users. It is also important to consider that there should also be a focus on creating a seamless integration between the virtual and physical elements, ensuring an experience that users can interact comfortably and effectively, in a way that feels natural.
At this current moment in time, there is one drawback that is hard to ignore. To achieve the full immersive experience, requirements such as advanced VR/AR headsets with handheld controllers which can be costly and time-consuming to implement. Due to this, current limitations in hardware can also pose obstacles that will hinder achieving the desired user experience.
Designing for VR/AR
As creating VR/AR experience involves designing for the eye rather than a specific screen size, designers use Field of View (FOV) to set the limitations for the space in which they can create. This is important, because while your interactions are not confined strictly to the viewport’s size, your user’s ability to see them absolutely is. Your user has a total field of view, but your design needs to fit reasonably within their comfortable cone of standard vision. The max limits of the average FOV is: 62º Left+Right, 50º Up and 70º Down.
Referring to the Field of view illustration, we can see that there are four distinct zones that sit within the eye’s total FOV.
The first is Zone One, which is the most important and immediately necessary information should be positioned. This is due to this zone being the most central part of the user’s field of view.
Zone Two is located around the edge of zone one, approximately 10–15º from the eye’s central line of sight. Secondary information should be situated in this area, helping to create a content hierarchy that will guide the user.
The next region within the FOV is Zone Three. This area radially occupies the next 10–15º from zone two. Content in this area should not be critical to the experience, but the user will still have access should they want to glance at the information.
Finally, we have Zone Four. This should not contain any information as it is on the periphery of the user’s field of view.
When testing a VR/AR experience, we need to make sure that the user can see what they’re working with, that they can clearly identify where their interactions will be taking place and that they can easily see what they need to, without having to strain their eyes. Considering these three points at a minimum will help designers to identify any issues with their UI, and ultimately help them to create excellent user experience.
Trend 2: Dark mode UI design
Overview:
Dark mode is a user interface design option that presents a dark colour scheme for digital applications, websites, and operating systems. It is an alternative to the traditional light mode, where the background is typically white or light-coloured. Dark mode replaces this with dark or black backgrounds and uses light colours for text and design elements.
The popularity of dark mode has surged in recent years, driven by various factors. One major reason is its visual appeal and modern look, which many users find visually pleasing. Dark interfaces can also create a sense of elegance and sophistication, especially in applications related to design, photography, and media consumption.
Why use dark mode?
Using dark modes within user interfaces has several benefits. Firstly, they reduce the amount of light emitted by device screens, while still maintaining minimum colour contrast ratios for usability. This reduction in luminance makes screen usage more comfortable in dark environments and helps conserve battery life by minimising the use of light pixels.
Dark themes often use dark grey as the primary colour instead of black. Dark grey allows for a wider range of colour, elevation, and depth perception, as shadows are more visible on grey surfaces. Additionally, using light text on a dark grey screen reduces eye strain compared to light text on a black screen, as the contrast is less pronounced.
Brighter elements stand out more on a dark background, making it easier for people to quickly find and focus on important information. This faster visual recognition improves the efficiency of data processing and user engagement.
Thinking about colour in Dark Mode UIs:
To create a branded dark mode, we can overlay the primary brand colour at a low opacity over the recommended dark theme colour (#121212).
To illustrate this we’ve take the colour orange (#F58C00) and mixed it with the recommended dark theme colour (#121212) at 10% opacity to create a branded dark mode background colour.
When thinking about the accompanying colour palette that will coincide with a branded dark mode, it is good practice to decrease the saturation of the secondary brand colours. Doing this will help to improve the legibility and reduce the visual tension of the elements within the UI design. It is also important to note that these colours must always meet the minimum colour accessibility ratio of 4.5:1.
Trend 3: Animation in UI design
Overview:
UX and UI designers use animation in various ways to enhance the user’s experience. Animation can be used as a vital UI tool, alerting users to changes, influencing their decisions, and indicating relationships between elements. It also adds a human touch to digital interfaces by simulating our naturally ingrained desire for interaction with physical objects.
There are two types of animation in UI design: functional and decorative. Functional animation provides real-time guidance and information, while decorative animation is used for storytelling and branding purposes. Finding the right balance when it comes to animation is crucial, just like spices in a curry, using too little or too much can have negative effects on the end product.
A brief history of animation
The key principles of animation in UX and UI design today can be linked back to a book called The Illusion of Life, written in 1981 by disney animators Ollie Johnston and Frank Thomas. The book outlines 12 core principles of animation and while these were originally intended for film and cartoons, they have since become a valuable resource for UX and UI designers. These principles help designers create engaging animations that guide users and contribute to the storytelling and brand narratives within design projects.
The 12 core principles highlighted in the book are:
- Squash & Stretch
- Anticipation
- Staging
- Straight Ahead & Pose to Pose
- Follow through & Overlapping
- Slow in & Slow out
- Arcs
- Secondary action
- Timing
- Exaggeration
- Solid drawings
- Appeal
To see the principles in action, check out this short animation by New York-based animator Vincenzo Lodigiani.
Considerations
Animation plays a vital role in enhancing user engagement by helping users build mental models of how the system works and how to interact with it. However, animations used as time-filling visual stimulations during transitions can sometimes frustrate users. Instead, animations should be leveraged for usability, providing clues about system status, indicating how UI elements will behave, and serving as understandable visual and spatial cues for the user’s location within the design. They also serve the user feedback, indicating that an action has been recognized by the system. An example would be, the animation of a navigation menu sliding over the page when a hamburger icon is tapped; this provides visual confirmation of the action.
When UI animations are subtle, unobtrusive, and brief, they improve the user experience by communicating feedback, preventing disorientation, and strengthening signifiers. However, they should not be overused, as excessive animation can overwhelm and distract users.
How to implement UI design trends in your projects and best practices
When implementing these trends into UI designs, it is important not to forget the core criteria of what makes good design good.
Creating a well-designed user interface begins with simplicity. The most effective interfaces remain inconspicuous, free of unnecessary clutter, and employ straightforward language in labels and messages. Consistency is key; by integrating common UI elements, users gain comfort and efficiency. Employing consistent language, layout, and design patterns fosters user familiarity and transferable skills. Page layout should be purposeful, considering spatial relationships and structuring content according to importance. Strategic use of colour, light, contrast, and texture can direct and redirect attention effectively. Typography aids in hierarchy and clarity, using varied fonts, sizes, and text arrangements to enhance scan-ability and readability. Communicating system actions and states is crucial to reducing user frustration. Employ various UI elements to relay location, changes, and next steps. Finally, thoughtful defaults can alleviate user burdens, especially in form design where pre-chosen or pre-filled fields can enhance the user experience.
Future of UI design trends beyond 2024
As we delve into these exciting UI design trends for 2024 and beyond, it’s essential to recognize that the future holds even more remarkable possibilities. Virtual Reality (VR) and Augmented Reality (AR) are set to redefine how users interact with digital content, demanding designers to adapt to a new realm of possibilities and challenges. With the potential for seamless integration between the virtual and physical elements, designers must explore innovative solutions to create a natural and immersive experience.
Dark Mode UI Design continues to evolve, enhancing user comfort, visual appeal, and energy efficiency. Embracing branded dark modes and ensuring accessibility ratios remain compliant will be key considerations. Animation in UI design, inspired by the timeless principles outlined in “The Illusion of Life,” brings a human touch to digital interfaces. Striking the right balance between functional and decorative animation is the key to enhancing user engagement while avoiding overwhelming distractions.
As we look beyond 2024, it is clear that these trends are just the beginning of an exciting journey in UI design. The integration of cutting-edge technology, the evolution of design principles, and the constant pursuit of user-centred experiences will shape the future of UI design. However, the timeless principles of simplicity, consistency, purposeful layout, strategic use of colour and texture, typography, effective communication, and thoughtful defaults will remain the foundation for creating exceptional user interfaces. Designers and professionals in the field must stay attuned to these principles while embracing innovation to navigate the ever-evolving landscape of UI design. Book a call for more information.
