A new GMail feature might help you. “Got the wrong Bob?” is a Google Labs add-on which analyzes the contact groups you email most often and identifies potential conflicts. For example, if you regularly send messages to Tim, Angela and Bob Smith, a new email to Tim, Angela and Bob Jones will alert you that it might be a mistake:

The system was devised by Google engineer Yossi Matias:

I often came across messages sent by mistake because Yossi is a common name in Israel.

One was a communication between two people. They were having a conversation about the future of a colleague but had accidentally included him in the emails. So I thought that maybe we can provide a feature that can recognize this.

“Don’t forget Bob” is a similar add-on which analyzes your send list and highlights recipients you might have missed. To switch on either system:

1. Log on to GMail and click Settings at the top-right.
2. Click the Labs tab.
3. Scroll down to the add-on and click Enable.
4. Hit Save Changes.

Could this system help you? What was the most embarrassing email you sent to the wrong recipient?

We’ve gathered up 10 solutions that will let you create a spam-free inbox, or just stop it dead at the server end. Luckily some of these are even free!

Anti-Spam Mail Solutions

0Spam: 0Spam works with POP, IMAP, Gmail and AOL to download your email before it is delivered to you, sort out the spam, and then just delivers the good mail to you. You can use CAPTCHA to verify senders, set up whitelists for individual emails or entire domains, customize verification emails, download lists that include a week’s spam and more. The service is free for single email accounts that receive less than 1,000 spam messages a week. If you need to cover multiple accounts or have more spam than the free levels, you can pay for a premium account.

AlienCamel: Offering both IMAP and POP email choices, AlienCamel offers you unlimited email storage on their servers, and sorts your email for you into “Pending” and “Spam” folders so you can view everything before you download it to your system. The service works with the majority of the popular email clients for both Windows and Mac OS X, and they are also currently testing an iPhone app. The service costs $8 USD a month, or $80 a year. The major drawback is it doesn’t work with your existing address, but it does allow you to create disposable email addresses on the fly, which is a nice bonus.

Spam Arrest: Spam Arrest allows you to set up a whitelist for your contacts, but after that, every person who emails you will receive an automated CAPTCHA reply that they must respond to for their email to get through to you. This only happens on their first email, so they won’t have to do it again, but could be annoying to some people. All spam messages are held on the Spam Arrest servers for 7 days so you can see if there are any you want to let through. The service is $5.95 USD when paid monthly, with growing discounts for paying up to two years in advance.

Spamfence: Spamfence is a little awkward, but an interesting concept. You need two email addresses with your mail provider: Mail is delivered to the first address, passed on to Spamfence to check it for viruses and spam, and then the cleaned email is delivered to the second address with an additional header added to tell you about the email. It’s a free service, and worth a shot if you just have too much spam to deal with.

Vanquish Anti-Spam: While Vanquish Anti-Spam will cover 5 of your email addresses and hides the cost of the service fairly well, it is included on this list more for its oddness than anything. If a spam message should happen to get through and waste your time, you can send a bill to the spammer to pay you for that intrusion on your inbox. How this is enforced isn’t made completely clear, and it is currently set at $.05 per email, but it is just such an “out there” idea, you kind of have to laugh.

ZoEmail: ZoEmail creates email addresses with “keys” (such as “sean.key@zoemail.com), and only emails sent with a known key are allowed in. You can create keys to use with online retailers, friends and so on. Cost is extremely low with the smallest email box costing you $.99 USD a month.

Server Side Anti-Spam Solutions

GFI MailEssentials: Using two spam detection engines, MailEssentials attempts to reduce the rate of false positives, and make sure that email gets to the folder it truly belongs in. The system supports Microsoft Exchange 2000, 2003, 2007 and Lotus Domino, and offers a plethora of blacklists and whitelists based on criteria of your choosing.

Mailprotector: Directed at business and corporate users, Mailprotector tests each email for origination, routing, construction, communication and content, and then assigns it a score based on the results. Fail the test, and it’s off to the spam folder.

SpamAssassin: Released by the Apache Foundation, SpamAssassin is a versatile spam filtering system that can be placed anywhere in the email stream to do its job. Due to this feature, it can work with a great number of email setups, including Gmail. It can be used on servers running Linux, Mac, Unix or Windows.

SPAMFighter: SPAMFighter is an Exchange Module that will work with Microsoft Exchange Server 2000, 2003 and 2007 or Microsoft Small Business Server (SBS) to expunge your system of spam before it gets delivered. Besides just fighting spam, the system can also generate analytics to show you just how much email it is stopping, how many users are on the system, and more.

That is where virtual machines come in handy as they allow you to run more than one OS on your current desktop at a fraction of the cost, and sometimes even for free, without having to buy a separate machine. We’ve gathered up 11 solutions that should cover all of your bases.

Virtual Machines For Running Multiple Operating Systems

Bochs: Bochs is a handy virtual machine that can run on numerous systems down to ARM-based IPAQs. The guest operating systems are too numerous to list, but they includes all of the usual suspects including some off-the-wall entries like OS/2 and QNX.

Parallels: Parallels is probably the best known virtual machine out there simply because it is one of the easiest to use, and got the most attention for it being the first Mac host to work with the Intel chips to bring Windows to the Apple systems. While it is best known for its ability to run Windows, Parallels is also capable of supporting Linux, FreeBSD, OS/2 and more.

