Captchas Are Bad Usability?

Getting customers to make a conversion on a website is a tough call, whether its to make contact, buy a product or enquire about a service, a HTML form is often the call to action we are trying to get the user to complete, why oh why do we put obstacles in the users way.

Good Captcha, Bad Captcha

Good catpchas are an extra step the user has to fill in on the HTML form, any marketeer worth their weight would tell you not too; extra steps equals less conversion. Good captchas tell you to enter capital letters and are in a straight line making them almost readable.

Bad catpchas are impossible to read and make you squint at the screen trying to guess the lettering for the 3rd time and giving up the ghost on the 4th attempt. Bad captchas have wavey text and even a line through the text making it even harder to read.

I am aware a lot of captchas now have an audio button so they can play the sound of the code to you, but I dont care about making them accessible, enough’s enough, Web Usabability 101 states dont piss off your users, I’m sure thats the exact wording on Nielsons Alertbox. I even hate the word C-A-T-P-C-H-A. Lets revolt.

I often get asked what page width should I design to and my common answer is “it depends”. The goal is to design a page that looks good across most screen resolutions and most configurations allowing accessibility to the widest possible audience, but there’s alot to consider.

Web Browser Chrome

Web browser chrome is any extra toolbar or gadget that takes up space on the screen, deducing web page space from the users view. Browser chrome can be Toolbars like Google or Yahoo’s popular toolbars,  Bookmarks or favorites  or your history toolbars. Some user’s surf with the bookmarks toolbar page open, I have also come across fellow web designers who surf with the browser window minimized, probably because they have such large screens.

Also you must take into account that the web browser itself has scrollbars that affect the horizontal width and also most modern web browsers have tabbed web browsing and a status bar, then there’s your operating system with the windows start and windows taskbar at the bottom of your screen, all affecting the vertical height of your actual viewport.

Screen Resolutions

There’s a whole myriad of different resolutions that people are viewing your web page through and the old standard was to build for 800 x 600 but I have found for most websites and this includes my clients and my own websites that the average screen resolution is now 1024 x 786, of course this varies greatly depending on the audience of the website.

Designbit Example

Designbit has a audience with a high technical ability and this is backed up by the cool flat screen TFT’s and LCD’s users are using to view the site, Laptops have had a massive impact on this factor too. On Designbit the average screen resolution is 1280 x 800,  followed closely by 1024 x 768 and just behind is 1280 x 1024, but then theres more:

1. 17.96% – 1280 x 800
2. 16.55% – 1024 x 768
3. 16.37% – 1280 x 1024
4. 13.68% – 1680 x 1050
5. 13.07% – 1440 x 900

If I was to build my page width to the largest user group then Designbit would be built for 1280 x 800 users, but then I’d also have to allow space for browser chrome, so lets say I decided to build at 1000px wide page width, the 16.55 % of users viewing on 1024 x 768 may strugle to get the full page contents if they have any horizontal browser chrome.

Handling Browser Chrome

As a rule of thumb I allow 1/6 of the horizontal screen space to browser chrome, this is usually plenty of space and also allows some extra room for white space around the design, which I believe helps readability.

The ideal page width for Designbit without annoying my audience would want to be about 1/6 of 1024 x 768, were roughly talking about 900px page width, its currently set at 890px.

Analytics is the Answer

So from the Designbit example you’ve probably determined my answer to the page width design question, my common answer is “it depends”, quickly followed by “look at your analytics”.

WordPress Usability

As Playing with Fire has pointed out Joomla has a lot of catching up to do on the Usability front, WordPress makes simple tasks really easy to accomplish with few clicks to get a task done such as adding an image, publishing a page or publishing a news item.

For the website owner running a business website or a blog I haven’t found a CMS that has better usability than WordPress.

Training

When I train clients on how to manage their websites It usually takes about 40 minutes with WordPress, often a few hours with Joomla, though Joomla has more powerful features, every day tasks the client wants to learn take much longer to train.

Unfortunately once a client has received training in Joomla they often need tips or hints at how to perform a task again a few weeks later, that scenario hasn’t come up once with WordPress.

Why use WordPress over Joomla

If you have a small to medium size business I believe WordPress is currently your best open source option to manage and update your website on a daily basis, tasks are very easy to accomplish, everything is well thought out and I find myself saying this to a lot of clients when training “Everything is where you’d expect it to be” .

WordPress has an amazing community around it and the in depth documentation is second to none, as a designer or a website owner you’ll find everything you’ll need by the very people that make it and then also by enthusiasts such as myself.

Why use Joomla over WordPress

My programmer voiced to me that the main pro for using Joomla is it’s power and flexibility, and its true, with me designing and my developer programming we can make Joomla do anything.

