Biz Extra

Published: November 23, 2021 | Updated: November 24, 2021

Digital Storm’s Maisie Mckeown on key trends to keep your brand head and shoulders above

By Andrew Diprose, editor

The online world of today is ever-changing and adapting, writes Maisie Mckeown, Marketing Executive, Digital Storm.

The online presence of your business is such an influential and important virtual space for marketing strategies due to the opportunities that it gives businesses not just to network but to digitally advertise your brand and communicate its goals.

Here at Digital Storm, we’ve been hard at work sifting through what we think are some of the key trends that you should be bearing in mind to ensure your brand stands head and shoulders above your competitors.

MICROINTERACTIONS:

Microinteractions are as the name suggests. Small interactions that are often animation-based and happen as a trigger-result of actions on your website or device, such as clicking a button, swiping, or hovering over an element – just to name a few.

The engaging visual feedback that these microinteractions give to you as the user creates a pleasant browsing experience. Additionally, from a business perspective, microinteractions can enhance your products by uniquely communicating your brand, making you a step ahead of your competitors when it comes to standing out and making your mark.

Microinteractions are what takes an ordinary website (even an animated one) and turns it into an exceptional website. It shows that extra thought and care has gone into the design of this site. This is something people often overlook, but users really value this and will tend to appreciate sites that have more thought into them with longer site sessions.

Why do Microinteractions really matter?

Microinteractions are not just strictly visual, but also hold important practical value, since they create a user-friendly interface allowing seamless ease-of-use for its users.

Have you ever been on a website with a tab bar that lights up when your cursor hovers over the menu and another sub-menu appears? These are important microinteractions due to its ability to make the user aware that this menu is an interactive one that can take them to even more relevant sections of the site based on what you might be searching for.

However, it’s not just about visual microinteractions. Notification sounds and haptics (device vibrations) hold a forefront position when it comes to common, and to some, vital microinteractions. This type of microinteraction holds commendable importance because without it, you may not even know the notification came through.

Aside from the practicality – the enjoyability of microinteractions will make all the difference in making users not just enjoy using your site, but wanting to come back to it.

The difference between a site we have to use and a site we want to use, is usually always affected by the microinteractions it does or does not have.

To exemplify, Facebook reactions. ‘Likes’ have always been a central part of the Facebook experience, but in 2016, a new series of ‘reactions’ were introduced to replace the standard ‘like’ button. These ‘reaction’ features are moving animations that trigger-react when your cursor hovers over it. The thumbs-up shaped ‘like’ button remained, but with the addition of love, laughter, shock, sadness and anger. The function of these new microinteraction features allows people to select an icon and appropriately react, based on the content they see.

This type of microinteraction is a powerful one, as it has a humanising impact by allowing users to express emotions based on what they see with more meaning. Because long gone are the days of finding out news from your friends face to face – you will probably have seen it on their social media first.

This will ultimately lead them to feel a greater sense of connection to the app, enhancing the app experience and result in them wanting to use the app again.

We at Digital Storm are proud to be integrating this concept in our own designs.

So even though they are called microinteractions, the impact they have on user experience is MACRO!

DARK MODE:

Have you gone to the dark side?

If you’re a smartphone user, you will most likely have come across this feature. This display setting for user interfaces can be found on most phones and desktop applications, and offers  not just a ‘slick’ look, but numerous benefits to the user.

This feature allows you to toggle between a light screen and dark screen. ‘Light mode’ is a default setting on most phones and desktops, with its appearance being dark text on a white screen. Its counterpart – ‘Dark mode’ – however, is a light coloured text on a dark screen.

Dark mode has been a popular feature used by many as they find it easier to focus on the content on the screen. According to this recent survey, 82.7% of participants claimed that they prefer to use dark mode on their devices. Whilst this is a positive statistic, the setting in which they were using dark mode was not specified. It has been argued that users enjoying the dark mode feature can be dependent on the ambient lighting in which they use it.

Studies on the impact dark mode has on users and their eyes supports the accessibility element of the feature, in that it holds the intent of reducing eye strain and blue light exposure from prolonged screen-use whilst maintaining colour contrast required for readability. Some experts even say that dark mode may help those with visual impairments or light sensitivity.

Regardless of the ongoing scientific research and debate on its use, implementing this feature in your technologies will give the user the option to enjoy its potential benefits such as reducing eye-strain, or simply suit their aesthetic needs by simply switching between the two feature-modes. Not only will this have a positive impact on your business for implementing legibility, but for those who do benefit from the feature, they will likely return.

ACCESSIBILITY:

Calling accessibility a ‘web design trend’, would not be the right term or association. Accessibility is not a trend. The association of the word ‘trend’ typically relates to something that’s ‘in’, as opposed to a fundamental requirement designers should consider implementing when creating usable interfaces and products for all users, regardless of their ability level.

Broadly speaking, web accessibility is something that should be at the forefront of design when developing websites to allow people with disabilities to effectively interact, understand and navigate them.

When it comes to accessibility, it’s safe to say that creative boldness in design trends can have a positive impact, including its ability to innovatively enhance your brand and expand market reach.

Whilst some accessibility solutions can require time to implement within the structure of design teams, there are many features that can be easily incorporated that will instantly enhance user-experience.