Parallels Desktop: While Parallels is most associated with Macs, there is a version for Windows and Linux systems. With Parallels Desktop you can run Windows, Linux, FreeBSD, OS/2, eComStation, MS-DOS and Solaris on your systems.

VirtualBox: VirtualBox is an x86 virtualization solution from Sun Microsystems that is free and open source. It can run on Windows, Linux, Macintosh and OpenSolaris hosts. Guest operating systems include DOS, just about every flavor of Windows, Linux, Solaris, OpenSolaris, OpenBSD and more.

Virtual Machine Manager: Virt Manager, as it is more commonly known, is a virtual machine manager that allows you to run both local and remote virtual machines with multiple operating systems on your Red Hat Linux install.

VMWare: VMWare as a company is considered an industry leader in the system virtualization market, and as such the company makes so many different solutions for OS virtual machines that it would almost be impossible to list them all. Suffice it to say, if you have one OS, they probably have a solution for you to run another one on your system.

Xen: Xen runs on NetBSD, Linux and Solaris systems to emulate FreeBSD, NetBSD, Linux, Solaris, Windows XP, Windows 2003 Server and more. The program is released under the GPL license.

Virtual Machines For Running Microsoft Operating Systems

Boot Camp: Boot Camp is an included utility in the past few versions of Mac OS X that allows Intel-based Macs to run Windows XP, Vista or Windows 7 inside of the Macintosh environment or to reboot the system into.

DOSBox: DOSBox is built around running DOS games, but some people have had success with getting Windows 3.1 to run inside of it. Due to the architecture of the program, DOSBox has been ported to many different operating systems including Windows, BeOS, Linux, Mac OS X and more.

Internet Explorer Application Compatibility VPC Images: Ever wondered what your new design looks like in Internet Explorer 6 running on Windows XP SP3? Don’t have that installed? No problem! Microsoft provides you with numerous images that let you see how things look in various versions of Internet Explorer running on Windows XP and Vista. Should be quite handy with Windows 7 coming at us at full speed.

Microsoft Virtual PC: Formerly known as Virtual PC, Microsoft Virtual PC is a new feature in Windows 7 that will allow you to run a licensed version of Windows XP SP3 in a new feature called “Windows XP Mode.” Older versions of the program on various system configurations are capable of running numerous versions of Windows, and in some cases you can even convince it to run Linux.

He also talked about adding value to some of the empty, mundane but necessary web site processes (that is, load screens, error messages, user instructions) by injecting some fun, soul, and even humanity into them.

Examples we talked about included:

1. Picnik’s loader screen, which is accompanied by progress commentary: “spreading out the blanket … picking blueberries … floating kites … making sandwiches … “
2. Innocent Smoothie’s packaging, which includes the simple
   sentence "Stop looking at my
   bottom!" printed on the base of the box.

Both are copybook examples of better user experiences because they flatly refuse to follow the standard charmless convention and instead dare to inject a touch of warmth.

But what happens if “warm fuzzies” is ALL you deliver to the user? Is it still a win?

I’ve been thinking about exactly that question after a friend sent me a "Hey, you gotta see THIS!" link to the HEMA web site. For those unfamiliar with the brand name, HEMA is a large Dutch department store chain.

Check the site out for yourself if you like (assuming you’ve yet to come across it before — it’s been online for at least 18 months).

Otherwise, here’s the executive summary: the site renders as what appears to be a garden-variety, IKEA-like online store: navigation tabs along the top and popular products displayed in a grid. Yawn. yawn.

That’s when reality seems to break, and strange and wonderful stuff start to happen.

It all begins when a plastic cup tumbles over, bumps the sticky tape, and a domino effect is set in motion. The tape then crashes onto the stapler before squishing the cake, noisily sliding down the xylophone, and knocking over the fluorescent pens like skittles.

This chain of slapstick events continues, drawing ironing boards, blenders, yo-yos, coat hangers, and kettles into the growing maelstrom before eventually breaking out into parts of the site navigation and text.

By the time this sequence of events has all played out, the tabs are torn and frayed, the navigation text has collapsed into a puddle, and confetti flutters about from above. Very, very cute.

Now, let me say straight up, this is a wonderful idea beautifully executed. It breaks boundaries, delights, shakes you out of your surfing stupor, and triumphantly shouts "HEY YOU! Y’know what? We are different!"

Brilliant.

The only problem is, that’s where I believe the relationship stops for most users. This is no easter egg or practical joke overlaying a standard online store. Though HEMA has a rather extensive web site, there’s no obvious link between it and this popular online practical joke. The logo is unclickable. The site navigation and text links appear to be clickable, but, in fact, aren’t.

Whatever warm and fuzzy feelings you might be left with after the show, outside of forwarding to a friend, there are few ways to show your love.

Andy Budd talked about plotting the user experience as a graph along a time line. We might assume that users begins their HEMA site experience in a relatively neutral emotional state. As the experience continues they’re perhaps first surprised, then delighted and entertained.

But, what if you wanted to:

• tell HEMA how awesome their site is?
• visit HEMA’s About page to find out what sort of
  firebrand, thinking-outside-the-box company would do such a crazy thing?
• locate the nearest store to purchase one of their charming and zany
  products?
• investigate the opportunities for employment at what appears to be a
  fun company?

Well, you’d probably be out of luck. Short of editing the address bar, when the gag finishes, the show is over.

