Having a website is a great way for your business to connect with new customers. Unfortunately while building a website has brought instant success for some businesses, it has the potential to be an absolute disaster for others.
Poor website design is often the primary reason for a website’s failure. This is because it fails to engage the user. We show you how to identify poor web design and how to apply best practice web design principles.
Web Standards
What are web standards? Web standards refers to guidelines set out by the World Wide Web Consortium (W3C). These standards ensure websites look and feel consistent across a broad range of devices and platforms, as well as being accessible by internet users regardless of disability.
You may find your website looks quite different when viewed outside of the most common Windows / Internet Explorer combinations. If your website doesn’t follow standards it may look different to the following:
- Users on non Windows Operating Systems such as Macintosh, Linux, or even older Windows Operating systems 95 / 98 / 2000
- Browsers other than Internet Explorer such as Firefox, Opera and Safari
- People with disabilities (blindness) often use screen readers to browse the web
- Screen readers (or similar)
- Other devices including portable platforms like mobile devices, game systems and gadgets
Web standards can also help your website with:
- Faster loading times
- Easier to maintain code
- Lower maintenance costs
- Search engines
See how this page validates.
Usability
How many times have you visited a website and not been able to find what your looking for? What did you do?
Research shows that users who can’t find their way around easily (usually between 5 and 30 seconds) will often leave your website. If the information contained on your website is difficult to read or poorly structured chances are users won’t be able to find what they were looking for.
Usability can be broken into the following categories:
- Ease of learning (learnability)
- Efficiency of use (efficiency)
- Memorability
- Error frequency and severity
- Satisfaction
Navigation
As a general rule users should always be able to get back to your homepage. Common practice is to make your website logo (usually in the top left hand side) link to your home page.
The use of breadcrumbs provide an excellent navigation system and show exactly where a user is in relation to your entire website at any given time. This can be likened to a map at a shopping complex showing where you are and how you get everywhere else.
Breadcrumb Example:
home > products > computer software
Placing navigation items in the top left hand corner of your page is often where users will expect it to be. Various studies show that this area of a website is the most visible, so it’s important that your navigation items appear here if possible.
Sitemaps
Sitemaps help users clearly see the structure of your website at a glance. They can also help search engines such as Google find the pages that make up your website. Melbourne IT uses a sitemap to show the overall structure of the website at a quick glance.
Contact Details
Contact information is critical to any website. Whether it’s email or phone support. You should clearly provide an easy way for visitors to contact you. Contact forms should be simple and require minimal input from users. Don’t expect users to fill in 20 fields of personal data. They simply won’t do it. Providing contact details also adds credibility to your website
Search
If your website is large you may need to implement search functionality. Search results should be as exact and accurate as possible. Users are used to using search engines such as Google and getting what they want. If they need to type many different queries before finding what they need, chances are they’ll go elsewhere.
Don’t Use “Click Here!”
If you find you need to use CLICK HERE all the time just to entice users to follow a desired path through your website. Your message is probably not clear enough. Users will follow links on your website, if they feel it will take them where they need / want to go.
If you are using a lot of “click here” style text and links try cutting down on other visual noise. This could be excessive advertising, a multitude of colours or even excessive graphic usage.
Colour Usage
When using colours on your website it helps to select colours which are not too intense. Use white background with black text to aid readability, users will commonly associate links with blue text and an underline. If you change this try to keep the underline in place and give the link a unique colour to separate it from your normal text. Try not to exceed using more than 5-6 different colours on your website. Your website delivers information much like a book, it’s not a Jukebox.
Text Alignment and Page Width
You should rarely use centre alignment for your text (paragraphs), not only does it look strange, it’s harder to read. Text should be left hand justified just like a word document. Try to keep text at around 12 words per line, anything beyond this causes the eye to strain and lowers retention rates making reading harder and the next line that much more difficult to find.
User Testing and Assumptions
Even if it seems unnecessary user testing can often help save time and money in the long run. If users have difficultly using your website it’s best to fix the problem now before it is launched, rather than after you have spent hundred’s of dollars on website marketing and various branding techniques to drive traffic to your website.
Use of Images
Improper use of images often results from a lack of understanding surrounding graphical formats. We often see websites that display images as a small thumbnail image but take an extremely long time to load. This comes down to a lack of understanding about image formats and how to display images on a website. We strongly suggest using a professional web designer or graphical artist or website thumbnail manager for this reason.
Slow loading images can frustrate users with slower connection speeds (yes some people still use 56k modems) and increase the work load on your website host.
Forms and Error Messages
Do you have a contact form, questionnaire, newsletter subscription or other similar form(s) on your website?
Have they been thoroughly tested? These forms can be invaluable to your business. However if they give cryptic error messages, ask the wrong questions or don’t submit properly once completed they can be very frustrating for the end user.
Make sure you have tested your forms, not just from your computer but from others also. Don’t expect the user to enter items like phone numbers in perfect formatting, correct this on your end or provide drop down lists where possible to minimise user error.
Try to minimise the amount of required fields and above all provide useful feedback (such as examples) when the user does make a mistake.
Usability Case Study
If the goal of your website is to provide users with a way of booking holiday accommodation online through an online form, consider the following example:
You bring 200 visitors to your website per day through Google Adwords (Pay Per Click Advertising). Each visit costs you $0.50 cents. That’s $100 spent per day bringing visitors to your site. Let’s say only 2.00% of those visitors (4 in total) make a booking online and accommodation is $600 per week.
Your return on investment can be calculated with the following formula:
ROI = (Bookings Online – Advertising costs) / Advertising Costs
ROI = ((4X600) – 100)/100 = 23
To express this as a percentage we multiple by 100 which gives us 2300% ROI.
Using the same case study, let’s say we discover a problem with the online booking form that is causing users to cancel the booking process midway. Let’s now assume your conversion rate is 5.00% an increase of 3.00%.
ROI = (Bookings Online – Advertising costs) / Advertising Costs
ROI = ((10X600) – 100)/100 = 59
In percentage this is 5900% ROI.
As you can see a small change and improvement in usability can have a huge impact.
Accessibility
One of the most important aspects of a website, and yet one of the most overlooked and misunderstood. An accessible website can be used by everybody regardless of physical disability.
Top 10 Checklist for Accessibility
- Images & animations: Use alternative text to describe an image.
- Image maps. Use the client-side map and text for hotspots.
- Multimedia. Provide captioning and transcripts of audio, and descriptions of video.
- Hypertext links. Use text that makes sense when read out of context. For example, avoid “click here.”
- Page organisation. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.
- Graphs & charts. Summarise the graph or chart.
- Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported by the end users machine or device.
- Frames are an old method of display webpages. If your site uses frames ensure you use the noframes element and provide meaningful titles to your pages.
- Tables. Make line-by-line reading sensible. Summarize. Make use of table headings and table footers. Use Table Captions to describe your table.
- Check your work. Validate it using tools, checklists, and guidelines at http://www.w3.org/TR/WCAG
In some regions of the world it is a legal requirement that your website meets accessibility standards. This is the case in the UK especially see: http://www.opsi.gov.uk/acts/acts1995/1995050.htm
Templates
Buying a website template can potentially save you a lot of money, or at least that’s how it can appear at first. However consider that many templates may not be built using the best web design standards. This may be because their primary goal is to “look pretty” rather than function or perform well as an actual website.
Once you factor in the cost of redesigning your website to improve usability, and accessibility (two items covered later in this article), your cheap $50 template may cost you anywhere between three to ten times your initial outlay.
If you are on a limited budget and decide to buy a template, make sure to pick one that matches your corporate colours and often choosing one that is simple and isn’t overloaded with graphics is the key.
Look for templates that meet World Wide Web Consortium (W3C) standards, they will often have a logo or text in the footer (bottom) of the template indicating that they meet these standards. They may also make mention of the fact that the template has been built with search engine optimisation (SEO) in mind.
Summary
Always place yourself in your visitor’s shoes where possible. Ask yourself “am I expecting my users to do things I wouldn’t?” When it comes to websites the more simplistic websites are often the most successful websites. This doesn’t mean you have to have boring pages, it just means spending time getting your structure and layout correct. You can add glossy buttons, logos, images etc. just make sure they are not the core focus of your website.
Need Help With Your Website?
Melbourne IT can assist you with building a new website or rebuilding an existing website. We can also help market your website on Australia’s largest search engines. For a FREE consultation, simply call us on +61 3 8624 2492.
Dominique is an online marketing professional working in the corporate marketing team at Melbourne IT. Her passion is the creation and implementation of integrated marketing campaigns with a strong digital focus. Currently she is obsessed following the Twitter trend of a TV show and watching at the same time #youshouldtryit.