Let’s face it; the default graphs in Excel are indeed far from sexy. Regardless of whether you realise that creating a cohesive dashboard, or engaging report, requires a lot of effort and essential design concepts.
Possessing design skills is a significant benefit here, but many of us struggle with this.
If you are the curator and you want to get your message across, you have to grab peoples’ attention.
We are taught this all through school, yet so few follow the rules, and so few do it well.
We asked one of our favourite User Interface/User Experience designers, Garett MacGillivray from Aucadian (www.aucadian.com.au), to give us the insider’s view. He has over 10 years of experience designing digital products and a wealth of knowledge on the subject.
Rather than spending a few years becoming a pro, here are a few tips to steer you in the right direction.
Ian: I’ve heard that “F” is the magic letter in design. What’s that about?
Yes, however, this term relates more specifically to western cultures. It is founded on the principles of written language starting from the top left of a page and reading right and down. The “F” refers to a layout technique and used in both print and digital layouts. You can see this pattern across the web and embedded in software products. A logo in the top-left position, with navigation to the right or running in a column beneath the logo. This is followed by supporting content, and possibly a “call to action” below. Users typically ignore or simply glance over any content to the right.
The F layout is not a one size fits all approach to web or software design. It should be applied when the business goal or function of the website/software makes sense with this more traditional layout approach.
Ian: How much should you fill the page or screen? (i.e., less is more)
It depends on the intended use of the page, devices it should be optimised for, and the goals for the page.
Let’s say I was to design a dashboard for a business that needs an overview of multiple KPIs. I may implement several widgets/charts which can stack, scale, and stretch to fit the screen. Thus allowing the user easy access to critical information without burying it in clicks and multiple nested pages. However, within this layout, to make things easier for a user to scan through, I may opt to hide legends and additional information in buttons or tooltips. As the user continues to engage with this page, they would learn what icon/colour relates too. As a result, constantly having this information present is not necessary and becomes a wasted amount of real-estate. This gives the user access to critical information at a glance. As well as less important/fixed information on a click/hover should they need it, yet still lets the rest of the objects on screen breathe.
If I was designing a website, and its goal is to convert a user into a customer. I would strip things right back, leverage the companies mission statement. The benefits of said product/services, testimonials, or reviews to build trust, and because humans are emotional creatures attempt to attach emotional context to the product. Then all funnelling towards or leading into a join/purchase “Call to action.” Much more of a flow and sales pitch here, using a lot of white space, allowing items to breathe. Thus allowing the user to scroll/scan through things in a very basic and straight forward manner. Sort of an elevator pitch. Especially since you have 2-3 seconds to grab someone’s attention on the internet, and it needs to count.
Ian: How do you choose the right colour palette, and are there some rules to follow?
Garett: Typically, it starts with the companies established branding. But there are plenty of situations where I am forced to create a colour palette from scratch because the company simply doesn’t have one. There are also situations where the company’s existing branding and colour scheme may not suit the target audience in a conventional sense. In these situations, I implore a few tricks.
Colour invokes emotion. Like I mentioned before, humans are emotional creatures, and we can unknowingly attach emotional responses to almost anything. Colours are a big trigger and can have the desired or undesired effect on businesses if not used correctly.
Red: Passion, Love, Danger
Blue: Calm, Responsible, Safe
Black: Mystery, Elegance, Evil
White: Purity, Silence, Cleanliness
Green: New, Fresh, Nature
Depending on the purpose of the product, I will build my colour palette around these base principles. Using colour to evoke the type of emotional responses we’d like the brand to reflect. If it were a health based product, I would gravitate towards a lot of white, leaning towards analogues of blue for the secondary colour. This combination would enforce a clean, calming experience, which is not abrupt.
This is an interior design rule which helps me with my colour scheme selection. 60% is your dominant hue, 30% is your secondary, and 10% is your accent colour. This rule provides balance to colour, allowing the eye to move from one focal point to the next comfortably.
Some colours work well together while others do not. Typically, I will apply colour theory to build up my palettes, utilising tools like Adobe Kuler. You can choose your primary colour and drop it into this tool to play around with and discover what looks best. Use contrast to dial back visual importance or increase focal attention of text of objects.
Ian: How important are logos, imagery, and corporate branding?
Think of your branding, imagery, and any public facing assets used to represent your business. Well, almost like the clothing you would choose for a job interview or an important business meeting. First impressions matter, and tacky branding, just like a poorly fitted/cheap suit, can result in a negative emotion associated with your company. It can cheapen the perceived look and impression of it. “Dressing the part” is a term often associated with job hunting. Looking to move up within a company, or when landing quality clients for your business.
Just like people leave first impressions, so will your business. You may have a competitor who offers the same service offering or products as you. Heck, they may even have an inferior product. Still, if your branding/product gives an unpleasant experience, those customers may end up choosing your competitor, simply because they appear more professional. Unfair? Maybe, but it’s how the human mind works.
Ian: Thanks for enlightening us Garett.
There you have it; quality advice from a pro.
If you would like to learn more about Aucadian and the services they offer, please visit www.aucadian.com.au.
It’s undoubtedly time for you to put these concepts into practice and create something that hits the mark!