Category: UX & UI

UX and AI: A match made in heaven?
Posted by Roberta Scerri on in Artificial Intelligence, product design, UX & UI

UX and AI: A match made in heaven?
UX and AI: A collaboration made in heaven?

Let AI help you get further ahead

We have been seeing a lot of AI mentions these days, especially as ChatGPT took the majority of the social media channels by storm. Many are prophesying that artificial intelligence will take over numerous tech jobs, including that of UX designers. However there are many sources which debunk this, and instead provide ways of integrating the benefits and strengths of AI in our UX techniques and methodologies for a better outcome. 

Here are some general ways UX designers can leverage artificial intelligence to design a better user experience:

Personalisation

AI algorithms can be used to personalise the user experience by collecting data on user behaviour, preferences, and demographics. This data can be used to create customised experiences that are tailored to each individual user.

  • Data collection: AI algorithms rely on large amounts of data to make predictions. Therefore, the first step is to collect relevant data such as user demographics, purchase history, website usage patterns, etc.
  • Data preprocessing: Once the data is collected, it needs to be cleaned, structured and organised to remove any inconsistencies or errors. This is essential to ensure that the AI algorithms can accurately analyse the data.
  • Machine learning models: There are several machine learning algorithms that can be used to predict user behaviour such as decision trees, logistic regression, and neural networks. These models can be trained on the preprocessed data to identify patterns and predict user behaviour.
  • Predictive analysis: Once the machine learning models are trained, they can be used to predict user behaviour based on past actions, preferences, and patterns. The predictions can be used to anticipate user needs and provide personalised recommendations.
  • Continuous improvement: AI algorithms are not perfect and need to be continuously monitored and refined to improve their accuracy. User feedback and new data can be used to refine the algorithms and make more accurate predictions.

Chatbots

AI-powered chatbots can provide users with instant support and guidance, helping them complete tasks more efficiently and effectively. Chatbots not only alleviate workload off customer care teams, but are also being tuned close enough to emulate humans. A touch of character and positive attitude can go a long way to enhancing the user experience on your website through a simple 24/7 help tool. 

User interacting with a chatbot. (Source)

Predictive Analytics

AI algorithms can be used to predict user behaviour and anticipate their needs, allowing UX designers to create interfaces that proactively address user needs and reduce friction. For example, it can help to identify common pain points or areas where users are likely to get stuck, allowing designers to make changes that will address these issues. Predictive analytics can also help to personalise the user experience by recommending products or services based on the user’s behaviour and preferences. This not only improves the user experience but can also increase sales and revenue for businesses.

Natural Language Processing (NLP)

NLP can be used to make interfaces more intuitive and user-friendly. For example, by enabling voice commands or providing visual cues that guide users through complex tasks. It can help to personalise the user experience by providing relevant content based on the user’s search queries or interactions with the system. In addition, NLP can be used to analyse user feedback and reviews to identify areas for improvement and provide insights into user needs and preferences. This information can then be used to refine the user experience, creating a more intuitive and user-friendly interface. 

A/B Testing

AI algorithms can be used to run experiments and A/B tests, automatically analysing the results and providing insights that can inform future design decisions. By testing different variations of a design or interface, A/B testing can help designers identify which changes are most effective in improving user engagement and satisfaction. For example, by testing different colour schemes or layouts, designers can determine which version of a page or interface is most appealing to users. A/B testing can also be used to identify areas of the user experience that are causing frustration or confusion, allowing designers to make changes that will improve the overall usability of the system. 

Like all useful tools, it makes the world better if used well.

Overall, using AI algorithms to predict user behaviour and anticipate their needs can significantly improve user experience and increase engagement with your product or service. Artificial intelligence should be considered a tool that revolutionises data collection and analysis, and an innovative way to get closer to users to better understand what they are looking for and how we can design the right product for their needs. This incredible advancement in technology should not be seen as a threat or a challenge, but as a collaboration with a great future. 

What UX/UI Designers Should Know About Colour Blindness
Posted by Roberta Scerri on in product design, UX & UI

