Basic visual design
Last updated
Last updated
Visual design is a complex topic. It pulls from a long history of studies of human psychology, sociology, and human computer interaction. However, it's not necessary to dive deep into topic to be able to take advantage of some these results.
There are three goals for visual design
Guide people: convey structure, relative importance and relationships
Pace the interaction: draw people in, help orient, provide hooks for diving deeper
Express the message: tell the story, breathe life into the content
Keep these goals in mind as you create your tools. As you read through the advice in the sections below, think about you can tie them into the design goals.
Good rule of thumb: follow the example of other similar sites that you think are designed well.
Put the most important things "above the fold"
That said, studies do show that users are happy to scroll if they think they'll be rewarded, so don't worry if important information is 'below the fold'
Use whitespace convey groupings. Things closer together (i.e. with less whitespace between them) are perceived as being related.
Add whitespace to help create groups of items or text
The contrast between sizes of text implies a hierarchy. Use large/bold text for titles, slighter smaller text for subsections, and even smaller text for the body.
Pick a common, familiar typeface unless there is a strong reason to do otherwise. Especially if there is a lot of text for the user to read, your user will be significantly slowed by uncommon typographies.
Left-aligned text is proven to be easier to read. Do not use any other alignment unless there is a strong reason to do otherwise.
In general, people don't read on the web. People often have a number of tabs open simultaneously and are even doing unrelated tasks at the same time. Make any and all text scannable:
shorter is better
use bullet lists
don't use market-ese - people will not trust your tool
It is tempting to only use icons since they take up less space than text, but icons can often confuse users since they may not recognize your icon or may not understand what a common icon does in the context of your tool.
Avoid generic icons except where the icon is exactly what you are doing, such as a PDF icon to generate and download a PDF of the screen. In general, the more specific your icon is, the better.
Good icons show what they represent, either to help the user recognize what the icon does the the first time or the second time when I return.
Use both icons and text together, such as a magnifying glass and the word 'search'. This helps users who may only read and users who are looking for familiar icons
Use color sparingly but effectively - think about why you're using color and what you are trying to tell the user with that color.
If you're making a logo or something extraordinary, pick something uncommon to make you stick out.
We automatically notice patterns and deviations from them. Use patterns when you want to convey consistency, and deviate when you intentionally want to distinguish that content.
Align text, images, divs, etc to guide the eye and reduce clutter
Slight misalignments, though small, undermine the user's confidence in your tool and make it seem less trustworthy
Make the link text a long, muti-word phrase (this will help with accessibility too since readers will read out whole link). Avoid links that are just the word "here".
Use trigger words, not 'clever' terms. These are commonly known words that users will instantly recognize. Note that you should always use words the user uses, not the words that the tool maker uses. For example, the user may call the data 'clinical data' though the tool maker calls it 'metadata'.
Understand information scent. When looking for information, people will skim pages looking for key words related to what they are searching for. If a page doesn't seem immediately relevant, people will leave to look elsewhere -- even if the current page may actually contain all of the information they're looking for.