And the greatest irony? The HEMA joke web site has been so wildy popular with bloggers and on social networks that it outranks the genuine HEMA site in almost any general web search. In Googles eyes, HEMA is a purveyor of fine jokes.

Now, no doubt web dev types like us have been sharing this link and "oohing and ahhing" forever. In truth, most of us would love to be offered this kind of fun work.

But as sublimely clever as the animation is, I have to wonder if this project, and the buzz it created, has translated into anything particularly useful for the HEMA business.

What’s more, I wonder how many users have ended up feeling disappointed, frustrated, or confused by being unable to find some of the "bread and butter" basics like locating a store, giving feedback, or asking a question. They may feel like they’re at the right place, but no-one wants to talk to them.

What do you think? Is this marketing brilliance or a wasted opportunity?

From SitePoint Design View #63.

One caveat to this list, while these tools are helpful and will help you spot some problems, never trust them to be the ultimate authority, but more of a starting point on your road to the smoothest running site you can build.

ACTF aDesigner: An extension for the open source Eclipse development platform, it is built specifically to test for the accessibility of the visually impaired.  Unfortunately, it’s only available for those running Windows XP and above.

Adobe Dreamweaver CS4 accessibility: For designers who use Adobe’s Dreamweaver CS4, you’ll find a validation tool built right in that allows you to choose what to test at any time and get a full report on any errors that it may find.

Contrast Analyser: Not only is it difficult to choose which colors you want to use with a site, but then you have to make sure they work together when it comes to readability.  Colour Contrast Analyser will let you know the difference between two colors, and it can also be set to help you determine if people with visual impairments, such as color blindness, will be able to read it.

Cynthia Says: Cynthia Says is a product from HiSoftware that allows you to enter your web site address in to the sight and get a report on how it complies with Section 508 and WCAG-Priority 1, 2 and 3.

Firefox Accessibility Extension: Created by the Illinois Center for Information Technology and Web Accessibility (iCITA), this Firefox toolbar includes a large suite of tools to test numerous aspects of your site for accessibility by those with disabilities.  Includes testing for text, scripting, styles and a whole lot more.

Functional Accessibility Evaluator: The Functional Accessibility Evaluator gives you a report on many aspects of your site and then gives you a color coded results page with a nice overview of everything you need to know.  If you want more information you simply need to click on the category to see the detailed comments.

Fujitsu Web Accessibility Inspector: The Fujitsu Web Accessibility Inspector focuses on checking the build of your page as it may appear to elderly and visually disabled people.  The software has to be downloaded to your system, Max OS X or Windows, and then you can point it to a local file or a web site and it will then generate a report that is almost too long, noting every aspect of your file.  When we attempted a full screenshot it came out to over 924 MB in size, so it is a bit lengthy.

IBM’s Rational Policy Tester Accessibility Edition: A Windows-only solution for testing your site for accessibility by those with disabilities.  This is a paid solution and there was no easy link to the cost, but it is likely not cheap with the IBM brand name attached to it.

Truwex Online 2.0: The Truwex Online 2.0 tool checks a range of accessibility options such as section 508, WCAG levels, privacy, broken links and so on.  Simply go to the page, enter your URL, check the boxes for the items you want checked and it generates reports shortly after that.

Vision Australia: Vision Australia is a coalition of people working to make sure people with all forms of vision problems have equal access to life as anyone else.  They offer two toolbars for Internet Explorer and Opera to test how your site will work for someone with impaired vision.

WAVE: WAVE is produced by WebAIM which is dedicated to making sure sites are accessible in as many languages as possible.  Simple enter the address of the site, upload a file or enter a code snippet and see all of the elements identified. Plus, you receive feedback on the placement and identification of each element.  There is also an option for using a Firefox toolbar or installing WAVE in browsers and web pages.

Web Accessibility Toolbar For Opera: A method for quick access for Opera users to some of the most used web accessibility tools from the Paciello Group.  Not all items will be functional while you are offline as they need to access scripts and tools located on the WAT-C servers, but if you have Internet access you’ll have everything at your fingertips.

Card sorting is an easy way to help organize larger quantities of content into a meaningful structure. The right time to do it is when you’re ready to start organizing the information. The objective is to discover an intuitive and meaningful classification for topics by asking some prospective users of the system — in our intranet example, this would be a group of company employees — to organize the information in a manner that makes sense to them. We do this by writing the name of each topic onto a card, shuffling the deck, and then asking a user or a group of users to sort the cards into groups according to broad subject areas. As the users sort the cards, you observe, ask questions, and take notes.

Card sorting tests can be broadly organized into two types: in an open card sorting exercise, your users will invent their own groups, give them a name, and sort cards into each. In a closed exercise, you specify the groups for them and the users sort the cards. If you’re fairly sure of the groupings you’d like to use on the site, or if your client has already specified a broad set of topics, a closed test is the right choice for you. If you’re unsure, perhaps an open test is better.

Running a card sorting exercise is quite fun, and it’s probably easier than you think. Let’s look at how to run your own card sorting exercise.

Step 1: Identify Your Topics

You’ll first need to identify what’s going to be part of your site. If you’re working on a site that already exists, it’s a matter of pulling out the pages that you have and listing each; if the site is new, list each page that you plan to include. If your site is quite large or very detailed, try to stick to higher-level topics for now. There’s no sense overwhelming your poor test subjects with five hundred cards! You can always run more card sorting tests later for subsections of your site.

Step 2: Make Some Cards