The capabilities of Joomla are endless and custom database work is an area where Joomla particularly shines.

Joomla has a complex multiple user privilege system with user registration and layered content privileges. WordPress does not have a traditional privilege system at all.

When multiple user groups are needed I turn to Joomla, if a business requires multiple users be be able to login and view the website with different content that is user privilege dependent then I believe Joomla is the best open source CMS for the task.

Joomla also has an amazing community based around it, but the official documentation has great depth but is poorly organized, I found the best documentation from external sources.

Conclusion

Joomla was designed from the ground up as a CMS, WordPress as a publishing platform that has evolved into a CMS, giving each unique strengths and weaknesses.

I think both platforms are fantastic for managing a website, WordPress for small to medium business and Joomla for a website that requires multiple user privileges or custom database work.

Hyperlinks

One of the first things we learn about the Internet is what those blue underlined links do, they don’t have to be blue, but I do believe you must differentiate them by giving them an underline or a background color. C

hanging the color only isn’t a great solution as users with color blindness cannot tell the difference. Visited links should usually change color, most commonly a nice purple, recently I have seen more sites using a strike through which seems to work well.

Heading Structure

Users are used to reading in a certain way, magazines and newspapers and now the web, lets take advantage of the nested information structure users are used too. Headings will ease users perception of the information structure allowing them to get a good overview of the information.

The heading could be larger, a different color or have extra space around it to signify its importance. After the main heading the sub headings should also follow a similar semantic order.

Headings should highlight in one or a few words what the following paragraph is about, on the web this ultimately creates scan-ability, something your users will appreciate.

Logo

The logo / site ID, should link to homepage of the website – though probably best to have a home link in the nav as well, the user will feel reassured as she knows there is always a way to start all over again. The logo is usually positioned top left side of the web page.

Buttons

Buttons are going to do something, actionable events, keep buttons for actions. A great element of their design is that they are three dimensional, so its obvious they are click able. I often don’t over style buttons on my designs, leaving the users web browser to style the buttons, this may offer the viewer a little extra familiarity.

Search

I’d recomend keeping your search forms simple, none of these extra tags for accessibility showing like the label, fieldset etc, and no confusing words like “enter keyword” or “quick search”, from a usability perspective the user wants to see the word “search”. If theres any further search criteria they should be straight forward and addiitional.

Main Navigation

The main navigation usually sits next tothe logo at the top of the web page and usually maps out the main sections of your website, or I like to say “the main features”. These links should all be internal too.

Secondary Navigation

Secondary navigation is often situated in the top left or right sidebar and more recently found directly underneath the main navigation showing sub page structure, this is usually a list of hyperlinks leading to category or even content pages.

Utilities Navigation

This navigation is usually at the top right of a web page and includes helpful links such as a Sitemap, Search, a link to the Home Page and Contact page, on a ecommerse site this would probably house the Shopping Cart and Checkout links too.

Images

If a photo has some text underneath it this usually means its a caption describing the image, or the photographers name. If you click on the image thumbnail it will show you a larger version of the image.

Skip to Top

A link at the bottom of the page to take the user back to the top of the page, I’d reccomned this link be aligned with the pages content and that its clearly displayed, I dislike websites that put this on right, I’d suggest this should be the first link in the footer.

Grouped Items

Similar items can be grouped into a list of hyperlinks to show they have a relationship, maybe they are in the same category of service or related products in an ecommerce website. Grouping similar items makes their associations clearer to the user.

Shopping Cart

Don’t call it basket, or carry bag, I’m English and I say “shopping bag” and not “shopping cart” but its the metaphor and wording that’s used the most across the web, so pick a side and stick with it. The shopping cart icon is also widely recognizable across the web, so you may not need the word “shopping Cart”.

Conclusion

Web conventions shouldn’t get in the way of progress and as a designer you must preserve your artistic license, be creative and progressive, and remember conventions had to start somewhere, its more of a web trend than an ideal of design, but if you want to create the best user experience then designing with conventions in mind will aid your users greatly.

There’s probably a good few web conventions I have missed, feel feel to comment and I’ll add them.

Category Links

The category page in its simplest form is a list full of links, the links linking to the content pages the user really wants. But category pages make the process of finding your data quicker.

The list of links on a category page could be a list of products, services, or a list of news items or blog posts, I call these pages category pages as they are an overview of the categorized content pages.

The category page is probably the most important web page on your website and chances are you’ll have a few of them, a real key decision making page, you’ll get a lot of opt outs at this stage if you get them wrong.

Decision Making Pages

