A blank screen is an interesting thing. We’ve nailed the customer need, planned the optimal User Experience (UX), produced a sweet set of wireframes to make sure it all architects together, and we know how it’s all going to code-up.
Now it’s time to put some colour on things.
How much should we actually ‘design’?
When it comes to User Interface design, there are some conventions users expect. That ‘hamburger’ icon in mobile view? We all know what that is, and what to expect when we tap it. Some examples might have a subtle movement, or lightly animate to a ‘close icon’ when selected, but there’s a general consensus as to what it is, where it is, and what to expect.
You own your space
This is the easy one. Brand the heck out of your background, your headers, and your button styles. Your branding agency really should have given you a solid base of 4-5 primary colours, and a whole bunch of complimentary ones. The answer is in the primaries. Always.
- Keep things solid. The world doesn’t need more patterned backgrounds. This isn’t 2009.
- Keep things simple. The world doesn’t need more video headers everywhere. This isn’t 2019.
But be bold. You still need to create a point of difference. Just don’t be putting your menu where the user can’t find it, put primary functions top-right (and colour them bold), and Know where to play font vs. form.
Font vs. form
Before you break any conventions, know that you can use font combinations, and play with padding, spacing and font sizes to give you the kick you need. Know also that there are some accessibility and readability rules when it comes to sizing – there’s a million white papers out there, but here are some basics:
- Heading fonts should be around 35px (and technically, 1.96x the size of your body font)
- Sub-headings should be 28-30px (and we often use a font variation for stand-out)
- Body content is optimal at 16px (push to 18-19px if your brand is properly informal)
- Fonts should never be below 9px for web accessibility
Be careful with them images
Image selection is all important, and clever use allows you to keep everything else relatively simple, and extremely clean. Whether you create them or invest in them, everyone is bored of the girl all arms-up at the horizon.
Equally, know how to apply images. Your brand guideline will likely include how they’re applied to posters, social posts, and the like. Make sure you’ve got a clear understanding on where and how to use them on your website (often) and in your digital product (rarely) too.
Never make your user guess
You’ve worked hard to get that user to your website, and your web visitor through the funnel, and your customer to on board. Don’t be killing their progress with making them guess what happens next. Some barriers can only be explained away by tooltips or onboarding guides, but for the most part, the most important aspect of any UI is to make things clean. Clean and obvious.
Key take away: Brand it up of course, but a button looks like a button, and a menu looks like a menu. Let’s start there.
Know what works
Versus what’s useless, and what’s down right annoying.
Often the curse of large, departmentalised organisations (classic case: education faculties), we’ve all visited homepages with a fully-loaded, lightly animating carousel directing users to this, or that, or them, or this.
Don’t do that.
Beautifully summarised by shouldiuseacarousel.com, only 1% of visitors will choose an item in a top-of-page homepage carousel, and of them 89% click on the first item. All of that design effort spent on the others, not to mention the ongoing mediation between Frank in Biology and Susan in Student Services wanting to appear in position 2 or 3 is just a heap of energy wasted.
And it’s worse for returning visitors who treat this animated security blanket like they see ‘advertising space’, and as constantly scrolling humans, we’ve been conditioned to skip past all of that.
Key take away: It’s the role of any good UI designer to know what UI components don’t work and to defend not using them to the death
Use everyone else’s research before you invest in yours
It’s understandable that a lot of clients will look at ‘in-market’ examples when designing their branded UI. There’s merit in that, but know that your customer uses many sites and platforms everyday, and most of us are just ‘putting up’ with poorly designed niche websites.
Your job as a brand owner/manager is to look way further afield. Not only will this give you a UI that stands out in your market, but you’ll be leveraging hours of optimisation, and millions of dollars spent on research and ongoing testing.
So, be like amazon?
Selling multiple products online? Don’t be afraid to look at the best, where:
- Their core brand colour yellow is exclusively used for transaction points (sign-in, add to basket, go to checkout)
- The cart is always top-right (a convention now followed by most, but you’d be surprised)
- The sign-in menu swaps out with the utility menu when logged in, providing known and easy access to my account, my orders, logout etc.
Key take away: Look beyond your sector to get UI inspiration… it’ll make sure you have a memorable point of difference versus your competitors to boot
But don’t be like amazon
Who are you kidding? Amazon is very cluttered, it is overly reliant on the search feature, and some of the recommendations are nonsense to me.
You know what, Amazon know’s exactly what it’s doing. It’s also way more loaded than your web shop, you probably don’t have the dilemma of showcasing a billion products in about 650 categories to a thousand different audience states. You also don’t have:
- Millions of dollars to spend on constantly optimising the search result algorithm
- A captive audience who will forgive a cluttered UI
- Because they just want to get what they want, on time, on budget
Key take away: Keep it simple, silly. You don’t have the budget, and your customer often won’t have the intent to be trying out multiple navigation points or searches to get to where they need to go.
User interface design is mad important. It can inspire or kill journeys and channel usage. Keep things simple and obvious, but find opportunities with fonts, spacing, and messaging to ensure an engaging branded experience.
When designing a brand, the UI of your online platforms should almost design themselves. Make sure you’re guideline includes a wider array of primary (minimum 4) and secondary colours, properly considered font combinations, image treatment for all channels, and on-screen components – and if you don’t have all of that, be sure that your web designer or digital product designer is retro-fitting a cohesive set as they go for consistency and future efficiencies.