UX Movement » Forms http://uxmovement.com User Experience Movement Sun, 14 Jan 2018 02:59:05 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.19 Why the Email Confirmation Field Must Diehttp://uxmovement.com/forms/why-the-email-confirmation-field-must-die/ http://uxmovement.com/forms/why-the-email-confirmation-field-must-die/#comments Tue, 03 Oct 2017 15:20:32 +0000 http://uxmovement.com/?p=10488

]]>
The email address is one of the most corrected form fields. It’s easy to mistype because the input contains a long string of various characters. This can lead to users submitting an incorrect email address.

The Email Confirmation Problem

Designers believe they can prevent this by adding an email confirmation field. This may prevent some incorrect submissions, but not all, and at a cost.

email-confirmation-field

Many users tend to copy and paste their email field input into the confirmation field. This defeats the purpose of the confirmation field because users can end up pasting an incorrect email. The confirmation field does nothing to prevent them from mistyping their email.

One research study discovered that “60% of the test subjects consistently copy/pasted their e-mail when they retyped it in a confirmation field”. Users copy and paste their email often because retyping it is too much work. The users also didn’t believe that they would mistype their email but were surprised when they did.

The email confirmation field does not solve the incorrect submission problem. Not only that, but it forces users to do more work than they’d rather do. Users can end up making typing errors in both fields. This will cause them to spend more time correcting their input which can frustrate them.

Redesigning the Email Field

If you want to increase correct email submissions, you need to redesign your email field. You’ll need to change your email field’s placement, sizing and labeling.

Place the Email Field First

Filling out forms is a mundane task. Users tend to rush through them because they want to move on to their next task. But when users rush they’re more likely to make typing errors.

Placing the email field first can prevent this. This is because it’s the start of the form and they don’t feel the need to rush. Placing the email field in the middle or at the end of your form is not ideal because that’s when users get tired of typing and are most eager to finish.

email-field-first

Increase the Size of the Field Input

The email field is the most mistyped field on sign up forms. One study illustrates this in their data table at the bottom. It’s important to increase the size of the email field to help users notice their typing errors.

Many forms use too small of a font size for their email field input. If users make a typing error, it’s harder to notice. When the font size of your field input is larger, users are able to identify specific characters easier. This will help them spot typing errors at a glance when they check their input.

You can make your email field larger than the others but that may give your fields inconsistent styling. Instead, you should make the email field expand when the user selects it. The font size of the input should also appear larger. When the user unselects the email field it should return to its normal size.

Here’s an example of what this looks like.

email-field-input

Emphasize Input Accuracy in the Field Label

Most designers label their email field “Email”. While this is short and straightforward, it doesn’t emphasize the importance of input accuracy. If you want users to double check their input, your field label should stress that.

A field label such as “Email (make sure it’s correct)” reminds users to check their input after they type it. This is important to emphasize because most users don’t believe they’ll mistype their email, so they don’t bother checking their input.

email-field-label

All You Need Is Clarity

Not all form data have the same level of complexity. The email field deserves special treatment because its input is more complex than other fields. It contains alphanumeric characters and symbols that make it easier to mistype.

It’s time to take a new approach on how you design the email field. The solution is not another field to fill out, but to give clarity to the existing field. Prominent placement, larger input size and a specific label are what you need. Make this change and kill the email confirmation field once and for all.

___

Please visit our monthly sponsor


]]>
http://uxmovement.com/forms/why-the-email-confirmation-field-must-die/feed/ 19
Why Your Form Only Needs One Name Fieldhttp://uxmovement.com/forms/why-your-form-only-needs-one-name-field/ http://uxmovement.com/forms/why-your-form-only-needs-one-name-field/#comments Tue, 14 Feb 2017 13:34:37 +0000 http://uxmovement.com/?p=10134

]]>
Does your form have two separate fields for first name and last name? If it does, you are making it harder for users to fill out your form. But there’s a better way.

Split Name Fields Cause Problems

Not every user has a first and last name. Their cultural background determines how their name is formed. For example, if you’re from Latin America, chances are that you have two last names, one from each parent. If you’re Chinese, your family name is first, personal name is last, and they’re always used together.

Requiring every user to type their name into two separate fields is an impossible task. Some users will be able to do it, but others won’t know how to split their name into first and last. These users will get confused, leave a name field blank and won’t be able to submit the form.

Single “Full Name” Field

A single field labeled “Full Name” is more culturally inclusive. Full name may include first, middle, last, family and other given names. It allows users to type in their name without splitting them into first and last. This makes it usable for every user no matter what culture they come from.

name-field-comparison

Preferred Name Field

Sometimes you may want to parse the user’s full name so that you can address them appropriately on your interface. Since the full name field doesn’t parse their first name, you can give users a “What should we call you?” field. This allows you to address them the way they prefer without having to identify a first name.

Database Name Search

