Usability
Here are 5 things I hate to find when I visit a website.
1. It only works in some browsers
I’m a very keen Firefox fan, and I hate it when a website has been designed for IE and only IE. It’s not hard to make a website work in the main 5 browsers (Chrome, Opera, Firefox, IE7, IE6 and Safari).
Oracle PartnerNetwork’s website uses JavaScript tabs for tabs, unfortunately in IE8 they don’t work.
2. Invalid HTML/CSS/JavaScript
Nothing is worse than a website which just does not work; having invalid code can normally be the cause of most problems (For example, forgetting to close an element).
Be sure to check your website with The W3C Markup Validation Service before you release your company’s website.
Read the rest of this entry »
Posted May 3rd, 2009
CAPTCHA Image Verification is one of the worst ideas in the world from usability point of view, users with poor vision or who are fatigued may find complex CAPTCHA difficult.
The phrase “You what now?” comes to mind.
Here are some alternatives, which are a little more user friendly.
Logic Test
This method essentially asked your users to solve a simple puzzle, which a bot will find difficult, or CPU intensive to solve. In this simplified example, where we are going to ask the colour of the box (or the circle in the box).
Few users will find this test hard
The combination of differentiating between shapes and colours is quite easy for a human to do, but a computer can find this quite difficult. On the other hand though, this is quite work intensive for the programmer and unless you create a wide range of questions, you are a little limited.
View Example
Dummy Fields
In a nutshell, this puts a field which is hidden via CSS which requests a common piece of information (such as email, or message). If the field has been filled in, you can assume that a bot is being used.
Unfortunately, some modern browsers sometimes automatically fill in form for the user, which is a moderate problem.
View Example
Response Timer
This is another method which does not involve users having to do anything. The theory behind this method, is to see how long the user takes to submit the form. If the user takes a short amount of time, they are either super human, or bots. This is relatively full proof as most bots will instantly submit a form.
View Example
JavaScript Extra
This technique assumes that most bots are unable to use JavaScript, so making JavaScript write a little extra piece of information to the form should stop bots. According to the W3C 95% of users have JavaScript turned on, which is good.
View Example
Akismet
This is one of the best methods of stopping spam, essentially Akismet compare what your user has posted with other stuff posted all over the internet. For me, it’s never missed any piece of spam.
Conclusion
Is there a single alternative to do it all? No, but with a combination of all the methods we can reduce the overall amount of spam. In the next example I’ve combined all the above methods (minus Akismet) into a single file which assess weather a user is human on a point system (3 out of 4 will assume human). Feel free to copy it.
View Example | View Class File
Posted March 25th, 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
24/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
eBuyer 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
Posted March 13th, 2009
Here is a basic overview of little things that really bugged me on “professional designers and developers” websites.
Leaving watermarks on images
This is from a real designers website…I haven’t the heart to contact them about it.
Seriously, as soon as a client sees something which has possibly been stolen from another person website, they will just assume you will screw them over and they will avoid you.
No Easy way to contact you
I love seeing a lovely portfolio with some clearly fantastic work, but it sucks when I can’t get a quote. Clients will tend not to bother poking around (or doing a WHOIS) for a way to get in touch.
Make sure you have a big “Contact me for a quote” link somewhere.
No Portfolio
Clients tend to like to see you can do to check that you can actually do what you say. Make sure you have an accessible portfolio of work. If you need to build a portfolio, do some work cheap or even free.
“So are you a company or a guy in his basement”
Be honest with clients, if you’re a one man band, tell them! Clients will not punish you for not being a large corporate company (in fact, most companies will see you as lower cost labour).
Try and make your website reflect the amount of people who you work with. In some cases being a small company (or even a sole trader) can allow you to have a blog, twitter or even be a little more informal.
Invalid Code
If your website does not work in the client’s browser (which will always be IE6, because clients are idiots) it is unlikely the client will think your worth £500 per hour. Make sure you cross browser test and use good CSS (also, advoid tables).
Posted March 3rd, 2009
A “Call to Action” is marketing jargon for an action you wish you users to complete, for example “Sign up now” or “Add to cart”. Without them users will be confused about what you want them to exactly do on your website, but too many will frustrate users and possibly confuse them.
Below are some examples of good and bad calls to action.
Facebook
Only 2 calls to action, but the login button fit in seamlessly with the layout (not taking attention away from the sign up, especially for new users). The page also only gives the information required to know what Facebook does, sign up in 1 click and login.
Note: the “Sign Up” button is the only green button on the page (it stands out like a sore thumb).
MySpace
6 Calls to action (too many), the user is somewhat overloaded with information. The tabs are inconsistent and link to unnecessary information.
Amazon
No clear login or sign up button (Seriously Amazon, you make it look like I am logged in but I’m not). However there is only 1 clear call to action (Search).
eBay
3 calls to action, essentially “Search”, “Register” and “login”.
Useful Links
Your Web Site Needs a Clear Call to Action
10 techniques for an effective ‘call to action’
Call To Action Buttons – Does Size Matter?
Web Design – Have You Forgotten the Call to Action?
Posted February 27th, 2009