Each topic needs a card. It’s easy to do this on a computer: simply fire up your favorite word processor, look into the templates section for a business card or mailing label format, and fill in a series of cards with the name of each topic. Then, print the cards on card stock and chop them up with scissors. Feeling more lo-fi? Grab a stack of small index cards or a pad of sticky notes, and pull out your favorite marker. (You should probably stick to the computer if you have messy handwriting!)

If you plan to run a closed test, make some cards for each broad grouping. It can help to make these bigger or in a different color so that they’re distinct from the other cards. It’s a good idea to cut out some blank cards, too. During the test, a user might think of a topic that ought to be included.

Step 3: Find Some Test Participants

You’ll need to find some people to sort the cards. In our intranet example, we’re using company employees: I’d ask their managers for a bit of their time, and maybe put on a small afternoon tea as a treat for the participants afterwards. For a public web site, you might like to recruit some strangers with the promise of a free coffee or a voucher for a juice. Try asking about at a nearby library, university, or coffee shop for volunteers, or even put the word out on Twitter for nearby tweeters.

While it’s possible to run a card sorting exercise with individuals, you might also like to try it in pairs or threes. When people work together to organize cards, you can observe the kinds of discussions they’re having while they’re trying to decide which cards belong where. Individuals, on the other hand, will probably keep that information to themselves, and you’ll have to ask them to think out loud.

How many participants do you need? Jakob Nielsen suggests you ought to have at least 15 individual participants, while Donna Spencer and Todd Warfel suggest just five tests with groups of three. Bearing in mind that this is a quick-and-dirty method, I’d be inclined to pick the latter — it’s a good trade-off in terms of time and numbers.

By now, you’ll have an idea of where you plan to run the test. You should have access to a reasonably quiet room that’s well-lit, with a large table and enough seating for you and your participants. This is probably easy if you or your clients have an office; otherwise, perhaps that cafe has a quieter side room you could use.

When you invite your participants, be sure to let them know how long you suspect it will take, and explain what the activity will be like.

Step 4: Run the Test

Let’s do it!

Mix up your deck of cards and put them on the table. If you’re using a closed test, put the topic cards out onto the table as well, along with the blank cards and pens. Grab some water or juice, a pen and paper for you, and sit down with the participants. Explain the goal of the exercise — it’s good to remind them that it’s not a test or an assessment of their ability, just an exercise to help you make your web site better. Let them know that you’ll be taking notes throughout, and invite them to ask questions during the process if they have them. Then, hand them the cards and let them have at it!

If you’re working with a pair or group of people, keep an eye out for individuals who like to dominate the conversation or those who stay quiet, and try to ensure that everyone has a say; it’s as easy as saying, “Bob, what do you think?”. If you’re working with a lone participant, encourage them to discuss their decisions out loud with you. This is tricky, as most of us try to avoid mumbling to ourselves, but it’s worth the effort as you’ll gain some great insights into why that participant makes those decisions.

Take note of interesting ideas people discuss throughout the test. It’s unnecessary to jot down every card as it goes into the pile (we’ll do that later), but it’s good to note any places where the participants might have become stuck or confused.

If a participant thinks that there’s a missing topic or a better name for a topic, use one of your blank cards to add it into the mix. It’s probably a good idea to use a different-colored pen or mark it somehow so that you remember it’s a new suggestion.

Step 5: After the Test

Fire up your favorite spreadsheet application and mark down each of the cards that went into each pile (tedious, but worth it!). I like to make a column for each grouping and list each card name underneath; it’s also good to use a new sheet in a workbook for each test. Add any notes that you might have taken during the test. When you’ve copied each pile into its own column, shuffle the cards again, set up your table, and test your next set of participants.

Step 6: Interpret the Results

Just by observing your participants, you should already have some ideas about the way your pages ought to be organized, but it’s also worth examining each of your spreadsheets to look for patterns and similarities. Unambiguous topics will almost certainly have been placed in the same pile by each participant; some more difficult topics may have appeared in different groups, or users might have suggested better names.

If you really need to be able to point to percentages and hard statistics, try this free spreadsheet by Donna Spencer; by following the instructions that come with the template, you’ll be able to see patterns emerge at a glance.

The More You Know

By now, you should have a fairly good idea of what topic groupings your users will find to be intuitive. Use this data while you’re designing your information architecture, and live happy in the knowledge that you have a more solid idea of what your users really need!

Web-based Card-sorting Tools

In a big hurry? No time for cards and Sharpies? Try online services like WebSort or OptimalSort. While this lacks the hands-on, personal feel of seeing these users work on your cards in person, it’s quite a bit less effort.

And if you want to run a test in person but still save the trees, try this jQuery-driven web-based card sorter. Using this template, add categories and cards that suit your topic, pull it up on your trusty laptop, and allow your participants to drag the cards around. This one is an extremely bare-bones affair, but it’s easy to add your own CSS to make it prettier!

Last week Rich Gossweiler, Maryam Kamvar and Shumeet Baluja from Google research published their latest ideas on the subject entitled ‘Socially Adjusted CAPTCHAs‘.

A white paper explains the idea in detail but the concept is simple enough. Users are shown a circular-cut picture that is rotated to random, non-standard angle. They are then asked to rotate the image back to it’s correct orientation.