Category pages seem very straight forward, but are often the most annoying pages for users as a lot of designers input too much content in them or make them overly complicated. Too much content makes them unreadable, to little makes them too bare.

Some designers even spread the list of links on the content pages over several pages, this is bad as the user can end up lost and frustrated at the number of clicks its taking to get to the content page they want.

If used correctly category pages can offer the user a direct path to the exact answers to their questions but if the categorization is bad or overly complicated the user can end up going between the category page and the content page over and over again.

We need to ensure everything the user needs about that category is on that page and that the most important information as always is at the top of the page. I would suggest a brief explanation of the category and calls to action to the most important or popular categories on your website.

A Picture Tells a..

You could also have some supporting images that represent the product or service and marketeers often say to have a human face in your photos to make site more trust worthy and personable, having humans sporting your goods and looking happy is always a great way to sell the experience.

Conclusion

To summarize; category pages are a page full of category links, the links point to the content pages on your site and I’d suggest keep these pages as simple as possible, a simple list of links to your content pages will do the job nicely.

The about page scenario

You are in need of a new toaster, likely scenario, and so you surf around the Internet looking at websites and find a company selling the deluxe model with the flashy lights, your now considering buying from the company, often the next step is to find out ABOUT the company, the about page is where the customer decides whether your trustworthy enough to do business with.

Building trust

Trust is such a vital part of selling online and a professional looking website will help greatly, but its the about page that bears the grunt of this task. You should outline a fair amount of information about your self and your company, here’s a few suggestions as to what information you could offer:

Overview

You’ll want the first paragraph on your about page to outline who you are and what you do, your core business in one small paragraph – this is a summary for the customer wanting a quick answer, and with many customers this is all they need, so this is an overview paragraph.

Who you are

This should be a paragraph about the company, list your core business and your main service. “Toaster LTD, specialize in toaster supplies and sell a wide range of toasters”. If there’s a key person with a story on founding the company this may be worth sharing too.

Why you sell this service / product

This paragraph should outline your enthusiasm for the services / product you sell and give a reason as to why you sell it like “we believe in high quality products and think our high quality toasters can enhance your catering experience”.

Who you sell to?

Do you sell to other companies B2B (Business 2 Business) or do you sell to customers B2C (Business 2 Customer)? who’s your main demographic, if its a small group you could list there attributes positively. “selling to the switched on home chefs who appreciate fine food”. Do you sell just in the UK or Globally?

Your Location

This ones obvious, state your country and county, but id put your full postal address and other details where they should be; on your CONTACT page.

Business Longevity

If your an established business then state this, how long have you been trading for? whats the joint trading experience of your staff members?

Online Longevity

How long have you had a online presence and how long have you been trading online?

Staff Members

Make the company more approachable by listing your staff members, of course just the main managers would be good in the about page, if your a larger company you may want this paragraph to link to a Meet the Staff page. You could add a few thumbnail photos of their faces, a human face is a positive and trust building image.

About Page Summary

The about page should be a pick and mix of these paragraphs to suit the branding of your company and how you want to portray your self and your company, I’d keep the paragraphs very brief and link the paragraphs to other pages for more detailed information, for example meet the staff or contact pages.

The about page is where your customers gauge a level of trust with your company and can make or break a purchase situation and is a fundamental and expected page on any good website.

The issue has worsened in recent years probably due to the popularity of laptops and flat screen monitors with their higher resolutions. With a budget £350 laptop from Tesco’s coming as default 1280 x 1024, the default browser text size is tiny. I know my grandad bought one, it is with him in mind that I make my plee.

Plee to the Browser Gods

Please give more emphasis to enlarging text and stop hiding this functionality in a drop down menu out the way, I know Internet Explorer 7 brought text size a little more into the limelight but I truly think this issue is being ignored and from my personal experience most new internet users, especially of the older generation are still having to search through their browser drop down menus to enlarge text.

You must remember that as we age often our memory span is affected, so lets make this change before I have to struggle too, as I also resize text often on the web.

The power of text size is with the web designer and I’m afraid their are still a lot of websites still have a very small text size, for me even our beloved A List Apart the text size is too small, I enlarge it.

Common text symbolism

A lot of users already associate certain symbols with text and any of these could be used as an icon on the web browser to signify text adjustment:

In Microsoft’s Word and other popular Microsoft office software the text is adjusted by a single capitalized “A”, It’s probably an “A” as this is the first letter of the alphabet.

Personally I prefer Adobe Photoshop CS3′s function of using a capitalized “T”. The “T” must stand for “text”. Strangely enough in Adobe’s CS3 suite; Fireworks uses an “A” to add text and Photoshop uses a “T” to add text.