Full name fields can make it easy or hard for you to search for users in your database. It can make it easy because a full name is a unique parameter, a first or last name alone isn’t. There are many people who have the same last name and many more who have the same first name. Searching by first or last name alone would return too many results to sift through.

It might make it hard if the user has a long full name that’s hard to pronounce or spell. It’s not efficient to spend too much time figuring that out. An alternative to searching by full name is to search by their email address. An email address is unique and may sometimes be simpler than the user’s full name.

Cultural Inclusivity for Usability

The structure of a name is not the same across cultures. Users who visit your site will consist of a broad range of people from different countries. Your name field should be culturally inclusive so that no one struggles to fill out your form. With most things in life two is better than one. But when it comes to name fields one is better than two.


]]>
http://uxmovement.com/forms/why-your-form-only-needs-one-name-field/feed/ 17
The Conversion Rate Illusion of Modal Newsletter Formshttp://uxmovement.com/forms/the-conversion-rate-illusion-of-modal-newsletter-forms/ http://uxmovement.com/forms/the-conversion-rate-illusion-of-modal-newsletter-forms/#comments Tue, 10 Jan 2017 21:32:43 +0000 http://uxmovement.com/?p=10086

]]>
Ever visit a site and had a modal window newsletter form pop up in your face? Of course you have, they’re all over the web today. There’s a reason why many sites use them. But there are reasons why many sites should reconsider.

Guaranteed High Conversion Rate

Many sites use modal newsletter forms because they guarantee a high conversion rate. This is because every user that visits the site has to interact with the modal before they can enter. The more people that interact with it the more emails you’ll get.

A high number of email subscribers entices most sites. This leads them to implement a modal newsletter form without a second thought. But they’re fooled by this grand illusion because not all emails they get are equal.

The Conversion Rate Illusion

Everybody gets excited over a high number of newsletter subscribers. But they fail to look at whether those subscribers are real or fake. Chances are you’ll have a lot of fake emails if you’re forcing a modal on your users.

fake-email-modal-window

This is because some users (usually older) believe that an email is required to enter the site. And some users don’t want to search for the close button so they’ll type in a fake email instead.

Either way, you will have a portion of users who will enter a fake email to dismiss the modal. Those users will never receive your email newsletter. This is why you can’t trust the accuracy of your subscriber count. Nor can you use that to validate your modal newsletter form.

Engagement Loss

You may think a few fake emails aren’t that bad. But modal newsletter forms also affect user engagement. One site experienced a higher bounce rate and a decrease in visit duration and pages visited.

While the conversion rate soared to 40%, the bounce rate increased by 9%, average visitor duration declined by 10% and pages per visit decreased by 9%.

Engagement numbers have more impact than subscriber numbers because they affect the entire site. When you lose users at your modal, you cut short their chance to experience your content.

engagement-loss

They could have enjoyed your content or bought a product had they spent more time on your site. But all that is lost when users abandon your site at the sight of your modal.

Some users have such aversion to modals that they’ll send you complaints and hate mail. That’s what one site experienced that led them to take theirs down.

Slows Down Task Completion Time

Most users have a task in mind when they visit a site. A modal newsletter form popping up can interrupt and distract them from their task. They have to process the modal, look for the close button and click it before they can resume their task. This adds unnecessary seconds to their task completion time.

slows-down-task

Modal newsletter forms are so disruptive that Google has decided to penalize sites that use them. The reason is because they get in the way of the user’s task. Users don’t visit sites to subscribe to a newsletter. They are there to access content. Your newsletter form should never block content.

Focus on Quality Subscribers, Not Quantity

Most sites make the mistake of focusing on a high quantity of subscribers. A high subscriber count is an illusion if you’re not getting a high number of email opens and clicks.

Instead of focusing on quantity you should focus on quality subscribers. High quality subscribers are users who open your newsletters and click through to content. They didn’t give you fake emails and didn’t subscribe because they felt forced to.

If you want high quality subscribers you need to promote your newsletter in a natural way. Modal windows are a forceful way that strongarms users into subscribing.

Better Way to Promote Your Email Newsletter

To get users interested in your newsletter it needs to be relevant to their task. Let’s say your users go to your site to shop and your newsletter offers coupons and deals. Placing your newsletter form on the purchase page can get you high quality subscribers. This is because your newsletter is relevant to their current task.

relevant-to-task

When users are shopping they’ll want to save money too. It’s a natural progression to subscribe to the newsletter during their task. It isn’t forced on to users at a random time like a modal window.

Modeless Window at Bottom Right of Page

If you don’t want to place your newsletter form on a page, consider modeless windows. Modeless windows are far less disruptive than modal windows and pop up at the bottom right of a page.

modeless-bottom-right

The modeless window should pop up at a relevant time during the user’s task. For example, after the user scrolls to the bottom of an article it can pop up to offer them article updates. A static modeless window that isn’t timed will often get ignored because it looks like an ad.

Don’t Fall for the Conversion Rate Illusion

