This is a hard one for me. I’m a detail-oriented person. I don’t like to leave anything out in case I miss something important. If I’m telling a story, I like to embellish it with details. Getting to the point is often a long drive round the houses. But sometimes, keeping it simple is a must. On your website, for example.
When a visitor arrives on your homepage, he/she needs to know what it’s about almost immediately. They don’t have time to drive round the houses trying to find what they are looking for and they don’t need or want to be confused by irrelevant stuff. They also don’t want to leave with eye strain due to glaring colours or zigzagging down your page.
How do you make it easy for them to navigate your site and keep them there longer? By keeping it (stylishly) simple.
This doesn’t mean you can’t go into detail at all; there will always be some visitors that want to know more. But make it so they can get the gist from a five second glance and if they want more information, provide them with a means to get them there.
Here’s some tips on keeping your website stylishly simple.
Use a colour scheme that’s easy on the eye and stick with it. A consistent colour scheme not only simplifies the look of your website but it creates and maintains a style that reflects your brand or personality that your visitors will come to recognize.
- Text colours should contrast with background colours so that text is easy to read.
- Bold, bright colours should only be used in moderation i.e. for emphasis and links (headings and calls to action). Too much colour on text is hard on the eyes.
- Use a colour scheme generator or themed colour palette to help you choose your colours so they complement each other.
- Once you’ve decided on your colour scheme, stick with it. That way your regular visitors will recognize your brand or personality.
- When adding your own content, don’t randomly throw in a multitude of other colours, especially on large chunks of text.
NOTE: Just because your mood has changed today, doesn’t mean you need to start changing your colour scheme to match. By tomorrow you may be in a different mood. On any given day, your mood may not match that of your visitors’ and you may drive them away if you keep changing the colour scheme.
Use a layout that flows, that is consistent and uses lots of white space.
A layout that flows
- When having your website designed, choose a layout that flows e.g. Logo top left, sign-up, contact info or other info box top right; large imagery (static or slideshow style), bold headlines, brief descriptions and horizontal navigation above the fold; less important or detailed information below the fold; site map or secondary navigation (for large sites), disclaimers and copyright info in the footer.
- When adding your own content, don’t place your images from left to right causing your reader’s eyes to zig zag across the page to read your text. A layout with alternating image alignment will also cause problems with text runaround often leaving one line of text hanging below or sitting on an image.
- Keep logos small and generic information at the top of the page to a minimum so your visitors don’t have to scroll to see what the page is about.
- On sub-pages, to reduce repetition and/or having to scroll to see new information, use a smaller banner image, change it for one that is relevant to the page or remove it all together.
Maintain a level of consistency throughout your website. This doesn’t mean everything has to be exactly the same, but where possible use the same layout for similar types of content so your visitors know what to expect when they click a link. This will make it easier for them to find what they are looking for.
- Use a one layout for your main pages and a second or third layout for subsections and sub category pages or for pages with specific types of content (e.g. gallery/video pages, list pages, product category/detail pages).
- When using 2 column layouts with a sidebar (for ads, menus, sign ups) don’t switch between a left and right sidebar. It will confuse your visitors.
- Use consistent sizes for text and images. In the case of text, use the styles provided. If you need a different size for effect or emphasis, ensure it is the same for all occurrences. When adding images, use the same width if they run down the page, and the same height if they run across the page.
- Don’t add images for the sake of it. If they are not relevant to the topic and consistent with your brand or personality, don’t include them.
Use white space between blocks of information. This doesn’t literally mean use blocks of the colour “white”. It means don’t bunch everything together.
- Break large paragraphs up into smaller, easier to read chunks.
- Use wide margins between paragraphs and padding around images.
- Make sure there is adequate space between columns, info & sign-up boxes, widgets, ads and menus.
Lastly, but by no means least, make it as easy as possible for visitors to navigate between and within pages but don’t go overboard.
- Include a horizontal menu at the top of every page with links to your main pages and sections.
- Include drop down menus from your main menu bar links and/or include side bar menus for sub-pages within sections.
- If you have several sections with a large number of pages within each section, use a different template for each section that includes a menu with links to pages only within that section. Alternatively, create custom drop down or concertina type menus for each section.
- Add call to action buttons on landing pages (can be part of your main banner images) with links to the page you want them to go to.
- Include links within your content to take the reader to a related page, but don’t put too many.
- Always add a call to action at the end of your text with a link to the page you want visitors to go to (e.g. View portfolio, next, read more, shop online, buy now button, contact us)
- Include some form of generic navigation (same on every page) at the bottom of the page to get to other sections/pages, particularly on longer pages. This can be as simple as a “to top” link, “next” and “previous” arrows/buttons, or vertical menus with links to every page in each section.
- If you are writing a daily blog, don’t think you have to include a link to every article or page in the sidebar menu causing your sidebar to become cluttered and a mile long. Instead, include a category menu, a recent post menu and a calendar that shows when you posted new articles. Most blog readers will know how to navigate using one of these methods and can easily scroll between articles using the next and previous links.
NOTE: If you’re creating a marketing landing page, keep it even simpler. Remove all navigation menus and only include call to action links (on buttons, images, text) that all take the visitor to the one page you want them to go to next, i.e. to buy your product or service.
Consistency is key. Most people don’t like sudden change. Sticking to a layout, colour scheme and navigation that are consistent throughout your website will keep your visitors on it longer. Don’t confuse them by changing colours, layouts and where you place your navigation. K.I.S.S. (Keep it stylishly simple)