{"id":5972,"date":"2024-01-26T17:21:37","date_gmt":"2024-01-26T16:21:37","guid":{"rendered":"https:\/\/innovatrics.com\/trustreport\/?p=5972"},"modified":"2024-06-17T16:54:14","modified_gmt":"2024-06-17T14:54:14","slug":"practical-ux-how-to-apply-colour-psychology-in-the-redesign-of-biometric-applications","status":"publish","type":"post","link":"https:\/\/innovatrics.com\/trustreport\/practical-ux-how-to-apply-colour-psychology-in-the-redesign-of-biometric-applications\/","title":{"rendered":"How to apply colour psychology in the redesign of biometric applications"},"content":{"rendered":"\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\">\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3>Collaborators:<\/h3>\n\n\n<div class=\"contributor\">\n    <img src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/1565552846777.jpg\" class=\"contributor__image\" alt=\"\">\n    <div class=\"contributor__text\">\n        <h3>Martina Budzi\u0148\u00e1kov\u00e1<\/h3>\n<p>Product designer, ABIS, Innovatrics<\/p>\n    <\/div>\n<\/div>\n\n<div class=\"contributor\">\n    <img src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/1566919347143.jpg\" class=\"contributor__image\" alt=\"\">\n    <div class=\"contributor__text\">\n        <h3>Alica Holl\u00e1<\/h3>\n<p>Product designer, ABIS, Innovatrics<\/p>\n    <\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<p class=\"has-medium-font-size\"><strong>Biometric applications should not only be technologically advanced, but also as easy to understand and navigate as possible. Delve into how Innovatrics applied colour psychology principles in the ABIS redesign, creating a consistent visual language and simplifying tasks for thousands of users.<\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column margin\" style=\"flex-basis:33.33%\">\n<p><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<p>Have you ever wondered why the colour red makes us think about love? Or why yellow evokes joy or black fosters sadness and grief? Colours play a significant role in how we experience the world. They affect our emotions and seeing them makes us feel and act&nbsp;a&nbsp;certain way. Many companies understand this and use colour psychology to influence the behaviour of their target audience.<\/p>\n\n\n\n<p>Think of a website or mobile app you visited recently. Did the design prompt you to explore further, or did it make you want to run away? If the latter happened, think&nbsp;about&nbsp;what made you feel that way. Did the poor colour contrast make the text hard to read or the call-to-action buttons hard to find? Did the website or app look like a rainbow&nbsp;had&nbsp;exploded, assaulting your senses and&nbsp;making you feel&nbsp;agitated?<\/p>\n\n\n\n<p>In digital product design,&nbsp;colour choice&nbsp;matters. Selecting the right colour palette for app elements like call-to-action buttons impacts user experience and behaviour. An essential role of a UI\/UX designer is to choose a colour palette that creates a pleasurable experience instead of overwhelming the users and complicating their tasks.<\/p>\n\n\n\n<p>Understanding these principles, the Innovatrics ABIS design team had some serious work to do.&nbsp;<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<h2>The sea of red<\/h2>\n\n\n\n<p>Innovatrics ABIS is an automated biometric identification system for fingerprint, iris and face matching. Innovatrics\u2019 clients mainly utilise the system to identify fraudsters or criminals and create civil or voter registers based on biometric information such as fingerprint or facial&nbsp;features.&nbsp;<\/p>\n\n\n\n<p>Put simply, the goal of the system is to help clients&nbsp;<strong>build identity management solutions tailored to a wide array of use cases.<\/strong><\/p>\n\n\n\n<p>The system has its own user interface, which is&nbsp;used by thousands of police officers, investigators and government workers every&nbsp;day to enrol dangerous criminals or register eligible voters in countries like the Philippines, Albania, Guinea, Chile and more.&nbsp;<\/p>\n\n\n\n<p><strong>However, there was a problem with the ABIS interface: there was too much red.<\/strong>&nbsp;The primary colour of the interface, and that&nbsp;used for all&nbsp;the&nbsp;main interactive elements such as call-to-action buttons, was&nbsp;a bright&nbsp;flaming red.&nbsp;And instead of&nbsp;encouraging&nbsp;the user&nbsp;to&nbsp;click on the button,&nbsp;<strong>the&nbsp;red button&nbsp;was often interpreted by users&nbsp;as an error message.&nbsp;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/notebook_1-1.gif\" alt=\"\" class=\"wp-image-6292\" width=\"681\" height=\"345\"\/><figcaption>The navigation sidebars used red to indicate the current location of the user.&nbsp;<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>The same red colour was also used to indicate a user\u2019s location within the enrolment process. Once again, users misinterpreted this as having done something wrong that had triggered an error message in the enrolment process, causing further confusion.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><em>\u201cInstead of simplifying the jobs for thousands of users, the use of red as the primary colour made&nbsp;all&nbsp;interactive elements resemble error messages, making enrolment and registration less intuitive, resulting in frustration,\u201d<\/em>&nbsp;<\/p><cite><em>\u2013 Martina Budzi\u0148\u00e1kov\u00e1, Product designer, ABIS, Innovatrics<\/em><\/cite><\/blockquote>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<h2>What about the actual errors?<\/h2>\n\n\n\n<p>In addition to the&nbsp;interactive elements such as call-to-action buttons and navigation, the app contains other elements like statuses, labels, ratings, warnings or tags which all guide the users through the app in real time. For all these elements to work together, users should be able to visually distinguish between them. However, this wasn\u2019t the case.&nbsp;<\/p>\n\n\n\n<p>To demonstrate how visually mismatched some of the elements were, let\u2019s look at the warning messages. These are useful elements in the enrolment process to make sure that, for example, the user scans their fingerprints in the correct way. These processes issue the standard <em>success, warning or error<\/em> messages that we can often encounter in other applications.<\/p>\n\n\n\n<p>Can you guess what colour ABIS used for error messages? Quite understandably, it was red. But that same red that people were wrongly mistaking as a sign of an error in other parts of the process, was also used to display actual error messages throughout the same process. A little confusing, right?<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\">\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"has-small-font-size\"><strong>What is biometric enrolment?<\/strong> The enrolment process involves the capturing of an individual&#8217;s biometric data, such as&nbsp;<strong>fingerprints, facial features or irises<\/strong>, to create a unique and identifiable template of the person.&nbsp;<br><br>These&nbsp;biometric samples are then processed and stored in a database for future identification or verification purposes, such as for civil or voter registers and for criminal databases.&nbsp;<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/notebook_2.gif\" alt=\"\" class=\"wp-image-6319\" width=\"681\" height=\"345\"\/><figcaption>Error messages were the same colour as interactive elements.<\/figcaption><\/figure>\n\n\n\n<p><em><br><em><em><em>\u201cRealising this, we understood user frustrations with the app. We believe that biometric solutions should not only be technologically advanced, but also as easy to deploy and navigate as possible. We wanted the app interface to be so intuitive that the users won\u2019t even realise they\u2019re learning something new,\u201c&nbsp;<\/em><\/em><\/em><\/em>says&nbsp;Alica&nbsp;Holla, product designer at Innovatrics.&nbsp;<\/p>\n\n\n\n<p>Considering all these factors, the&nbsp;ABIS&nbsp;design team made a decision&nbsp;<strong>to update the entire&nbsp;Innovatrics ABIS colour palette, starting with the primary&nbsp;red&nbsp;colour&nbsp;that was&nbsp;used for the main interactive elements within the app. <\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized is-style-default\"><img loading=\"lazy\" src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/Asset-34@3x-1024x144.png\" alt=\"\" class=\"wp-image-6186\" width=\"612\" height=\"82\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large width640\"><img loading=\"lazy\" width=\"1024\" height=\"754\" src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/grafika3-1024x754.png\" alt=\"\" class=\"wp-image-6131\" srcset=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/grafika3-1024x754.png 1024w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/grafika3-300x221.png 300w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/grafika3-1536x1131.png 1536w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/grafika3-2048x1507.png 2048w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/grafika3-300x221@2x.png 600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<h2>Creating the problem list<\/h2>\n\n\n\n<p>The very first step for the designers was to <strong>organise a workshop, where they created a simple list with all issues related to the current colour palette that were making the app frustrating to use. <\/strong>The goal was to go beyond just the problematic primary red colour, and list issues concerning the entire colour palette used within the interface.<\/p>\n\n\n\n<p>One of the most pressing problems was the amount of red the system used, for example, when comparing fingerprints of two various applicants to search for a match. Look at the screenshot below. Red was used for matching scores above each fingerprint as well as for the small illustrations that indicate the selected hand.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large width640\"><img loading=\"lazy\" width=\"1024\" height=\"719\" src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2024\/01\/grafika1-1024x719.jpg\" alt=\"\" class=\"wp-image-6357\" srcset=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2024\/01\/grafika1-1024x719.jpg 1024w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2024\/01\/grafika1-300x211.jpg 300w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2024\/01\/grafika1-1536x1078.jpg 1536w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2024\/01\/grafika1-2048x1438.jpg 2048w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2024\/01\/grafika1-300x211@2x.jpg 600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<p>From the screenshot, one would assume that the red scores above each fingerprint indicate some sort of error or that they signal a low match between the fingerprints of two applicants. However, it\u2019s the opposite. The red scores indicate a fingerprint match with the other applicant and the grey scores are the ones&nbsp;below the threshold for a likely fingerprint match. In addition, using the same red colour in the illustrations and the fingerprint scores might be confusing for users, who could interpret the red within the illustrations as meaning an error or low score.<\/p>\n\n\n\n<p><strong><strong>Based on the&nbsp;intel from the&nbsp;workshop, the team proceeded to the next two steps:<\/strong><\/strong><\/p>\n\n\n\n<ol><li>Picking a new colour palette for all interactive elements.<\/li><li>Changing the colours of all remaining elements&nbsp;\u2013&nbsp;tags, labels, ratings.<\/li><\/ol>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<h2>Choosing the right colour palette<\/h2>\n\n\n\n<p>One of the best ways to understand and categorise colours&nbsp;is to follow the principles of colour psychology,&nbsp;which explores how different colours can impact human emotions, perceptions and behaviours.&nbsp;<\/p>\n\n\n\n<p>Just like yellow evokes joy or black sadness, all colours have associated meanings,&nbsp;and when used in harmony&nbsp;these colour meanings can impact the behaviours of users and create either superb or mediocre experiences.&nbsp;<\/p>\n\n\n\n<p><strong><strong><strong><strong>To choose the right colour palette for the primary colour, we followed these five&nbsp;colour psychology principles:<\/strong><\/strong><\/strong><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large width640 is-style-default\"><img loading=\"lazy\" width=\"1024\" height=\"696\" src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/grafika-final-1024x696.png\" alt=\"\" class=\"wp-image-6237\" srcset=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/grafika-final-1024x696.png 1024w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/grafika-final-300x204.png 300w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/grafika-final-1536x1044.png 1536w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/grafika-final-2048x1392.png 2048w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/grafika-final-300x204@2x.png 600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized is-style-default\"><img loading=\"lazy\" src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/1-1-1024x144.png\" alt=\"\" class=\"wp-image-6144\" width=\"612\" height=\"82\"\/><\/figure>\n\n\n\n<p>Choosing the right colour palette for the primary colour was done in multiple rounds and initially involved a lot of trial and error.&nbsp;<em>\u201cAt&nbsp;first, we went&nbsp;in&nbsp;all possible directions. We tried dark blue, yellow, peppermint&nbsp;green and&nbsp;even pink. All these colours, however, were either very low in contrast on the black background or didn\u2019t match the unique Innovatrics brand colour palette,\u201d<\/em>&nbsp;explains Martina.&nbsp;<\/p>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" width=\"1920\" height=\"616\" src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/grafiky.png\" alt=\"\" class=\"wp-image-6301\" srcset=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/grafiky.png 1920w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/grafiky-300x96.png 300w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/grafiky-1024x329.png 1024w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/grafiky-1536x493.png 1536w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/grafiky-300x96@2x.png 600w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><figcaption>Testing various colour palettes.<\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<p>Meetings with the marketing team,&nbsp;where they thoroughly dissected the brand colour palette,&nbsp;proved&nbsp;to be the most important step. The team had to make sure that the selected colour palette for Innovatrics ABIS aligned with the&nbsp;overall&nbsp;brand colours and that the dominant colour in the design mirrored the brand identity.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large width640 is-style-default\"><img loading=\"lazy\" width=\"1024\" height=\"765\" src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/9G7K1OC4-1024x765.png\" alt=\"\" class=\"wp-image-5981\" srcset=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/9G7K1OC4-1024x765.png 1024w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/9G7K1OC4-300x224.png 300w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/9G7K1OC4.png 1384w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/9G7K1OC4-300x224@2x.png 600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized is-style-default\"><img loading=\"lazy\" src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/2-2-1024x144.png\" alt=\"\" class=\"wp-image-6145\" width=\"612\" height=\"82\"\/><\/figure>\n\n\n\n<p>Colour in UX design is not one-size-fits-all.&nbsp;\u201c<em>When&nbsp;picking the right colour palette, it was crucial for us to consider the industry and the target audience. We wanted to make sure that we\u2019re speaking the same colour language as the people working with our solution,\u201d&nbsp;<\/em>explains Alica.&nbsp;<\/p>\n\n\n\n<p>From research, <strong>the colour blue is inarguably the dominant colour for both tech and artificial intelligence industries. <\/strong>The colour blue evokes trust, reliability and security, which are also the values that Innovatrics emphasises. The colour is also in alignment with the brand identity of Innovatrics, which, as a true tech company, uses a dominantly blue colour palette.<\/p>\n\n\n\n<p>However, just&nbsp;as&nbsp;with any other colour, blue comes in various shades, and selecting the right one is crucial.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized is-style-default\"><img loading=\"lazy\" src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/Asset-39@3x-1024x144.png\" alt=\"\" class=\"wp-image-6240\" width=\"612\" height=\"82\"\/><\/figure>\n\n\n\n<p>Colour contrast brings individuality to each element of the user interface and makes them noticeable. Using&nbsp;<strong>a contrasting colour<\/strong>&nbsp;for call-to-action buttons makes these interactive app elements&nbsp;<strong>stand out and encourages users to take action.<\/strong><\/p>\n\n\n\n<p>Many of the initially&nbsp;chosen&nbsp;colour palettes had very low contrast compared to the black interface background. This could become problematic for users.&nbsp;<em>\u201cThe&nbsp;first colour palettes we tried often looked completely different on computer monitors compared to large TV screens. We also had to address the fact that most users don&#8217;t own MacBooks but other devices that might not reflect the true colours of each palette,\u201d<\/em>&nbsp;explains Martina, regarding&nbsp;the difficulties with finding suitable colour contrast.&nbsp;<\/p>\n\n\n\n<p>Inconsistent contrast across various devices could result in even lower contrast of the primary interactive elements. Understanding this, the team decided to<strong>&nbsp;work with shades that show good contrast on any device.&nbsp;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized is-style-default\"><img loading=\"lazy\" src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/4-2-1024x144.png\" alt=\"\" class=\"wp-image-6148\" width=\"612\" height=\"82\"\/><\/figure>\n\n\n\n<p>Microinteractions are the types of interactions that are hardly noticeable until they occur. They include <strong>interactions such as <em>default<\/em>, hover and active states <\/strong>and should always be a part of the final primary colour palette.<\/p>\n\n\n\n<p>Adjusting the saturation and transparency of the primary colour on&nbsp;interactive buttons can make the app\u2019s interface more intuitive and easy to use. For this reason, the team created different shades for each microinteraction&nbsp;necessary&nbsp;for the app\u2019s interactive elements.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large width640\"><img loading=\"lazy\" width=\"1024\" height=\"334\" src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/Pu34RzI-1-1024x334.png\" alt=\"\" class=\"wp-image-6155\" srcset=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/Pu34RzI-1-1024x334.png 1024w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/Pu34RzI-1-300x98.png 300w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/Pu34RzI-1.png 1224w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/Pu34RzI-1-300x98@2x.png 600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized is-style-default\"><img loading=\"lazy\" src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/5-2-1024x144.png\" alt=\"\" class=\"wp-image-6150\" width=\"612\" height=\"82\"\/><\/figure>\n\n\n\n<p>Colour consistency allows users to<strong>&nbsp;quickly identify patterns and elements within the interface.<\/strong>&nbsp;It also reduces cognitive load, aiding users in understanding the functionality associated with a specific colour palette.&nbsp;<\/p>\n\n\n\n<p>Simply put, being consistent means that the colour you choose for an interactive element should only be used for that&nbsp;one element.<\/p>\n\n\n\n<p>The lack of colour consistency with regards to the primary colour was one of the main issues with the app design. <em>\u201cBecause&nbsp;we used&nbsp;the&nbsp;colour&nbsp;red&nbsp;for two different elements&nbsp;\u2013&nbsp;both interactions and errors, the use of the colour wasn\u2019t consistent across the interface. In addition, the primary colour also wasn\u2019t consistent with how users perceive red in general. Instead of being triggered by the colour to act, the users mistakenly saw it as an error with no explanation on how to proceed,\u201d&nbsp;<\/em>says Alica. &nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>&#8220;Based on these findings,&nbsp;choosing blue as the new primary colour was not only consistent with the brand identity and the tech industry, it also aligned with other important elements inside the app.&nbsp;The colours of semantic elements such as&nbsp;<em>error, warning&nbsp;<\/em>and&nbsp;<em>success<\/em>&nbsp;that pop up often within the interface and need to be noticeable, won\u2019t collide with the primary colour used for interactive elements,&nbsp;such as buttons or navigation.&#8221;<\/p><cite><em>\u2013 Alica Holl\u00e1, Product designer, ABIS, Innovatrics<\/em><\/cite><\/blockquote>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<h2>Testing the three selected colour palettes<\/h2>\n\n\n\n<p>Three final blue colour palettes made it into the last testing phase&nbsp;\u2013&nbsp;standard blue, cold blue and turquoise blue. To test each colour palette, the design team primarily chose people who don\u2019t work with Innovatrics ABIS. In this way, their interactions with the new colours could be truly authentic.&nbsp;<\/p>\n\n\n\n<p><em><em>\u201cTo create the test assignment, we used the most crucial screens from Innovatrics ABIS. For example, we used the biometric face enrolment&nbsp;to create a prototype for each of the blue colour palettes,&nbsp;as this&nbsp;flow&nbsp;is usually easy to understand for the users,\u201c says<\/em>&nbsp;Alica, explaining the design process behind the testing.<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" width=\"2018\" height=\"588\" src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2024\/01\/colour_testing.png\" alt=\"\" class=\"wp-image-6350\" srcset=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2024\/01\/colour_testing.png 2018w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2024\/01\/colour_testing-300x87.png 300w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2024\/01\/colour_testing-1024x298.png 1024w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2024\/01\/colour_testing-1536x448.png 1536w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2024\/01\/colour_testing-300x87@2x.png 600w\" sizes=\"(max-width: 2018px) 100vw, 2018px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<p>Each test participant had about 15 minutes to complete multiple tasks and questions. Overall, the assignment had two main objectives:<\/p>\n\n\n\n<ol><li>See whether the participants can easily complete the tasks within the app interface.<\/li><li>Learn each participant\u2019s impressions about each specific shade of blue.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-large width640\"><img loading=\"lazy\" width=\"1024\" height=\"1018\" src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/2-1-1024x1018.png\" alt=\"\" class=\"wp-image-6090\" srcset=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/2-1-1024x1018.png 1024w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/2-1-150x150@2x.png 300w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/2-1-150x150.png 150w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/2-1-1536x1527.png 1536w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/2-1-2048x2036.png 2048w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/2-1-186x186.png 186w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/2-1-227x227.png 227w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/2-1-300x298@2x.png 600w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/2-1-186x186@2x.png 372w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/2-1-227x227@2x.png 454w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Example of the test assignment.<\/figcaption><\/figure>\n\n\n\n<p>Participants\u2019 reactions to the colours were surprisingly diverse. Some argued that the cold blue palette looks better because it is more conservative. On the contrary, most participants found the turquoise blue palette more energising, warm and distinctive.&nbsp;<\/p>\n\n\n\n<p>The last task consisted of lining all three colours next to each other and asking for personal preference and overall suitability for the system. <em>\u201cOur goal was to find out whether the colour communicates the main purpose of ABIS well. The majority of participants voted for the turquoise blue colour palette, mostly because the colour felt distinctive, noticeable and energising,\u201c <\/em>says Martina, summing up the test results.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<h2>The final winner<\/h2>\n\n\n\n<p>Based on both the testing exercise and in alignment with the principles of colour psychology,<strong>&nbsp;the design team chose the turquoise blue as the new primary colour of Innovatrics ABIS.<\/strong>&nbsp;The colour is consistent with Innovatrics\u2019 brand guidelines and with how the brand aims to communicate to their audience. It evokes&nbsp;<strong>stability, trust and security<\/strong>, which are some of the most important characteristics people look for in a tech company.&nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><em><em>\u201cWe applied&nbsp;the new primary colour to all basic interactions, including buttons prompting user actions, navigation indicating the user&#8217;s current progress, and all other interactive elements.\u201d<\/em><\/em><\/p><cite><em>\u2013 Alica Holl\u00e1, Product designer, ABIS, Innovatrics<\/em><\/cite><\/blockquote>\n\n\n\n<figure class=\"wp-block-image size-large is-resized width640\"><img loading=\"lazy\" src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/macbook2-1024x683.png\" alt=\"\" class=\"wp-image-6192\" width=\"768\" height=\"512\" srcset=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/macbook2-1024x683.png 1024w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/macbook2-300x200.png 300w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/macbook2-1536x1024.png 1536w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/macbook2-2048x1365.png 2048w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/macbook2-300x200@2x.png 600w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2>Defining a whole new colour system&nbsp;<\/h2>\n\n\n\n<p>The&nbsp;ABIS&nbsp;design team didn\u2019t just swap one primary colour with a new one. They defined a whole new colour system based on the various elements within the app interface and their distinct meanings.&nbsp;<\/p>\n\n\n\n<p>The team created a plan on how to approach the current design system and its colour palette, and conducted an analysis of the previous palette. They found that the <strong>previous palette didn&#8217;t define or incorporate informational and semantic elements<\/strong> like <em>error<\/em>, warning and success. Even though these elements were well-functioning within the app, their colour palettes were not properly defined. They <strong>decided to expand the previous palette and include all elements present in the Innovatrics ABIS.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full width640\"><img loading=\"lazy\" width=\"1600\" height=\"1201\" src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/nP3JZwoA.png\" alt=\"\" class=\"wp-image-5987\" srcset=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/nP3JZwoA.png 1600w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/nP3JZwoA-300x225.png 300w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/nP3JZwoA-1024x769.png 1024w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/nP3JZwoA-1536x1153.png 1536w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/nP3JZwoA-300x225@2x.png 600w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><figcaption>The previous Innovatrics ABIS colour palette.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<blockquote class=\"wp-block-quote\"><p><em><em>\u201cTo create a new colour palette that works well with our system, we followed the same colour psychology principles used for choosing the primary colour. Our aim was to create a colour dictionary to work with regularly and whenever we needed to ensure maximal colour consistency.\u201d&nbsp;<\/em><\/em><\/p><cite><em><em>\u2013 Martina Budzi\u0148\u00e1kov\u00e1, Product designer, ABIS, Innovatrics<\/em><\/em><\/cite><\/blockquote>\n\n\n\n<p>The new colour dictionary <strong>included descriptions for bounding boxes and specified colour palettes for interactive, semantic and informative elements as well as exact background colours.<\/strong> In addition, and in line with the principles of colour psychology, the team specified different colour shades for microinteractive states, such as default, hover and active.<\/p>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"1600\" height=\"1029\" src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/uzLfyZ9w.png\" alt=\"\" class=\"wp-image-5988\" srcset=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/uzLfyZ9w.png 1600w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/uzLfyZ9w-300x193.png 300w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/uzLfyZ9w-1024x659.png 1024w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/uzLfyZ9w-1536x988.png 1536w, https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/uzLfyZ9w-300x193@2x.png 600w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><figcaption>The new Innovatrics ABIS colour palette.&nbsp;<\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<p>Another important element the team redesigned were the colours used for informative elements, such as various applicant statuses. These informative colours don&#8217;t represent specific feedback or actions. They simply provide information about the current stage of&nbsp;a&nbsp;process.&nbsp;<\/p>\n\n\n\n<p>The users can also choose between these colours when making notes and annotations within the application. For example, forensic experts can mark items with markers, choosing colours as if they were working in a sketchbook.&nbsp;<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<figure class=\"wp-block-image size-large width640\"><img loading=\"lazy\" width=\"800\" height=\"450\" src=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/notebook_3-1.gif\" alt=\"\" class=\"wp-image-6323\"\/><figcaption>Informative elements.<\/figcaption><\/figure>\n\n\n\n<p>In this way, the Innovatrics design team was able to create a consistent and detailed visual communication and make the system understandable and more intuitive to use.&nbsp;<em>\u201cCreating&nbsp;the new colour dictionary for the Innovatrics ABIS proved again the importance of good UX\/UI, even for a company specialising in biometric solutions. Our solutions can be the best in the world,&nbsp;but without a clear and consistent visual language their true value might be left unutilised,\u201d<\/em>&nbsp;concludes Martina.&nbsp;<\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p id=\"block-031f05e6-93fe-4fba-8416-31a509840c8a\"><strong>AUTHOR:<\/strong>\u00a0Krist\u00edna Zrn\u010d\u00edkov\u00e1<br><strong>COVER ANIMATION: <\/strong>Adriana Mi\u0161kov\u00e1<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Biometric applications should not only be technologically advanced, but also as easy to understand and navigate as possible. Delve into how Innovatrics applied colour psychology principles in the ABIS redesign, creating a consistent visual language and simplifying tasks for thousands of users.<\/p>\n","protected":false},"author":14,"featured_media":6389,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[33,32,64,60],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.6.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to apply colour psychology in the redesign of biometric applications - Innovatrics % %<\/title>\n<meta name=\"description\" content=\"Biometric applications should not only be technologically advanced, but also as easy to understand and navigate as possible. Delve into how Innovatrics applied colour psychology principles in the ABIS redesign, creating a consistent visual language and simplifying tasks for thousands of users.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/innovatrics.com\/trustreport\/practical-ux-how-to-apply-colour-psychology-in-the-redesign-of-biometric-applications\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Practical UX: How to apply colour psychology in the redesign of biometric applications\" \/>\n<meta property=\"og:description\" content=\"Biometric applications should not only be technologically advanced, but also as easy to understand and navigate as possible. Delve into how Innovatrics applied colour psychology principles in the ABIS redesign, creating a consistent visual language and simplifying tasks for thousands of users.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/innovatrics.com\/trustreport\/practical-ux-how-to-apply-colour-psychology-in-the-redesign-of-biometric-applications\/\" \/>\n<meta property=\"og:site_name\" content=\"Innovatrics\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-26T16:21:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-17T14:54:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/cover-for-socials.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Practical UX: How to apply colour psychology in the redesign of biometric applications\" \/>\n<meta name=\"twitter:description\" content=\"Biometric applications should not only be technologically advanced, but also as easy to understand and navigate as possible. Delve into how Innovatrics applied colour psychology principles in the ABIS redesign, creating a consistent visual language and simplifying tasks for thousands of users.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2023\/12\/mobile.png\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"16 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/innovatrics.com\/trustreport\/#website\",\"url\":\"https:\/\/innovatrics.com\/trustreport\/\",\"name\":\"Innovatrics\",\"description\":\"Len \\u010fal\\u0161ia WordPress str\\u00e1nka\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/innovatrics.com\/trustreport\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/innovatrics.com\/trustreport\/practical-ux-how-to-apply-colour-psychology-in-the-redesign-of-biometric-applications\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/innovatrics.com\/trustreport\/wp-content\/uploads\/2024\/01\/landpage-cover3-scaled.jpg\",\"width\":2088,\"height\":2560},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/innovatrics.com\/trustreport\/practical-ux-how-to-apply-colour-psychology-in-the-redesign-of-biometric-applications\/#webpage\",\"url\":\"https:\/\/innovatrics.com\/trustreport\/practical-ux-how-to-apply-colour-psychology-in-the-redesign-of-biometric-applications\/\",\"name\":\"How to apply colour psychology in the redesign of biometric applications - Innovatrics % %\",\"isPartOf\":{\"@id\":\"https:\/\/innovatrics.com\/trustreport\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/innovatrics.com\/trustreport\/practical-ux-how-to-apply-colour-psychology-in-the-redesign-of-biometric-applications\/#primaryimage\"},\"datePublished\":\"2024-01-26T16:21:37+00:00\",\"dateModified\":\"2024-06-17T14:54:14+00:00\",\"author\":{\"@id\":\"https:\/\/innovatrics.com\/trustreport\/#\/schema\/person\/74519c838e04a6f0fe98ebc24f63edf3\"},\"description\":\"Biometric applications should not only be technologically advanced, but also as easy to understand and navigate as possible. Delve into how Innovatrics applied colour psychology principles in the ABIS redesign, creating a consistent visual language and simplifying tasks for thousands of users.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/innovatrics.com\/trustreport\/practical-ux-how-to-apply-colour-psychology-in-the-redesign-of-biometric-applications\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/innovatrics.com\/trustreport\/#\/schema\/person\/74519c838e04a6f0fe98ebc24f63edf3\",\"name\":\"Adriana Miskova\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/innovatrics.com\/trustreport\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d238c2518dcc03d709dc72a54af4c6bf?s=96&d=mm&r=g\",\"caption\":\"Adriana Miskova\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/innovatrics.com\/trustreport\/wp-json\/wp\/v2\/posts\/5972"}],"collection":[{"href":"https:\/\/innovatrics.com\/trustreport\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/innovatrics.com\/trustreport\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/innovatrics.com\/trustreport\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/innovatrics.com\/trustreport\/wp-json\/wp\/v2\/comments?post=5972"}],"version-history":[{"count":288,"href":"https:\/\/innovatrics.com\/trustreport\/wp-json\/wp\/v2\/posts\/5972\/revisions"}],"predecessor-version":[{"id":7662,"href":"https:\/\/innovatrics.com\/trustreport\/wp-json\/wp\/v2\/posts\/5972\/revisions\/7662"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/innovatrics.com\/trustreport\/wp-json\/wp\/v2\/media\/6389"}],"wp:attachment":[{"href":"https:\/\/innovatrics.com\/trustreport\/wp-json\/wp\/v2\/media?parent=5972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/innovatrics.com\/trustreport\/wp-json\/wp\/v2\/categories?post=5972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/innovatrics.com\/trustreport\/wp-json\/wp\/v2\/tags?post=5972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}