We all love a good icon that takes away two lines of text, finding that perfect colour to show the vibe of your website and a pop-up banner that brings in sales but how do you know what is good and what is a complete flop?
Let’s start with icons, they take up very little space, eliminate lines of writing and they are, usually, easy to understand but what makes a good icon.
Universal icons are the most known icons that most users understand, they don’t need a label or description, but there aren’t many of these. Then there are icons that are used by many designers for different uses, like a star, is it a favourite, a bookmark, a rating — who knows. These conflicting icons make designs hard to understand as the user is left thinking and wondering what will happen if they click it and if it will mess up what they have already done. These types of icons need labels or descriptions under them to make them useful.
Then there are unique or personal icons, the designer often understands them completely and questions how someone couldn’t understand — but it’s easy to understand when you know what it’s supposed to be doing already. These confusing or vague icons worsen a user experience.
The most important thing about a user experience is, it is clear and simple, no one wants to look for minutes to find a checkout or book an appointment — users want to look for a few seconds and find everything that they need.
This is where labels come in, when you have unique or conflicting icons it's best to add a label to them to ensure the users know what will happen if they click the icon.
88% of the time when an icon is ladled a user correctly predicted its meaning whereas when it was not labelled, it dropped to 60% and it dropped even lower when it was a unique unedited icon.
5 important tips to think of when making your banners
- Placement, you want them to be seen but not blaring in the users face, they must be noticeable but not interrupting and should always have a close option.
- Make them stand out, gradients, colour, motion, images, anything to catch a viewer’s eye. It needs to stand out from the page.
- Design for different screens, your banner needs to work
on mobile as well as web.
- Banner blindness, don’t stack banners or fill the page will all these different popups, keep it clean and simple.
- Overuse, if a banner is a constant on a page, it doesn’t need to be a banner, only use relevant and needed information in your banners
Pop-up banners are a sensitive topic, advertisers love them, users… not so much.
Pop op banners are like those extroverted energetic kids that everyone used to have at school, they are loud and demand attention and don’t stop until they get what they want.
There are two types of banners, actionable and informational.
Actional banners consist of:
- time-based offers, like sales, limited deals, etc.. make the reader feel like they are going to miss out if they don’t click on them.
- Login/sign up enticements, benefits of logging up then, cash prizes, by getting users to sign up you get to learn their preferences.
- Inspirational, giving a user a personalised exciting recommendation that links to their interests.
- Offer based enticements, using discounts, sales, payment options and sayings like “ you won’t find this offer anywhere else “.
Informational based banners:
- Status based, give feedback, like telling a user their orders is almost there or if an error occurred while finishing a task.
- Highlighting USPs, basically saying why you’re the best in the field.
Last but far from least, colour
Why is colour so important?
62–90 percent of viewers assessment of a design is based on the colour. Colour can make or break your design, who wants to use a website that uses bright colours that hurt your eye and make everything hard to read.
It’s in our chemistry to register colour and generate a feeling towards it, so what colours trigger what emotions
Reds — they are warm and comfortable but they could also bring anger, hostility, passion. These warm tones need to be well thought through to ensure the right side of the emotion is conveyed.
The cold colours, blues, greens, purples — they are sweet, quiet, trustworthy, confident. If a company wants to be trusted it should look at using these cool tones.
Gender affects your like or dislike of colours too, men like white, grey and black while women like mixes of reds and blues, your target audience will be the most important factors to consider when choosing a colour scheme.
When choosing your colour pallet it can go one of two ways,
Analogous Ui colour schemes which are colours grouped next to each other on the colour wheel or complementary colour schemes this uses cool vs warm colours in a way that complement each other.
Making colours balance, to make a balanced colour design use the Golden Rule — 6:3:1, Neutral colours for 60% of your design, secondary brand colour for 30% and 10% your main brand colour. The second rule is to only use 3 primary colours in your design, it helps to avoid designing a chaotic layout.
Lastly, always consider these following points when striving for a clean and unified design.
Shades, tints and tones, use them to enhance but not overpower, shadows and hues need to be subtle.
Brightness, think of how it would look in light and dark modes and choose which suits the brand the best.
Contrast, strong contrast creates tension but also helps to focus, light contrast brings calmness and relaxation.
References
https://usabilitygeek.com/colors-in-ui-design-a-guide-for-creating-the-perfect-ui/
https://uxplanet.org/icons-as-part-of-an-awesome-user-experience-e468e16b206b
https://uxdesign.cc/designing-persuasive-banners-that-dont-ruin-your-ux-9b51262d5638