As humans who have evolved to quickly process visual information on the real world, we’re all born with very good software for determining which way is up. Computers, however, are currently nowhere near as skilled at making sense of a potentially wildly varying array of images. You only have to look at the comparatively plodding movements of Honda’s Asimo robot or robot soccer to understand just how taxing a task this can be for a machine.

Obviously the method shares some characteristics with other image-based CAPTCHA methods (i.e. such as the ‘How many kittens do you see?’ method) but has one major advantage. Where other methods require humans to write new tests (i.e. ‘How many .. um.. goldfish?..’), fresh Socially Adjusted CAPTCHA tests can be easily automatically generated by a machine, but not as easily solved by one.

If you consider classic alphanumeric CAPTCHA methodology, a bot only has try to match around 40 characters to any given glyph — albeit a distorted glyph. Image orientation is powered by an almost limitless pool of feeder images, taken from wildly varying subject matter, aspects and angles. Sure, writing a bot that searches for horizons and perpendicular lines would be reasonable start but it will only get you so far (as the examples show).

Now, this is certainly no home run. It’s no improvement for the vision-impaired. Similarly, motor-impaired users may well know which way they’d like to orientate the image, but may struggle with the physical process of re-orientating the image. Perhaps great interface design can negate this problem.

There has also been some criticism that the method offers no protection against spammers who employ cheap human labor to crack CAPTCHAs.

However, as I see it, this is an unfair call as it falls outside of CAPTCHA’s working brief — to sort the humans from the bots. Sorting good users from mischievous users is an entirely different class of problem.

So, what do you think? Would you be tempted to replace your alphanumeric CAPTCHAs with something like this?

Yesterday I clicked through to an anti-Twitter rant on MISAustralia.com (ironically via a retweet). While you can make your own call on the content, the thing that really caught my eye was the body font. Why on earth would a large, professional content site choose to display their content in an ugly, unreadable monospaced font?

Absented-mindedly I drag-selected some of the text and got another surprise — a pretty, checkerboard pattern on the selection area.

Hmmm… interesting. What’s going on here?…

Viewing the source, my jaw nearly hit the desk.

The insane scientists at MISAustralia appear to have built a content management system that automatically shuffles each paragraph into two piles, letter by letter.

Each pile is then dumped into its own DIV and padded out with non-breaking spaces, before they are precisely overlayed with each other to make them readable again.

Of course, this means copy-and-pasting the text ONLY touches the uppermost DIV, and explains both the zebra patterning and their choice of mono-spaced font.

Clearly their motivation is Digital Rights Management (DRM) by making it more difficult to copy-and-paste or screen scrape their content. In fact, their HTML source commenting refers to it as a ‘DRM Viewer’.

This seems astonishing to me on so many levels.

1. Firstly it makes their content present as utter gobbledygook to screen readers and other assistive technologies. I am not a lawyer, but I’d suspect there’s the basis of a robust discrimination law suit in there.
2. Secondly, it makes their content unreadable in any RSS reader and prevents them even offering an RSS feed.
3. Thirdly, it necessitates the use of font that further erodes the value of their content.
4. Finally, and most importantly, it makes their body copy (i.e. the heart and soul of their site and business) completely invisible to Google, Yahoo and every other search engine on the planet.

That last point is mindboggling to me.

An entire industry (SEO) has evolved for no other reason than to ensure Google sees and values your content. Companies live or die on their ability to make their content visible. Here is a company going to great time, effort and expense to actively obscure their work from the web’s largest traffic provider.

As far as Google is concerned, this isn’t just lowly rated content, it is ‘non-content’. It simply doesn’t exist. It was never written.

As a quick example, take this recent article Nine loses EPG battle.

Search Google for the non-DRMed article title and it comes up first. Perfect! Google clearly knows and visits them.

However, let’s step inside the article and search for a highly specific phrase, “Ice TV general manager Matt Kossatz said the ruling was timely”.

Result: Nothing. Blip. Nothing to see here, people, move along.

Of course that’s no surprise. How WOULD Google know what it was looking at?

I’m not even going to start with the huge accessibility issues for fear of turning this into a 10 page post.

The Final Irony

Now, if this was a foolproof solution to their copyright dilemmas it’s still highly debatable whether it’s worthwhile inconveniencing 99.99% of your everyday readers to stop the .01% of your visitors that are infringers.

Unfortunately this DRM is anything but foolproof.

Anyone running Greasemonkey and the MISaustralia text selector userscript (Hats off to Gustav Axelsson) can not only cut-and-paste their little hearts out, but they get to read it in a comparatively luxurious Verdana, Arial, or Helvetica typeface.

In fact, if you’re a Firefox user who reads this site, you’d be almost silly NOT to use this script, just for readability reasons.

Equally, writing an application that automatically parsed and republished every new article elsewhere would be just as trivial. And the cool bit is they don’t even have to compete with the original authors. They would ‘own’ that content as far as Google was concerned.

Now these guys are part of a large, generally, tech-savvy company (Fairfax).

Is this nuts?

This situation is all too common, and the root cause often lies in the basics. Even a very small component of the site can have a dramatic effect on the user experience!

For example, if the login process itself is delivering a poor experience, then people will be reluctant to use it, and all of those killer features you added will be in vain. In the worst case, it could be discouraging people from logging back into the site at all, which means no community, no repeat sales … all of this adds up to a failed site.

So What Went Wrong?

Most of the time the problems in a web site or web application are very simple things. Still, even small problems can equate to a negative experience. And you really don’t want any negative experience if you can help it. Users are sensitive, you know!

