Make a first impression with visual design v2
Make a first impression with visual design v2
1. Ensure any web page downloads in under 2 seconds on a standard connection, to ensure users do not immediately bounce from your website.
Many abandon a website before it even loads because the website fails to load quickly enough. Imagery, video, fonts, and other design elements can slow a website down considerably.
2. Include a strapline that both explains the purpose of the page and its primary benefit to the user immediately on page load.
Ensure that as soon as the page loads, the user is instantly aware of what the page is about and how it can help them, without the need to scroll or do anything more than scan a couple of lines of copy. Also, attempt to include two or three additional benefits, above the fold. Avoid copy that is inspirational, but lacks clarity about the purpose of the page.
3. Remove user interface elements that fail to help the user understand the purpose of the website and the benefits it provides.
Every screen element demands user attention. If there is too much going on within the design, users will either abandon the site due to cognitive overload or miss critical content and calls to action. Systematically review every user interface element and remove anything that does not actively aid the user in understanding the offering and its benefits.
4. Make the page as scannable as possible through the use of headings, imagery, bullet lists, and content blocks.
Break copy down into easy to scan content blocks. Each block should consist of a descriptive heading, an image that helps reinforce the message, and a short description, ideally under 160 characters or using a bulleted list. You can always include a link to more information if required.
5. Ensure copy is concise and easy to process to enable the user to understand the offering without reading a lot of text.
Remove superfluous words and write in short sentences that are easy to digest. Write in plain English, avoiding jargon, and get to the point as quickly as possible.
6. Demonstrate the relevance of the site to the user by showing people like them in images.
If you are aiming at middle-aged moms, ensure that your imagery contains pictures of that audience, ideally using your offering. This approach ensures that a user instantly knows on page load that this offering is relevant to them.
7. Leave the user with an appropriate feeling towards the brand through careful choice of color, typography, imagery, and layout.
We strongly associate certain colors with certain feelings. For example, almost all fast food franchises use a combination of yellow and red because red triggers associations with hunger. In contrast, the combination of red and yellow are associated with speed. Equally, your choice of font can leave users with a very different impression. For example, a serif will come across as stable, established, and formal, while a slab serif will appear strong, powerful, and masculine. Finally, consider other stylistic elements such as negative space or gradients, as these also shape the user’s impressions.
8. Test the initial impression of your design with a 5-second test.
Before launching a new design, test it to make sure it has the right first impression. That can be done by showing the design to users for 5 seconds and then asking them the following two questions. What can you remember about the page? What impression did the page leave you with? It is possible to run this as an online survey using a tool like Usability Hub.