Credibility and trustworthiness of websites

http://www.humanfactors.com/downloads/mar12.asp#Eric

“trustworthy” homepages [on first impression] [...]  showed high balance, high contrast, moderate graphics-to-text ratio, and moderate text-to-background ratio.

[...] what make something appealing? That was the focus of the third study. There have been a number of models to define appeal (or “aesthetics”) over the years. Lindgaard, et. al analyzed their data with respect to six well-founded design attributes – symmetry, density, balance, contrast, graphics-to-text ration, and text-to-background ratio.”

Information visualisation

 

http://www.informationdesign.org/archives/infoviz/ - Videos, articles

Product comparison

What is best practice for presenting products: list view, grids, tables .. ?

Product list view

Check out any e-commerce with faceted navigation for View by List or Rows.

Product Grids (blocks, tiles)

For inspiration on Grid, Block or Boxes view, check out: Amazon, Nordstrom, LandsEnd, Magento e-commerce platform and many others

http://www.nicolasleroy.fr/shopping-engines-interaction-design-patterns/product/

Code (inspiration)

http://robmaurizi.com/blog/2007/01/a-table-less-product-grid/

Product comparison tables or product matrix

Select and compare

Articles, research

http://www.getelastic.com/ecommerce-usability-product-comparison-matrix/
http://www.getelastic.com/23-comparison-matrix-design-tips/

Research: Product Comparison and Pricing Tables  (Nick Finck)
http://www.nickfinck.com/blog/entry/research_product_comparison_and_pricing_tables/

Producten vergelijken is moeilijk
http://www.2c.nl/nl/over_2c/nieuwsbrief/2010-02/item4.php

Galleries, patterns, examples

http://www.welie.com/patterns/showPattern.php?patternID=comparison [done]
70+ examples (gallery)

http://konigi.com/interface/tags/comparison-tables

http://sixrevisions.com/design-showcase-inspiration/70-examples-of-product-comparison-tables-in-web-design/

http://ui-patterns.com/collections/pricing-tables/entry/4175

25 clear and beautiful
http://www.webdesigndev.com/inspiration/25-clear-and-beautiful-comparison-tables

http://www.smashingmagazine.com/2008/10/13/pricing-tables-showcase-examples-and-best-practices/

Innovation and novelty

Improving electronic forms

Online and web forms

For e-commerce businesses it may be cheaper to make some easy fixes to your form than to implement for inline validation. Quick wins, like the ones listed below, may be cheaper to implement and have more effect on conversion than inline validation.

Always consider making these form improvements first:
- Remove optional fields. Let users fill that out via their profile after registering.
- Make input formats forgiving and if possible auto-correct user’s data for them without surprising the user negatively (don’t show them the corrections you made).
- Clean forms and make them easy and fast to scan by eye.
- Improve the emotional experience. Make the form page pleasant (e.g. Vimeo.com) and filling in the form fun (e.g. Flickr) or calm.
- Improve error copy and make messages clear, errors fast to detect and easy to correct. For example make use of red highlights and scroll to the error when user clicks Submit button.
- Pre-fill fields with gray examples or give a short static explanation just near the field (below or to the right of the field).
- Use inline hints to guide the user when clicking on a field.

When to use inline validation

Still uncertain whether inline validation is worth it for you? Can inline validation make your businesses happy? How useful it is to you and your customers depends mainly on your form content.  It may be distracting if overused or misused. Expect that you need to spend some time redesigning your form and copy to accomodate for inline validation. Else you may introduce new usability issues. Not to forget the development costs and testing the implementation which is vital for rich interactions as these.

When is inline validation useful

- Registration forms, where comparing user input to server data may prove useful to find out if a new domain name is available or password is secure enough.
- Unique fields such as usernames.
- Exceptionally long forms or forms with many fields, where filling in or returning (pogosticking) back to the page is experienced as very painstaking at the point that it risks several users bailing out of the process.
 For longer forms it is better because it prevents the user from being overwhelmed if there are a lot of issues.
- Time-critical situations, where a user focus is dedicated entirely to a field and real-time feedback is essential and expected. Also if the user wants immediate assurance that data is valid or how to correct it as soon as possible.
- Data-critical situations. If a user needs immediate assurance that submitting is not is risky or input data cannot be undone. He might want to know the consequences of his input or selection before submitting the data. Can he still correct wrong data? Make it clear that undo is available or returning back to the form will be possible, for example by using progress indicators to show the user the form filling is a multi-step process with a confirmation step before final submitting. Or (like Amazon) writing under the submit button a text: “You will have the chance to review your order before it is finalized”.
- Forms with complex data and strict formatting. If users might doubt during or right after filling in a field, inline validation might be just what is needed to give that instant confidence boost and motivate the user he’s on the right track.

When is inline validation less useful