It’s true that some people will buckle down and try to work around any usability issues they’re encountering—we all love problem solving, right? It’s in our nature. But don’t forget that as the Web becomes easier to use, people are becoming less tolerant of bad interaction design and will often seek out an alternative service if it offers a better experience, depending on how much they have invested in your site.

It’s Simple … Yet It’s Not

Login interaction design is simple on the surface. There are, however, quite a number of elements that contribute to the final design considerations for a user login page. When they’re all combined, things can quickly get complicated. Here’s a sample of the factors to consider:

• Security
• Previous user experience
• Site legacy procedures
• Internal business processes
• Page interface design
• Audience platform considerations

You can probably think of a few more factors to add to that list. Regardless, there are still some simple things that we can focus on to ensure that the experience is a good one. Here’s my list of tips for making sure your users keep coming back and logging in.

1. Use email addresses for usernames

Studies have shown that people have enough trouble remembering their passwords, without them having to recall a username as well. Using a string that people are more likely to remember, like an email address, reduces the chance of the user forgetting their login details even further.

The convention for a web site’s username to take the form of an email address nominated by the user is becoming more and more established. Sure, there can be issues with the approach of using an email address as a username, such as:

• Some service providers recycling email addresses
• Users changing their name, and their email address as a result
• Email addresses taking different formats

However, none of these issues are insurmountable—just be sure to allow (and test) for the different scenarios listed above.

The common alternative of forcing users to log in using a membership number (or some other username that is allocated to them) does not help at all. If you must use something other than an email address for your web site’s usernames, at least let your users personalise their account somewhat by creating their own username to use on your site.

2. Let Your Users Use Long Passwords

In this new age, we are constantly being reminded to use passwords that are secure. You know the drill—the longer the better; the more special characters the better …

With the advent of password-memorising plugins and browsers that automatically fill in usernames and passwords, one might expect that the average length of a password fields on today’s web applications would be getting longer and able to accept passwords that are 64, 128, even 256 characters long. One might even hope that the days of eight-character passwords were rapidly disappearing!

And indeed this shift to accepting long passwords is occurring. However we’re not there yet, and seem to be in a transition period.

Note that there can be problems when the text field for accepting a username or password is not the same length as the corresponding database field in which it is stored. This can result in the truncation of the password that the user entered, or even worse, in the entire record being completely unaccessible. If you offer long passwords, be sure to test them!

As an interesting side note, banks in general refrain from allowing passwords that contain special characters or passwords that are over 12 characters in length. This limitation is usually due to the limitations of the legacy systems with which they interact, not their web services. Most web services are not bound by such restraints—don’t follow the old model.

The solution is simple—plan to allow long passwords from the start. By getting it right in the design documentation, ensuring you define the length of the passwords, and testing for this upper limit, you should be able avoid any hurdles related to your password length.

Also be sure to inform user, at least during the registration process, exactly what the minimum and maximum password length is that your system allows. This should be implemented using a text message located next to the field in question. Users will not be aware of details like this unless you tell them about it!

3. Add some Ajax to your Form Validation

We are not all perfect—sometimes we mistype usernames and passwords. So do our users.

Of course, a password entered by a user needs to match exactly before we grant that user access, for security reasons.

However, let’s ease up a bit on the usernames. For instance, if the username was an email address, it would be nice as a user to know if I’ve accidentally typed “.con” instead of “.com”. It would even be nicer if this warning was provided before the form was submitted!

In this situation, a little Ajax-style validation can go a long way. Checking the username to determine whether it is unique or in the right format makes things a little easier.

Another factor to consider when it comes to validation is what might happen should the user enter an extra space or two after their username. You see, this whitespace is not going to be obvious on the screen to the user, but in reality they have entered an invalid username, as it contains extra spaces at the end.

This hurdle is simple to overcome—just trim the username field. You can perform this trim either on the client side or the server side (both is better). The important thing is to build some intelligence into your form validation, and make some simple, educated guesses at what the user intended their username to be.

4. Maintain Persistent Logins

There used to be a time when you could log in to a web application and remain logged in until you logged out! Remember those days? Isn’t that what the “Remember me” or “Keep me signed in” checkboxes were for? Sure, those web apps that offered this feature were not critical services like online banking or share trading sites. But boy was it convenient!

That feature seems to have gone out the window lately. These days the “Remember me” checkbox only means “remember me for a short period of time”. There is a distinct trend developing lately whereby web applications require you to log in again after one week, two weeks, or some other arbitrary time period.

These time-limited persistent logins are of course a security measure, but they only apply to the computer being used. So if the computer is in fact located in a secure environment, the time-limitation offers no benefit to the user, and is inconvenient. It becomes annoying having to login again and again to a web application that you‘d rather use seamlessly.

Informing users how long their login will last for certainly helps manage expectations in this situation, but it doesn’t make the process of having to log in again every two weeks any less convenient.

A better approach would be to allow the user to control the period of time that the persistent login is good for. By giving the user control over this setting, we can keep everyone happy. A user who only ever access the web site from their home computer might set their login to “forever”, whereas another user who accesses the same service from a library or internet café might set it to “never”. After all, the login details belong to the user (as does the data that they access with it), so surely our users are intelligent enough to make this decision?

5. Keep your Text Fields Close Together

Placing a username field and its associated password field on a separate page is a practice that I encourage—having a dedicated “login” page is much less confusing than integrating the login process into another page, especially if that page contains other forms and text fields.

