My Twitter

Posts Tagged ‘Usability’

Creating More User Friendly Forms with jQuery

Friday, September 11th, 2009

Create forms on a web page is relatively simple, however what most developers forget is the golden rule of usability, “Users are Idiots”.  In a large number of websites they fail to provide a clear indication of how a form field needs to be formatted. Some even seem to even forget to clear the field when the user clicks into, which is really useful if your website has users with motor skills.

Here is a really neat piece of jQuery I use to make forms a little easier for users which takes little work to integrate (Just copy and paste before the tag).

(more…)

No Comments »

5 easy ways to improve the usability of your website

Friday, March 13th, 2009

Users are simple folk who are easily confused, as a designer or developer its core to our job to make our websites as easy to understand and use as possible. Here are 5 easy ways to improve the usability of your site.

Be Consistent

Having a similar layout across your website helps with user familiarisation, if the layout drastically changes the user will tend to assume they are on another website (users really are that silly, hence phishing scams doing so well).

An example of where most websites fail to be consistent is in add-on packages such as Blogs and Forums. In a recent survey by Full On Design a very high percentage of websites which used a readymade blog (Wordpress etc) or forum (PHPBB, MyBB etc) did not have a consistent layout.

Don’t send mixed/complex messages

247_support_offline_small24/7 support which is offline, this could confuse users.

As mentioned above, users get confused easily and a confused user is an unhappy user. Putting an excessive amount of information on a single page on a poorly constructed page can make a user think “this is not worth my time” and they will leave.

To fix this, quite simple check how your website reads with a 3rd party and condense your data into as few words as possible (but don’t lose the original message). Really good examples of websites which “get to the point” quickly are Facebook and Apple. Examples of websites which epically fail to get to the point are IBM and Bebo.

Check for errors

Having a big “Error: The code is rubbish” is a big “hack me, I’m an idiot” sign essentially. Make sure your website works the way you intend to before you release the code (This includes cross browser testing). Luckily most server side code has error suppression and client side coding has lots of cheat sheets.

If you are adjusting a large website with a large amount of PHP, consider looking into PHP’s built in Error Handling.

Breadcrumbs

Home page > Section page > Subsection page
Above is an example of breadcrumbs

Breadcrumbs are an easy way to tell users where they are, where they came from and in some cases where they are going. If you use Wordpress there is a really nice plug-in to create breadcrumbs for you.

Be Clear

breadcrumbs_1eBuyer is very clear about how many steps are left when purchasing stuff.

Remove as much clutter as you can and make sure that your website is easily read. Keep in mind; on the web it’s better to have less useful information than more useless information.

Useful Links

50 Web Usability Tips that Help You Attract and Retain Visitors to Your Website
Don’t Make Me Think!: A Common Sense Approach to Web Usability
9 Common Usability Mistakes In Web Design
Breadcrumbs In Web Design: Examples And Best Practices

2 Comments »

How many characters per a page is normal?

Saturday, February 21st, 2009

As the title suggests, in this brief study I’m going to try and find out how many words, paragraphs and characters is normal for a web page.

Below is an overview of the results I obtained from a bot I wrote  (Which analyses web page content*):

Words Per a page Characters Per a Page Paragraphs Characters per a Word Words Per a paragraph
BBC News – #1 402.00 2,000.00 10.00 4.98 200.00
BBC News – #2 764.00 3,476.00 17.00 4.55 204.47
BBC News – #3 663.00 3,359.00 34.00 5.07 98.79
LA Times – #1 943.00 4,904.00 30.00 5.20 163.47
LA Times – #2 1,045.00 5,163.00 20.00 4.94 258.15
Yahoo News – #1 524.00 2,565.00 15.00 4.90 171.00
Breitbart.com – #1 319.00 1,576.00 11.00 4.94 143.27
 
Average (News Sites) 665.71 3,291.86 19.57 4.94 177.02
 
Mashable – #1 222.00 1,083.00 4.00 4.88 270.75
Mashable – #2 710.00 3,703.00 9.00 5.22 411.44
 
Average (Blog) 466.00 2,393.00 6.50 5.05 341.10
 
Wikipedia – #1 5,241.00 28,681.00 45.00 5.47 637.36
Wikipedia – #2 2,757.00 14,415.00 34.00 5.23 423.97
 
Average (Information) 3,999.00 21,548.00 39.50 5.35 530.66
 
WMT Post – #1 85.00 342.00 1.00 4.02 342.00
WMT Post – #2 472.00 2,240.00 6.00 4.75 373.33
 
Average (Forum) 278.50 1,291.00 3.50 4.38 357.67
 
Average (Overall) 1,204.86 6,296.24 18.85 4.97 296.67

So overall, the average number of words per a page is about 1,200 and the number of letters per a word should average out to roughly 5. However, this number various depending on the web page type and target audience.

*The content analysed excludes navgation, headers and footers.

1 Comment »