Readability & Visual Hierarchy
How users read on the web: they don’t – Jacob Neilson
People glance and scan, they do not read on the web. They are looking for key terms that are relevant to them. Once when they make a purchasing decision they start reading and analysing all the different permutations & combinations of the things you offer. Scanning is how they find the things that are relevant to them. Users will focus on things that match what they are looking for.
Create a visual hierarchy on the landing page, the inverted pyramid. Enhancing readability can be achieved by putting the important things first. Use bullet points, highlight the key terms, keep the paragraphs short, use simple language, use headlines on every single page, avoid jargon & hyperbole.
Respecting web conventions
Users spend most of their time on other websites & during that time they are developing conventions on how a website will look. So, don’t be unique with your designs at the cost of web conventions unless you are sure that your new way of doing it is absolutely evident to the users.
- Your logo should be on the upper right-hand corner & it should always click back to your home page.
- Your navigation should be across the top of your page & local navigation on the left-hand side of the page.
- If it’s ecommerce, the shopping cart link should be on the upper right-hand corner.
- Utilities such as about us, login, my account, etc should be smaller and above the navigation.
- Any text that you have underlined has to be a link.
- Any text that has a border around it is a button.
- Animated flashy, colourful rectangles are animations.
- Images are not clickable unless otherwise mentioned.
- The larger text or headline should contain the important, overarching information.
- Your search box should be in the centre of your page or in the upper right corner.
- If you do not have an asterisk or required mentioned in your forms, people do not assume that it is mandatory.
- Free means free, get that straight.
- Your footer & header should be demarcated with consistent & distinctive visual style.
These conventions are set very deep down in a person’s psyche. Respect these conventions & design your pages with these conventions in mind. You can also contact web design company cochin for good landing page design.
Using videos, images & graphics
Emotionality of your landing page is completely conveyed through the use of images & graphics. Images will improve conversion rates when they tell a story or when they have people in it. Images should be of high quality, condensed, original and should give a professional look. Images also create confusion when they are not in line with the brand aesthetic, brand style guide or the brand messaging.
- Using a solid background container for the text on top of an image
- Using an overlay that matches your brand style reduces the brightness and complexity of the image. Use solid white or black overlay with opacity 80-90%
- Positioning your background image with CSS
- Using gradient overlays
- Blurring the background image without losing the concept of the image.
- Images should be able to replace or make your text easy to represent.
- Images could add interest & visual appeal.
- Using alternating columns helps breaking up different sections.
- Do not miss an opportunity to evoke emotions.
Information architecture and accessibility
Information architecture deals with navigation, how well your content is organised, how easy it is for people for find things that they are looking for. Accessibility deals with how easy your site is to use and read.
The two main components of navigation are consistency & intuitiveness. Your navigation should always be the same & it should work the same way on every single page.
- Links to areas of the site that are not part of the main information architecture.
- Sign in, register, shopping cart, about us, FAQʼs, sitemap, directory, store locator, jobs, order tracking, press releases, discussion forums, limited time promotion etc.
- Should be less visually prominent than other navigational elements.
- Only include the most common utilities at the top – the rest go in the footer nav
Typography should go unnoticed. It shouldn’t be something your visitors think about. It should just be there as a medium to communicate. Use san serif as much as possible. Do not use more than 2 font families throughout your website. Avoid excessive capitalisation, avoid multiple text colours at most 1. Do not make the length of your line more than 50-100 characters.
Trust, Credibility & Safety
Trust & safety is an initial impression that is formed literally within a second of users landing on your website. Websites lack the fidelity of face-to-face interaction & therefore people are automatically conditioned not to trust you. It’s your job to subdue that & make them feel that you are someone really trustworthy. To see whether the changes on your landing pages are building up that trust factor you might have to run A/B tests.
We do judge books by their covers. It will be very hard to change an impression after that first impression is formed. The overarching professionalism is hard to get right. Clean typography, professional image, blank spaces are all factors to be considered.