But how should our username and password fields be aligned? There are two main schools of thought—side-by-side and on top of each other.

The important thing is to ensure that the two fields are within close proximity of each other—remember, they are related in terms of information and functionality, after all. They should therefore be related spatially as well.

Login pages can be problematic when the username and password are not located next to each other on the screen (believe it or not, I’ve seen this happen by up to a third of the page!) The area between a username field and a password field is no place for a big banner ad! Keep these two fields next to each other to reduce confusion.

It’s a minor problem, but making your user hunt around for the fields they need to use to log in, and raising doubts in their mind over whether they’ve entered their login information into the correct field—especially if they’re already further down the page—doesn’t really fill a user with much confidence about the web application.

6. Keep your Login Link at the Top

Just as users have come to expect that clicking a web site’s logo will lead them back to home page of the site, many users these days expect to see a link to the login page located at the top of the page (often on the right hand side).

Placing your login link elsewhere can result in visitors playing the “hunt for the login” game, which won’t help your cause. Sure, users of your application will become accustomed to where it is. however, when a new user is most vulnerable to frustrations (and will often make a lasting opinion of your site) is based on their first few experiences with your site, before they learn where various features reside. You only have a short window, so you want these experiences to be positive.

7. Label your Login Links

As you may have noticed, there are many established conventions when it comes to the login process, and the login label is no exception. The exact text that many visitors are likely to be looking for is either “login” or “sign in”. There are multiple variations, but these two words are almost universally understood, so are pretty safe options to use.

Unfortunately, there are web sites out there today (not naming any names!) that see fit to use unique labels to mean “log in”. In the worst cases, the link is given a label like “opportunity” or “recommendations” or even “new features”—none of which have anything to do with logging in. When users see a link in the location where they expect the login to be they begin questioning whether the link is an advert, and what the page behind that link might be selling.

It can be difficult arguing the case when the marketing department are insisting that the login link be labelled something new or different. If you can’t win that battle, one compromise might be to add the marketing link in addition to a more standard login link. The confusion created by two links pointing to the same page is going to be less than that created by messing with a more standard link that visitors are expecting to find.

8. Let users retrieve forgotten usernames and passwords

Another convention that has become standard to provide a link for users to reset or recover a forgotten password, and to list this functionality on the same page as the login form.

However it can be a little distracting displaying this feature on the login page before a user has entered any information at all. It’s almost like taunting them by saying “Come on—I just know you’re going to make an error!”
It’s easy to fix—only display the link to your password recovery solution after a user makes an error logging in.. A little JavaScript that alters the text-indent property of the paragraph containing this link is all that is needed.
Another scenario to account for is when a user can’t even recall the email address that they used as a username. What should you do in this case?

This is easy enough to deal with—you already have that information available already, via your forgotten password functionality.

The error message displayed by the password recovery process is usually sufficient information for the user to determine whether he has entered the right username or not. For example, if the error reads, “No users have registered with that email address,” then your user will immediately know that the email he entered was not the right one.

There are, of course, other fallbacks that you can offer—secret questions, personal information about the user, and more. However, for most sites, a simple password recovery process is sufficient.

9. Display Helpful Error Messages

Error messages are notoriously problematic on the web—and in software in general. Yes, it’s important to inform your users when an error has occurred, but there’s no need to bamboozle them with technical jargon (nor should you be giving away more information than is necessary, in case the person reading the error message is a malicious hacker attempting to compromise your system).

Of course, there is the other end of the spectrum too—not giving the user enough information. Suppose you just wanted to log in to your favourite social bookmarking service. It’s not Fort Knox—people are not going to live or die based on your user knowing that they entered their email address incorrectly, so let them know. They’ll appreciate it much more than a terse message that tells them nothing and leaves them in the dark.

There is an art to writing helpful error messages—it sounds like I’m stating the obvious, but make them as clear as possible. Depending on the content delivery style, and the amount of freedom you have with the brand, you should try and engage with the user on a personal level.

For example, “Invalid authorisation” is robotic and confusing. “You seem to have typed in the wrong password” is a much more friendly way of saying the same thing.

For non-mission critical, low volume applications, you might even consider improving the user experience by going the extra mile and letting the user know which part of the username/password pair they entered incorrectly.
Finally (and this is really Usability 101), don’t insult people. Matthew Magain wrote about this on SitePoint previously, in relation to Reddit’s error messages. Remember: users aren’t stupid, they’re just human. Just like you and me, they make mistakes, and they’re often in a hurry. Allow for that the human errors that will inevitably occur.

10. Use Extra Questions with Caution

Including an additional question to authenticate a web user has become a popular method for applications that require higher levels of security, such as internet banking sites.

The question of whether this extra level of authentication is really necessary must be asked though—it may be possible to obtain this degree of confidence in the user’s authenticity another way (using an approach that requires additional server-side development).

Some examples include SMS code conformation, smart tokens and smart card confirmation (for extranet connections), enforcement of a stricter password policy, or the activation of extra questions only when an account is being accessed from a different computer to the user’s designated machine.

If you must ask your users additional questions, please consider using a question/answer format that is accessibile via a keyboard (i.e. doesn’t rely solely on a mouse).

Which brings me to CAPTCHAs. There is no shortage of people with personal hatreds for CAPTCHA systems. If you must use a CAPTCHA, do everything you can to make it as accessible as possible. CAPTCHAs are the exception to the rule in that they are better off located on the same page as the username and password fields.

