Despite being consistently noted as trends for 2022, 'dark mode', 'custom hero images', 'neumorphism', and 'pastel colour schemes' aren't necessarily trending this year, so we'll skip them for this list.
We expect to see more improvements in AI search algorithms, voice-user-interface implementations (VUI), and more robust AI written content and image/content tagging. However, we'll be focusing on web UI trends in this article. So let's get started with the top 10 trends to look out for in 2022...
1. Interactive 3D models
With physical high-street stores closing down at a record rate, and customers avoiding busy places during COVID times and beyond, companies have had to brainstorm new ideas on how they convey - exclusively online - what their products are and, perhaps more importantly, why you should buy them.
That poses a problem. How do you replicate a tangible shopping experience online? And, how do you better explain to users what your product is and what it looks like if you can't show it to them?
DJ Mavic drones helps solve this problem by offering interactive 3D models on each of their product pages. Giving you a sense of what the product is, without seeing it in person. This approach is likely to garner more traction throughout 2022.
Fjallraven offers a 3D interactive model of their bags, of which the colours can be completely customised before purchasing. A much more engaging method of customising a product compared to simply selecting a few preset colour-swatches and watching the product image change.
Nike has also expanded on their trainer customisation by offering a similar experience to Fjallraven.
With 'digital AR mirrors' now being a thing (no, we're not joking), expect to by trying on your new pair of trainers virtually very soon.
It's time to start embracing the 3D landscape, and stop thinking of the web as a flat medium - particularly with AR and VR tech advancing rapidly. It's time to get creative!
2. More devices to support
The term 'Above the fold' just got a lot more literal. This is more than just another screen-size to support. There will likely be lots of experimentation and creativity expressed to get the most out of the foldable device realestate in all of the foldable forms.
Google's Material Design 3 has an entire section dedicated to best practices in supporting foldable devices. It's obviously a consideration for any Android app developers to support these devices, as their adoption is growing rapidly. But this year, support will flow into the world-wide-web, and it wont be long before we're recommending specific solutions to get the most out of these foldable devices.
With Facebook (sorry, I mean Meta) pushing mixed reality hard, and Apple reportedly jumping on the VR/AR bandwagon this year. It's not long before support of these devices and mixed-reality specific browsers (such as the 'Firefox VR' successor, Wolvic) are a must.
That's before even mentioning the need to support large devices such as TV's (and maybe even digital mirrors soon), down to ever increasingly small watches and other wearables. Exciting product developments are coming in the next few years.
3. Design systems
A design system was once thought as something only the big companies needed, in 2022 it is now a must for any company wanting to create consistency across their digital products and channels. Gone are the days of employees running rogue, creating disjointed branding and broken user experiences.
As mentioned in our article explaining Why your company needs a design system – "A design system will effectively ensure your users have the best experience possible. It allows designers, developers, product managers, content writers (and every employee of your company) to have a single source of truth of your design principles and branding." A design system really is one of the most important aspects to consider when you are refreshing your online presence.
With design tools (such as Figma and Sketch) advancing rapidly, and the uptake of new innovative development frameworks, it has never been easier to create and maintain a design system. If this is something you might be interested in, or want to learn more about, let's chat.
This year we expect to see growth in the creation of Design systems and Style guides for companies of all sizes.
4. AR features
When you think of AR/VR you are probably picturing the 'Metaverse', which is the new buzzword ever since Facebook rebranded and restructured as 'Meta' in 2021. The Metaverse is still a long way off, and more of a theory than a reality at this point, but that takes nothing away from VR and AR being one of the fastest growing tech advancements of the past decade.
With that growth, you can expect to see lots of AR and VR related features on apps and websites in 2022. Including;
Enhancing shopping experiences:
Preview products in your own space using your phone or tablet. Users are more likely to purchase a product they have seen and interacted with, and AR is a great way to bridge that gap without coaxing users to a physical store.
Advanced maps and floor-plans:
If you have been property-hunting recently, you have probably seen some interactive 3D floorplans which offer a full 360 scan of each room, including a floorplan-style layout. Traditionally this feature was only offered on more expensive properties due to a high product cost involved, but this has changed dramatically since the iPhone introduced a Lidar camera. With the advancement of Lidar, we are seeing a huge boost in these types of experiences where a location is captured in 3D and displayed in AR to a user.
Tools like Polycam make this possible, and even offer a feature (which is in Beta) that allows you to capture a location or object with simply photos. We'll be seeing a lot of this functionality going forward, and across more sectors than just real-estate.
Although AR adoption is going to be huge, as it can be accomplished with existing devices such as phones and smart-watches. It's unlikely VR will the same impact on UI website trends in 2022, as the time and cost involved to create an online VR experience can't be justified by the number of users that would use it for any prolonged period.
That doesn't mean we wont see a few major websites include VR specific features on their sites in 2022 and beyond – so watch this space.
5. Stand out. Animate.
Hover, scrolling and hero animations are nothing new. They have been used on design portfolio websites for a long time now, but there aren't many larger corporate sites which are using these effects. With companies having to stand out more online, expect to see more companies adopting hover, scrolling and loading animations which break out of the norm and push the boundaries of the web.
Check out these interesting examples...
Cursor hover effects galore:
No more lacklustre loading screens
6. Tell a scrolling story
With in-person meetings almost being a thing of the past, brands have lost their personal relationship with customers on the high-street, so it's time their brand-personality is portrayed online too.
If you want to get information across to your users, it needs to be interesting, and it must to be fast. Telling a story using animation effects combined with parallax scrolling, imagery and effective copywriting is something you should expect to see more of this year.
The 'All together cleanup' initiative took the bold approach of using parallax and scrolling animations to get their point across.
7. Personalisation
Users are forever wanting a more personalised experience online. From customising content of dashboards, to using AI to adapt content to be relevant and engaging for a user. Look forward to more advanced 'related content' suggestions powered by AI, and clever UX decisions.
Tailored experiences:
For websites with a global audience, UI labels and user experiences should also be tailored based on a user's location. For example, email is typically used for login in Western markets, whereas mobile phone numbers are the standard option in several Asian countries. Although you are likely to never know if a website is adapting to localisation, you can expect a smoother user experience as a result.
Dynamic colours:
This may be a long shot, but with the inclusion of Dynamic colour palettes in Material Design 3, which can adapt colours to suit the wallpaper of a users phone on Android. I expect to see this trend flow into web UI, perhaps with the inclusion of changing colour themes based on imagery used on a particular article or page. Let's wait and see
8. Inclusive design
A 2020 UsableNet report indicated that "post COVID-19 lockdown, the lawsuit filing rate [for digital usability related lawsuits] increased more than 50%", and is growing year on year. For something which is relatively straightforward to achieve, it's shocking that we are still discussing accessibility in 2022.
As a positive step to a more inclusive web, more companies should be future-proofing their websites with the latest accessibility standards. With tech and government agencies prioritising accessibility throughout 2021, we expect to see further sectors wanting to create more inclusive websites throughout 2022.
At Webcoda, we ensure our websites are WCAG compliant using various automated scanners, and a robust accessibility process at the heart of everything we do – from design, development and even content population. Find out more about designing for accessibility and why it's important.
9. Low & No-code services
If you haven't heard these terms before, essentially 'no-code' refers to a service which would traditionally require a developer to custom-code a solution, but now can be accomplished without writing any code. Often using a sleek and intuitive visual interface.
Webflow started in 2013, and was essentially the first online no-code service for building websites from scratch. However, in the race to become the industry standard no-code service, there has been a boom in no-code platforms over the past few years such as Bubble, Thunkable, Draftbit, Shopify and Squarespace.
In addition to taking on web-development, we have also seen an influx of other no-code services to remove the need to custom-create formulas in spreadsheets, streamline workflows, and even build native mobile apps.
2022 should bring about more services like these, reducing our reliance on developers for any simple or mundane tasks. Developers aren't going anywhere I might add, their time is just now better spent on more complex and intricate projects which they can sink their teeth into.
What does this mean for the state of the web UI? Well, it's likely we'll see a lot more start-ups and small promotional websites in 2022. All following a similar UX pattern, as many of these tools are based on structured templates.
10. Unique fonts
New brands are being created every day, with everyone wanting to be the next big success story, or stand out from their competitors. Bold fonts with unique characteristics help achieve this.
Headings are going to be larger, more unique, and will better reflect each brand's values. We're already seeing the shift, but expect that to continue into 2022.
To discuss any of the topics mentioned above, or If you have any questions relating to design systems, UX design, web design, web development, e-commerce systems, or SEO - get in touch today so we can help.