If you search around hard enough you’ll also find some websites using either 3 T’s or 3 A’s signaling the various levels of text adjustment.

Final Thought

I have watched my Grandad, my mum, dad, friends and peers that are new and even competent in web browsing struggling to read the text on websites, I adjust the text size often too, I believe this function should be given greater emphasis and its own symbol or icon in the main visible section of web browsers. Your thoughts on my ranting please?

Web Browser Power

I do think the more power the browser has the better, I actually think search and contact details should be presented through the browser and I think this has already started to happen with future versions of IE promising built-in site search function, I think this is fab as every user will know exactly how to search every website.

I know this is the thinking behind Micro-formats such as the H-Card, a way of having contact details for each website you visit in one place, The only problem with H-card at this point is that the user has to download a bit of software to enable these contact details to be used, if this was in-built in the browser this could well be a great solution to having centric contact details and other frequently asked details at the click of a button without having to search or even browse through all different websites different form and email link layouts.

Ajax show us the way

Imagine also that browsers will enable the user to drag and drop parts of a website to suit their style of layout, I have seen this affect on some AJAX powered websites and I think the more web browsers behavior replicates the windows working environment the better the usability. On this website you can move the navigational box or the content box around the screen and place them anywhere you like them. Or take this a extra step and have Vista Aero scrolling effect on the different boxes on the website.

Imagine if browsers could take the html and style it the way the user would like it to be styled via an easy theme editor, one click and I could have a Star Wars themed web, another click I’d have a mountain backdrop, though this potentially could put me out of work.

Web Hyperlinks

One thing I think would be very beneficial to users would be a simple button that would actually overwrite all CSS rules and underline all links, whether photos, flash or anything, I know my grandad doesn’t know which parts to click mostly because we all forget one of the fundamentals of the hyperlinked set of documents we call the web is hyperlinks, the first thing we are taught is the underlined blue text, their hyperlinks.

Maybe the W3C should have legal rights to enforce Web browser manufacturers to adopt their guidelines, “you must support CSS3 Mr Gates because its the law”. You must also fix all known browser bugs and not come up with excuses such as legacy users, these legacy users would be better off with the new browser anyway, more secure, better rendering and probably more productive. Thanks for letting me share the dream / rant I can now rest!

IE’s Zoom Feature

With the launch of IE7 finally we have a version of IE that mostly behaves itself, I find I hardly need to change any CSS to make a template display properly and the guys at Microsoft have truly done a great job in comparison to IE6. It also looks sleeker and has built in RSS. The feature that scares the pants of me and threatens our very Holy Grail of layouts is their new Zoom feature. The feature can be activated much like standards based web browsers by hitting CTRL and the plus (+) button to increase zoom, and CTRL (-) to decrease the zoom, It appears to adjust the zoom in intervals of 10% and you can also manually pick a zoom percentage from the menu.

Whys that Scary?

The percentage of users who will be using IE7 is about to dramatically increase further due to the launch of Vista. This means that IE7 will be the dominant browser if it isn’t already and that average Joe now has built in Zoom features. Let me point one thing out at this point all measurement types including pixels and em’s work with IE’s Zoom feature, So from now on to the majority of users out there it doesn’t make a difference whether we use pixels, percentages or em’s to layout.

Web developer pride

It just doesn’t seem to matter aside from bragging rights to other web developers whether we produce elastic layouts anymore, and we also all know that its a lot easier to layout in a absolute measurement type such as pixels rather than a relative such as em’s. So should we bother with elastic anymore? I am starting to think its now not worth it and from a usability perspective I always think the more power the browser has the better.

Keep it in the browser

Taking that point a little further I believe we have a taste of what the future brings from the software giant, giving the browser more power has finally cracked that annoying problem some web designers have of “textus littiless”. I have perfect vision and yet a lot of websites I visit I have to bump up the text size just to aid my reading, one website that I frequent and probably most designers do also is the mighty A list Apart, which has ridiculously small text size, which I am sure does print out fine, but on my 2 PC screens is near unreadable and this is the website with probably the best content from the most well established names in our domain.

I do think the more power the browser has the better, I actually think search and contact details should be presented through the browser and I think this has already started to happen with future versions of IE promising a in built-in site search function, I think this is fab as every user will know exactly how to search every website. I know this is the thinking behind Micro-formats such as the H-Card, a way of having contact details for each website you visit in one place, well I could go on about this, but I’ll save this discussion for another article.

So Elastic is dead?

This truly is a question I want to ask you?, I have tried to explore where I stand on this matter and whether or not to just start laying out my templates in pixels because its just so much easier and it does seem that elastic layouts may have just died or they have at least suffered a broken neck as the ROI now seems not worth the extra workload.