Multivariate testing (MVT), testing multiple elements of a live web page at a time, is becoming more and more popular amongst the web design and development community. Understandably so, multivariate testing allows you to test a large amount of combinations and see exactly how those combinations stack up against one another. You will quickly find out that the smallest changes can produce the biggest results.

What elements should you test?

When deciding exactly what elements to test within a multivariate test you are going to focus on the call to action. Determine what you want users to do upon landing on a page and then outline all of the key elements in and around the desired call to action. Any element a user will have to interact with to complete this action is an element you are going to want to run the multivariate test with. A few of these elements may include:

Brand Awareness

Depending on how popular, or unpopular, your brand is may impact conversions. If you have a well-known brand it may help encourage conversions where an unknown brand would not. On the other hand, having too much brand presence on a page may get in the way of users trying to complete a conversion. Figure out what you would like to accomplish with your brand awareness and then test it.

Headings

Headings are the first section of text a user will read on a page and if they like it they will continue on. Perhaps they will continue reading, maybe they will scan the rest of the elements surrounding the call to action, or if you’re lucky they just might jump straight to completing the desired call to action. Either way, testing different headings will allow you to determine which has the best positive outcome. Not too sure headings can make that big of difference? You do not have to take my word for it; 37signals have had significant results all from testing headings.

Text Content

Not every user is going to read the text content surrounding a call to action, however those who do are only going to be interested in helpful and useful content. Creating a few different blocks of text to test against one another can give you an insight as to how your users think and what will work best with them moving forward. While you may not see a very sizable difference in your conversion rate from testing text content you will gain a tremendous amount of awareness.

Images

The eye is naturally drawn to images on a page, especially striking images. How you present your call to action can be dramatically affected by the images used around it. As an example, if you are selling an e-book that is to be downloaded, try using an image of an actual book against an image of a PDF icon. You may be surprised to find that your users like to see a tangible product over a file icon. The right image or images can work wonders on your conversion rate.

Buttons

Buttons may very well be the most important part in completing a call to action. Simply put, buttons are one of the easiest ways for users to take action, an action that is often important in determining the overall success of a website. Does your button actually look like a button? Is it instinctive and easily recognizable? Put together multiple button combinations and test them against one another. It may take a few different tests, but soon enough you will have a shinning star.

How should you test these elements?

Within a multivariate test you will need to visually design multiple combinations of the elements surrounding a desired call to action. I recently wrote an article, 4 Simple Design Elements Behind a Good Call to Action, which goes into great detail on how to visually craft a strong call to action using size, shape, color, and position. Using size, shape, and color, you are able to create an extensive array of elements to test, all of which will help lead you to the preferred conversion rate.

Size

The larger you make your call to action, the easier it is to recognize. Furthermore, the larger an element is the more importance it will signify. You want to find a good balance between how large your headings and images are as compared to your button. Headings should not be so small that they do not stand out over the other copy, meanwhile a button should not be so large that it is the only item on the page.

Shape

A good call to action will use shape to its benefit. Make the corners on your button rounded so that it looks more like a button and instinctively clickable. Use an arrow or another object to draw attention to the button. Do not be afraid to break a grid in order to make a call to action stand out. On a page full of straight lines the curved one is sure to stick out so use shape to your advantage.

Color

Every color is going to catch a user’s attention a little differently. Additionally, each color is going to provoke a different emotion for each user. One of the biggest things you can test, and continually test, is the color of your headings, buttons, text, and so forth. Honestly, the options are endless! Test and work with colors that will standout, provide a high contrast, and encourage users.

Position

Logos are commonly found at the top left of a page for a reason, it is where they are most easily recognized and successful. Position plays a very important role in gaining conversions. How does your call to action perform placed within the left side of the page as compared to the right side? In addition to that, how does your button perform on the top of your call to action as compared to the bottom, left, or right? The position of your call to action needs to be in an instinctive location and clearly obvious to your users.

Multivariate Testing Example: Smashing Magazine

I recently wrote a review on The Smashing Book and in doing so I was visiting the Smashing Magazine website quite a bit. I started to notice that they are running a multivariate test on how they advertise the book to their visitors. Outlined below are a few of the different examples and combinations I was able to identify. I do not know how well each of these is performing, nor do I know anything about the parameters of the test. I would love to hear more about the test if Smashing Magazine was to share. Maybe they will release a post about it sometime in the future (wink wink)?

Variable: Text – Simple enough, these two combinations are strictly comparing the call to action text.

Variables: Text and Button – These combinations are slightly different from the first set. Here the call to action text is different as they have added a button into the mix, and the Smashing brand is down played a little from the previous examples.

Variable: Color – Here is a new set of combinations, of which the strong variable is the colors of the buttons. The color of the buttons changes along with the text within the buttons as necessary. Also notable, the color of the text “Smashing” within the bottom two examples changes to emphasize the brand within the bottom right example.

Variables: Position and Size – Within these two examples Smashing Magazine mixes testing position along with size. The image of the book switches from the right hand side to the left of the call to action. Additionally, the size of the button is increased within the example on the right.

Variables: Text, Size, and Color – Paying attention to the small details, this example tests the effectiveness of different context. In doing so, they slightly change the size of the text. Notice the text on the right example is just a tad larger than the left. In addition, the color of the pricing is different from one example to the next.

Variables: Random – These are just a few of the additional examples I found thrown into the mix, each of which is testing a random combination of elements.

The multivariate test by Smashing Magazine is a great example of a multivariate test as it is testing a wide array of elements. The test does a fantastic job at testing the brand, headings, text, images, and buttons. In doing so, they often change the size, shape, color, and position of different elements. There was a decent amount of planning put into this test and it is obvious that Smashing Magazine knows what they are doing.

Related posts:

1. 10 Quick E-Commerce Tips
2. Designing a Strong Call to Action
3. Landing Page Design

When it comes to designing a website, content is often overlooked, but why? Very rarely do users browse the web looking for a good design or decent experience. Users come for the content. Not giving them what they want with poorly written content will frustrate users. Not only does it waste their time, but your time as well.

Writing for the Web: The Right Strategy presented by Shay Howe

Refresh Chicago, January 12th, 2010

The Problem

Online content is bad. Real bad.

Generally speaking, the Internet is lacking when it comes to quality content. People are not properly taking advantage of the opportunity in front of them and commonly fall short with insufficient content.

Content is low priority.

All too often we get caught up in the design and development of a website to pay attention to the content. We understand that the website will have a blog, about page, and contact page, but that is as far as we get. From the introduction of a project content takes a low priority.

Content is last minute.

Some people do not even think about content until the day that the website is completely designed, developed, and ready to be rolled out. The wireframe, site map, and graphics are all water under the bridge by now. The only thing missing at this point is the content. All too often the content has not even been assigned or allocated to anyone at this point.

Users notice bad content.

If your copy is updated, cheerful, and friendly users will not notice. If your content is sterile and resembling a textbook, users will notice and you will hear about it. The second your product description starts to drag users will jump ship.

Mint – Mint has welcoming copy that often goes unnoticed because it is good, friendly content.

Make your content work.

The only way to overcome this horrid content is to make your content work harder. Before you begin any wire frames or development sit down as a whole and put together a content strategy. Initiate a strategy that will outline the metrics needed to keep your content moving forward.

Developing a Strategy

Kristina Halvorson has written an amazing book, “Content Strategy for the Web”, which goes into great detail on how to create a content strategy for the web. The following section summarizes some of her most important points. Please support her and purchase her book for more information.

Create, publish, and govern.

When putting together a content strategy it is important to understand that your strategy needs to cover not only creating and publishing the content, but governing the content as well. Once a website is live and time passes by content will become obsolete and need to be updated. This includes images and videos as well as the text itself.

Think “lifecycle” not “launch”.

Typically a website is launched everyone involved moves on to bigger and better things. We need to break the “launch” mindset and focus on the “lifecycle” of a website rather than the initial lift off. Plan to have an individual or team in charge of occasionally updating and checking the content.

Stop the separation.

Who is really in charge of creating the content? Designers and developers? The client? Marketing and research? Information architects? Truth be told, we all are in charge. Bring everyone together to work on the content strategy as a whole and the content will take life.

Stop using lorem ipsum.

Lorem ipsum will not, at all, resemble your actual content. Stop using it as a placeholder within your design or wireframe as it will be mismatched to the real content that will be delivered. While you are all together initiating a content strategy think through the content and any implications you may encounter. Know how to handle multiple levels of headings, ordered list, blockquotes, and other situations a head of time.

Answer more than just what.

If all your content does is tell what the website is about you’re missing the point. Quality content will answer the what, why, when, where, how, and who. Go over the website inside and out and cover your tracks. Make sure any possible questions a user may have are answered upfront.

Set goals.

Measuring your success can be difficult if you do not set goals. Figure out what you are looking to achieve with your website and exactly how your content can play a role in helping. Outline your goals and use them as motivation moving forward.

Determine accomplishments.

Figure out exactly what you want to accomplish with your content. Maybe it is to help sell a specific product, to build brand recognition, or to drive form conversions. Whatever you are looking to accomplish, define it now and then, work towards accomplishing it within your content. Knowing what you need to accomplish is easier than taking a stab in the dark.

Recognize risk.

Try to recognize any potential risk involved with developing content. Are you worried about being too edgy or too dull? Figure out exactly what your pressure points are and then plan on how to overcome the risk.

Flickr – Flickr avoids being dull by welcoming users in a different language every time they visit their profile.

Outline content structure.

All websites need to have a structure to their content and this structure needs to be carried out through every single page on the site. Outline a content structure that covers your headings, body text, linking between pages, as well as your narrative, tense, and flow. Really go over your content structure and determine how you will stay consistent throughout the entire website.

Identify roadblocks.

As with every other part of the project you are bound and determined to run into a few roadblocks when creating content. Is user research going to hold you up from getting a proper start on the content? Is marketing going to come down on you when they feel that the brand is not properly being carried out? Or, is legal going to tell you to completely scrap entire sections of the content? Identify what roadblocks you may encounter and figure out how you will move around them.

Determine overall messaging.

When putting together the content strategy this is the best time to determine the overall messaging of the website. This is a hard question to tackle so getting a head start on it now makes all the difference. Put together some recommendations for the overall messaging and tone of the website and how it should be conveyed. Chances are you will not completely iron out the messaging and that is fine, but getting a head start is crucial.

GIANT Creative – GIANT Creative has a great overall messaging that is carried out through the entire website.

Assign launch priorities.

Since the website will be a work in progress and you plan to continually make updates to the content, figure out where you want the content to be at launch. A lot of projects are time sensitive and getting off the ground is very important. Decide what needs to be completed before launch and what can be incorporated after launch. Do not, I repeat, do not launch a website for the sake of getting it live with the mindset that you will review the content later. This happens all too common and the content is never defined after launch.

Decide content hierarchy.

Now is also the time to decide your content hierarchy, meaning in what order do you want to present your messaging to users. Put your most important messaging first then move users back within the site for more information if they wish. Throwing all the content you can at users all at once will not work. Decide in what order you wish to present the content to the users.

Prepare sub page recommendations.

A content strategy should include recommendations for the home page all the way down to sub pages. Outline if some sub pages will receive specific templates to better convey messaging. Also determine how the sub pages will carry out the top level messaging, stay consistent from one page to another, and how they will all link and interlace.

In general, your strategy needs to provide all information needed to make any decisions when producing and creating the content. While developing the strategy you need to reach out to all of those whom may have some input. Gathering their input now, rather than later, will hopefully help prevent any roadblocks from occurring later on. Furthermore, use this time to set guidelines on to how the content will be maintained and updated moving forward.

Writing Quality Content

There are many different factors that all play into writing quality content. Many of which I addressed in my article “Writing User Friendly Content”, including:

• Give users a summary.
• Get to the point quickly.
• Use small sentences.
• Limit one thought per paragraph.
• Use bullet points.
• Use sub headings.
• Do not over use exclamations!!!
• Drive emphasis with repetition.
• Drop unnecessary adjectives.
• Use details, be specific.
• Use hyperlinks.
• Use a personal tone.
• Be unique.
• Escape content overload.

These are just to name a few. Please refer to the article for further details and complete explanations. In addition to these points I would also like to add:

Forget the sales pitch.

Online users are used to the typical sales pitch and can spot it from a mile away. It is commonly tasteless and users hate it. Instead, present them the facts in a friendly manner and let users decide for themselves.

Keep content understandable.

Having clear and understandable content is easier said than done. What may be understandable to you may not be to someone else. If a user struggles to find what they are looking for or to understand any of the content they will pounce on the back button like no tomorrow.

Communicate conversationally.

Communicate conversationally with a more casual tone and voice to allow for a friendlier and easier reading experience. Users will be extremely happy with content they can understand and you can rest assured you avoided them any frustration.

Carrot Creative – Carrot Creative uses a friendly tone and characteristic content to provide for very enjoyable reading.

Do not brag.

No one likes a showoff and the same goes online. Do not brag or boast about how popular you are or how well you did last year. You must earn your users trust and any pompous language will not sit well.

Avoid industry slang.

I could ramble all day about front-end and back-end development along with different content management systems, but would my audience understand me? No. Speak in terms that everyone will understand.

Bringing Content to Life

Apply your hierarchy.

Take the hierarchy you decided on within your strategy and apply it using different headings, text sizes, and typefaces. As before, put your most important messaging first and show users where to begin. From there guide them through the rest of the website.

37signals – 37signals uses a creative design to apply their hierarchy and to guide users down the page.

Make content able to be scanned.

One of the most important things to take into consideration when creating and stylizing your content is to make sure that it can be scanned. Users do not read content online, they scan it. Make sure you break up your text using multiple headlines, bullet points, short paragraphs, and descriptive links.

HUGE – Huge adheres to all reading types by breaking up their content with paragraphs, list, and other grid based elements.

Stylize your text.

Make use of common text styling elements like bold, italics, shadows, and so forth as they help to bring life to your content. A little bit of an added touch can go a long way so be sure not to overdo it. Too much style and your content can start to look gaudy.

N.Design Studio – N.Design Studio uses a variety of text effects including multiple typefaces, colors, sizes, strokes, and more.

Play with different fonts.

Online we are commonly limited to a specific number of web friendly fonts. However with the improvements of @font-face and services like Typekit the number of fonts is quickly growing. Use different fonts to help deliver your content in a more aesthetic manner. As with adding stylization to your text, be sure to pick a font that will compliment your design.

Viget Inspire – The Viget Inspire blog uses multiple different typefaces for an added touch, easily taking the design to the next level.

Use contrasting colors.

Using black text on a black background probably is not a good idea. Pick colors that fit well with your layout and design. A bright contrasting color has the ability to really draw a user’s attention. Use colors within your content to your advantage.

Friendly Duck – The contrasting orange color on Friendly Duck sticks out amongst the dark background and really draws users attention.

Apply clean rags.

Each line of unjustified text should be as close as possible to the same length as the other lines above and below it. Any large spaces at the end of a line will create a large gap that is hard to follow when reading. Further more, having text hanging out on the end of a section of text within the last line creates an unpleasing arrangement and is often over looked.

Happy Cog – Happy Cog is aware of their rags and has taken the additional effort to make them as pleasing as possible.

Exercise white space.

A fair amount of white space in a design allows the content to breathe and makes it easier for users to read and follow. White space can also be used to build a grid within your layout and design. Which, in return, may help your content establish a rhythm for easier reading.

Elliot Jay Stocks – Elliot Jay Stocks uses white space to help sculpt his layout while allowing users to easily read and follow the content.

Make graphics and text coincide.

Excellent text and a strong graphic can communicate a powerful message, a message that has the ability to leave a lasting impact on users. Use graphics that work well with your text. Simply adding graphics to a page for no apparent purpose is distracting and aggravating for users.

Housing Works – Housing Works makes use of emotional images to add a powerful impact to their messaging.

Take advantage of CSS.

Cascading style sheets give you the potential to not only add outstanding effects to your text, but to also set a content standard for text across an entire website. Setting standards in CSS ensures the consistency of your typography across an entire website.

You Need Excellent Content

Developing a strategy, writing quality content, and bringing that content to life take a tremendous amount of energy. The majority of companies do not have the resources, let alone the time and effort needed to develop great web content. Quality content requires a detailed procedure and hard work which will end up being worth it.

Having a content strategy along with quality content in place allows for a strong user’s experience, better brand regularity, up to date working efficiency, improved risk management, more powerful search engine optimization, and more advantageous personality and targeting.

Stop acting like content is secondary nature, of which can be touched up at a later date. Start your projects with creating quality content and start today!

Very special thanks to Kristina Halvorson on her amazing contributions to educating the importance of web content. Please visit her at Brain Traffic or purchase her book “Content Strategy for the Web”.

Related posts:

1. Writing User Friendly Content
2. Content Optimization Guidelines

It is not uncommon for companies to sink large amounts of money into obtaining traffic to their websites in an attempt to increase conversions. Some of their money might go towards search engine optimization and some might go towards pay per click or search engine marketing. Little do they know their problem might not be about getting more traffic. The real problem could be that they have a poor call to action.

A plain “Click Here” link buried underneath a wall of text is not going to yield very good results. Driving traffic to your website is important, however what good is the traffic if the primary call to action is nearly invisible? Having a well-designed call to action could be all the difference needed to rocket conversions sky high. The design of a call to action can be broken down into 4 simple elements, size, shape, color, and position.

Design Elements

Size

Make your call to action large enough that it stands out on top of everything else on the page. It is your primary focus, right? Generally speaking, the larger an element is on a page the more noticeable it will be, thus the more importance it should hold. A good call to action is large enough so that it is easily recognized without being tacky in the process.

Before going off the deep end realize that it is possible to create a call to action that is too large. If you create too large of a call to action users may not understand that it is clickable and will miss the call to action altogether. Create a call to action that is large in relation to other elements on the page, but not over done.

Alternatively, if you have more than one call to action, size them in relation to their importance. The primary call to action should be larger than the secondary call to action.

Sortfolio – The “get listed” call to action stands tall above the rest of the navigation as the primary call to action.

MailChimp – The home page over at MailChimp features two large call to action buttons that ensure they are not missed.

Shape

The best calls to action are most commonly shaped like buttons as they attract attention and are instantly identified as clickable. Use rounded or circular corners on the ends of your call to action to give it the shape of an ordinary button. Square corners do work as well, however some users may misinterpret your call to action for an ad or banner and steer clear from it. Feel free to use square corners, just do so with a bit of caution in mind.

On top of shaping your call to action to that similar of a button it is also beneficial to use a unique font from the rest of the page for your call to action. The difference in the shape of the font will help attract attention to the call to action and draw users in. As always, choose a font that is distinctive yet complimentary to the other fonts on the page as well.

Apple – Apple uses multiple rounded corners to enforce that the element is indeed clickable. They also make use of a “+” circle on the top left corner to help draw users attention.

Authentic Jobs – Authentic Jobs uses a dominant button with an accent below it to guide users eye path.

Color

To say that any of the 4 elements being outlined here has more importance than the other is too close to call, however the color of your call to action is right at the top. One of the quickest ways to grab a user’s attention is by using a bright, contrasting color right within your call to action. Choosing a color that stands out from the rest of the colors used within the page will enforce its significance.

Pick a color that is specifically unique to your call to action and is not used anywhere else on the page. For example, if all of your text is black and all of your links and buttons are blue you should use a different color than black or blue for your call to action. Instead, use a brighter contrasting color such as orange. By using orange the call to action will not fade in with the rest of the blue and black and will stand atop of all the other elements on the page.

It is also recommended that you need to practice using colors appropriately. By all means pick colors that are bright and contrasting, however make sure you pick colors that fit the overall color scheme of the page. Throwing in random colors in order to get a call to action to stand out will look unprofessional and perhaps worse, untrustworthy. Additionally, be careful when using more than one call to action on a page. Too many colors can quickly turn your page into a rainbow, draining the impact of the primary call to action, and pushing users to an unresponsive state.

h2desk – h2desk uses a beautiful bright red call to action on top of a dark background.

Less Time Spent – The bright green button on Less Time Spent is a high contrast of the other colors used on the home page.

Position

Positioning your call to action instinctively within the eye path of users is incredibly important. No matter how large, oddly shaped, or brightly colored your call to action is users will never see it unless it is placed within an intuitive position. The exact position for your call to action will depend on the page layout itself, however the best practice is to keep the call to action above the fold and in a prominent area with plenty of breathing room.

You are able to prioritize the elements on a page simply by the order in which they are placed. Keeping the call to action toward of the top of a page, not requiring users to scroll down to find it, places more value on the call to action and allows it to receive more impressions. Leaving the call to action in an instinctive position allows users to also come back to it after browsing other parts of the website.

Leaving a fair amount of white space around the call to action prevents other elements of the page from interfering with the importance needing to be placed on it. Positioning the call to action in an intuitive position without any clutter in the way will reward the highest amount of conversions.

Textpattern – Textpattern places their primary call to action right underneath the logo ensuring it is going to be seen.

Notable – Notable positions their call to action above the fold with plenty of whitespace surrounding it.

Examples of Great Calls to Action

BuySellAds

VideoTeaching.com

Site Remark

CoTweet

File Share HQ

Catch Mail

Templatic

Pulse

Campaign Monitor

Home Theater Forum

Healogix

Livestream

Donor Tools

WebNotes

TrackMyPeople

FreeAgent

SugarSync

1Password

Pastebot

MemberFuse

Droplr

Zaplee

Xpelo

HelpSpot

EnStore

Jolicloud

Xero

POP Creative Group

Glasscubes

Planning Center

Bidsketch

Virb

WWF

LemonStand

Crush It! Book

Matthew Henry

Shopify

Medical Licensure Group

Halogy

LightCMS

International ArtExpo New York 2010

Osmond Interactive

Magntize

Mobile Roadie

Microsoft MIX10

Art in My Coffee

Onehub

Sprouter

SliceMyDesign

Essay Academia

Ambition WordPress Edition

Brite Revolution

StreetMavens

Vuu Media

Message Stream

Additional Information

• Smashing Magazine – “Call to Action Buttons: Examples and Best Practices”
• Boagworld – “10 Techniques for an Effective ‘Call to Action’”
• UX Booth – “Good Call-To-Action Buttons”

Putting it all Together

At the end of the day creating a good call to action is all about getting users to convert. No matter how you go about getting conversions you cannot ignore the design of your call to action. The 4 simple elements outlined here may not seem like much, but can work wonders on your conversion rate. Take a look at your website and reevaluate your call to action. Could it use a little work? Would any of these 4 elements help give it a boost? Please let me know about it in the comments below. Maybe I can give you a hand or lend you some advice?

Related posts:

1. Defining A Multivariate Test
2. Designing A Non-Profit Website
3. Landing Page Design

Online sales are growing rapidly year over year and now more than ever is a great time to have an e-commerce website. While maintaining and optimizing an e-commerce website may be quite the assignment, taking little steps in the right direction will greatly help the overall improvement. Begin with small improvements you can tackle quickly. Then move on to more complex tasks that may require extra effort. Slowly, but surely, you will fine tune your website into an outstanding website. Outlined here are 10 quick e-commerce tips to get you on your way.

Start Your E-commerce Optimization

1. Accommodate All Users Types

When a user visits your website it is virtually impossible to know where they stand within the purchase process. Some users are just browsing around gathering information for a future purchase while other users may be in a dead heat to make a purchase as quickly and easily as possible. Take note of all the potential user types and try to accommodate them all equally.

2. Use Captivating and Compelling Copy

Users browse e-commerce websites as if they are on a hunt. Hunting for a desired product and the moment the hunt goes cold they fall off track and disappear. Write strong impact copy that keeps users on the hunt. If a landing page or paid search ad is promoting "Affordable Baking Accessories" you better be sure the corresponding page on your website uses this same copy.

3. Use Headings with a Punch

Headings are the main place where you can persuade users to stay on your website for another few seconds. If your heading is too informational or puts them to sleep you have missed your chance. Use clear, descriptive headings that get to the point and provide users with a source of relevancy. For example, "Pet Safe Wireless Containment System PIF-300 Including Lifetime Manufacturer's Warranty" has less of an impact than "Pet Safe Wireless Pet Fence - Lifetime Warranty Included".

4. Take Advantage of Good Calls to Action

As a child when your mother told you to clean your room, did you? No. When you tell a user to "Click Here" are they going to? No. Give users a reason to proceed and to follow through. Using a call to action like "See Our Lowest Priced Bikes" is much more appealing than "Click Here" or "Learn More".

5. Provide Multiple Professional Product Images

One of the best parts about walking into a brick and mortar store to make a purchase is that you are physically able to pick up and examine a product. By giving users multiple images online allows us to overcome this barrier. On top of giving users multiple images, give them professional images from different angles and in different environments. Show them a shirt from the front, back, side, as well as on a model.

6. Allow Users to Read and Leave Product Reviews

User reviews, both good and bad, are proven to increase your conversions. Studies show that 77% of users look at reviews and ratings. Of them, 63% admit that they are more likely to make a purchase from a website with reviews and ratings. (Jupiter Research, August 2006, and Comp USA & iPerceptions) Furthermore, negative reviews allow users to see that the ratings are concrete and the product is in fact real with flaws. If you receive too many negative reviews and you may consider discontinuing the product offering.

7. Lead Users through the Checkout Process

Getting users into the checkout process is an accomplishment in itself; do not ruin it with poor user experience. Give users an overview detailing how many steps are involved and where they currently stand. Additionally do not promote any products or try to sell additional products within the checkout process. Keep the process to a minimum and as intuitive as possible.

8. Develop Clean Easy to Use Forms

For many websites forms act as the plague. Design and develop your forms in a clean easy to use manner. A few best practices include:

• Require only necessary information. Do not go data happy.
• Provide security assurance ensuring personal information is safe and secure.
• Use descriptive buttons like "Continue to Shipping and Billing" rather than "Submit".
• Assist users with error handling on incorrectly completed fields.

9. Provide Help and Support

The first thing a majority of users are going to do before making a purchase is to make sure that you are willing, and able, to help them after a purchase is made. The quickest way to insure your support is to provide users with a phone number at all times. Furthermore you should also supply a mailing address and email address. On top of contact information you should also provide a privacy policy, return policy, shipping policy, and so forth. Providing all of this information upfront will help reassure users.

10. Test Then Test and Test Some More

These days testing is inexpensive, potentially free, and will warrant substantial benefits. The only excuse not to test is the matter of time it takes, however with Google's Website Optimizer this excuse is no longer valid. You can be up and running a test within the hour. Make a list of 3 things that bother you about your website, things you think could be improved. Then set out to test them. Once you have finished your initial test, rinse and repeat.

Related posts:

1. Top 10 Keyword Research Tips
2. Checkout Process Design
3. Defining A Multivariate Test

Part 1: Content

One of the goals behind a non-profit website should be to inform visitors and provide them with valued content, ultimately motivating them to take action or to be encouraged by your undertaking, accomplishments, and possibilities.

Does the website:

1. Provide a mission statement that is easily accessible.
2. Provide an inspiring statement from executive director, president, or person in charge.
3. Provide a featured organization importance on the home page.
4. Provide a who, what, why, when, and where behind the organization.
5. Provide a history and origin behind the organization.
6. Provide informative material related to the organization.
7. Provide a list of board members and their positions.
8. Provide a list of principal staff members and their roles.
9. Provide a date of the most recent update to the website.
10. Provide a calendar and/or news to highlight time-sensitive material.
11. Provide a list of recent updates to the website.
12. Provide the most recent annual reports.

Part 2: Dependability

Upon visiting the website visitors should feel that the organization is attentive, perceptive, proficient, virtuous, and responsible.

Does the website:

1. Have correctly functioning internal and external links.
2. Have routinely fresh content.
3. Contain only correct and proper spellings.
4. Have appropriate and functioning pictures.
5. Supply a "Privacy Policy" for individual information.
6. Display the non-profit position of the organization.

Part 3: Interaction

An essential behind a non-profit website is providing a strong call to action or form of interaction for visitors to help support and promote the organization's mission.

Does the website:

1. Provide an address and phone number for the organization.
2. Allow visitors to filter their contact request to the correct person.
3. Ask for visitors email addresses.
4. Allow visitors to contribute by commenting or emailing.
5. Allow visitors to contribute by a form of social media. (Facebook, Twitter, etc.)
6. Provide a list and explanation of positions for volunteers.
7. Describe how and where funds will be used.
8. All for visitors to make donations online.
9. Explain if any donations may or may not be tad deductible.
10. Provide visitors' ways of how to help outside of donating.
11. Provide any success stories from those helped by the organization.
12. Clearly outline the services and goods provided by the organization.

Part 4: Visibility

An organization's website needs to be visible to all visitors regardless of their physical or mental abilities.

Does the website:

1. Pass accessibility standards.
2. Use valid HTML/XHTML code.
3. Look and function correctly across all major web browsers.
4. Perform correctly when being accessed by screen reading programs.
5. Have appropriately written content for the intended skill level of the audience.

Part 5: Interface

A good interface can dramatically improve the production and presentation of an organization.

Does the website:

1. Load without showing a splash page or advertisement.
2. Load swiftly for those with a broadband connection.
3. Perform correctly on an array of different screen resolutions.
4. Have a clean and friendly layout and design.
5. Prohibit pop-up windows on the home page.
6. Have a comprehensive and eligible navigation.
7. Provide all content within three or less clicks from the main navigation.
8. Provide a site map or search feature for large websites.
9. Have the logo or organization name on all pages.
10. Use proper titles and headings for all pages.
11. Use suitable named URLs.
12. Provide pertinent content without having to sign-up or register.
13. Allow a printer-friendly option for longer pages.
14. Use web friendly content. (Short paragraphs, bulleted list, etc.)
15. Use an appropriate contrast in order to read text (even when projected).
16. Visually separate hyperlinks from regularly styled content.
17. Use email addresses as links.
18. State the type and size of a file before being downloaded.
19. Use authentic graphics and images of which support the content.

Additional Resources

You may also find the following resources beneficial. Please enjoy!

• Non Profit Website Design: Examples and Best Practices
• 40+ Inspirational Non-Profit Website Designs

Related posts:

1. Website Form Design
2. Universal Website Usability Rules
3. Home Page Design

Google does a lot of interesting things, of which one of the most popular being periodically changing their logo to reflect current events. In the past 10 years we have had the pleasure of seeing quite a few fascinating and delightful logo designs. Most often we see these imaginative logos around holidays, including Christmas, Thanksgiving, Halloween, and other popular holidays. We are often surprised to see new logos unexpectedly, most recently for the 40th anniversary of Comic-Con. Outlined here are over 300 of the most brilliantly designed Google logos.

2009

40th Anniversary of Comic-Con – July 23, 2009

Historically Long Solar Eclipse – July 22, 2009

Apollo 11 Lunar Landing Anniversary – July 20, 2009

Nikola Tesla's Birthday – July 10, 2009

Igor Stravinsky Birthday – June 17, 2009

Philippines Independence Day – June 12, 2009

Mary Cassatt's Birthday – May 22, 2009

Missing Link Fossil Discovery – May 20, 2009

Mother's Day – May 10, 2009

Samuel Morse's Birthday – April 27, 2009

Anzac Day In Australia and New Zealand – April 25, 2009

Girl's Day in Germany – April 23, 2009

Turkey National Sovereignty & Children's Day – April 23, 2009

St. George's Day & Shakespeare's Birthday – April 23, 2009

Earth Day – April 22, 2009

Kartini Day in Indonesia – April 21, 2009

Zu Chongzhi's Birthday – April 20, 2009

Christiaan Huygens' Birthday – April 16, 2009

Thailand New Year – April 13, 2009

1st Day Fall/Spring – March 20, 2009

St. Patrick's Day – March 17, 2009

Giovanni Schiaparelli's Birthday – March 14, 2009

Dr. Seuss' Birthday – March 2, 2009

Valentine's Day – February 14, 2009

Unix 1234567890 – February 13, 2009

Charles Darwin's Birthday – February 12, 2009

Jackson Pollock's Birthday – January 28, 2009

Martin Luther King Day – January 19, 2009

New Years – January 1, 2009

2008

Holiday Doodle – December, 2008

Thanksgiving – November 27, 2008

Rene Magritte's Birthday – November 21, 2008

Veteran's Day – November 11, 2008

U.S. Presidential Election – November 4, 2008

Halloween – October 31, 2008

Google's 10th Birthday – September 27, 2008

1st Day of Fall – September 22, 2008

Large Hadron Collider – September 10, 2008

Summer Olympic Games Doodle, Beijing – August, 2008

50th Anniversary of Nasa – July 29, 2008

Marc Chagall's Birthday – July 7, 2008

4th of July – July 4, 2008

1st Day of Summer – June 20, 2008

Father's Day – June 15, 2008

Diego Velazquez's Birthday – June 6, 2008

1st Hot Air Balloon Launch Anniversary – June 4, 2008

Anniversary of the 1st Ascent of Mount Everest – May 29, 2008

Up in the Clouds – May 22, 2008

Walter Gropius' Birthday – May 18, 2008

1st Demonstrated Laser Anniversary – May 16, 2008

Florence Nightingale's Birthday – May 12, 2008

Mother's Day – May 11, 2008

St. George's Day – April 23, 2008

Earth Day – April 22, 2008

Mother's Day in the Middle East – March 21, 2008

1st Day of Spring – March 20, 2008

Persian New Year – March 20, 2008

St. Patrick's Day – March 17, 2008

Alexander Graham Bell's Birthday – March 3, 2008

Leap Year – February 29, 2008

Valentine's Day – February 14, 2008

Chinese New Year – February 7, 2008

50th Anniversary of the LEGO – January 28, 2008

Martin Luther King Day – January 21, 2008

New Years – January 1, 2008

2007

Holiday Doodle – December, 2007

Thanksgiving – November 22, 2007

"My Future" UK – November 20, 2007

Veteran's Day – November 11, 2007

Halloween – October 31, 2007

Luciano Pavarotti's Birthday – October 12, 2007

International Sputnik Day – October 4, 2007

Google's 9th Birthday – September 28, 2007

Roald Dahl's Birthday – September 13, 2007

4th of July – July 4, 2007

Father's Day – June 17, 2007

Mother's Day – May 13, 2007

Earth Day – April 22, 2007

Yuri Gagarin – April 12, 2007

Persian New Year – March 21, 2007

St. Patrick's Day – March 17, 2007

Chinese New Year – February 18, 2007

Valentine's Day – February 14, 2007

Martin Luther King Day – January 15, 2007

New Years – January 1, 2007

2006

Holiday Doodle – December, 2006

Edvard Munch's Birthday – December 12, 2006

Thanksgiving – November 23, 2006

Remembrance Day – November 11, 2006

Halloween – October 31, 2006

Canadian Thanksgiving Day – October 9, 2006

Mid-Autumn Festival – October 6, 2006

Harvest Day – October 3, 2006

German Reunification Day – October 3, 2006

Google's 8th Birthday – September, 2006

Rosh Hashana – September 22, 2006

Chinese Teachers Day – September 10, 2006

Google U.S. Government Search – 2006

4th of July – July 4, 2006

Father's Day – June 18, 2006

Football World Cup – June 9, 2006

Sir Arthur Conan Doyle's Birthday – May 22, 2006

Mother's Day – May 14, 2006

Earth Day – April 22, 2006

Joan Miro's Birthday – April 20, 2006

Persian New Year – March 21, 2006

St. Patrick's Day – March 17, 2006

Percival Lowell's Day – March 13, 2006

Winter Olympic Games Doodle, Torino – February, 2006

Chinese New Year – January 29, 2006

Wolfgang Amadeus Mozart's Birthday – January 27, 2006

Martin Luther King Day – January 16, 2006

Louis Braille's Birthday – January 4, 2006

New Years – January 1, 2006

2005

Holiday Doodle – December, 2005

Thanksgiving – November 24, 2005

Halloween – October 31, 2005

Google's 7th Birthday – September, 2005

Lunar Landing Anniversary – July 20, 2005

4th of July – July 4, 2005

Father's Day – June 19, 2005

Frank Lloyd Wright's Birthday – June 8, 2005

Mother's Day – May 8, 2005

National Teacher Day – May 3, 2005

Earth Day – April 22, 2005

Leonardo da Vinci's Birthday – April 15, 2005

National Library Week – April 10, 2005

Vincent van Gogh's Birthday – March 30, 2005

World Water Day – March 22, 2005

Persian New Year – March 20, 2005

St. Patrick's Day – March 17, 2005

International Women's Day – March 8, 2005

Valentine's Day – February 14, 2005

Chinese New Year – February 9, 2005

New Years – January 1, 2005

2004

Holiday Doodle – December, 2004

Thanksgiving – November 25, 2004

U.S. Presidential Election – November 2, 2004

Halloween – October 31, 2004

Space Ship One – October 4, 2004

Google's 6th Birthday – September, 2004

Ray Charles' Birthday – September 23, 2004

Summer Olympic Games Doodle, Athens – August, 2004

4th of July – July 4, 2004

Father's Day – June 20, 2004

James Joyce Bloomsday – June 16, 2004

Venus Transit – June 8, 2004

Mother's Day – May 9, 2004

Earth Day – April 22, 2004

Persian New Year – March 20, 2004

St. Patrick's Day – March 17, 2004

Leap Year – February 29, 2004

Valentine's Day – February 14, 2004

Gaston Julia's Birthday – February 3, 2004

Chinese New Year – January 22, 2004

Spirit on Mars – January 15, 2004

New Years – January 1, 2004

2003

Holiday Doodle – December, 2003

100th Anniversary of Flight – December 17, 2003

Thanksgiving – November 27, 2003

Halloween – October 31, 2003

Google's 5th Birthday – September, 2003

Alfred Hitchcock's Birthday – August 13, 2003

4th of July – July 4, 2003

MC Escher's Birthday – June 16, 2003

Father's Day – June 15, 2003

Mother's Day – May 11, 2003

50th Anniversary of Understanding DNA – April 25, 2003

Earth Day – April 22, 2003

Einstein's Birthday – March 14, 2003

Michelangelo's Birthday – March 6, 2003

Valentine's Day – February 14, 2003

Chinese New Year – February 1, 2003

Martin Luther King Day – January 20, 2003

New Years – January 1, 2003

2002

Holiday Doodle – December, 2002

Thanksgiving – November 28, 2002

Halloween – October 31, 2002

Pablo Picasso's Birthday – October 25, 2002

Google's 4th Birthday – September, 2002

Andy Warhol's Birthday – August 6, 2002

Bastille Day, France – July 14, 2002

4th of July – July 4, 2002

Canada Day – July 1, 2002

La FÃate de la Musique, France – June 21, 2002

Father's Day – June 16, 2002

Dragon Boat Festival, China – June 15, 2002

World Cup – May 31, 2002

Dilbert Google Doodle – May 20, 2002

Mother's Day – May 12, 2002

Children's Day, Japan – May 5, 2002

St. George's Day, UK – April 23, 2002

Earth Day – April 22, 2002

April Fool's Day – April 1, 2002

St. Patrick's Day – March 17, 2002

Piet Mondrian's Birthday – March 7, 2002

Winter Olympic Games Doodle, Salt Lake City – February, 2002

New Years – January 1, 2002

2001

Holiday Doodle – December, 2001

Nobel Prize Centennial Award Ceremony – December 10, 2001

Thanksgiving – November 22, 2001

Claude Monet's Birthday – November 14, 2001

Halloween – October 31, 2001

Korean Liberation Day – August 15, 2001

Swiss National Day – August 1, 2001

Bastille Day – July 14, 2001

4th of July – July 4, 2001

Canada Day – July 1, 2001

Father's Day – June 17, 2001

Mother's Day – May 13, 2001

Earth Day – April 22, 2001

St. Patrick's Day – March 17, 2001

Indian Color Festival – March 9, 2001

Valentine's Day – February 14, 2001

Lunar New Year – January 24, 2001

New Years – January 1, 2001

2000

Holiday – December, 2000

Thanksgiving – November 23, 2000

Japanese Children's Holiday – November 15, 2000

U.S. Presidential Election – November 7, 2000

Halloween – October 31, 2000

Summer Olympic Games Doodle, Sydney – September, 2000

Bastille Day – July 14, 2000

4th of July Doodle – July 4, 2000

Father's Day – June 18, 2000

Mother's Day – May 14, 2000

1st Google Doodle – May, 2000

Easter – April 23, 2000

St. Patrick's Day – March 17, 2000

Valentine's Day – February 14, 2000

Groundhog's Day – February 2, 2000

New Years – January 1, 2000

1999

Holiday – December, 1999

Thanksgiving – November 25, 1999

Halloween – October 31, 1999

1998

Thanksgiving – November 26, 1998

Burning Man Festival – 1998

Google U.S. Government Search – 1998

Google Beta – 1998

What Do You Think?

What do you think is the best Google logo? Did I leave out one of your favorite logos? Please leave a comment, I would love to hear your thoughts!

No related posts.

Present Information and Media in a Recognizable Manner

Provide Text Alternatives – Any images, videos, or non-text based media presented to the user must have a text alternative or accompanying text.

Make Content Adaptable – Today information is spread across a wide spectrum including computers, mobile devices, and so forth. Make sure your content is adaptable to all of these spectrums without losing information or composition.

Make Content Distinguishable – Your content should be recognizable to users and provided in a way that makes it easier for them to see and hear. The best way to accomplish this is by using color (more importantly contrast), size, and other stylizing elements. For any audio, video, or active media make sure to provide controls to start and stop the media.

Present an Operational Interface and Navigation

Use Keyboard Shortcuts – Many users prefer not to use a mouse, in which case they browse the web using their keyboard. Allow your website to fully function from a keyboard and provide shortcuts where possible.

Give Users Time – If you are using any videos or animations on your website that contain text or comprehensible parts give users enough time to read or take in these elements. Moving too fast will frustrate users and in retaliation they will leave your website.

Do Not Use Annoying Media – Anything that blinks, flashes, or may produce anxiety will frustrate users. General rule, anything that blinks or flashes more than 3 times a second can be considered annoying.

Provide Multiple Ways to Navigate – Give users complete control of your website by allowing them to navigate located information and direct where they are at all times. To do so provide users with internal links, titles and headings, breadcrumb navigation, search features, and other navigation components.

Present Information and Media in an Understandable Manner

Use Readable Text – Make your text readable and understandable by using correct grammar and pronunciation. Present your content in a manner that would be understandable to a third grader.

Be Predictable – The layout and design of your website should be consistent throughout and the way information is presented should be predictable by users. The easier it is to access information the better.

Provide Assistance – Help users stay away from any potential errors and fix any mistakes that they may have made. Do so by providing tool tips, automatic spell checking, and providing descriptive error messages when feasible.

Related posts:

1. Designing A Non-Profit Website
2. Website Form Design
3. Home Page Design

On a recent trip to Japan I had the opportunity to analyze Japanese web design and development first hand. I have compiled a gallery of some of the most popular websites in America and matched them up to their Japanese counterparts. Please enjoy!

Adobe

Amazon

AOL

Apple

Ask

AT&T

Blogger

CNN

Dell

Disney

DoubleClick

Expedia

Facebook

Google

Live

Microsoft

MSN

MySpace

NBA

Wikipedia

WordPress

Yahoo

YouTube

A few leading American sites not supported in Japanese:

• Ebay
• Craigslist
• Photobucket
• Flickr
• ESPN
• IMDB

Other Popular Japanese Websites

A few other popular websites in Japan include:

Ameba

BigLobe

Excite

Goo

Gyao

Hatena

Infoseek

Kakaku

LiveDoor

Nico Video

Nifty

Rakuten

Sakura

So-Net

TeaCup

Related posts:

1. Are Meta Tags Important?
2. Detail Page Design

The checkout process has become widely known over the years on the internet and making purchases online is fairly common for most households. With such popularity you would think the checkout process has been nearly perfected, however astonishingly 59% of all users abandon the checkout process. This could be for a number of reasons but the most important being users are not given a clear direction through the process. This leads users to get confused, frustrated, and abandon the process. Ideally an easier, friendlier, and dependable checkout process will do the trick and increase conversions.

Checkout processes are fairly dynamic and span across multiple pages. Making a change to one step may affect another. While designing a checkout process it is important that you take all of the steps into consideration and design the checkout process all the way through, not skipping any steps in-between. A few design suggestions to take into account include:

Acknowledge common checkout process goals.

While the checkout process is most commonly used for the exchange of money for goods or services, it can also be used to accept donations, take membership payments, or to even transfer money into a virtual equivalent. Make sure you know the primary goal and function of your checkout process.

Be aware of, and address, visitor's questions.

When completing a checkout process users need comprehensible direction and answers to any questions that may arise. A few questions to be aware of, and provide answers to, include: "Where do I start?", "How much will shipping cost?", "What payment methods are accepted and are they secure?"

They have a troubled past.

The checkout process has a deep and rigorous past including some elements that are now dampening its future. For example, it used to be helpful to have users create an account when making purchases for order fulfillment. This is no longer true. If using an out of the box checkout process for free make sure that you disable or remove many of these unnecessary features.

They can stop working.

The checkout process is developed within hard code connected to a database. Problems can, and often do, arise. Since the checkout process is vital to the outcome of a website be sure that you have the proper facility in place to monitor the process, ensure that it is working and looking for any potential issues.

They are rarely straightforward.

Sometimes checkout processes will jump from one website to another confusing users along the way. With all of the identity theft and security risk on the internet this will turn away users. If you need to use a separate or third party site for the process that is fine, but do so smoothly and securely.

Follow form fundamentals.

The same design guidelines for forms apply to forms within the check out process. Some of the most important guidelines being: Cut out nonessential fields, center user focus on the form, show tips and help, supply progress or steps guide, and provide users with confidence and security.

Remind users what is in the cart.

Believe it or not many users will forget what they have added to their shopping card and other users just want to double check their items to ensure they choose the correct size, color, etc. Giving users a thumbnail image, clean heading, and small details on the products in the shopping cart will allow them to view what they have selected without having to leave the checkout process.

Place buttons within a hierarchy.

Many out of the box shopping carts will give the same amount of attention to the clear cart button as the check out button, all the while using confusing labels. Keep your buttons organized with descriptive labels, intuitive placement, and intelligible visual design.

Supply progress or steps guide.

Letting users know where they are within the checkout process is vitally important no matter how many steps are involved. Users are at ease when they know where they are, where they are going, and exactly how much longer the process may take.

Omit user registration.

The largest abandonment rate within the checkout process occurs when users are required to create an account or register with a website. If it is necessary for users to create an account to complete the checkout process integrate it within the process itself. This stops you from having to ask users for the same information repeatedly and will decrease your abandonment rate.

Minimize and clarify process.

The fewer fields required completing the checkout process the more conversions you will see. However it only takes one confusing step to throw a wrench in the whole process. Minimize and clarify the checkout process at the same time, ensure only necessary information is being collected and that nothing is being left out or overlooked.

Complete within one page if possible.

The easier the checkout process is to complete the better. If you have the option or possibility to complete the entire checkout process within one page do so as it will boost conversions. Gathering all of the needed information within one page can also be simplified using Ajax, jQuery, and the alike to stylize the process.

Provide users with confidence and security.

As with any form, and even more so with the checkout process, you want to provide users with a strong confidence and security. To accomplish this place a stamp, seal, or icon within the checkout process that verifies all security measures. If possible have this stamp, seal, or icon linked to detailed security information or privacy policy – perhaps in a pop up window if applicable to keep users within the checkout process.

Display shipping and return policy details.

More times than none users want to know what are the shipping and return policy details. Their questions arise as what to do if a product is faulty, broken, or even just the wrong size. Providing shipping and return policy details will ease users and allow them to easily make the desired purchase.

Related posts:

1. Website Form Design
2. 10 Quick E-Commerce Tips
3. Category Page Design

Forms are the biggest areas of abandonment on the internet. Reason being they are boring, ask for too many personal details, and are only a step toward the end. However much of the internet is widely based around forms including everything from login to contact forms and online purchase to social networking comment forms. All in all the more satisfying forms you design and the easier they are for users to complete the better results you will see.

Forms are supposed to be practical and serviceable, not an artistic expression. The main purpose behind designing a form is solving a problem including how to get users to input their information in the easiest way possible. It is not to say that forms should not be pretty, they should. It is all a matter of putting everything together. A few suggestions to follow when putting together a form include:

Acknowledge common form goals.

The main goal for any form is to be filled out and submitted. Different forms will have different specific goals, for example a newsletter subscription form has the primary goal of obtaining marketing information, especially an email address. Be aware of the forms broad and specific goals.

Be aware of, and address, visitor's questions.

While some forms are easier than others to complete, they all provoke questions amongst visitors. Knowing where to start, how long it will take to complete, and if the questions are fair are all questions that will arise. Knowing what questions may be asked allows you to answer them now and allows more users to complete the form.

They can look strenuous.

All too often forms look strenuous and typically not worth the effort. If you are requiring users to input a large amount of information make sure that the end result is worth the effort.

They can get lengthy.

Limit the number of fields within a form as much as possible. For each additional field required a decent percentage of users will abandon the form. Keep forms sleek and omit the nonessential fields.

They are rarely straightforward.

Forms are rarely straightforward and all too often they are spread out across multiple web pages teasing visitors the entire way. You will accomplish the best results if your form can be completed on one page with one submit button, getting straight to the point.

They can stop working.

There are no guarantees that a form will always work correctly. With so many moving parts, all-relying on the other, it is not uncommon for forms to stop working. Keep a close eye on your forms and ensure that they are always working to their full capability.

Center user focus on the form.

The best way to get users to fill out a form is to make it stand out on the page. Doing so will allow users to find the form quickly and thus fill it out quickly as well. For best practice use a light background color for the field so that the text is easy to read, however stylize the form with a border, arrows, field box colors, and so forth.

Implement a well-defined design.

A well-defined and clean layout will make the form easier to understand and subsequently easier to fill out. A few tips on designing around a form include using enough white space, removing anything that will not contribute to the completion of a form, using left-aligned text and fields, and having easy to read content.

Cut out nonessential fields.

A widely known rule states that the more fields you have the less chance of completion you have. As a designer, negotiate with a client to come to a safe number of fields and remove the fields that are unnecessary and irrelevant.

Provide advantages for users.

If a user is filling out a form there needs to be a strong motive behind it, and in general the bigger the form the bigger the motive needs to be. Do not let visitors forget the advantage they are going to receive by completing a form, especially if they happen to get distracted.

Make use of understandable and detailed labels.

Writing understandable and detailed labels is easier said than done. Common fields such as first name, last name, and email are easy however asking users for a username can cause some difficulty. Is this a new username, an alias, or an email address?

Use verbs if practical.

If you are afraid that users may not understand what is being asked of them, consider using an active verb within the label. For example, instead "Password" use a label with an active verb such as "Add a Password".

Use sentences or sentence completion if practical.

When using an active verb is not enough and you need more detail to communicate the question consider using a complete sentence, complete question, or the beginning of a sentence. Examples include: "List your favorite colors.", "What is your name?", "I am currently:"

Show tips and help.

There is no doubt users will have questions when filling out a form and if no one is around to help them it can be a deserted experience. Providing users with tool tips and help icons can be of great use and ultimately allow them to complete the form. Having your tips and advice pop up in new windows or off to the side of a form is not ideal as too much content on a page may confuse visitors. Only show users a tool tip or help box when the users select each individual field or when they ask for it.

Permit approximate or estimated fields.

Some forms may require some detailed information not readily available to the user. This is a huge roadblock and will mostly likely stop any further completion for the user. If an approximate or estimated answer is allowed make this clear to the user.

Answer all possible fields for users.

The faster you can move users through a form the better results you are going to have. Prefilling and answering all of the possible fields for users ahead of time will dramatically speed up the process. If you already know the majority of the users are from the United States this could be as simple as selecting the country for them within the address field.

Supply progress or steps guide.

If a form is going to span across multiple pages, show the progress or steps involved. Doing so allows users to see the end and know that they are not being lead down a long and lonesome road. Research shows that users are more likely to abandon your form when not knowing where the end is.

Provide users with confidence and security.

Viruses, spam, fraud, and theft have spread like wildfire. Users are aware of this and thus are reluctant to give out any of their information, including something as simple as their email address. If possible purchase the VeriSign and TRUSTe stamps for your forms, if not a simple line of text reassuring users that their information is safe and secure may work as well. Users have grown to look for these stamps and icons, having them will only provide them with added confidence and security.

Related posts:

1. Designing A Non-Profit Website
2. Checkout Process Design
3. Universal Website Usability Rules