In this week’s web design video, Nick and I take you through a small selection of usability tips that should be taken into consideration when creating a website. Some of these will be trivial and obvious, but hopefully there will be a few that you add to your own checklists.
Our Top 10 web design usability tips
- Ensuring that your website’s company logo clicks back to the homepage.
- Sticking with common web conventions like maintaining underlining links.
- Considering Dyslexic audiences when using contrasting text - causing ‘text disorientation’.
- The importance of first impressions.
- Attention to detail with things like spelling mistakes and dead links.
- Increasing link Hit Areas.
- Taking into consideration people that use software to enlarge your website’s text.
- The importance of creating custom 404/error pages.
- Correctly using letter spacing and line height.
- Using white space effectively on a web-page to seperate headings and paragraphs.
Also in the video blog, I elaborate on a problem that can potentially arise when building PHP Includes websites in Dreamweaver. If you missed last week’s video on Web Design with PHP Includes, please check it out.
Script from the video blog
James: Hi welcome to our web design video blog, we’re Nick and James from Creare, today we are going to share with you our top 10 tips for web design usability, in no particular order.
Nick: Website usability effects various aspects of your website, it effects the accessibility, the SEO, the bounce rate and the conversion rate.
James: So we’ll start with something simple, the first tip is to ensure that the logo on your website is clickable, i.e. it takes you back to the homepage. It’s almost considered a convention in web design that if you click on a website’s logo, you expect to be taken back to the website’s homepage.
Nick: Other things are sticking to common website conventions; if you come across a link, it should be underlined for highlighting to both the user and search engine bots so that the link is obvious and not hidden. Also Headings and Paragraphs should be defined and distinguishable using paragraph and heading tags, highlighting important titles and setting them apart from the site’s general copy.
James: If you’re brave enough to use contrasting colours, you need to be careful because certain people with learning difficulties such as dyslexia can suffer from what is known as ‘text disorientation’ whereby they find it very difficult to read and follow text on a website.
Nick: Quite a trivial point but first impressions count so your website needs to appeal to as many people as possible, have a clean and clear design. You ideally want your website’s ‘Bounce Rate’ to be below 40%, most people make up their minds about a website within 5 seconds of the page loading.
James: Our fifth recommendation is attention to detail. We can’t stress enough just how important it is to check the spellings and dead links on your website.
Nick: In at number six is the hit area on links, so if you’ve got a real text CSS navigation with background images, you want to make sure that your CSS utilises display:block; to allow the image background to become clickable in addition to the text in the centre.
James: Our seventh recommendation is to make sure that you take into consideration that certain people use software to increase the typeface size on websites. You ideally want to be using ‘ems’ instead of ‘px’s (pixels)’ to set the rules for your font sizes. You also want to be making sure that you are utilising ALT tags and even title tags within links.
Nick: Quite a vital point is making a custom 404 error page for your website. If you have any dead links or frequently changing URL’s that somebody might type in or click on from another website, then you’ve got to make sure that you have a 404 page that is consistent with the design of your website so it is easier for users to navigate back to the relevant area of the website. This is also a good recommendation for internal website optimisation. Most servers support allowing you to customise the 404 page, however you will need to find the relevant settings in your hosting control panel, or by using a .htaccess file.
James: Our ninth recommendation is to correctly use letter spacing and line height. It is very tempting in CSS to manipulate the line height and letter spacing of text, but we see so many websites where this has been overdone, creating copy that is more difficult to read. People don’t expect to read text that is either bunched together too much, or too far spread apart. Just give people what they are expecting.
Nick: Our last recommendation is to correctly use white space. HTML inserts default padding around heading and paragraph tags. However the default settings can be better manipulated in CSS to pair headings with paragraphs in a more legible way.
