Clockwork Active Media Systems

Testing interactive design is one of the most difficult and challenging assignments for a Quality Assurance team.  Interactive is a mashup of beautiful design, user experience layouts, carefully constructed semantic markup, clear and powerful client content, branding, relationships with other websites and (usually) a solid amount of custom back-end programming and database design.  Part of my role at Clockwork is building testcases and testplans, which both capture the subtleties that define a great user experience (and a successful website launch) and ensure we can reliably repeat that success for all clients.  This series of posts gives you a glimpse at some of the things that a solid test plan must address. Many of these are things people never remember to ask for, but require careful consideration.

Over the course of four posts, I'll cover:

• Forms and data collection
• Search Engine Optimization (SEO)
• Security
• Long-term Maintenance

Part 1: Testing Forms & Data Collection

Bad forms are not always immediately apparent. A website can look gorgeous right up until you make a mistake while filling out a three page form, and suddenly the website is asking you to start from scratch.  All the pretty pictures in the world can't crush the deep down anger that starts to build up inside you (or is that just me?). Good web design makes people feel good; the same is even more true of good web interactions. Interactions such as form validation are vital, they just aren't as sexy and fun as what people think of as "design".

Form validation (which I covered in detail in an earlier post) is used to prevent corruption of essential business data and user errors (mistakes such as someone accidentally typing in their e-mail incorrectly and failing to receive an online payment receipt).  But poorly executed validation can severely hurt the user experience of a website, and in some cases it can be better to have no form validation at all.

Basic rules for form validation:

1. The form should re-populate with any incorrect data submitted by the user and not discard it, a user should be allowed to easily correct a mistake and see what they submitted.
2. All errors validating the form should be clearly worded to indicate the problem and be visible on screen after a validation error occurs.
3. The places that the user needs to examine for corrections should be clearly marked on the form.
4. Validation should never be over aggressive.  (555) 555-5555 or 555-555-5555 or 555.555.5555 should all be acceptable phone numbers, a form validation should try to avoid imposing restrictions on commonly used formatting.
5. Unexpected input should not cause errors, try entering special characters such as: "* --! > # ? ' " into the form fields to see what happens. (Non-recoverable errors are ugly things to encounter for a user but are also one of the most commonly exploited security vulnerabilities for Injection and XSS attacks)

Almost all websites these days have a "Contact Us" or a "Sign up for Newsletters" form. If you're evaluating a web development partner, browse the websites the company has built for other clients. Do you see a form field that says [E-mail Address]? When you click into the text area does the text vanish so you can type your e-mail, or does it remain and force you to clear it out yourself?

Evaluating an interactive firm based purely on their design portfolio suggests your not looking at their "interactive" at all. Test the sites in their portfolio and make sure they have not only excellent design, but that user interactions such as form validation is clear, concise, and—most importantly—works.  If your interactions with their websites are sub-par, odds are your experience with them as a company may be the same.

Next up: Search Engine Optimization. Stay tuned!