So what are some of the top accessibility features that Digital Storm suggests you should consider when designing your site? Keep reading to find out.

  1. Colour Accessibility

Colours have a monumental impact when it comes to communicating your designs to its users, and similarly, is a powerful tool for accessibility.

Colour accessibility enables those with visual impairments such as colour vision deficiencies to have the same digital experience as their non-visually-impaired counterparts, unaffected by any limitations.

Be mindful of contrast ratio: Colours require a sufficient contrast ratio between the text and the background to ensure they are readable. Ensuring a good contrast ratio can be achieved by making the colours of the text and background / logo and background opposite in light and dark intensity. Adobe Colour Contrast Checker is the perfect accessibility tool to help you optimise your site’s use of colour accessibility through contrast ratio.

Created in compliance with WCAG (Web Counter Accessibility Guidelines), this contrast-checking tool can rank your colour palette and enables you to amend any colour legibility in your designs to ensure you are creating colour-accessible sites.

What is WCAG?

WCAG (Web Content Accessibility Guidelines) are a set of standard guidelines and recommendations to take into consideration when it comes to the accessibility of your site and applications.

An article published by Forbes cited a study that found more than 7/10 web users with disabilities simply won’t tolerate or use a website that is non-accessible. Instead, they will leave the site to find one that is more user-friendly. Not only does this mean they are unlikely to return to your site in the future, but it can increase your website’s bounce rate.

We live in a world that is waking up to the wide variety of needs different people have when understanding and comprehending websites. By not making your site accessible, potential traffic for your website is flocking elsewhere. By choosing to make your website compliant with WCAG it doesn’t just service a larger customer base, but if implemented correctly, web accessibility tools can boost your search engine optimisation (SEO) and improve your website’s organic search rankings.

Websites that abide by accessibility WCAG guidelines typically see a greater google ranking/site session time. This is because Google is paying more attention to the experience a site gives rather than just its content.

This is the same for the users of your site – they don’t necessarily care about your design, but about getting their tasks done easily and with minimal effort. This is why optimised accessibility features on your site will incentivise users to want to use your site to do these tasks.

So, you can still create aesthetically pleasing colour palettes whilst being considerate to all users.

2. Typography:

Can you read and comprehend the text with ease? Typography is the style, arrangement and appearance of art and text to make it legible, readable and appealing when displayed.

Typography is a core component of visual accessibility and taking this into consideration when it comes to your typography design can make all the difference when allowing all users to enjoy your textual content.

Some ways to enhance your site through typography include using a large enough font size, font and typeface to be comfortably read. The size of the font you use can be largely dependent on the chosen font and typeface – some of which are easier to read than others.

Choosing a font and typeface that emphasises clarity and legibility is important in accessibility design. The good news is, you don’t need to invent a special font to do this. Some of the top recommended fonts to consider when it comes to accessibility include: Tahoma, Calibri, Helvetica, Arial, Verdana, and Times New Roman.

3. Self-changing accessibility features:

Accessibility-mode gives the user control to change the design on the site they want to interact with, meaning they can select what tools or changes they want based on what their needs might be, enabling them to understand, navigate and interact effectively.

A good example of a site that utilises this feature is the BCP website: bcpcouncil.gov.uk. This site meets the Double-A criteria of the Web Content Accessibility Guidelines 2.0 and allows users to adapt the features to meet their needs, regardless of ability or technology.

The chosen settings will also be saved for future visits to the site, meaning they won’t need to change them each time. Not only does this create accessibility, but the ease-of-use they will experience by only having to set these settings up once will increase the likelihood of them wanting to use the site again.

Web accessibility also benefits people without disabilities…

DESIGN FOR THE THUMB:

Unsurprisingly, up to 70% of global website traffic is generated via mobile devices. I use the term ‘unsurprisingly’ due to the undeniable fact that today’s society is certainly, if only a tiny bit, addicted to our mobile devices.

With so many users surfing the internet using their mobile devices, it’s a no-brainer that designers have a tunnel-vision focus on mobile-friendly designs for their websites, primarily – optimised for ‘thumb-scrolling’.

The ‘thumb zone’, is a term coined by Steven Hoober who wrote his book designing mobile interfaces which refers to how we generally hold our devices – in one hand, using our thumb to navigate the screen.

Have you ever interacted with an app or site that simply didn’t work with your thumb zone? Perhaps you’ve had to stretch to reach a button or search bar? A classic example of poor consideration of the thumb-zone.

Image example to be designed:

By taking into account the thumb-zone when it comes to developing your interface design, an intuitive layout is necessary and will ensure your site is both accessible and enjoyable to use.

OUT WITH THE OLD, IN WITH THE NEW

Change is the only permanent thing in this world. While your current designs may have been sufficient in the past, they won’t be advantageous to your business forever – which is why if you want to be a step ahead of the competition, you should consider the predicted web trends discussed in this article.

As 2021 nears the end, it’s time to move forward and refresh your design ideas – and we at Digital Storm can’t wait to see what you all create for the web in 2022!

With that in mind, sometimes it is easier said than done. Which is why working with an experienced marketing and design agency can be advantageous to your business dominating the online world, and our team is here to help you do just that.