- Order forms. Typical order forms ask a user for contact and payment details, which is pretty standard stuff to the user. I don’t expect it to improve form completion time much, if at all.
- Tricky copy. With Inline validation error messages appear suddenly which is why they are usually placed next to fields rather instead of in between them. Some designs are limited in space hortizontally, so error messages need to remain short. Shortening error messages may potentially make them less clear and less usable. After all, error messages should not only say that something is wrong, but may also need to say what is wrong and how to correct it (sometimes with examples or formatting suggestions).
- Tricky audience. Websites with relatively many users with different browsers or with Javascript disabled. Inline validation can come as a penalty to non-broadband users with slow connections. Slow PC’s may also be affected depending on what technology you use for implementation.

Consider your users and your form

Ask yourself the following:
- What information do I ask from the user in my form?
- Which fields might the user have trouble filling in?
- If you’re desperate for quick results, have you considered first making other general form improvements?
- Will the time/resources invested in inline validation outweigh the increase in conversion?
- Is there a risk it will decrease it? By definition for any design: less is more, meaning don’t clutter your design with elements which don’t add value.

Measuring the impact of inline validation

If you can implement inline validation, test it on a small audience and revert back to your old design easily, go right ahead. When you want to measure if it makes a quantitive difference (conversion rates) then A/B split testing will give you the answers you’re looking for. But remember to measure other KPI’s, especially if you expect no or not much effect on conversion.

Conversion is critical to businesses, and customer satisfaction often comes secondary. I predict it won’t make a difference to conversion rates of most order forms, but can benefit in other situations where inline validation is useful (e.g. sign-up forms where usernames are scarce or where there is a strict password policy or other complex fields) – discussed earlier in this article.

Consider the effect on other KPI’s like customer satisfaction and lead generation. User experience may improve or suffer. SEO, performance, compatibility may suffer and these play an equally important role in conversion. In some instances lead capturing may be incomplete and lead generation may decrease. Plan the A/B testing well.

In the case conversion/lead generation impact is insignificant, I highly recommend that you also measure the impact on customer satisfaction. This could be measured via a usability test, but preferably via a web questionnaire.  

It could A/B test to measure differences in KPI’s such as:

o        form or order completion satisfaction rating

o        form completion difficulty

o        company friendliness/helpfullness rating

o        form completion time (subjective)

Inline validation design and implementation

This post is a continuation of the article about Research into inline validation which discussed risk of loss of conversion.

When (re)designing a form for inline validation you might come across some design challenges. This article discusses some issues and considers some suggestions on how to solve them. First I will discuss implementation issues, and the technical costs, then design issues.

Error messages

With inline validation forms become very dynamic. Because inline validation occurs while the user fills in a form, there needs to be adequate room for helpful error messages. The form probably needs to be redesigned to make room for these messages. This may have some negative consequences. Error messages being inserted and removed between fields may confuse and annoy users due to fields constantly moving from their original position.

This could be solved by a combination of the following:
- Compacting forms (horizontally). Its nice to place error messages right next to the field they are refering to. The form may need redesigning (decreasing widths of input fields) for these error messages. This may create new usability issues or new design challenges.
- Increasing vertical whitespace between the fields. Increasing forms vertically has many downsides. A longer page might convert less well and makes labels less scannable. It may put off users from filling in the form in at all.
- Call-out error balloons can be used. But these may overlap other form elements or obscure other error balloons.
-  Short error messages with the risk of making them potentially less clear and less helpful.

Also keep in mind:
- Show each error message near the field instead of only at the top of the page. This is the whole point of inline validation.
- Prevent error messages from appearing above or below the fold and out of sight. Scrolling to the error might be disliked. The problem can be partially solved by ensuring that error messages appear above their respective fields, where they usually have more chance of being noticed. Discussions about scrolling to errors here and here. This feels like patchwork, however, so try to solve the initial problem rather than using ‘scotch tape’ or stop-gap methods to cover up new ones.
- Error messages should be noticable, visually distinct: most times red.
- Don’t make an error message a Javascript dialog.

Error icons

In inline validation a correct field could be marked by a tick or (green) checkmarks or the text OK. The purpose of this is to reassure the user that what was typed in that field is correct. The business value is that it can help motivate users by giving them the confidence that there is no error so they can continue.

The checkmark as a confirmation of acceptance or pass may not be universally understood by all cultures. Some plausible variants of checkmark:
- OK text (preferably in green)
- smiley
- thumbs up
- VALID text (best for accessibility is an icon that includes the word “valid” or an even more specific messages such as “valid email address”)

If you use inline validation, you shoud strive for consistency. Just like error field might need an error icon, every valid field then also needs a checkmark icon. Leaving the checkmark out may make users uncertain about the fields that do not contain an error symbol. The user will start to think ”are these fields correct?” or “is the system still checking these fields?”. This is especially an issue if you plan to use inline validation only on a few fields within your form, which would be an inconsistent user experience.

