Skip to main content

The Basics

Use Colour, Shape and Grouping​

How Many Shapes are There?

Reducing information overload is not necessarily about reducing the amount of things on a screen, it’s about organising things in the optimum way so that they can be easily processed by the brain. The brain can process different visual aspects in parallel, like colour, position, shape, texture and movement.

info

Using more signifiers doesn’t slow things down for the brain, in fact it’s the opposite, the more of these you use, the faster something will be recognised. If all this is new to you, it's time to brush up on your Gestalt Principles.

The fashion these days is to have a single key colour in an application, any complex app without multiple key colours is missing a very simple trick. Using shape/ colour/ size/ grouping is the most pure example of synergy in software design, the resulting whole being so much greater than the sum of its parts.

Contrast and Legibility​

This can be quite a challenge in complex apps with many different areas, app states, UI states and depth levels. Most online contrast tests out there compare against the WCAG 2.0 standards, the WCAG standards are aimed at making things legible for the average 80 year old which is very admirable; my dad is 78 and uses Photoshop most days. Accessibility is a requirement for good software design, so you definitely need to plan for hitting some minimum baselines and the ISO-9241-3 standard's 3:1 minimum contrast ratio sets an accessible and easily achievable bar fit for everyone except those with moderately low (20/40) or worse vision. At a recent design conference two legally blind people came to do a workshop in our DCC, it wasn't great, and we will do better. Always strive to do more, if you can keep your contrast ratios higher without flattening the life out of your UI and causing a whole different pile of usability issues, you should do so. Offering larger font sizes for the UI can also help here.

Contrast Examples

As you can see, to pass the 3:1 test with a 'dark mode' app, the background needs to be relatively dark - this doesn't give you a whole lot of space to play with for rollovers, selected states and backgrounds. It may in fact be easier to represent certain states in one or more different ways, for example underlining text, using outlines, changing colours, textures and such.

Example of UI Tints

As mentioned, one easy way to increase legibility is to use colour tints. We use them in Cavalry in our hover and selected states (which are lighter than the deselected state, and would thus otherwise reduce the contrast between the name text and background).

Another general tip is to avoid too much blue in the backgrounds of your app, this is known to cause eye strain, much more so than warmer colours.

Buttons​

Example of Buttons

Once more for the people in the back row, buttons need to look like buttons. By this I do not mean they need to look like the great and honorable Kai Krause designed them, it can still be flat, don't worry, I just mean that it needs to be distinct from an icon. There is such a staggeringly enormous amount of research behind the efficacy of affordances that at this point you basically need to be a conspiracy theorist to think that simply using icons or text as buttons is a good idea (outside of some very particular contained - literally boxed in - use cases like toolbars). Another area for consideration is button labelling, NNG has an article on that here. In short, label your buttons, label your icons. If you don't, know that you're knowingly reducing usability (which is okay, compromises are allowed, just be aware of what it means). One clever way to have your cake and eat it, is to have button/icon labels, but give power users the ability to turn them off.

Icons​

The ultimate aim of icon design is to relieve the user of the necessity for recall when trying to locate commands, actions and any other data-carrying element within the graphical user interface. So you should try to make them distinct and easy to recognise, the section above talks about Gestalt Principles which is how you should achieve this. It's worth noting that even with all the Gestalt tricks employed, semiotics (images/ icons) are usually not as effective as text at communicating meaning. I realise I just mentioned this under buttons, but this is why all the UX courses and top tier designers recommend labelling your icons. I appreciate some visual designers would rather pull their own ears off than do such a thing, but it's only your users you're hurting, unless of course you do actually pull your ears off...

Text​

For Westerners, left align all multi-line text as this minimises the amount of scanning the eyes have to do and the amount of processing required to take in the information. You can however centre align isolated text, like headings, or hints without penalty.