A high conversion rate is a site’s dream but not at the cost of task disruption, engagement loss and user backlash. It’s easy to overlook the downsides to modal window newsletter forms if all you focus on is conversion rate.

If users visited sites with the sole task of subscribing to newsletters, a modal window would be perfect. But this isn’t the case. Users visit sites to access content. Forcing a modal window on them during their task is a nuisance that can cost you big in the long run.


]]>
http://uxmovement.com/forms/the-conversion-rate-illusion-of-modal-newsletter-forms/feed/ 3
Why Formatted Data Fields Always Need Input Maskshttp://uxmovement.com/forms/why-formatted-data-fields-always-need-input-masks/ http://uxmovement.com/forms/why-formatted-data-fields-always-need-input-masks/#comments Tue, 18 Oct 2016 20:52:49 +0000 http://uxmovement.com/?p=9741

]]>
In the world of forms, there are two types of data input found on text fields. There’s data input that has no format (characters only). Then there’s data input that has a format (characters and symbols). You should not treat both types of data input the same.

Many designers put the responsibility on the user to format their data input. This causes major user experience problems when users fill out formatted data fields.

Format Uncertainty Leads to Abandonment

When users type their input they will notice that it isn’t formatted. This will make them wonder whether they should type the symbols in or not. This uncertainty can make some users uncomfortable and lead them to abandon the form.

Users who choose to type in the format will need to press extra keys to include the symbols. More typing increases their chance of making errors. This can slow them down even more and give them more reason to abandon the form.

format-uncertainty

Not only that but now there’s uncertainty on which symbols to use for the format. For example, users could use hyphens or periods to separate strings on a phone number. On a date, they could use slashes or hyphens.

The uncertainty of which format to use creates more mental work for the user. It also makes them question whether their data input will be valid or not.

Lack of Formats Make It Hard to Correct Mistakes

There are users who will choose not to add any symbols to their input just to be on the safe side. But the downside to this is that any mistakes they make will be hard to find and correct.

format-correction

For example, a credit card number displayed without hyphens is hard to check and correct. The user isn’t going to memorize the entire number because it’s too long (up to 19 digits). Instead, they’ll scan a small set of numeric strings on the card to check their input.

They’re going to struggle to find which number they’re on each time they look back at their input. The lack of format makes all the numbers run together causing confusion. The fact that a credit card number can use the same digit more than once only makes it more confusing.

Format Your Fields with Input Masks

The best way to fix this user experience problem is to use input masks on formatted data fields. Input masks will auto insert the correct format in the field as the user types their input. They don’t have to type any symbols.

input-masks

They no longer have to worry about which format to use or leaving it out. It eliminates format uncertainty which will prevent form abandonment. Seeing their input in the correct format will make checking and correcting mistakes easier.

You should apply input masks to data fields that have a specific format. These are data that contain symbols, such as time, dates, phone numbers, postal codes, social security, serial numbers and credit card numbers.

Treat Formatted Data Fields Like VIPs

Most text fields require characters only. But those that require symbols for a specific format deserve special attention. Don’t ignore them and leave the user to figure out the format. Take responsibility for the data input you get and always use input masks to specify your format.


]]>
http://uxmovement.com/forms/why-formatted-data-fields-always-need-input-masks/feed/ 7
Why a Clock Widget Is Easier for Picking Timehttp://uxmovement.com/forms/why-a-clock-widget-is-easier-for-picking-time/ http://uxmovement.com/forms/why-a-clock-widget-is-easier-for-picking-time/#comments Wed, 29 Jun 2016 02:30:46 +0000 http://uxmovement.com/?p=9553

]]>
Scheduling events and meetings online require user time input on a form. But selecting a time isn’t easy when users have to use a select menu. Research has shown that users often abandon forms with select menus.

select-menu-picking-time

It’s time for designers to get rid of the select menu and offer users a clock widget to select time. The calendar widget is already in prominent use for selecting dates. It’s intuitive because users are familiar with how calendars work. The clock widget would have the same effect.

A clock widget is faster to scan than a long list in a select menu. A select menu would need to include both AM and PM time which would double the length. A clock widget would only need to display the numbers once with an AM or PM button.

clock-widget-picking

It’s also faster to select because users don’t need to scroll through a list. All they need to do is look at it like a clock. It not only saves time but it also prevents mistakes. The user can mistake an AM time for PM time if they scroll to the wrong end of the menu. Users won’t make this mistake with the clock widget.

When users click on the text field the clock widget will appear. Users will then click the numbers to select the hour and minutes. The hours dial will display first and the minutes dial will display after.

clock-widget-clocks

If you have international users, you should use a 24-hour clock. But use a 12-hour clock if most of your users live in a 12-hour clock country.

Select menus are a pain for users to use. Save them time by giving them a clock widget to select their time. More designers should use a clock widget so that it becomes the new standard. If the calendar widget can work, the clock widget can too.


]]>
http://uxmovement.com/forms/why-a-clock-widget-is-easier-for-picking-time/feed/ 10