What UX/UI Designers Should Know About Colour Blindness
The answer lies in the cones: Illustration of the distribution of cone cells of the fovea an individual with normal colour vision (left), and a colour blind (Protanopia) retina. Note that the centre of the fovea holds very few blue-sensitive cones. Source

What is colour blindness?

Colour blindness – or colour vision deficiency – is when the eyes cannot distinguish between certain colours, and it is much more common in men, than in women. This usually happens between greens and reds, and occasionally blues.


The primary cells in the eye that detect colour are cones, of which there are 3 types: red, green and blue, and this is where our perception of colour comes from. According to the Colour Blindness Association: “Being ‘red/green colour blind’ means people with it can easily confuse any colours which have some red or green as part of the whole colour. So someone with red/green colour blindness is likely to confuse blue and purple because they can’t ‘see’ the red element of the colour purple.” Each colour is a mix of other colours, therefore it is more of a gradient exclusion, making colourblind people see the colour in a different way than those with normal vision.

Source

Colour blindness can vary in degree of severity, and is a consequence of cone cells being absent or one or more are not functioning as normal. The varying degrees of colour blindness ranges from individuals who encounter difficulty distinguishing between colours in low light, to those who are unable to do so in any light level. There are also very rare cases of individuals who perceive their environment in shades of black and white (monochromacy), distinguishing colours only by their brightness. The most common type of colour blindness is red-green (deuteranopia), followed by blue-yellow (protanopia). 

After reading all of this, it might seem like a big effort to re-consider your designs and make them accessible for colour-blindness conditions, however it is easier than it sounds. So as a UX/U designer, what can you do about it?

Create Contrast

Can you imagine yourself reading an article which consists of dark grey text on a black background, or very light grey text on white? Even if you are an individual with no known visual impairments whatsoever, most probably you still cringed at that sentence. Now imagine how much harder it is for those who do, and they need to navigate your product to get information, or to buy something they really like.

What would happen is user drop-off, lost sales and unhappy customers, due to the bad – or simply impossible – experience. It is usually typography that finds itself in the middle of this issue, purely because it is the element that suffers the most on user interfaces when the contrast is poor. When text is not readable, CTAs are not understood, important information is missed out on, and basically the whole product experience and messaging suffer because of it.

The WCAG website offers the onsite option to change text size and/or colours, to make it easier for individuals with visual impairments.
Source

Use more than just colour

Attributing meaning within context to elements in the user interface requires more than one way. 

A form which alerts the user of any errors by changing only the form field outlines to red will not only be useless for most colourblind users, but it also confuses those with normal vision as to what exactly is wrong. The solution to this is adding an error message beneath the field, inserting an error or warning icon as part of the error and maybe also moving the screen up to the incorrect field area – literally taking the user to where action is required. 

Source

Experience it yourself

Empathy is first and foremost in every UX designer’s handbook. There are multiple ways of checking whether your design is good for colourblind users: 

  1. Design your product in black and white first. Not only is this a more efficient way of showing early prototypes, but it also follows a principle famous with brand designers: if a something works in greyscale, it will only work even better in colour. The same goes for UI: if users can navigate your product without relying on colours, it will be accessible for everyone.
  2. Make sure your product is in line with WCAG  Guidelines. There are 3 levels of accessibility per guideline; the more you tick, the better. WCAG covers accessibility across the board, not just for colourblind users, therefore following it will be beneficial for all kinds of individuals in your target audience.
  3. Use online colour contrast checkers. These are completely free and will show you whether the text size and colour you implemented are readable on the background colour you selected. Some official ones include WebAim and WCAG Contrast Checker. Keep in mind that many individuals who are not colourblind have other visual impairments which can be aided with high contrast and zooming abilities.
  4. Know your design applications. Photoshop offers the functionality to view your artwork in certain colourblind modes; almost literally putting yourself in your audience’s shoes!
Adobe Photoshop offers the option to view your artwork as those with Protanopia or Deuteranopia would.

A Caring Consideration

At this point, you might have noticed a very valid insight: consideration for colourblind users benefits all. In fact, any accessibility consideration is an added benefit that causes a ripple effect on your product experience. When we open our eyes to challenges that are unfamiliar to us yet very real, it does not just make us great user experience designers but also better people.