When creating efficient, accessible, and beautiful UIs, it takes only the smallest tweaks to improve your designs.
In this follow-up article I’ve brought you another selection of easy to put into practice UI & UX micro-tips.
Tips that can, with little effort, help improve both your designs, and the user experience.
Let’s dive on in…
When to use Radios, and when to use Dropdowns in your Product listings.
When it comes to product listings, there can be some confusion on the best input choice to use when displaying a product’s offerings.
Radio buttons vs Dropdowns. Fight!
With screen real estate pretty tight when it comes to e-commerce and avoiding the most crucial part; information overload for the user, simply user Radio buttons for around four options or less, and any more (4+), go with a Dropdown.
Avoid those ‘default’ shadow choices, and make things appear more ‘real-world’.
When working with elements on a coloured canvas, try and avoid black drop shadows, and make things a little more real-world if you can.
In the real world, If you have an element placed above a coloured background, then the shadow projected by that element will have touches of the background colour bleeding through.
So avoid those fake-looking shadows and bring a little of the background’s colour into the mix to make things look more convincing.
Creating a Dark-themed design? Don’t forget to soften up that White also.
As I mentioned in a previous set of tips, never opt for pure black when creating Dark themed designs as it can affect usability for many users. Soften up that black when you can.
Similar rules apply whenever you decide to add White flavoured elements into a Dark design.
If your Whites are pure white, they can feel jarring to the eye against dark-themed elements and make for a poor visual experience, so soften up those Whites and bring them down in contrast a little to provide something much easier on the user’s eye.
Present your Products the right way, with the very best imagery.
Great Type and fantastic Imagery are cornerstones of great product presentations and always deserve as much love as you can give them.
You can have the very best text content, presented with an impeccable Type choice, but if your product images sat alongside it suck, things could fall flat very quickly.
Use the best shots you can find and present your product in the perfect way.
Don’t rely on colour alone to communicate error states in your Forms.
When it comes to Accessibility with your Forms, don’t rely on colour alone to communicate different states to the user.
For example, with Error states, if you only communicate an issue with colour alone, someone with some form of colour blindness may completely miss this. That’s not cool.
Always try to incorporate a combination of icons and some form of error message to aid Accessibility and not leave many users in the dark about the issue that’s being communicated to them.
Improve the UX of your Forms with sample values.
It's proven that using placeholder copy in your Form fields increases form conversions and improves user experience... when done the right way.
But. You can take it a step further with... Sample values.
Instead of just opting for placeholder copy such as 'Enter your email', present a real-world example, ie; 'hello@marcandrew.me', to improve the user experience, and use placeholders the way that they were intended.
I hope with this short collection of tips you've realised how the smallest of adjustments to your designs can produce better end-results for both yourself, and your users.
By the way, if you want to really save yourself hundreds of design hours, my Design System for Figma; Cabana is now available.
Special Offer: Use the code CABANA35 to receive 35% OFF. 👇
Thanks for reading the article,
Marc.