11. Keep your Page Weight Down

Does your web application login page really need to have all those buttons and graphics that exist across the rest of your site? Think about it—the core function of your login page is as a transition to the main site. Your user wants to make use of the page, and then move away from it again as quickly as possible. Adding anything but the very basics in navigation and branding is going to slow the page down for your users.

Remember, not everyone is using a T1 connection to surf the Web. If a page simply takes too long to load, the user will start to ask questions like “Should I just do this later?” or “Is this worth doing at all?” If that user has a similar experience several times then she’ll start looking for alternative sites to visit instead.

Reducing page weight can often be very simple to do (just don’t tell the marketing guys!) Look at the page, and identify what can be classified as core to the use of the page on the site and still makes the page looks like it belongs. Remove the rest—sometimes this may even include part of the extended navigation system.
Of course this advice is irrelevant if your login process uses a JavaScript popup window.

12. A Word on OpenID

Hang on—what’s with this Number 12? Well, kids, think of it as a Christmas bonus for the holidays. Seriously though, the topic of logins would be incomplete without a little discussion on OpenID.
Many of you have no doubt been thinking while reading through this list that a good deal of these issues could be solved by using OpenID.

Now a debate about OpenID is off topic, but basically my point of view is that OpenID is just too hard for the non-tech community to use.

There I said it. It’s out. Whew, that feels better!

The paradigm of using a URL for a login is just too far removed from the expected behaviour experienced bv the general majority of people. Given a choice, most folks will fall back on the traditional method of providing a username/password pair—even if it does meaning that they will have more logins.

This will change over time. My hope is that one day OpenID will indeed become mainstream. But until some of the bigger players jump on board and allow interchangeable OpenID use, I would recommend against making OpenID the only way that users can access your web application.

Keep it Simple

Improving the login experience comes down to making the entire process simple for the user. Granted, achieving this goal means more work for the design specification, implementation and development of your web application. But what is building web sites really all about? The sweat and tears of the design/development team, or the satisfaction of the customer?

At the end of the day, it’s the customer who is paying the bills.

Never, ever, insult your users.

Unless your web site revolves around insults, and every error message consists of a purposefully engineered insult for humorous reasons, treating your users with disdain or disrespect is a huge no-no.

Earlier today I decided to sign up for reddit, the popular social bookmarking service. My experience has turned me right off the service. Here’s my rant:

1. The CAPTCHA

First, I clicked Submit Link, and was presented with an option to register.

I’m personally not a huge fan of CAPTCHAs, for many reasons (there are alternatives, but there’s no panacea), but I do empathise with why people put them in place. Unlike someone who has poor eyesight, I can usually read the letters, and it’s usually only once that I need to type them in, so we’ll let that slide for now. And at least the letters in reddit’s CAPTCHA are relatively easy to decipher compared with others that I’ve seen in use … right?

Wrong.

2. The Insult

Here’s what I was presented with after clicking the Create Account button:

Apparently those letters weren’t as easy to decipher as I thought! Here’s the clincher though — not only was my attempt at passing the CAPTCHA unsuccessful, but I was insulted for my trouble!

3. The Déjà vu

Once I’d managed to endure a second CAPTCHA and finally registered, I thought that would be the end of it. But no! I was immediately presented with another CAPTCHA that I needed to pass in order to actually submit a link.

After having already been insulted, this made me really grumpy. Proving that I’m a human is annoying and somewhat degrading, so getting me to jump through that hoop a second time is downright rude. But, like I said, at least the letters displayed in the CAPTCHA were reasonable easy to decipher, right? (Ahem!)

At this stage my only thought is “If I’m going to be asked to do this every time I submit a link, I’m going to be turned off the service pretty quickly … especially if I’m going to be insulted some more every time I get it wrong.”

4. The false accusation

Hooray, so I passed the CAPTCHA. But wait — I’ve been presented with another hurdle!

This infuriated me. Too fast? What does that mean? This was the first link I’d ever submitted. Was I meant to type more slowly or something?

I’m assuming this is a bug, and should only be presented if a user tries to submit too many links in a given period (which I didn’t). But that aside, even if this had been my second link, why should I be prevented from submitting something within a certain period if I’ve already proven I’m human?

Thoroughly peeved, I went off to lunch and left the submission page in my browser, to tackle when I got back. If I could be bothered.

5. More Insults

Back from lunch, and I’ve tried again — only to receive more insults for my trouble (note the CAPTCHA image changed after it rejected my attempt, hence the discrepancy below).

Argh! Apparently I still can’t read (cos you know, it’s clearly my fault … honestly, can anyone tell me what I’m missing with these damn CAPTCHAs?).

At this point, I decided to pack up and leave. I’d experienced enough friction (and been insulted and falsely accused too many times) to decide that reddit was not worth my trouble.

Am I being too harsh? Is it reasonable to pick on one site when no doubt there are plenty of usability issues that need addressing with our own site? (although we certainly don’t insult any of our customers!) Should I have approached reddit privately first before posting in a public forum about it? Maybe. I figured they’re big enough that they can probably take it.

To be honest, though, I’m more interested in hearing your horror stories with signup processes and CAPTCHAs … does it get any worse?

reddit have just announced that they’re open sourcing their code. Good news, I guess — now anyone can try to fix this terrible state of affairs for them…