Usability and accessibility are two of the most important points that designers need to think about when constructing a new or developing and existing website. It’s not even a difficult area to get up to date with and implement. By reading about usability and accessibility in articles and design resources you can soon start implementing some simple principles which make your websites easier to use and open to more people.

Creating Active Efficient Navigation (+ breadcrumbs)

Letting the user know where they are within your site and how to get around can have a massive effect on how users navigate and how comfortable they are using your site. By making it easy for users to navigate around your site can have a massive effect upon how long users stay and how many pages they are comfortable viewing. Creating active navigation, hover states and current states should be done server side using html, css or javascript if needed to reduce load times and the amount of code involved. It is an effective technique as it allows users to not only determine where they are but also shows them where to go, what are links and improves comfort of the user on your site.

Link your Logo

Linking your logo, such a simple function can have such an improved effect upon your website and should be a must for any website nowadays. Users today expect your logo to be linked to your home page and there is nothing worse than expecting something to happen and nothing does. I find that linking your logo to the home page plus a link labelled “Home” works just fine.

Increasing the Hit Area on a Link

Increasing the hit area on a link can make some users lives so much easier when browsing the web. Small links especially can be frustrating to some users if they misclick on a link or click on the wrong link. By adding a little padding e.g. (padding: 5px 5px 😉 to the link in css you can increase the hit area size. This is especially useful when users using either mobile devices or laptop mouse pads are clicking on links with their fingers.

Adding Focus to Form Fields

Adding this little technique can help users understand that what they just did was correct and caused the right action. This is already a default effect in the new safari browsers but also very simple to add into your css to create the same action in other browsers:

textarea:focus { box-shadow: 0 1px 4px #c5c5a2; }

or change border on focus:

textarea:focus { border: solid 1px #ca6c18; }

Customising a 404 Page

At some point we will have all come across the standard 404 page whereby we have been misdirected or have done something slightly wrong. Although this page is perfectly fine in letting the user know they gone wrong somewhere it isn’t actually very helpful in getting us back on track. By creating a custom 404 page for our sites we are not only helping the user out in finding what they are looking for but we are also removing their frustration and the likeliness that they may go somewhere else. By adding simple features such as a search box, a popular or recent post list we are able to suggest some possible destinations and redirect the user back to areas of interest.

The Language you Use

The way you write is very effective in the way you make the reader feel. If you are reading a tutorial do you want to feel as if you are being ordered around or do you want to feel like your listening to a friend giving advice. You want to try and write casually don’t you so that reader feels relaxed, especially if you are writing about a tricky topic that may get the users stressed if they can’t understand things the first time round. Maybe add a few quirky lines or even adding a bit of slang here and there does no harm just as long as everyone can understand what is being said.

Line Height for Readability

I have to admit that when I first started out in web design even I quite often overlooked line height. However it’s one of those attributes that is so important when it comes to usability, making sure that your text is easy to read. You don’t want to have your line height to low so everything looks cramped up or too large that we’re scrolling down the page constantly. Why not start with a line height of 1.4em and adjust from there.

Use of White Space to Group Information

Grouping elements together is a useful way to indicate to the reader that what is grouped together is associated with the same topic. When users read from the web quite often like when reading a newspaper the reader is scanning the page for information that interests them. Grouping items together can be done using borders or images but the simplest method is by utilising white space. Like when you are reading down this page each section has a heading for the reader to scan through to find information of particular interest and each section has white space separating different topics.

Errors Messages on Forms

This can be one of the most frustrating things on the web, filling out a form, submitting the information you have just entered and then all of a sudden the page returns an unsuccessful message without indicating why. By simply adding instructions, tips and error messages can really help your users understand what they need to do and where they may have gone wrong. Therefore easily correcting their mistakes without them getting frustrated and possibly leaving your site without finding out the information they needed.

Javascript and Flash Usage

What I’m really talking about here is not adding features that aren’t necessarily needed on your website. I’ve seen it so often whereby flash and JavaScript have been added to people’s websites to show off the designers skills without really thinking about the users needs. Yes JavaScript and flash can really jazz up a site but there is no point adding it for the sake of it. Use them wisely and always think about what your site is going to look like and function like if users don’t have a flash player installed or JavaScript turned on.

Style Switchers

In my opinion a stylesheet switcher is one of the most underrated and unused features that is out there. It is such a simple feature to add to a site as well. Not all users are going to think alike. Not all users are going to like or be able to use the same style and design as easy as the next. In that case why not allow each and every user to customise your site so that what they are viewing suits their needs. Disability or impairment or not we all find certain things more difficult than the next.

Translate Pages

By translating your webpages into different languages makes sure your pages are usable and meaningful to all cultures. Therefore more hits and page views for your website. This isn’t necessarily a must as if you are a business that targets only a certain area then translating pages will not have any effect on your conversion rates. Just a thought if you want users from all over the world to be able to use your website.

Semantic Markup

Now in modern day web design I personally believe that this should be a must. If you want your web pages to make sense even when your css pages may not have loaded then semantic markup needs to be applied. By making sure your code is semantically correct during the design stages of your site you never have to worry about this point ever again.

Mobile Versions

Why not target the mobile browsing community as well. With the ever increasing amount of people using their mobile phones to browse the internet why not design for them as well. You don’t have to necessarily create a new mobile design but just make sure that your desktop version is translatable and looks good on mobile browsers as well.

Author Bio: Adie is the lead designer and blogger at webdesignerideas and AdRiCe Design regularly posting blogs and articles about web design ideas and design inspiration.

Category: Internet
Keywords: usability, accessibility, web design, websites