On the other hand, consistency can be a bad thing. It can be overdone. For example, watch out for the christmas tree effect: it could leave you with many green (valid) and red (error) colours blotted over your form. Ensure your form remains clean and aesthetic.

Checkmarks that fade out with time are easily missed by users. To avoid the christmas tree effect, you might want to make disappear or fade out after a few seconds. [2]: “Yahoo provides instant feedback each time users fill in a field by showing a tick at the end of the field. Each tick disappears after a few seconds. The majority of the participants commented they did pay attention to them. However there were mixed opinions from the participants on the animated ticks. Some of them gave positive comments, whilst others thought they were distracting.”

The tick or checkmark is the most common symbol to indicate that a filled in field is valid. Consider the effect of leaving them out; they might not be needed at all. Can you afford to go for inline validation for only a few fields, or will it make people think and doubt? See my other posts on in which situations I think inline validation can be useful versus harmful.

Implementation challenges

Inline validation comes at a cost. Is there hope? Here are possible work-arounds for overcoming the cons.

- Leads: Capture e-mail address and contact details first. Ensure you capture data while a form is filled in, and not only upon clicking submit button. This requires an AJAX like server communication, possibly more moderation and more costs…
- Smart format recognition: Ensure forgiving input (make the system smart in recognising errors and correcting them itself).
- Requires Javascript. Use a lightweight Javascript. Around 2% of users have Javascript disabled (on purpose), so by using inline validation your are losing them. If you want to support users without Javascript, you might want to use inline validation with normal server-side validation as a back-up. Alternative technologies are Flex/Flash, Java and AJAX, although Javascript is your best bet due to its ubiquity.

Remember:
- All client side validation (onBlur) must be enforced with server side validation (onSubmit).
- Scroll to the first error onSubmit, as even for large resolutions the error might still be out of sight (outside the fold).

For a comparison of server-side and client-side validation (ideally you should have both in case one fails), see this article.

Developer toolkits

http://jquery.bassistance.de/validate/demo/milk/
http://livevalidation.com/examples
http://www.adobe.com/devnet/flex/quickstart/validating_data/

This post is a continuation of the article about Research into inline validation. Be sure to check out my other posts on inline validation research.

Links

http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/

Inline validation: pros and cons

Inline validation: benefits (advantages) and costs (disadvantages)

If you’ve read our article about research into inline validation you have found that ….

There are some. A comparison.

Pro’s:

- Helps with tricky fields. Appreciated by users for fields which they want to provide extra thought and care (username, password) or are tricky to fill in (bank account and credit card numbers) or are typically written in various forms.
- Immediate help. Appreciated by users because form completion time can be shortened due to immediate feedback. Users remembered what they just typed, so they are in the flow of providing that data and are also more capable of correcting it.
- Motivation. Encourages the user by affirming that everything is correct and that he will not remain in the same page but arrive at the next page after clicking the submit button.
- Shorter forms. With inline validation error messages will usually appear next to rather than under fields, depending on where error messages appear. On the other hand, if there are 2 fields placed next to eachother and they are both wrong, how and where will system communicate this?

Cons:

- Cost. Can be expensive to implement (server-side).
- System performance. Inline validation may lead to larger scripts, server slow-downs (if error rate is high) 
- SEO. More Javascript may mean heavier, more complex pages. Google might rate your form page lower.
- Expertise. If not designed properly can harm usability and conversion. Also testing intensive.
- Leads. May harm lead capturing and lead conversion (especially if user encounters an error, is discouraged to continue filling in the form)
- Surprise and distractions. Users don’t know that their form is being validated until they notice a checkmark or error message. Badly designed checkmarks are interpreted with confusion, so it needs to be clear what they represent to be understood. Clicking Submit must scroll the browser window to show where the first error is.
- Disrupting. Completion mode versus revision mode theories tell us that interupting a user interupts his mental flow (especially for those users who hardly look up to the screen from their keyboard). Does this lead to increased form completion time? 
- Conversion benefit unknown. Requires A/B split testing to determine if it really makes a difference on conversion without doing too much harm to gaining leads.

Asterisks or optional fields

Advocates of clear optional fields:
http://www.cxpartners.co.uk/thoughts/web_forms_design_guidelines_an_eyetracking_study.htm

Conversion tips

Keywords: increasing conversion improvement optimization

- SEO
   - unique content
   – TITLE tag
   – fast-loading (light) pages
   - H1, H2, etc
- Call-to-action buttons above the fold

Need quick conversion tips?
Check these articles:
Ton Wessling @ http://www.searchcowboys.com/events/522

Check these sites:

Protected: Password post test

This post is password protected. To view it please enter your password below:

Password: