At their worst, forms are clunky, hard to navigate, and detract from the overall feel of your page.

Helpful tips for creating intuitive and efficient website forms, and how they will help to drive business value?

Taking Cues from Google

Our favorite search engine has seen a lot of algorithm updates over the past few years, all in the name of making it easier for users to find what they’re looking for with ease.

Most recently, Google has attempted to make searching more like speaking to a friend. Users now expect to get what they’re looking for by using everyday language. This has spilled over to web design, and visitors expect a human factor in coding and machine learning.

This led to a rise in natural language user interfaces and natural language forms that aim to get user information in a more human and engaging way. Companies seek to reflect a user’s mental processes rather than the traditional (and stiff) presentation of traditional forms.

Customizable templates and pre-built plugins make this easier than ever. While intuitive forms take much of the grunt work out of form design, best practices still dictate how, when, and where users see forms on your website.

The Best Practices for Form Use

Where and how do we present forms in a way that are most useful to a user (and for your company)? Follow these guidelines:

1. Ask for Required Information Only & Follow a Logical Format

The best forms are not demands for information, but a conversation, as natural language processing illustrates. As with any logical conversation, it should follow communication between your user and your app (or website). Achieve this by:

• Asking questions in sequence, from a user’s perspective. This includes presenting information in a meaningful and logical way (as we would in a conversation). If there is no meaningful order, order options alphabetically.
• When creating a form, ask why you’re asking each question and what you plan to do with the information. This helps eliminate unnecessary questions and increases the likelihood of retaining user attention. Reducing user effort is the most important step in increasing your completion rates.

2. Use a Single-Column Format

Your form should contain the required information only, which should make it short enough to use a single-column format.

Horizontally adjacent fields require a user to scan in a “Z” shape, which slows comprehension and creates user attention lags. The best forms have a clear path to completion – straight down the page.

Credit Card Payment Form designed by Guadalupe Sahagun

3. Minimize Typing Effort

Make every effort to minimize the number of input fields and your user’s required typing effort, particularly on mobile.

Drop down menus, check boxes, and radio buttons not only minimize the amount of effort for your users, it also addresses the amount of errors inherent in typing, especially on mobile.

4. Field Size & Input Data

Take steps to ensure the field size is proportionate to the data you’re requesting. A recent study of eCommerce stores found that 79% of all users abandon their carts at checkout.

One of the reasons? Confusion about field size. The study showed that if a field was too long or too short for the amount of required information, users wondered if they were appropriately completing the form.

This was especially true for Card Verification Code fields. Be sure your information can fit comfortably within the given field – not too big, not too small.

Payment Checkout Form designed by Black Flag Creative

5. Format with Flexibility

Some forms require that data with different correct presentations. For example, a phone number can be 123-456-7890, or (123) 456-7890. Make your formatting accept any presentation of a phone number.

The same goes for birthdays and booking dates (which you could present as a drop-down menu calendar). The goal is to provide as many flexible options as possible for your user’s convenience.

Form Field designed by Lacey Ankenman

6. Optional Versus Required Fields

Ideally, every data input on your form will be required (since you’re only asking for necessary information). If you must include an optional input (an example it might be a building unit or apartment number in an address form), be sure to label it as such.

Red asterisks next to required information are common practice. If you are including optional fields, limit them to one or two.

8. Get Rid of Reset Errors

There used to be a convention for adding reset buttons to forms, but we advise against this practice. Imagine the frustration of completing a form, only to accidently hit reset and lose all your work!

Would you fill out the form again or just close the window? We thought so. Avoid this scenario by leaving the reset button off your form – it does more harm than good.

9. Entice Your Users to Fill Out a Form

One of the keys to getting your users to fill out a form is to make them want to do it. Here are some examples of how your website can entice users to fill out your form:

• Provide a list of user benefits for form completion. This may be a list of benefits, features, or ways you help your customers. It may even be a promo code for a future purchase upon completion.
• Build your brand’s credibility by providing social proof, for example, client testimonials or showcases around your form. This shows that people rely on you to provide an essential product or service. This also helps create a human connection to the brand – include pictures to drive it home.
• Tell users in explicit terms that you value their privacy and they won’t be getting any spam.

Multi Step Form designed by Michael But

10. Create a Compelling CTA

The importance of your call to action cannot be understated, as it’s the first step in the conversion process and will compel users to hit that sign-up button.

Let a user know what you do, why they need you, and what sets you apart – and do it quickly. It sounds like a tall order, but these tips will help:

• Put yourself into your customer’s shoes. Change one word in your CTA content: Take your “You” and turn it into “My.” A recent study found this simple switch increased conversion by 90 percent.
• Be bold. Use color, shapes, fonts, words, and placement that draw a user’s eye and capture their attention. Select a bold and contrasting color that clearly communicates an action to your visitor.
• Consider placing your CTA in the main navigation or footer, so it’s visible across your site.

An Intuitive Form Creates Business Value

HTML Forms that are easy to complete create increased time spent on your webpage and ultimately drive more customers to your product or service.

Draw your users to your form with a compelling CTA and make your form easy to navigate, with natural language. This will entice your users to complete your form, which will lead to more business in the future.

The post Ten Steps to Intuitive Forms in Web Design appeared first on Speckyboy Design Magazine.

Data shows that as of 2023, 6.8 billion people own a smartphone, and that by 2027, that number will rise to 7.7 billion.

These numbers only prove that mobile devices have crossed the border from being a luxury to becoming a basic necessity. If, in the past, our phones were only mere instruments for communication, today, we rely on them when we’re working, entertaining, and shopping.

Optimizing Forms for Mobile Devices

The rise of smartphones, for instance, did not only make shopping easy for consumers. It was also a welcome addition to the already growing online shopping industry.

Over time, not only were business owners busy tending to their brick-and-mortar and/or online stores, they began realizing the importance of mobile devices alongside other channels in reaching their customers.

Forms play a massive part in online shopping, and they have become a staple element in the mobile platform as well. We usually find them when we’re ready to checkout, and the site asks us to provide certain details such as shipping name, address, telephone number, and credit card information.

However, many shoppers find filling in forms tedious, and this can cause the customers’ interest to wane. In addition, online shoppers are usually faced with time pressure and the possibility of an erratic internet connection, and both of these can affect your mobile conversion rate.

Listed below are ten ways you can speed up the performance of your customers’ mobile transactions and make their online shopping experience satisfactory.

1. Include Only the Important Details in Your Forms

If you don’t have the patience to fill a whole web page worth of forms when shopping online, your customers probably feel the same. There’s a difference between answering a full-on membership form and filling in a simple one and buying something from an online store.

Compared to the latter, the former option can be dragging, and you risk losing your customer when they get bored once they find out they have to provide three different phone numbers.

Make mobile shopping convenient by giving your customers a simple yet complete order form. Do this by asking only the important details such as their full name, email address, phone number, shipping details, and credit card information.

You can also include a dropdown menu of the states or countries you deliver to, or better yet, allow your mobile app to ask the customers to use their location. This way, getting their address will be faster and more accurate.

2. Use Top-Aligned Labels & Fields

Smartphones have a limited view compared to computers, so it’s important that you design a form that can maximize this constraint. One way to do this is by using vertical alignment for the fields of your form.

You see when you use a horizontally-aligned form, there is a tendency that not everything will fit in a smartphone’s view, and it’s either the label or the input field that will be compromised. Such a case can be cumbersome to shoppers and can diminish their interest.

On the other hand, if a form’s labels and input fields are arranged vertically, then it will be easier for your customers to view the information being requested and the ones they’re typing in.

This will help them feel secure about the transaction. It will also minimize them missing a field or, even worse, having to do it all over again.

In addition, minimize visual clutter from your forms. Your ‘What Is This’ and ‘Learn More’ buttons can be placed on the mobile version of your site. If you must have it on the form, place it somewhere on the page where it will not distract your customers from shopping.

3. Make Use of Collapsible Menus & Dropdown Lists

Another constraint caused by the limited view of mobile devices is that we have to do a lot of scrolling to see an entire page or fill up a form. While scrolling through screens is normal when using smartphones, many shoppers would prefer a speedy means of buying items online.

Using collapsible menus and dropdown lists can help you reduce the time spent by your customers in accomplishing mobile forms. Instead of making your customers scan until they find their choice in a pool of multiple options, you can group specific items into categories.

Collapsible menus are also useful for tying up the details of several major products that you want to put on a single page. Just remember not to start the details as collapsed.

4. Utilize Appropriate List Selections

In cases where dropdown lists or collapsible menus are not ideal for your mobile forms, you have two other options in open predictive search fields and locked dropped down lists.

An open predictive search field allows your customers to input keywords of the item or service they are looking for and lists the closest possible results. This kind of form is ideal for long searches or for products that do not follow any specific arrangements.

Locked dropdown lists, on the other hand, is ideal for listing specific items in the menu and in following a particular order, say alphabetical or chronological.

5. Opt for Single Input Entities

You’re probably familiar with input fields found in forms both in the desktop and mobile versions of websites. In some cases, these input fields are split into two to three sections, such as names, addresses, and phone numbers.

While this has a valid purpose in desktop versions of sites, it may not be as effective as when used in forms for mobile devices.

More often than not, split input entities require mobile shoppers to tap into all three (or two) fields just to answer one label. If you’re going to do this a lot on one form, your customers might lose interest in proceeding to checkout.

In other cases, split entities can also be ambiguous and may confuse customers. When designing forms for mobile platforms, use simpler fields instead of splitting them.

For instance, instead of putting up two separate fields for a first name and a last name, use one field instead for a full name. This will help your customers accomplish the form faster.

6. Format Your Form’s Buttons

The ‘submit’ button is the final step to online shopping and also happens to be the most important button on your form. As such, you need to make it stand out so that your customers remain engaged until the end of the transaction.

Make the button in your form appealing by making its width about 1/3 of your form and by assigning it a bright color. Also, instead of simply using the words ‘submit’ or ‘send,’ use more energetic calls to action such as ‘Register Now’ or ‘Submit Application.’

However, avoid using colors that are too bright or make your buttons move too much because these may distract your customers from clicking.

You can use a subtle change in color or hover over the button when it’s clicked so that your customers would know that they’re finished with the transaction.

7. Set Scale with Viewport Meta Tag

The view a mobile device can provide customers may compel them to zoom the page, but accidentally doing so may make the shoppers lose focus on the page. You can control this by using a viewport meta tag on your forms.

This will prevent your customers from inadvertently zooming the page or, worse, losing track of the form altogether.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

8. Exploit Data Persistence

Shopping via mobile phones can be daunting for some customers because there are more risks in clicking back to the previous page and reloading until your customer decides to abandon their cart after losing their data.

Mitigate this potential problem by giving your customers the option to open a new tab when they click any link that is not on the form.

Also, in cases where they can’t go back to previous pages, give them warning signs such as ‘Agree,’ ‘OK,’ or ‘Cancel.’ By doing this, you’ll be able to tell your customers whether the data was stored in your site or the browser and help them decide to proceed to checkout.

9. Help customers track their progress

Not all shoppers are keen on filling out forms. It would help if you could provide them with a way to tell how close they are to being done.

You can do this by showing a progress bar on top of the form and determining which step they are – say, by percentage or just a simple chronology. Keep in mind to limit the steps as much as you possibly can to save your customers time.

10. Make the Form Load Fast

Another factor you shouldn’t forget is the rate your mobile form loads. If the page takes a while to complete, your customer might not convert. The fact that your customers have reached the form tells you that they’re ready to buy.

Don’t disappoint them with slow-loading pages. The speed of your forms will also rely on the elements you put on the page, so be wary of big images.

As Always, Test Across Systems And Setups

These days, the variety of mobile devices and their interfaces can make tailoring your forms for each one a bit tough.

As such, make sure that you conduct tests of your forms on different types of mobile devices and take into account operating systems, sizes, and browsers. Through testing, you’ll be able to cover each base and make sure that your form works on every available device.

The post 10 Methods for Optimizing Your Forms for Mobile appeared first on Speckyboy Design Magazine.

When you shop online, there’s very little effort involved in anything you do, including abandoning your cart. Simply close the tab, and that’s it. When you’re on the other side of the cart, however, it means that all that effort and time you spent to get them to that point is flushed down the drain.

Some Shocking Statistics

The fact is shopping cart abandonment is the most difficult roadblock for online retailers to get past. According to the digital marketing platform Listrak, an average of 81% of shopping carts are abandoned. Others report the number as 73% for desktop users, on tablet 80%, and 85% on mobile.

This article reports that 68% of all eCommerce sales were via a mobile device, which means that the percentage would be even higher if more mobile users actually went all the way to checkout.

Think about those numbers for a second. At best, it means that for almost every seven people out of ten that shop on your online store do not go through with the purchase. It’s enough to make you weep, isn’t it?

Of course, that is the average, which means there are retailers that get much better results than others do, and your goal is to be on the winning team. To do that, you should learn from the mistakes of others before you also become part of a sad statistic.

These proven tactics can help you avoid shopping cart abandonment on your eCommerce site as much as possible,

Use Familiar Trust Signals in Your Transaction Form

Remember that song “Trust In Me” from the Jungle Book, where the treacherous python Kaa tries to lure Mowgli into his coils? That is essentially what you are doing with a transaction form without familiar trust signals. You’re telling your buyers to trust you blindly with sensitive personal and financial information.

That’s fine if they do, but unfortunately for you, 61% of shoppers say they will abandon their cart because there were no security logos, and 75% will do the same because they didn’t recognize the trust signal you put on your trust form. Surrender to the inevitable; place a recognizable security logo on your transaction form.

Be Upfront About Added Costs

Your promotion or sales pitch was successful, and you get your shoppers to click on the ‘Buy Now’ button. Lo and behold, you hit them with shipping costs and other fees, and they abandon the cart. A whopping 44% will not go through with a purchase when they perceive the shipping and handling costs to be too high.

More importantly, unexpected shipping costs at checkout is the number one reason for shopping cart abandonment. Shoppers don’t like nasty surprises.

If you can’t afford free shipping, then at least be upfront about it. Let your customers know how much they should expect to pay before they add the item to the cart. If they add it to the cart anyway, they are less likely to abandon it.

Go for Free Shipping

According to a report from UPS, 38% of shoppers state that they have purchased from a site because of a shipping offer, and 39% are willing to purchase enough to qualify for free shipping.

It is obvious that going for free shipping for your eCommerce site is a great way to get people to go complete the checkout process, so it is worth considering.

If you will incur considerable costs to offer free shipping, crunch the numbers so that your customers will buy enough to make it worth your while. It works for Amazon, why not you?

Have a Retargeting Strategy

While your goal is to have 0% shopping cart abandonment, that just isn’t going to happen. There will always be people that will abandon their carts even if you do everything right.

The good news is about 72% of people that abandon their carts have some intention of coming back. Your best reaction is to retarget those customers by sending them an email reminding them that they haven’t completed their purchase and maybe offering them a freebie or other incentive.

Have a Cart Icon Visible at All Times

Sometimes, people abandon their carts because they were distracted by a burning smell in the kitchen or they had to go to a meeting.

It is important to remind them about it the next time they visit your site by having a cart icon clearly visible that displays the number of unbought items, or they’ll simply forget.

Make It Easy for Them to Buy More

Shopping navigation has to be a seamless experience to encourage people to buy more. If they click on a product, which brings them to the cart, you should have buttons on that window that allows them to “Continue Shopping” or “Proceed to Checkout.”

If you make it hard for them to get back to the product pages, you might frustrate them, leading to just the one purchase, or worse, cart abandonment.

Offer Several Payment Options

Online shopping is convenient in many ways, but it has its downside. One of them is the availability of the preferred payment method. Some people prefer PayPal or similar, others want to pay with a credit card, while still others prefer mobile payment systems like Apple Pay.

If you don’t offer the payment option they want, they will go elsewhere. Sure, it’s a hassle, but you want their money, so make an effort to give them what they want. Have as many payment options as you can manage to capture more sales.

Accommodate Guests

Registering an account to buy a $2 item is a pain, and most people simply won’t bother. Don’t force your buyers to create an account to buy. You can make account creation optional, so it is easy for them to make a purchase anonymously through a guest checkout.

Maybe later on, when they are regular customers, they won’t mind doing so, especially if you offer them an incentive to do so, such as a discount code for their next purchase.

Streamline the Checkout Process

If you are playing an online game, going through several stages to get to the Big Boss is a good idea. Not so much when you’re trying to sell something. For that, you want the checkout process to be ridiculously fast and effortless.

Reduce the number of pages your customer has to go through to get to the checkout to as few as possible. Remember that each click they have to make increases the chances of abandonment, so keep the count low.

Activate Exit Pop-up Reminders

You’ve probably seen these several times when you’re about to leave a site. A window pops up that asks you if you’re sure you want to leave the page.

On eCommerce sites, these pop-up windows usually come with some incentive for you to keep on browsing, such as a reminder that you still have items in your cart or a discount offer for concluding the purchase. It is very effective, and easy to implement

Offer Them Their Money Back

Finally, convince the fence-sitters to take the plunge by offering them a no-questions-asked money back guarantee. It reassures the customer that if they change their mind later on, or they’re not satisfied with the product or service, they don’t risk anything by giving it a try now.

It also makes them trust your site more, because you stand by your product or service.

Don’t be under any illusions; you will still have some cart abandonment on your site. However, if you follow the foregoing suggestions, you reduce the risk considerably. Any decrease in your cart abandonment is well worth the effort in the long run.

The post Proven Tactics to Avoiding Shopping Cart Abandonment appeared first on Speckyboy Design Magazine.

Here are 10 free tools you can use to make your forms the best they can be:

formbase

formbase is a package that uses CSS/SASS to bring improved default styles to your form elements. The styles are cross-browser compatible and make for a better UX.

Foxholder

Foxholder is a collection of 15 different placeholder animations to enhance your forms. When users interact with an input, an animation is triggered. It’s a neat way of ensuring that users will know exactly where they are on your form.

dirrty

dirrty is a jQuery plugin that can detect whenever a form field has been modified. When a change is detected, the user will be prompted to save changes to the form.

Inputmask

Make form input data like dates, phone numbers and currencies super easy for users with Inputmask. When a user interacts with a defined input, a mask is placed in the field showing the exact formatting required. Not only does it show users the required format, but it also ensures that the input data is valid.

jQuery Validation Plugin

The jQuery Validation Plugin is a highly-customizable tool to help with validating form data. Out of the box, it supports both URL and email validation. It even comes with an API to allow developers to add their own spin.

If you’re looking for more jQuery validation libraries, take a look at this collection.

dependsOn

Field dependencies are great for tasks like making sure that the user only sees the relevant fields and can also be a means of validation. dependsOn is a jQuery plugin that will allow you to add dependencies to any form.

Choices.js

Using Choices.js, you can add some very attractive select box and text input features into your forms. This lightweight, vanilla JavaScript lets you create your own custom input templates.

Cascading Drop-Down Menu

Cascading Drop-Down Menu is a great solution for times when you need a form that requires the user to select several steps. For example, think of choosing a car. You’d select the make, then the model, then the year, and so on.

Multipicker

Multipicker provides a visually-appealing way for users to select multiple items (similar to a checkbox) or a single item (similar to a radio button) in a list. It can be used with those aforementioned form elements or even HTML elements like an unordered list.

jQuery Form Plugin

Upgrade your standard HTML forms to use AJAX with the jQuery Form Plugin. The plugin features lots of options to allow you to take full control over how form data is submitted.

Great Forms = Great UX

The combination of a form that looks great, is easy to use and assists the user in entering data is one that results in a better conversion rate. Adding one or more of the tools above into your workflow can help bring your forms up to snuff.

The post 10 JavaScript & CSS Frameworks for Enhancing HTML Forms appeared first on Speckyboy Design Magazine.

That being said, getting these vaccines into the arms of everyday people has been a challenge. That’s especially true here in the United States, where each state has its own rollout strategy. Some have been more effective than others.

Nevertheless, much of the burden for distributing the vaccine has been placed upon online scheduling apps. Health clinics and pharmacies have put these systems in place, allowing people to snap up any available appointments.

As someone who has been on the hunt for an appointment, I’ve used several different types of these schedulers. What I’ve found has been a messy and evolving array of experiences. Here’s a closer look at the ups, downs and frustrations involved. And, just as importantly, the lessons they can teach designers.

Last-Minute Solutions for a Difficult Situation

First, I’d like to note that the purpose of this post is to point out what’s happened and what needs to improve. It’s not meant as a slight to individual companies, designers or developers.

Collectively, they were put into a difficult situation. The process for putting together online scheduling apps fell into the lap of many a vaccine distributor. For some, they had to build an app that was usable within a very short period of time.

It seems fairly easy to pick out the distributors who already had some form of online scheduling in place before the pandemic. They tend to have a more polished UI and a higher level of intuitiveness.

The rest of the pack? Well, they’ve struggled to put forth systems that are both stable and easy to use. For those of us trying to get vaccinated, this has made the process even more difficult.

Reinventing the Wheel: Times a Million

Appointment booking and other online scheduling software has been around for quite some time. But one can imagine the challenge of getting these packages to co-exist with more traditional offline schedulers – something I’m certain a lot of vaccine distributors have faced. And to do so within days or weeks? That can’t be easy.

The results have been literally all over the map. My home state of Pennsylvania has put together a slick interactive feature that allows you to zoom in on your town and find all available vaccine locations. This is the easy part.

But once you click on a respective provider’s URL, the chaos begins. Here are a few examples of what I found:

Click on a Day and Wait

Among the more infuriating schedulers out there, this one requires you to click on each day within a calendar. It takes anywhere from about 2-10 seconds to let you know if there are any available appointments on that particular day. Thus, you’ll spend a lot of time clicking around and hoping for a good result.

A small tweak that could have a positive impact would be blocking out days that have no availability. This would save users a lot of time, while saving server resources as well.

A Form of False Hope

One of the big pharmacy chains in this area really broke my heart. Initially, their scheduler asked for some basic contact and medical information – fair enough. From there, you select a store location and move on to a calendar.

This one looked just beautiful, with highlighted days and a listing of available appointment times. But this vaccine oasis turned out to be a mirage.

After selecting an available day and time, I was asked to provide even more medical detail. OK, I’m hurrying! Next, all you have to do is verify that your info is correct and book your appointment. Yay, I’m almost there!

The bad news? After submitting the appointment, you get a message explaining that the time slot has already been booked. I repeated this countless times over a period of several days. Returning later often showed the exact same open times – and again a failure to book.

Thankfully, they’ve since streamlined the process. The calendar is skipped completely if appointments are not available. It’s a much more user-friendly experience.

Are We There Yet?

Another somewhat humorous example shows why loading animations can be so important. Here, a scheduler asks for your postal code so that it can determine if a location near you has the vaccine.

You type it in, submit the form and…crickets. The screen isn’t refreshing – did I not hit the button? I don’t see any sort of loading graphic – maybe the system isn’t working today?

Eventually, you do get a result. But there is absolutely no way a user can tell that the query is being run. I can imagine that some people may have up and left before even seeing what the search had to say.

How Design Impacts Lives

One of the key takeaways from this is experience is how important design is for achieving a desired result. It is also a prime example of why a coherent strategy is vital to the success of a project.

When this is lacking, we make it harder for users to get what they need. This is bad enough on an ordinary eCommerce website – but the impact it has on getting millions of people signed up for a crucial vaccine is potentially massive.

Just imagine someone who is so frustrated by an online scheduling app that they give up on getting vaccinated altogether. Or even a provider who has supplies that are quickly becoming outdated because people aren’t signing up. It would be a waste of very precious time and resources.

Thankfully, there are some positive signs on the horizon. I’ve seen some changes in various schedulers that improve the user experience. And as more feedback comes in, further improvements can be made.

In many ways, the world was caught flat-footed when the pandemic first struck. Time and again, designers have had to react with quick solutions.

We can’t change the mistakes that have already happened. But this experience can provide valuable lessons for the future. Hopefully, that means a smoother, more intuitive process for all.

The post What COVID-19 Vaccine Scheduling Can Teach Designers appeared first on Speckyboy Design Magazine.

Well, it’s quite easy with A/B Testing, which is a fairly straightforward process. You perform A/B testing by creating two versions of your form (one being the original as a control) and splitting your visitors equally between them. When your forms reach a statistically confident number of conversions, you then pick the winner. The winner will be the control form for the next test, and you can continue this process indefinitely.

Doubtless, there are always the best practices of web form design to fall back on in order to maximize effectiveness. Still, in order to help you in your process, I’d like to share a comprehensive list on what to test in your online forms, from the most general to the most specific. Let’s check them out.

Design

Layout

A decluttered page is a proven method of focusing attention. There are multiple layouts available for use in web forms (such as 1, 2, 3 or 4 columns.) More columns will cause frustration, and it’s also best to keep your form down to one for your mobile visitors’ convenience.

Label Alignments

There are 4 possible alignments to give your field labels: top, right, left, and inline. When testing alignments, keep in mind the language that your visitors speak, as well as the width and height of your form. Be extra careful when using inline labels.

Colors

This is really tricky. To best test your colors, you should be familiar with some basic aesthetic principles, such as contrasting and complementary colors, etc. Although you may like the color red, that doesn’t mean your visitors will. By testing colors, you can make your form grab their attention without being too extreme or gaudy.

Image Source: Site Para Empresas

Fonts

This seems like an obvious thing. “Use web safe fonts when unsure.” You should also keep in mind that font sizes should also be tested within certain age groups, like those in the range 65+.

Image Source: isotipo.net

Content

Headline

The headline quickly describes what your form is all about. Your form’s goal can be to collect leads, however, you shouldn’t just put something like “Sign Up”. The visitor needs to know what he or she stands to gain by signing up! For example, which of these will have the highest conversion rate?

1. “Sign Up Form”
2. “Free E-Book”
3. “Sign Up & Get Free E-Book”

Length

The most important trait of a good web form is that it is absolutely no longer than it needs to be. Experiment with removing unnecessary or intrusive questions. Is your site the kind of site that needs to ask a home address? Could shortening your form result in more cooperation?

Image Source: VisualLizard

Submit Button

Your form’s final step should be tested carefully. Does making the “Submit” button bigger/smaller or a different color change your results? What should the text read to get your users excited about sharing their input? Use text that’ll contribute to defining your form’s purpose to the user. If you’re giving away a free e-book, for example, try having the submit button read “Get Free E-Book.”

Image Source: JotForm

Hints, Tips, & Sub-Labels

Does guiding your user through the process help? If you have labels already, you could also test what happens when you remove them or modify them. In the same vein, do hint boxes beside form items help or hurt?

Captcha

Nobody likes captchas except a form’s creator. I know you don’t want to get spam or waste your submission limit, but it’s important that you test the form without one. That way,you can see if you really do get any spam (i.e. is the captcha necessary?) and whether or not omitting it improves your conversion rates.

Image Source: Captcha.net

Context

Relevancy

This of course is obvious, you should put specific forms on their relevant pages. A “Contact Us” form should be on a Contact page. Different types of forms can be used on different parts of your site.

Dynamic vs. Static

You can test having your forms pop up when visitors complete a certain action on your site against placing it in a static location on your page.

Some A/B testing tools you can use for your forms

There are a variety of online tools available to facilitate A/B testing and each have instructions on their respective sites about how to start testing your forms. Some of the sites on this list offer their services for free, while others require you to pay.

• Google Analytics Content Experiments
• Visual Website Optimizer
• Experiment.ly
• Optimizely
• Unbounce
• XanderMarketing
• ABTasty
• Convert

Wrapping it Up

Testing is a cumbersome process for each web element and when it comes to online forms, it deserves more attention due to its position as the backbone of user generated data. By testing the form elements above with the help of A/B testing services, you can improve the conversion rates dramatically and get one step closer to perfecting your web forms.

The post Are Your Forms Converting? How to Effectively A/B Test Your Forms appeared first on Speckyboy Design Magazine.

So what makes a web form visually appealing and easy to fill in? There is no direct answer, but a set of best practices that leads to it. The following form making steps are inspired from the advices of Luke Wroblewski, and other authoritative sources of knowledge upon web form usability.

1. Research, target and organize

There are three main phases of form implementation that should be carefully crafted – form design, on page placement and post-submission behavior. Before actually shaping the form, you should do a little documentation over the tools you are going to use, the public you address and the platform you build the form on. If you use a predefined template for your CMS that provides forms too, it’s a fair chance that they would be too generic; for extended flexibility and customizing options, consider a method to build forms yourself or use a dedicated app.

It’s important to choose the exact type of web form you need: contact form, registration form, order form, survey or others. Its purpose will then tell you how to structure the form and which fields to include. Also, make sure your form title matches its scope. Technology limitations on the user’s end are another thing to consider. If the form is to be accessed frequently from mobile devices, use a design that supports mobile displaying and avoid fields that could be difficult to manipulate, such as dropdown lists.

2. Make it pass the blink test

It’s 8 to 10 seconds that a visitor scans the webpage before making their decision to stay or leave – in other words, the time it takes before the first blink of an eye. The design and text of your form should make a friendly welcome to any viewer and focus his or her attention to the fields that call to be filled in.

Make good use of space, but don’t clutter the form – don’t be afraid of leaving blanks, as they let the form “breathe” and it will look as if requires less effort when filled in.

Avoid using the traditional grey-cream color code for your form, but make it match the look and feel of the overall webpage. Most times, it’s best to keep all elements “above the fold”, so that the entire form can be visualized from one glance, without scrolling. This greatly influences users’ decision whether to fill in the fields or not.

The quickest people realize what’s in there for them, the greatest chance for the form to be submitted; therefore you should make it clear what they will achieve by taking time to fill in the fields – an incentive, a problem being solved, the opportunity to make their voice heard. Include some details over this outcome in the form heading or at its side on the page.

Always remember to A/B test your form!

3. Match the natural attention flow

Two main principles of web design say: “don’t squander users’ patience” and “use conventions that follow users’ expectations”. The layout of your form should do the same. All form elements have to convey the KISS rule: fields, labels, actions, input fields, help and instructions, system messages, form validation, security.

It’s a good idea to establish your set of conventions from the start and not give them up as you go. For example, if you choose to align labels above the field (which slows down reading but makes users focus upon their content), keep this procedure in the entire form. It’s most common for error messages to be highlighted in warning colors (red, orange), so don’t use green for them.

To require less effort, get users to choose, not type – so radio buttons, likert scales and checkboxes should replace text boxes wherever possible. Always provide guidance in filling in the fields. Write labels in a friendly and brief manner; if additional details are needed include instructions below the field. Field validation should be easy to understand for users – e.g. for phone numbers make it obvious what is the exact format expected, so people won’t have to go through an error message then return and correct the possibly mistaken input.

Every once in a while, eyes move away from the particular spot in order to get the general picture, so make it easy to see the progress – if your form is longer, split it into pages and display a progress bar in the header or footer. Content should be divided into meaningful sections, for the same reason. Generally, a one-column layout is preferable for shorter forms; if you need to include two, make sure users won’t be tempted to ignore it visually.

4. Place the form somewhere easy to get to

Once your form is ready, it should be placed on the page in a manner that attracts attention. The best fill-in rates are obtained with forms that are embedded on the page, not linked to. This option also has the advantage of keeping the user on the spot. For contact forms and get-quote forms, it’s common to create a special website tab that can be placed in the header, footer or sidebar (the most visible of all spots).

5. Prevent spam but don’t inhibit users

The most common security option used in forms is CAPTCHA – an image composed of distorted alphanumeric characters that can only be deciphered by humans, excluding bots. This is a good method to keep spam away, but make sure the characters are not too hard to read, otherwise you will hinder legitimate users that could abandon the form.

The best alternative is smart CAPTCHA that only shows up if there is a sign of abuse over the form. There are, of course, other security options too that you could include in your forms: limitation of submissions per IP, country filter, or password protected forms for internal company use.

6. Form behavior after being submitted – get the most out of it

Your communication with users doesn’t end once they hit the Submit button. It’s always a good idea to show your courtesy by sending them a confirmation message such as “Your message has been sent, thank you for filling in our form!” You can also redirect him to a certain webpage that may load automatically upon submission.

After submission, the form can either interact with a database or/and send a notification email to the administrator to signal that the form has been filled in. Generating database entries that will be populated with submitted information is especially useful if you need to view it as a table or export it for further manipulation.

Businesses can integrate form submissions into their sales and marketing workflow with the help of dedicated applications. This can be achieved by setting the form to communicate with a third party application through an API key that allows importing data automatically into the structure of the respective application. The form data can then be used within CRMs, mass email systems and so on – such as Sales Force, MailChimp or AWeber.

Usually it’s the contact data being imported from forms to third party apps, for further use within the system, but this is not restrictive – for your form’s post submission behavior, the sky’s the limit!

The post Building Forms That Convert – 6 Things to Keep in Mind appeared first on Speckyboy Design Magazine.

I’ve included a few examples and tips below on building usable design forms. Best practices for signup forms have changed dramatically over the past few years. With the help of 3rd party technologies it’s much easier to get your company up and running. Especially if you include a newsletter or e-mail signup list on the same form!

I’ve also included a couple great examples to take a look at. The principles of design are one thing, but understanding and envisioning your own signup forms will open another realm of possibilities.

Big, Bold Typography

On any signup page your goal is to keep visitor’s attention span for longer than a few seconds. Ultimately you’d like to persuade some user interaction out of them, but it’s unrealistic to expect a 100% signup rate.

By showcasing your website’s logo and message in bold type it’s hard for visitors to miss. This technique can be found on many great apps and launches coming up. A new photographer’s marketplace shutter.me offers an elegant solution to one large signup form. This generally increases overall participation because there isn’t very much work required from the user’s standpoint.

Another great example is newly launched Milk, Inc. – a new incubator for mobile companies. It was founded early 2011 from ex-Digg CEO Kevin Rose and designer Daniel Burka. Their Milk landing page features a brilliant logo design and some external social media links.

The only signup form again points towards simply your e-mail address. The form is elegant and not too harsh on the eyes. I really enjoy their use of typography and fancy lettering with borders. It gives you that old fashioned milkman feeling of nostalgia, another properly induced emotion to attract higher signup rates.

You’re also utilizing a lot more space stemming from large page content. When users are entering their signup data it is much easier for them to point out mistakes and see what they’re doing in real-time. And for those who believe the big text seems over-sized and goofy, they’re meant to feel small and out of focus in comparison. It really imprints your brand as an important and dominant image!

Empowering Bright Colors and Graphics

The eyes are a powerful tool which are constantly on alert for new information. Once a visitor lands on your page they’ve commonly made up their mind about registration within the first few seconds. If you have a cluttered form with countless fields to fill in, you may well lose out on new registrations.

We can learn a lot from these lessons by keeping this minimal. The Sweet Twitter App for Mac has a beautiful landing page. Featured links connect out to the official Twitter page and give you a bit of information about their plans.

You only need provide a name and e-mail address to continue. A Twitter handle box is added for those Twitter users who are looking for more frequent updates. However it’s not a required field, which is important to consider when designing web forms. Many users won’t be interested in offering this information even if they do have a Twitter account. But it never hurts to leave the options open.

Reorganize the Signup Process

Another adorable app HOW-R-U features some amazing vector artwork. Their signup form is just a standard e-mail box with some alternate links onto their site. After signing up you’re led back to the home page to confirm your address and new account.

Once you’ve validated then you’re brought to another screen for entering in any further information. This is a brilliant technique as it gives the user an option to fill out as much profile information as they’d like. But it keeps the original signup form easy to use and slowly leads the user along a perfected UX pathway.

There isn’t even a password requirement, which is very out of the norm. This must help with database storage since many accounts will build up over time. However you can’t guarantee how many users will verify and continue using the web app. Thus users can set their password after validation and going through the necessary signup steps.

Depending on your target audience and website niche, this may benefit or hinder your signup process. Try some basic A/B split testing techniques on your audience and record the results. This will give you some insight on how to appropriately plan your signup form.

Make Life Easier

Most visitors are spending time online to relax and unwind. They are often eager to try new services, but not if it requires passing a generalized comfort zone. This is why it’s so important to reel your visitors into your signup form and ease the process on them.

Make sure nothing is confusing and you have earned their trust. The Tumblr signup screen is a magnificent example of what I mean. They include a few screenshot examples for how Tumblr works and what your account will look like. If you access the main page without logging in you’ll be shown both a signup and registration form.

This performs great with most visitors since it saves loading time and effort. But if visitors were to get confused they may just leave the site in frustration. Although it seems self-explanatory by the submission buttons, there aren’t any headers of separation between either of the forms. Granted their layout is very new-age focused, and I really like their CSS3 effects throughout each page.

Additionally the Vimeo signup form is widely regarded and praised amongst designers. It features brilliant vector artwork and animations beyond any website I’ve seen. They only require 3 fields as a name, e-mail address, and password. The process is brief and actually a bit fulfilling towards the end!

Signup Form Design Gallery

Below I’ve included a small collection of signup forms in a gallery style. These are just some of the many countless examples to be found throughout the web.

If you have similar ideas for signup form collections please let us know. Offer any links in the discussion area below, and we can catalog a small collection of inspirational signup forms to share with the design community.

TinyBas

GetFlow App

Soundz.fm

bigcartel

footytube

Kontain

Glitch

Gowalla

Twitter Chirp Conference

Destiny Islands

Nation Toys

Spreads App

acosmin

acosmin

SmugMug

MobileMe

Netvibes

Aviary

brightkite

Storenvy

Dropbox

LaterThis

Ping.fm

The post Signup Form Usability & Design Best Practices appeared first on Speckyboy Design Magazine.