Tag Archives: ms-

Thumbnail

Best Practices For Mobile Form Design




Best Practices For Mobile Form Design

Nick Babich



(This article is kindly sponsored by Adobe.) Forms are the linchpin of all mobile interactions; it stands between the person and what they’re looking for. Every day, we use forms for essential online activities. Recall the last time you bought a ticket, booked a hotel room or made a purchase online — most probably those interactions contained a step with filling out a form.

Forms are just a means to an end. Users should be able to complete them quickly and without confusion. In this article, you’ll learn practical techniques that will help you design an effective form.

What Makes For An Effective Form

The primary goal with every form is completion. Two factors have a major impact on completion rate:

  • Perception of complexity
    The first thing users do when they see a new form is estimate how much time is required to complete it. Users do this by scanning the form. Perception plays a crucial role in the process of estimation. The more complex a form looks, the more likely users will abandon the process.
  • Interaction cost
    Interaction cost is the sum of efforts — both cognitive and physical — that the users put into interacting with an interface in order to reach their goal. Interaction cost has a direct connection with form usability. The more effort users have to make to complete a form, the less usable the form is. A high interaction cost could be the result of data that is difficult to input, an inability to understand the meaning of some questions, or confusion about error messages.

The Components Of Forms

A typical form has the following five components:

  • Input fields
    These include text fields, password fields, checkboxes, radio buttons, sliders and any other fields designed for user input.
  • Field labels
    These tell users what the corresponding input fields mean.
  • Structure
    This includes the order of fields, the form’s appearance on the page, and the logical connections between different fields.
  • Action buttons
    The form will have at least one call to action (the button that triggers data submission).
  • Feedback
    Feedback notifies the user about the result of an operation. Feedback can be positive (for example, indicating that the form was submitted successfully) or negative (saying something like, “The number you’ve provided is incorrect”).

This article covers many aspects related to structure, input fields, labels, action buttons and validation. Most points mentioned in this article have visual do and don’t examples; all such examples were created using Adobe XD.

Input Fields

When it comes to form design, the most important thing a designer can do is to minimize the need for typing. Reducing input effort is essential. Designers can achieve this goal by focusing on form field design.

Minimize The Total Number Of Fields

Every field you ask users to fill out requires some effort. The more effort is needed to fill out a form, the less likely users will complete the form. That’s why the foundational rule of form design is shorter is better — get rid of all inessential fields.

Baymard Institute analyzed checkout forms and found that a too long or too complicated checkout process is one of the top reasons for abandonment during checkout. The study found that the average checkout contains almost 15 form fields. Most online services could reduce the number of fields displayed by default by 20 to 60%.




Top reasons for abandonment during checkout. (Image: Baymard Institute) (Large preview)

Many designers are familiar with the “less is more” rule; still, they ask additional questions in an attempt to gather more data about their users. It might be tempting to collect more data about your users during the initial signup, but resist that temptation. Think about it this way: With every additional field you add to your form, you increase the chance of losing a prospective user. Is the information you gain from a field worth losing new users? Remember that, as long as you’ve collected a user’s contact information, you can always follow up with a request for more data.

Clearly Distinguish All Optional Fields

Before optimizing optional fields, ask yourself whether you really need to include them in your form. Think about what information you really need, not what you want. Ideally, the number of optional fields in your form should be zero.

If after a brainstorming session, you still want to include a few optional questions in your form, make it clear for users that those fields are optional:

  • Mark optional fields instead of mandatory ones.
    If you ask as little as possible, then the vast majority of fields in your form will be mandatory. Therefore, mark only those fields in the minority. For instance, if five out of six fields are mandatory, then it makes sense to mark only one field as optional.
  • Use the “Optional” label to denote optional fields.
    Avoid using the asterisk (*) to mean “optional.” Not all users will associate the asterisk with optional information, and some users will be confused by the meaning (an asterisk is often used to denote mandatory fields).

Clearly distinguish all optional fields.


Clearly distinguish all optional fields. (Large preview)

Size Fields Accordingly

When possible, use field length as an affordance. The length of an input field should be in proportion to the amount of information expected in the field. The size of the field will act as a visual constraint — the user will know how much text is expected to be entered just by looking at the field. Generally, fields such as ones for area codes and house numbers should be shorter than ones for street addresses.


The size of a field is used as a visual constraint.


The size of a field is used as a visual constraint. (Large preview)

Offer Field Focus

Auto-focus the first input field in your form. Auto-focusing a field gives the user an indication and a starting point, so that they are able to quickly start filling out the form. By doing that, you reduce the interaction cost — saving the user one unnecessary tap.

Make the active input field prominent and focused. The field focus itself should be crystal clear — users should be able to understand at a glance where the focus is. It could be an accented border color or a fade-in of the box.


Amazon puts strong visual focus on the input field.


Amazon puts strong visual focus on the input field. (Large preview)

Don’t Ask Users To Repeat Their Email Address

The reason why an extra field for the email address is so popular among product developers is apparent: Every company wants to minimize the risk of hard bounces (non-deliverables caused by invalid email addresses). Unfortunately, following this approach doesn’t guarantee that you’ll get a valid address. Users often copy and paste their address from one field to another.


Avoid asking users to retype their email address.


Avoid asking users to retype their email address. (Large preview)

Provide “Show Password” Option

Duplicating the password input field is another common mistake among product designers. Designers follow this approach because they believe it will prevent users from mistyping a password. In reality, a second field for a password not only increases interaction cost, but also doesn’t guarantee that users will proceed without mistakes. Because users don’t see what they’ve entered in the field, they can make the same mistake twice (in both fields) and will face a problem when they try to log in using a password. As Jakob Nielsen summarized:

Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures.

Instead of duplicating the password field, provide an option that allows users to view the password they have chosen to create. Have an icon or checkbox that unmasks the password when clicked. A password preview can be an opportunity for users to check their data before sending.


Show password' option


Not being able to see what you’re typing is a huge issue. Providing a ‘Show password’ option next to the password field will help to solve this problem. (Large preview)

Don’t Slice Data Fields

Do not slice fields when asking for a full name, phone number or date of birth. Sliced fields force the user to make additional taps to move to the next field. For fields that require some formatting (such as phone numbers or a date of birth), it’s also better to have a single field paired with clear formatting rules as its placeholder.


“Full name” field


Avoid splitting input fields; don’t make people jump between fields. Instead of asking for a first name and last name in two separate fields, have a single ‘Full name’ field. (Large preview)

Avoid Dropdown Menus

Luke Wroblewski famously said that dropdowns should be the UI of last resort. Dropdowns are especially bad for mobile because collapsed elements make the process of data input harder on a small screen: Placing options in a dropdown requires two taps and hides the options.

If you’re using a dropdown for selection of options, consider replacing it with radio buttons. They will make all options glanceable and also reduce the interaction cost — users can tap on the item and select at once.




(Large preview)

Use Placeholders And Masked Input

Formatting uncertainty is one of the most significant problems of form design. This problem has a direct connection with form abandonment — when users are uncertain of the format in which they should provide data, they can quickly abandon the form. There are a few things you can do to make the format clear.

Placeholder Text

The text in an input field can tell users what content is expected. Placeholder text is not required for simple fields such as “Full name”, but it can be extremely valuable for fields that require data in a specific format. For example, if you design search functionality for tracking a parcel, it would be good to provide a sample tracking number as a placeholder for the tracking-number field.




(Large preview)

It’s vital that your form should have a clear visual distinction between the placeholder text and the actual value entered by the user. In other words, placeholder text shouldn’t look like a preset value. Without clear visual distinction, users might think that the fields with placeholders already have values.

Masked Input

Field masking is a technique that helps users format inputted text. Many designers confuse field masking with placeholder text — they are not the same thing. Unlike placeholders, which are basically static text, masks automatically format the data provided by the user. In the example below, the parentheses, spaces and dashes appear on the screen automatically as a phone number is entered.

Masked input also makes it easy for users to validate information. When a phone number is displayed in chunks, it makes it easier to find and correct a typo.

Masked input for a phone number. (Image: Josh Morony)

Provide Matching Keyboard

Mobile users appreciate apps and websites that provide an appropriate keyboard for the field. This feature prevents them from doing additional actions. For example, when users need to enter a credit card number, your app should only display the dialpad. It’s essential to implement keyboard matching consistently throughout the app (all forms in your app should have this feature).

Set HTML input types to show the correct keypad. Seven input types are relevant to form design:

  • input type="text" displays the mobile device’s normal keyboard.
  • input type="email" displays the normal keyboard and ‘@’ and ‘.com’.
  • input type="tel" displays the numeric 0 to 9 keypad.
  • input type="number" displays a keyboard with numbers and symbols.
  • input type="date" displays the mobile device’s date selector.
  • input type="datetime" displays the mobile device’s date and time selector.
  • input type="month" displays the mobile device’s month and year selector.



When users tap into a field with credit card number, they should see a numerical dialpad — all numbers, no letters. (Large preview)

Use A Slider When Asking For A Specific Range

Many forms ask users to provide a range of values (for example, a price range, distance range, etc.). Instead of using two separate fields, “from” and “to”, for that purpose, use a slider to allow users to specify the range with a thumb interaction.


Sliders are good for touch interfaces because they allow users to specify a range without typing.


Sliders are good for touch interfaces because they allow users to specify a range without typing. (Large preview)

Clearly Explain Why You’re Asking For Sensitive Information

People are increasingly concerned about privacy and information security. When users see a request for information they consider as private, they might think, “Hm, why do they need this?” If your form asks users for sensitive information, make sure to explain why you need it. You can do that by adding support text below relevant fields. As a rule of thumb, the explanation text shouldn’t exceed 100 characters.


A request for a phone number in a booking form might confuse users. Explain why you are asking for it.


A request for a phone number in a booking form might confuse users. Explain why you are asking for it. (Large preview)

Be Careful With Static Defaults

Unlike smart defaults, which are calculated by the system based on the information the system has about users, static defaults are preset values in forms that are the same for all users. Avoid static defaults unless you believe a significant portion of your users (say, 95%) would select those values — particularly for required fields. Why? Because you’re likely to introduce errors — people scan forms quickly, and they won’t spend extra time parsing all of the questions; instead, they’ll simply skip the field, assuming it already has a value.

Protect User Data

Jef Raskin once said, “The system should treat all user input as sacred.” This is absolutely true for forms. It’s great when you start filling in a web form and then accidentally refresh the page but the data remains in the fields. Tools such as Garlic.js help you to persist a form’s values locally until the form is submitted. This way, users won’t lose any precious data if they accidentally close the tab or browser.

Automate Actions

If you want to make the process of data input as smooth as possible, it’s not enough to minimize the number of input fields — you should also pay attention to the user effort required for the data input. Typing has a high interaction cost — it’s error-prone and time-consuming, even with a physical keyboard. But when it comes to mobile screens, it becomes even more critical. More typing increases the user’s chance of making errors. Strive to prevent unnecessary typing, because it will improve user satisfaction and decrease error rates.

Here are a few things you can do to achieve this goal:

Autocomplete

Most users experience autocompletion when typing a question in Google’s search box. Google provides users with a list of suggestions related to what the user has typed in the field. The same mechanism can be applied to form design. For example, a form could autocomplete an email address.

This form suggests the email host and saves users from typing a complete address. (Image: GitHub)
Autocapitalize

Autocapitalizing makes the first letter a capital automatically. This feature is excellent for fields like names and street addresses, but avoid it for password fields.

Autocorrect

Autocorrection modifies words that appear to be misspelled. Turn this feature off for unique fields, such as names, addresses, etc.

Auto-filling of personal details

Typing an address is often the most cumbersome part of any online signup form. Make this task easier by using the browser function to fill the field based on previously entered values. According to Google’s research, auto-filling helps people fill out forms 30% faster.

Address prefill. Image: Google

Use The Mobile Device’s Native Features To Simplify Data Input

Modern mobile devices are sophisticated devices that have a ton of amazing capabilities. Designers can use a device’s native features (such as camera or geolocation) to streamline the task of inputting data.

Below are just a few tips on how to make use of sensors and device hardware.

Location Services

It’s possible to preselect the user’s country based on their geolocation data. But sometimes prefilling a full address can be problematic due to accuracy issues. Google’s Places API can help solve this problem. It uses both geolocation and address prefilling to provide accurate suggestions based on the user’s exact location.

Address lookup using Google Places API. (Image: Chromatic HQ) (Large preview)

Using location services, it’s also possible to provide smart defaults. For example, for a “Find a flight” form, it’s possible to prefill the “From” field with the nearest airport to the user based on the user’s geolocation.

Biometric Authorization

The biggest problem of using a text password today is that most people forget passwords. 82% of people can’t remember their passwords, and 5 to 10% of sessions require users to reset a password. Password recovery is a big deal in e-commerce. 75% of users wouldn’t complete a purchase if they had to attempt to recover their password while checking out.

The future of passwords is no passwords. Even today, mobile developers can take advantage of biometric technologies. Users shouldn’t need to type a password; they should be able to use biometric readers for authentication — signing in using a fingerprint or face scanning.


eBay took advantage of the biometrics functionality on smartphones. Users can use their thumbprint to login into their eBay account.


eBay took advantage of the biometrics functionality on smartphones. Users can use their thumbprint to login into their eBay account. (Large preview)

Camera

If your form asks users to provide credit card details or information from their driver’s license, it’s possible to simplify the process of data input by using the camera as a scanner. Provide an option to take a photo of the card and fill out all details automatically.

Let users scan their identity card, instead of having to fill out their credit card information manually. (Image: blinkid)

But remember that no matter how good your app fills out the fields, it’s essential to leave them available for editing. Users should be able to modify the fields whenever they want.

Voice

Voice-controlled devices, such as Apple HomePod, Google Home and Amazon Echo, are actively encroaching on the market. The number of people who prefer to use voice for common operations has grown significantly. According to ComScore, 50% of all searches will be voice searches by 2020.




How people in the US use smart speakers (according to comScore) (Large preview)

As users get more comfortable and confident using voice commands, they will become an expected feature of mobile interactions. Voice input provides a lot of advantages for mobile users — it’s especially valuable in situations when users can’t focus on a screen, for example, while driving a car.

When designing a form, you can provide voice input as an alternative method of data input.




Google Translate provides an option to enter the text for translation using voice. (Large preview)

Field Labels

Write Clear And Concise Labels

The label is the text that tells users what data is expected from them in a particular input field. Writing clear labels is one of the best ways to make a form more accessible. Labels should help the user understand what information is required at a glance.

Avoid using complete sentences to explain. A label is not help text. Write succinct and crisp labels (a word or two), so that users can quickly scan your form.

Place The Label And Input Close Together

Put each label close to the input field, because the eye will visually know they’re tied together.


A label and its field should be visually grouped, so that users can understand which label belongs to which field.


A label and its field should be visually grouped, so that users can understand which label belongs to which field. (Large preview)

Don’t Use Disappearing Placeholder Text As Labels

While inline labels look good and save valuable screen estate, these benefits are far outweighed by the significant usability drawbacks, the most critical of which is the loss of context. When users start entering text in a field, the placeholder text disappears and forces people to recall this information. While it might not be a problem for simple two-field forms, it could be a big deal for forms that have a lot of fields (say, 7 to 10). It would be tough for users to recall all field labels after inputting data. Not surprisingly, user testing continually shows that placeholders in form fields often hurt usability more than help.


Don’t use placeholder text that disappears when the user interacts with the field.


Don’t use placeholder text that disappears when the user interacts with the field. (Large preview)

There’s a simple solution to the problem of disappearing placeholders: the floating (or adaptive) label. After the user taps on the field with the label placeholder, the label doesn’t disappear, it moves up to the top of the field and makes room for the user to enter their data.

Floating labels assure the user that they’ve filled out the fields correctly. (Image: Matt D. Smith)

Top-Align Labels

Putting field labels above the fields in a form improves the way users scan the form. Using eye-tracking technology for this, Google showed that users need fewer fixations, less fixation time and fewer saccades before submitting a form.

Another important advantage of top-aligned labels is that they provide more space for labels. Long labels and localized versions will fit more easily in the layout. The latter is especially suitable for small mobile screens. You can have form fields extend the full width of the screen, making them large enough to display the user’s entire input.




(Large preview)

Sentence Case Vs. Title Case

There are two general ways to capitalize words:

  • Title case: Capitalize every word. “This Is Title Case.”
  • Sentence case: Capitalize the first word. “This is sentence case.”

Using sentence case for labels has one advantage over title case: It is slightly easier (and, thus, faster) to read. While the difference for short labels is negligible (there’s not much difference between “Full Name” and “Full name”), for longer labels, sentence case is better. Now You Know How Difficult It Is to Read Long Text in Title Case.

Avoid Using Caps For Labels

All-caps text  —  meaning text with all of the letters cap­i­tal­ized  —  is OK in contexts that don’t involve substantive reading (such as acronyms and logos), but avoid all caps otherwise. As mentioned by Miles Tinker in his work Legibility of Print, all-capital print dramatically slows the speed of scanning and reading compared to lowercase type.


All-capitalized letters


All-capitalized letters are hard to scan and read. (Large preview)

Layout

You know by now that users scan web pages, rather than read them. The same goes for filling out forms. That’s why designers should design a form that is easy to scan. Allowing for efficient, effective scanning is crucial to making the process of the filling out a form as quick as possible.

Use A Single-Column Layout

A study by CXL Institute found that single-column forms are faster to complete than multi-column forms. In that study, test participants were able to complete a single-column form an average of 15.4 seconds faster than a multi-column form.

Multiple columns disrupt a user’s vertical momentum; with multiple columns, the eyes start zigzagging. This dramatically increases the number of eye fixations and, as a result, the completion time. Moreover, multiple-column forms might raise unnecessary questions in the user, like “Where should I begin?” and “Are questions in the right column equal in importance to questions in the left one?”

In a one-column design, the eyes move in a natural direction, from top to bottom, one line at a time. This helps to set a clear path for the user. One column is excellent for mobile because the screens are longer vertically, and vertical scrolling is a natural motion for mobile users.

There are some exceptions to this rule. It’s possible to place short and logically related fields on the same row (such as for the city and area code).




If a form has horizontally adjacent fields, the user has to scan the form following a Z pattern. When the eyes start zigzagging, it slows the speed of comprehension and increases completion time. (Large preview)




(Large preview)

Create A Flow With Your Questions

The way you ask questions also matters. Questions should be asked logically from the user’s perspective, not according to the application or database’s logic, because it will help to create a sense of conversation with the user. For example, if you design a checkout form and asks for details such as full name, phone number and credit card, the first question should be for the full name. Changing the order (for example, starting with a phone number instead of a name) leads to discomfort. In real-world conversations, it would be unusual to ask for someone’s phone number before asking their name.

Defer In-Depth Questions To The End

When it comes to designing a flow for questions you want to ask, think about prioritization. Follow the rule “easy before difficult” and place in-depth or personal questions last. This eases users into the process; they will be more likely to answer complex and more intrusive questions once they’ve established a rapport. This has a scientific basis: Robert Cialdini’s principle of consistency stipulates that when someone takes a small action or step towards something, they feel more compelled to finish.

Group Related Fields Together

One of the principles of Gestalt psychology, the principle of proximity, states that related elements should be near each other. This principle can be applied to the order of questions in a form. The more related questions are, the closer they should be to each other.

Designers can group related fields into sections. If your form has more than six questions, group related questions into logical sections. Don’t forget to provide a good amount of white space between sections to distinguish them visually.




Generally, if your form has more than six questions, it’s better to group related questions into logical sections. Put things together that make sense together. (Large preview)

Make A Long Form Look Simpler

How do you design a form that asks users a lot of questions? Of course, you could put all of the questions on one screen. But this hinder your completion rate. If users don’t have enough motivation to complete a form, the form’s complexity could scare them away. The first impression plays a vital role. Generally, the longer or more complicated a form seems, the less likely users will be to start filling in the blanks.

Minimize the number of fields visible at one time. This creates the perception that the form is shorter than it really is.

There are two techniques to do this.

Progressive Disclosure

Progressive disclosure is all about giving users the right thing at the right time. The goal is to find the right stuff to put on the small screen at the right time:

  • Initially, show users only a few of the most important options.
  • Reveal parts of your form as the user interacts with it.
Using progressive disclosure to reduce cognitive load and keep the user focused on a task. (Image: Ramotion)
Chunking

Chunking entails breaking a long form into steps. It’s possible to increase the completion rate by splitting a form into a few steps. Chunking can also help users process, understand and remember information. When designing multi-step forms, always inform users of their progress with a completeness meter.




Progress tracker for e-commerce form. (Image: Murat Mutlu) (Large preview)

Designers can use either a progress tracker (as shown in the example above) or a “Step # out of #” indicator both to tell how many steps there are total and to show how far along the user is at the moment. The latter approach could be great for mobile forms because step indication doesn’t take up much space.

Action Buttons

A button is an interactive element that direct users to take an action.

Make Action Buttons Descriptive

A button’s label should explain what the button does; users should be able to understand what happens after a tap just by looking at the button. Avoid generic labels such as “Submit” and “Send”, using instead labels that describe the action.




Label should help users finish the sentence, ‘I want to…’ For example, if it’s a form to create an account, the call to action could be ‘Create an account’. (Large preview)

Don’t Use Clear Or Reset Buttons

Clear or reset buttons allow users to erase their data in a form. These buttons almost never help users and often hurt them. The risk of deleting all of the information a user has entered outweighs the small benefit of having to start again. If a user fills in a form and accidentally hits the wrong button, there’s a good chance they won’t start over.

Use Different Styles For Primary And Secondary Buttons

Avoid secondary actions if possible. But if your form has two calls to action (for example, an e-commerce form that has “Apply discount” and “Submit order”) buttons, ensure a clear visual distinction between the primary and secondary actions. Visually prioritize the primary action by adding more visual weight to the button. This will prevent users from tapping on the wrong button.




Ensure a clear visual distinction between primary and secondary buttons. (Large preview)

Design Finger-Friendly Touch Targets

Tiny touch targets create a horrible user experience because they make it challenging for users to interact with interactive objects. It’s vital to design finger-friendly touch targets: bigger input fields and buttons.

The image below shows that the width of the average adult finger is about 11 mm.




People often blame themselves for having “fat fingers”. But even baby fingers are wider than most touch targets. (Image: Microsoft) (Large preview)

According to material design guidelines, touch targets should be at least 48 × 48 DP. A touch target of this size results in a physical size of about 9 mm, regardless of screen size. It might be appropriate to use larger touch targets to accommodate a wider spectrum of users.

Not only is target size important, but sufficient space between touch targets matters, too. The main reason to maintain a safe distance between touch targets is to prevent users from touching the wrong button and invoking the wrong action. The distance between buttons becomes extremely important when binary choices such as “Agree” and “Disagree” are located right next to each other. Material design guidelines recommend separating touch targets with 8 DP of space or more, which will create balanced information density and usability.




(Large preview)

Disable Buttons After Tap

Forms actions commonly require some time to be processed. For example, data calculation might be required after a submission. It’s essential not only to provide feedback when an action is in progress, but also to disable the submit button to prevent users from accidentally tapping the button again. This is especially important for e-commerce websites and apps. By disabling the button, you not only prevent duplicate submissions, which can happen by accident, but you also provide a valuable acknowledgment to users (users will know that the system has received their submission).

This form disables the button after submission. (Image: Michaël Villar)

Assistance And Support

Provide Success State

Upon successful completion of a form, it’s critical to notify users about that. It’s possible to provide this information in the context of an existing form (for example, showing a green checkmark above the refreshed form) or to direct users to a new page that communicates that their submission has been successful.

Example of success state. (Image: João Oliveira Simões)

Errors And Validation

Users will make mistakes. It’s inevitable. It’s essential to design a user interface that supports users in those moments of failures.

While the topic of errors and validation deserves its own article, it’s still worth mentioning a few things that should be done to improve the user experience of mobile forms.

Use Input Constraints for Each Field

Prevention is better than a cure. If you’re a seasoned designer, you should be familiar with the most common cases that can lead to an error state (error-prone conditions). For example, it’s usually hard to correctly fill out a form on the first attempt, or to properly sync data when the mobile device has a poor network connection. Take these cases into account to minimize the possibility of errors. In other words, it’s better to prevent users from making errors in the first place by utilizing constraints and offering suggestions.

For instance, if you design a form that allows people to search for a hotel reservation, you should prevent users from selecting check-in dates that are in the past. As shown in the Booking.com example below, you can simply use a date selector that allows users only to choose today’s date or a date in the future. Such a selector would force users to pick a date range that fits.




You can significantly decrease the number of mistakes or incorrectly inputted data by putting constraints on what can be inputted in the field. The date picker in Booking.com’s app displays a full monthly calendar but makes past dates unavailable for selection. (Large preview)

Don’t Make Data Validation Rules Too Strict

While there might be cases where it’s essential to use strict validation rules, in most cases, strict validation is a sign of lazy programming. Showing errors on the screen when the user provides data in a slightly different format than expected creates unnecessary friction. And this would have a negative impact on conversions.

It’s very common for a few variations of an answer to a question to be possible; for example, when a form asks users to provide information about their state, and a user responds by typing their state’s abbreviation instead of the full name (for example, CA instead of California). The form should accept both formats, and it’s the developer job to convert the data into a consistent format.

Clear Error Message

When you write error messages, focus on minimizing the frustration users feel when they face a problem in interacting with a form. Here are a few rules on writing effective error messages:

  • Never blame the user.
    The way you deliver an error message can have a tremendous impact on how users perceive it. An error message like, “You’ve entered a wrong number” puts all of the blame on the user; as a result, the user might get frustrated and abandon the app. Write copy that sounds neutral or positive. A neutral message sounds like, “That number is incorrect.”
  • Avoid vague or general error messages.
    Messages like “Something went wrong. Please, try again later” don’t say much to users. Users will wonder what exactly went wrong. Always try to explain the root cause of a problem. Make sure users know how to fix errors.
  • Make error messages human-readable.
    Error messages like “User input error: 0x100999” are cryptic and scary. Write like a human, not like a robot. Use human language, and explain what exactly the user or system did wrong, and what exactly the user should do to fix the problem.
Display Errors Inline

When it comes to displaying error messages, designers opt for one of two locations: at the top of the form or inline. The first option can make for a bad experience. Javier Bargas-Avila and Glenn Oberholzer conducted research on online form validation and discovered that displaying all error messages at the top of the form puts a high cognitive load on user memory. Users need to spend extra time matching error messages with the fields that require attention.




Avoid displaying errors at the top of the form. (Image: John Lewis) (Large preview)

It’s much better to position error messages inline. First, this placement corresponds with the user’s natural top-to-bottom reading flow. Secondly, the errors will appear in the context of the user’s input.


eBay uses inline validation.


eBay uses inline validation. (Large preview)

Use Dynamic Validation

The time at which you choose to display an error message is vital. Seeing an error message only after pressing the submit button might frustrate users. Don’t wait until users finish the form; provide feedback as data is being entered.

Use inline validation with real-time feedback. This validation instantly tells people whether the information they’ve typed is compatible with the form’s requirements. In 2009, Luke Wroblewski tested inline validation against post-submission validation and found the following results for the inline version:

  • 22% increase in success rate,
  • 22% decrease in errors made,
  • 31% increase in satisfaction rating,
  • 42% decrease in completion times,
  • 47% decrease in the number of eye fixations.

But inline validation should be implemented carefully:

  • Avoid showing inline validation on focus.
    In this case, as soon as the user taps a field, they see an error message. The error appears even when the field is completely empty. When an error message is shown on focus, it might look like the form is yelling at the user before they’ve even started filling it out.
  • Don’t validate after each character typed.
    This approach not only increases the number of unnecessary validation attempts, but it also frustrates users (because users will likely see error messages before they have completed the field). Ideally, inline validation messages should appear around 500 to 1000 milliseconds after the user has stopped typing or after they’ve moved to the next field. This rule has a few exceptions: It’s helpful to validate inline as the user is typing when creating a password (to check whether the password meets complexity requirements), when creating a user name (to check whether a name is available) and when typing a message with a character limit.
Reward early, punish late is a solid validation  approach. (Image: Mihael Konjević)

Accessibility

Users of all abilities should be able to access and enjoy digital products. Designers should strive to incorporate accessibility needs as much as they can when building a product. Here are a few things you can do to make your forms more accessible.

Ensure The Form Has Proper Contrast

Your users will likely interact with your form outdoors. Ensure that it is easy to use both in sun glare and in low-light environments. Check the contrast ratio of fields and labels in your form. The W3C recommends the following contrast ratios for body text:

  • Small text should have a contrast ratio of at least 4.5:1 against its background.
  • Large text (at 14-point bold, 18-point regular and up) should have a contrast ratio of at least 3:1 against its background.

Measuring color contrast can seem overwhelming. Fortunately, some tools make the process simple. One of them is Web AIM Color Contrast Checker, which helps designers to measure contrast levels.

Do Not Rely On Color Alone To Communicate Status

Color blindness (or color vision deficiency) affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. While there are many types of color blindness, the most common two are protanomaly, or reduced sensitivity to red light, and deuteranomaly, or reduced sensitivity to green light. When displaying validation errors or success messages, don’t rely on color alone to communicate the status (i.e. by making input fields green or red). As the W3C guidelines state, color shouldn’t be used as the only visual means of conveying information, indicating an action, prompting a response or distinguishing a visual element. Designers should use color to highlight or complement what is already visible. Support colorblind people by providing additional visual cues that help them understand the user interface.


Use icons and supportive text to show which fields are invalid. This will help colorblind people fix the problems.


Use icons and supportive text to show which fields are invalid. This will help colorblind people fix the problems. (Large preview)

Allow Users To Control Font Size

Allow users to increase font size to improve readability. Mobile devices and browsers include features to enable users to adjust the font size system-wide. Also, make sure that your form has allotted enough space for large font sizes.


WhatsApp provides an option to change the font size in the app’s settings


WhatsApp provides an option to change the font size in the app’s settings. (Large preview)

Test Your Design Decisions

All points mentioned above can be considered as industry best practices. But just because something is called a “best practice” doesn’t mean it is always the optimal solution for your form. Apps and websites largely depend on the context in which they are used. Thus, it’s always essential to test your design decisions; make sure that the process of filling out a form is smooth, that the flow is not disrupted and that users can solve any problems they face along the way. Conduct usability testing sessions on a regular basis, collect all valuable data about user interactions, and learn from it.

Conclusion

Users can be hesitant to fill out forms. So, our goal as designers is to make the process of filling out a form as easy as possible. When designing a form, strive to create fast and frictionless interactions. Sometimes a minor change — such as properly writing an error message — can significantly increase the form’s usability.

his article is part of the UX design series sponsored by Adobe. Adobe XD tool is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance, and also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.

Smashing Editorial
(al, yk, il)


Excerpt from: 

Best Practices For Mobile Form Design

Thumbnail

What Happens When You Create A Flexbox Flex Container?




What Happens When You Create A Flexbox Flex Container?

Rachel Andrew



In a short series of articles, I’m going to spend some time in detailed unpacking of Flexbox — in the same way I have done in the past with grid. We’ll have a look at the things Flexbox was designed for, what it really does well, and why we might not choose it as a layout method. In this article, we will take a detailed look at what actually happens when you add display: flex to your stylesheet.

A Flex Container, Please!

In order to use Flexbox, you need an element that will be the flex container. In your CSS, you use display: flex:

See the Pen Smashing Flexbox Series 1: display: flex; by Rachel Andrew (@rachelandrew) on CodePen.

Let us spend a little while thinking about what display: flex really means. In the Display Module Level 3, each value of display is described as actually being a combination of two things: an inner display model, and an outer display model. When we add display: flex, we are really defining display: block flex. The outer display type of our flex container is block; it acts like a block level element in normal flow. The inner display type is flex, so items directly inside our container will participate in flex layout.

This is something you might never have really thought about but probably understand anyway. The flex container acts like any other block on your page. If you have a paragraph following by a flex container, both of these things behave as we have become accustomed to block elements behaving.

We can also define our container with a value of inline-flex which is like using display: inline flex, i.e. a flex container that acts like an inline level element, with children that participate in flex layout. The children of our inline flex container behave in the same way that children of our block flex container behave; the difference is how the container itself behaves in the overall layout.

See the Pen Smashing Flexbox Series 1: display: inline-flex; by Rachel Andrew (@rachelandrew) on CodePen.

This concept of elements having an outer display type, which defines how they behave as a box on the page (plus an inner display type) dictating how their children behave is quite useful. You can apply this thinking to any box in CSS. How does this element act? How do the children of this element act? The answers relate to their outer and inner display models.

Rows Or Columns?

Once we have defined our flex container, some initial values come into play. Without our adding any extra properties, the flex items display as a row. This happens because the initial value of the flex-direction property is row. If you don’t set it, you get a row.

The flex-direction property is how we set the direction of the main axis. Other values for flex-direction are:

  • column
  • row-reverse
  • column-reverse

With our items in a row, the items are placed with the first item at the start edge of the inline dimension and display in the order that they appear in the source. In the specification, this edge is described as main-start:


main-start is at the beginning of the row


main-start is at the start of the inline dimension (Large preview)

If we use the value column, the items begin to lay out from the start edge of the block dimension and therefore form a column.


Items laid out as a column, main-start is at the top


main-start is the start of the block dimension (Large preview)

When we use row-reverse, the location of main-start and main-end are switched; therefore, the items lay themselves out one after the other ending up in reverse order.


Items start at the end of the row


main-start is at the end of the inline dimension (Large preview)

The value column-reverse does the same thing. It’s important to remember that these values don’t “switch the order of items” although this is what we see happening, they change the place where the flow of items starts: by switching where main-start is. So our items do display in reverse order, but that is because they start laying out at the other end of the container.

It is also important to remember that when this happens, the effect is purely visual. We are asking the items to display themselves starting at the end edge; they are still flowing in the same order and this is the order that your screen reader uses and also the order they can be tabbed through. You should never use row-reverse when what you really want to do is change the order of the items. Make that change in your document source.

The Two Axes Of Flexbox

We have already exposed an important feature of flexbox: the ability to switch the main axis from row to column. This axis switching is why I think that often it is easier to understand things like alignment in Grid Layout first. With Grid, working in two dimensions, you can align on both axes in pretty much the same way. Flexbox is a little trickier because different things happen depending on whether you are working with the main axis, or the cross axis.

We have already encountered the main axis, i.e. the axis that you define as the value of flex-direction. The cross axis is the other dimension. If you have set flex-direction: row, your main axis is along the row, and your cross axis is down the columns. With flex-direction: column, the main axis is down the column and your cross axis along the rows. It is here where we need to explore another important feature of Flexbox, and that is the fact that it is not tied to the physical dimensions of the screen. We don’t talk about a row running from left to right, or a column from top to bottom, because that is not always the case.

Writing Modes

When I described row and column above, I mentioned the block and inline dimensions. This article is written in English, which is a horizontal writing mode. This means that when you ask Flexbox to give you a row, you get a horizontal display of your flex items. In this case, main-start is on the left — the place in which sentences start in English.

If I were working in a right-to-left language such as Arabic, then the start edge would be on the right:

See the Pen Smashing Flexbox Series 1: row with rtl text by Rachel Andrew (@rachelandrew) on CodePen.

The initial values of flexbox mean that if all I do is create a flex container, my items would start on the right and be displayed moving towards the left. The start edge in the inline direction is the place where sentences start in the writing mode you are using.

If you happen to be in a vertical writing mode and ask for a row, your row will run vertically, because that is the way in which rows of text run in a vertical language. You can try this by adding the writing-mode property to your flex container and setting it to the value vertical-lr. Now, when you set flex-direction to row, you get a vertical column of items.

See the Pen Smashing Flexbox Series 1: row with a vertical writing mode by Rachel Andrew (@rachelandrew) on CodePen.

So a row can run horizontally, with a main-start of the left or the right, and also run vertically with main-start at the top. It’s still a flex-direction of row even if our horizontal text accustomed minds find it hard to think of a row running vertically!

To cause the items to lay themselves out in the block dimension, we set the value of flex-direction to column or column-reverse. In English (or in Arabic), we then see the items displaying one on top of the other down the page, starting at the top of the container.

In a Vertical Writing Mode, the Block dimension runs across the page, as this is the direction blocks are laid out in those writing modes. If you ask for a column in vertical-lr, your blocks will run left to right vertically:

See the Pen Smashing Flexbox Series 1: column in vertical-lr writing mode by Rachel Andrew (@rachelandrew) on CodePen.

However, no matter in which direction the blocks are displayed, if you are working with a column then you are working in the block dimension.

Understanding the fact that a row or a column can run in different physical directions is helpful in understanding some of the terminology being used for Grid and Flexbox. We don’t refer to ‘left and right’ or ‘top and bottom’ in Flexbox and Grid because we don’t make any assumption as to the writing mode of our document. All of CSS is becoming more writing mode aware; if you are interested in some other properties and values being implemented to make the rest of CSS behave in this same way, read my article on Logical Properties and Values.

As a summary, remember that:

  • flex-direction: row

    • main axis = inline dimension
    • main-start will be where sentences begin in that writing mode
    • cross axis = block dimension
  • flex-direction: column

    • main axis = block dimension
    • main-start will be where blocks start to lay out in that writing mode
    • cross axis = inline dimension

Initial Alignment

Some other things happen when we apply display: flex. Some initial alignment happens. In a future article in this series, we will take a good look at alignment; however, in our exploration of display: flex, we should look at the initial values that are applied.

Note: It is worth noting that while these alignment properties started life in the Flexbox specification, the Box Alignment specification will ultimately supersede those defined in the Flexbox specification, as explained in the Flexbox specification.

Main-Axis Alignment

The initial value of justify-content is set to flex-start. It is as if our CSS was:

.container 
    display: flex;
    justify-content: flex-start;

This is the reason that our flex items line up at the start edge of the flex container. It’s also the reason why when we set row-reverse they switch to the end edge because that edge then becomes the start of the main axis.

When you see an alignment property which begins with justify-, then it applies to the main axis in Flexbox. So justify-content performs main-axis alignment and aligns our items to the start.

The other possible values for justify-content are:

  • flex-end
  • center
  • space-around
  • space-between
  • space-evenly (added in Box Alignment)

These values deal with the distribution of available space in the flex container. This is why the items are moved around, or spaced out. If you add justify-content: space-between, then any available space is shared out between the items. However, this can only happen if there is free space to start with. If you had a tightly packed flex container (with no extra space after all the items had been laid out), then justify-content would do nothing at all.

You can see this if you switch your flex-direction to column. Without a height on the flex container there is no free space, so setting justify-content: space-between won’t achieve anything. If you add a height and make it so that the container is taller than is required to display the items, then the property has an effect:

See the Pen Smashing Flexbox Series 1: column with a height by Rachel Andrew (@rachelandrew) on CodePen.

Cross-Axis Alignment

Items are also aligned on the cross axis with a single line flex container; the alignment that we are performing is to align the boxes against each other in the line. In the next example, one of our boxes has more content in than all the others. Something is telling the other boxes to stretch to the same height. That something is the align-items property, which has an initial value of stretch:

See the Pen Smashing Guide to Layout: clearfix by Rachel Andrew (@rachelandrew) on CodePen.

When you see an alignment property which begins with align- and you are in flexbox, then you are dealing with cross-axis alignment, and align-items aligns the items within the flex line. The other possible values are:

  • flex-start
  • flex-end
  • center
  • baseline

If you do not want the boxes to all stretch to the height of the tallest, then setting align-self: flex-start will cause them all to align to the start edge of the cross axis.

See the Pen Smashing Flexbox Series 1: align-items: flex-start by Rachel Andrew (@rachelandrew) on CodePen.

Initial Values For The Flex Items

Finally, the flex items themselves also have initial values, they are set to:

  • flex-grow: 0
  • flex-shrink: 1
  • flex-basis: auto

This means that our items will not grow by default to fill the available space on the main axis. If flex-grow were set to a positive value, this would cause the items to grow and take up any available space.

The items can shrink, however, as flex-shrink is set to the positive value of 1. This means that if we have a very narrow flex container, then the items will get as small as they can before any overflow happens. This is sensible behavior; in general, we want things to stay inside their boxes and not overflow if there is space to display them.

In order to get the best possible layout by default, flex-basis is set to auto. We will have a proper look at what that means in a future article in this series, however, most of the time you can think of auto as “big enough to fit the content”. What you will see happen, when you have flex items that fill the container, and one of those items has a larger amount of content than the others, the larger item will be given more space.

See the Pen Smashing Flexbox Series 1: initial values of flex items by Rachel Andrew (@rachelandrew) on CodePen.

This is Flexbox’s flexibility in action. With a flex-basis of auto and no sizing applied to the items, the flex items have a base size of the max-content size. This would be the size they would be if they stretched out and did no wrapping whatsoever. Then, space is taken away from each item in proportion, detailed in the following note in the flexbox specification.

“Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.”

The larger item has less space taken away and so we get the final layout. You can compare the two screenshots below, both taken using the example above. However, in the first screenshot, the third box has a smaller amount of content, and therefore our columns have a more equal distribution of space.


The example with a larger item shows the item taking up more space


The items flex to give the larger item more room (Large preview)

Flexbox here is helping us to end up with a reasonable end result given no other input from the person writing the CSS. Rather than reduce the space evenly and end up with a very tall item with a couple words on each line, it assigns that item more space to lay itself out. Within this kind of behavior is the key to the real use cases for Flexbox. Flexbox is at its best when used to lay sets of things out — along one axis — in a flexible and content aware way. I’m touching on a little of the detail here, but we will take a proper look at these algorithms later in this series.

Summary

In this article, I’ve taken the initial values of Flexbox, in order to explain what actually happens when you say display: flex. It’s a surprising amount once you begin to unpack it, and contained within these few properties are many of the key features of flex layouts.

Flex layouts are flexible: they try to make good choices by default about your content — squishing and stretching to get the best readability. Flex layouts are writing mode aware: the directions of row and column relate to the writing mode being used. Flex layouts allow alignment of the items as a group on the main axis, by choosing how space is distributed. They allow alignment of items within their flex line, moving the items on the cross axis in relationship to each other. Importantly, flex layouts understand how big your content is, and try to make good basic decisions in order to display it. In future articles, we will explore these areas in more depth, and consider further exactly when and why we might choose to use Flexbox.

Smashing Editorial
(il)


More: 

What Happens When You Create A Flexbox Flex Container?

Thumbnail

Announcing Call to Action Conference 2018: A Revolution for Today’s Marketing Evolution

Webster’s Dictionary defines a ‘conference’ as, “An event at which industry professionals talk at other industry professionals who’ve stockpiled seven complimentary croissants in their bag to eat later. See also: Room temperature orange juice.”   

Whether it’s to learn some new tricks, make some new connections or drum up some new business, conferences are a necessary (and sometimes cool) part of being a marketer—but not all of them are worth your time. While your typical marketing conference has morphed from weak coffee and dry PowerPoints to free t-shirts and celebrity thought leaders, it can be tough to leave feeling like you’ve really gotten something out of the event.

We saw a need to change the conference experience. Because the experience of being a marketer has changed. 

Marketing now is harder than ever— it’s hyper-competitive, oversaturated and comprised of tired tactics that used to work. We need new solutions to old problems and actionable solutions to new problems. Especially when we’re forking out hundreds, or even thousands, of dollars on a conference ticket (money we could’ve sacrificed to the AdWords gods).

Enter Call to Action Conference.

“CTAConf has set the bar for what a marketing event should be: fun, engaging and insightful. No matter the experience level or skill set, every attendee left with a new set of philosophies and tactics to apply in their marketing practice”

Ray Silva, Strategy Lead at Apply Digital and CTAConf 2017 attendee.

Now in its fifth year (only 55 more ’til we get that diamond!), CTAConf 2018 is going to be more exciting, more targeted and more committed to your future success than ever.

Already sold on joining us? Get 10% off Early Bird tickets by using the promo code “CTAConfRevolution” at checkout.

Why this conference is different (we promise)

CTAConf merges carefully curated, usable content with…well, having a great time. It’s single track, allergic to fluff and ensures you’ll walk away with leading-edge tactics, all wrapped up in an amazing experience you’ll truly enjoy.

We’re talking hands-on workshops, a concert atmosphere, all-you-can-eat snacks and gourmet food trucks, organic networking, a genuinely friendly team and fun parties in the beautiful setting of Vancouver, B.C. (Credit to Mother Nature for that one.)

Even the sessions themselves, held in the historic and fully immersive Queen Elizabeth Theatre, will make you feel less like you’re at a “work event” and more like you’re at a Broadway show about email marketing called Don’t Spamalot. 



Most importantly, it’s designed to deliver practical know-how and future-proofing strategies from true experts covering every facet of digital marketing.

A glimpse at who’s talking and what you’ll learn

April Dunford, Wind at Your Back: Making your Market Category Work for You

April has spent her career launching innovative tech products and is a seasoned expert at getting traction in increasingly noisy markets. Prior to founding Rocket Launch Marketing, where she works with companies on market strategy and positioning, she was VP of Marketing at a series of successful high-growth startups and an executive at global companies including IBM, Nortel and Siebel Systems. She was also the top-rated speaker at last year’s CTAConf (she happens to be equal parts genius and hilarious).

In her talk, you’ll learn :

  • How to shift to a favourable market category to give your marketing programs added velocity
  • How to completely change the way customers think about your offering to remove friction in your funnel
  • The three steps for shifting market categories, from isolating your differentiators to finding your downstream customers and picking the best market current to ride
Rob Bucci, What Google Serves Up For Local Searches

Rob is the founder and CEO of STAT Search Analytics, a rank tracking and SERP analytics service for SEO experts. A developer and entrepreneur in the SEO space since 2005, Rob especially loves tackling big-data challenges in data mining and analytics.

He’ll be bringing his SEO expertise to the stage to teach us:

  • How Google interprets different levels of local intent and what searchers are seeing most often
  • How to refine your SEO keyword lists by comparing SERPs
  • How to better tailor your content to build more targeted ad campaigns that achieve better results
Hana Abaza, Product Marketing: Inside and Out

Hana is the Head of Marketing for Shopify Plus, a division of Shopify that powers some of the world’s fastest growing and most iconic brands (Rebecca Minkoff, Nestle, The New York Times and FAO Schwartz, to name a few). Prior to joining Shopify, Hana led marketing and growth in a variety of industries and has a proven track record for scaling teams, revenue and customers.

You’ll leave her talk knowing:

  • The guidelines for how and when to invest in product marketing
  • How to develop a go-to-market framework for your company
  • How to set up product marketing as a cross-functional powerhouse
Ross Simmonds, Beyond Google: How To Attract Relevant Traffic Through Diverse Channels

Ross is the founder of Foundation Marketing and creator and co-founder of content curation tool, Crate, and Hustle & Grind, an online store for entrepreneurs.

Over the last several years, he’s worked to help some of the fastest-growing startups and a variety of Fortune 500 brands succeed in their digital marketing efforts. His talk focuses on typically under-used and ignored channels as missed opportunities for quality traffic.

During his talk, you’ll learn:

  • What brands can do to spread their story beyond SEO & SEM
  • How brands can leverage communities and other networks to drive consistent traffic
  • Research and data on the importance of diverse channels
  • Examples of what happens when you embrace a more diverse content approach
Krista Seiden, Measurement for Growth

Currently a Product Manager and Analytics Evangelist for the Google Analytics team, Krista is a leader in the digital analytics industry and co-chair for the San Francisco chapter of the Digital Analytics Association. She has nearly a decade of experience in digital marketing, analytics, and product management, having led analytics and optimization at Adobe and The Apollo Group prior to joining Google.

Her talk will cover:

  • What growth marketing really is, beyond the buzzwords
  • How effective growth marketing is rooted in analytics, experimentation, and product development
  • How to strategically measure and use data for targeted growth
Cyrus Shepard, SEO Success: The One Engagement Metric to Rule Them All

Former Head of SEO and Content Development at Moz, Cyrus now runs Zyppy, a fast-growing SEO company. When he’s not consulting with companies big and small on how to improve their rankings, traffic and profits, he travels the world as a speaker, making complex SEO equations easy to understand.

This August Cyrus will take the stage to teach us:

  • How much speed and rankings matter and steps to improve the right areas
  • What “fuzzy” engagement metrics like bounce rate, time on site, pages per visit really mean and what you need to focus on
  • How to use SEO data to improve conversions
Oli Gardner, Content Marketing is Broken and Only Your M.O.M. Can Save You

Oli is not only an Unbounce co-founder, he’s an expert and international speaker on conversion optimization, data-driven design and landing pages (he claims to have seen more landing pages than anyone on the planet).

He’s often the highest-rated speaker at events around the world, including previous Call to Action Conferences. This year, he’ll be talking:

  • Data and lessons learned from his biggest ever content marketing experiment, and how those lessons have changed his approach to content
  • A context-to-content-to-conversion strategy for big content that converts, based on designing for your customer’s “aha!” moments
  • Advanced methods for creating “choose your own adventure” navigational experiences to build event-based behavioural profiles of your visitors 
  • Innovative ways to productize and market the technology you already have, with use cases your customers had never considered

What’s happening off stage

Learn by doing with Unbounce workshops

Get your hands proverbially dirty with interactive workshops on A/B testing, landing page optimization, PPC, analytics and mastering Unbounce for more conversions across every type of digital campaign. A full-day event prior to the conference, the workshops are a chance to work directly with seasoned pros on solutions to real marketing problems. Workshops have been so popular in previous years they were standing room only.

Make your first (or hundredth!) landing page, popup or sticky bar with us at the workshops, and learn all the insider tips you can take home to your team.  

Eat to your stomach’s content, on us

Call to Action Conference food trucks
When we say free food, we don’t mean “Enjoy these sweaty muffins! If you want lunch, there’s a Chipotle two blocks away.” We mean constantly replenished drinks, foodie-approved snacks and a lunchtime convoy of the city’s finest food trucks delivering everything from truly tasty salads to life-changing mac ‘n’ cheese. All included.

Meet, connect and party with great people


Call to Action Conference hovers around 1,200 attendees for a refreshingly intimate experience with the buzzing energy of a big-time event. Meet fellow passionate marketers from cities all over the world, mingle with industry leaders and see just how stereotypically Canadian the friendly Unbounce crew is.

“CTAConf was amazing! My favourite part? The caliber of attendees and the energy they brought. Met so many remarkable marketers!”

—Jes Kirkwood, Head of Content Marketing at ProsperWorks and 2017 attendee.

Soak up Vancouver at the best time of year


Business and pleasure do mix! Especially in summer. CTAConf 2018 is happening August 27-29, smack dab in the middle of Vancouver’s sunshine season. Take a seawall stroll between sessions, taste-test your way through a diverse food scene, hone your craft beer palate at one of many world-renowned breweries or tack on an extra day and get outside the city to those calling mountains. We turn into human prunes waiting out months of rain for a Vancouver summer and it’s totally worth it. Come see for yourself.

Enjoy champagne hotels at boxed-wine prices


We’ve secured 40-50% discounts on rooms at the Four Seasons Hotel Vancouver, Fairmont Hotel Vancouver and Delta Hotels Vancouver Downtown Suites, exclusive to CTAConf 2018 attendees and just steps away from the conference venue. Rooms are at first come, first serve and book up fast so grab yours ASAP and prepare your senses for the fluffiest of robes.

Join the revolution

Call to Action Conference 2018 is coming up fast and early bird prices are ending soon. Get your single, group or customer ticket before May 31, 2018 and come hold us to our promise. You’ll leave feeling inspired, energized and ready for marketing victory with tactics and strategies you can put into action the very next day. In other words, you’ll really get something out of this.

Don’t forget to sweeten that Early Bird deal. Use the promo code “CTAConfRevolution” at checkout to get 10% off all ticket rates. See you in August!

P.S. If you’re joining us from the United States, you’re in luck. Ticket prices are in Canadian dollars. Your boss basically can’t say no (and if you happen to be the boss, you can take your whole team). You’re welcome, eh.

Original article: 

Announcing Call to Action Conference 2018: A Revolution for Today’s Marketing Evolution

Beyond Tools: How Building A Design System Can Improve How You Work

When high potential projects fall apart, it’s often a failure of collaboration and alignment. The tools, the assumptions, the opportunity, and the intentions may line up, but if people don’t communicate or don’t have a clear map to help them move in the same direction, even the best projects falter.
Communication failures are human problems, so they’re messy and hard to solve. They involve feelings and a willingness to have uncomfortable conversations.

Original source:

Beyond Tools: How Building A Design System Can Improve How You Work

Thumbnail

CSS Grid Layout

Since the early days of the web, designers have been trying to lay out web pages using grid systems. Likewise, almost every CSS framework attempts to implement some kind of grid system, using floats and often leaning on preprocessors. The CSS Grid Layout module brings us a native CSS Grid system for the first time—a grid system that does not rely on document source order, and can create complex layouts which are easily redefined with media queries.

See original – 

CSS Grid Layout

8 Things You Need to Know to Improve Your Influencer Marketing Campaign

influencer

You’re going to start your very first influencer marketing campaign, and you want to make sure it’s a success. Or maybe you’ve executed a few campaigns before, and you want the next one to deliver better results. Either way, knowing how to manage your campaign effectively is crucial if you want influencer marketing to work for you. While it’s not always easy to manage influencer marketing campaigns, you’ll find it much easier if you remember the following steps: 1. Set Up a Goal You should always start with a defined goal, regardless of whether it’s influencer marketing or any other…

The post 8 Things You Need to Know to Improve Your Influencer Marketing Campaign appeared first on The Daily Egg.

Continued – 

8 Things You Need to Know to Improve Your Influencer Marketing Campaign

Why You Should Care About Website Architecture When it Comes to Your SEO

website seo and architecture

Moz’s Whiteboard Friday on IA and SEO I’ve always had a thing for site architecture and designing sites that are both user AND search engine friendly. However, it can be a bit challenging. Especially for those who have been doing SEO for a while. We all want to over-optimize every web page as much as possible. Well, stop doing that! In this video, Rand does a great job of explaining what you need to keep in mind when you’re designing a website that has both a good user experience and SEO. A Few Key Takeaways From The Video: Good information…

The post Why You Should Care About Website Architecture When it Comes to Your SEO appeared first on The Daily Egg.

Continue reading here – 

Why You Should Care About Website Architecture When it Comes to Your SEO

‘Get past personas’, and other takeaways from CTA Conf 17

Reading Time: 7 minutes

This week, I spent two jam-packed days at Unbounce’s fourth-ever Call To Action Conference. The one-track event featured some of today’s most influential digital marketing speakers like Mitch Joel, Kindra Hall, and Rand Fishkin.

WiderFunnel team at CTA Conf 17
The WiderFunnel team and I having a ball at the CTA Conf afterparty.

Session topics ranged from integrity in marketing, to performance marketing success, to the marriage of SEO and conversion optimization. But most shared a common theme: Don’t forget about the real person behind that click.

Knowledge bombs were dropped, important conversations were had, and actionable insights were shared. So, in today’s post, I’m going to share some of my most important takeaways from CTA Conf.

If you attended the conference, please share your favorite takeaways in the comments below!

1. Don’t be trendy, be data-driven

Featured Speaker: Oli Gardner

Unbounce Co-Founder, Oli Gardner, kicked things off on the first day.

Fun fact: Due to technical difficulties, Oli ended up acting out his entire opening video sequence (and most of the subsequent videos in his presentation). He handled the hiccup like a pro, of course, and launched into a great session on data-driven design.

One of the strongest points that Oli made was that digital marketing trends self-perpetuate, regardless of whether or not they are helpful to a user.

I know we, as data-driven marketers, ‘know’ this fact. We complain about ‘best practices’, and buzzwords, and yet we still get totally caught up in trends.

Remember when explainer videos became the end-all, be-all for homepages?

WiderFunnel CTA Conf Recap Oli Gardner
Oli pointing out the flaws in an old Unbounce explainer video at CTA Conf.

What happened? Hundreds of blog posts were written about explainer videos, and hundreds of explainer videos were produced to talk about how great explainer videos are. And then, every homepage on the internet featured an explainer video.

But…were all of those explainer videos really what customers needed? In some cases, but certainly not in all.

Instead, Oli spoke about the need to “mend trends”, and make design decisions based on data, rather than the most popular trend at the time.

We hold the same view at WiderFunnel. You can A/B test explainer video after explainer video. But to create truly impactful experiences, you have to go back to the research phase.

Use the data you have to drill into what you think are you most important business problems. And test hypotheses that attempt to solve for those problems.

2. Choose people, not personas

I’m not a big fan of personas. I’ve never kicked it with a persona.

– Wil Reynolds

But, without personas, how do I write the right copy for my customers at the right time?!

Don’t panic.

Focus on motivation instead

Featured Speaker: Joel Klettke

Conversion copywriter extraordinaire, Joel Klettke, spoke about how to read your customer’s mind. He emphasized the need to get past user personas and keywords, and focus on customer motivation instead.

Joel Klettke at CTA Conf
Joel Klettke on stage at CTA Conf.

We get stuck behind our screens, and start writing about ‘synergies’ and features that our customers really don’t care about.

– Joel Klettke

He outlined a framework for getting your customers to tell you about their pain points, anxieties, desired outcomes, and priorities, in their own words:

  1. Ask
  2. Record
  3. Analyze
  4. Feed
  5. Measure

Note: I didn’t dig too deeply into the framework, here. But Joel put together a resource for CTA Conf attendees, and graciously gave me the green light to share it. Check it out here!

Jobs To Be Done vs. Personas

Featured Speaker: Claire Suellentrop

On Day 2, Claire Suellentrop built on this idea of the dated persona.

She explained that marketers collect many data points about our prospects, like…

  • Gender, age, location
  • Title, company, industry
  • Married, no kids, one puppy

…but asked whether or not all of that data actually helps us determine why a real human being just bought a new backpack from Everlane.

As an alternative, she suggested the Jobs To Be Done framework. JTBD refers to your customer’s struggle to make progress on something. When your customer overcomes that struggle, the job is done, and they have made progress.

The framework looks a little something like this:

“When ____________ (event that triggers the struggle), help me ______ (struggle / job) so I can __________ (better life / done).”

To identify your customers’ struggle, Claire suggests actually asking your customers. She outlined several sample questions:

  • “Take me back to life before [product]. What was it like?”
  • “What happened that compelled you to start looking for something different?”
  • “What happened when you tried [product] that made you confident it was right for you?”
  • “What can you do now that you couldn’t do before?”

3. Tell the story, don’t just allude to it

Featured Speaker: Kindra Hall

One of my favorite speakers on Day 1 of CTA Conf was Kindra Hall. (Not surprising, as she is the storytelling expert).

Kindra dug into strategic storytelling in marketing. According to her, you should use a story every time you need to communicate value in your marketing.

Kindra Hall at CTA Conf
Kindra Hall sets out to define storytelling in marketing.

Storytelling is powerful because real life humans are attracted to great stories. (And marketers talk to people after all).

Stories, according to Kindra, stick with us and make us do stuff because storytelling is a co-creative process.

“As I am telling you my story, you are creating your own in your mind. I am giving you my words, but you are meeting me half way, and we are creating a shared memory,” Kindra explained.

The most powerful moment in her talk came when she challenged the audience with the biggest storytelling mistake:

Too often, we allude to the story, but don’t actually tell it.

– Kindra Hall

She showed two example videos to illustrate her point. In the first, a company founder almost told her compelling story about losing both of her parents, but glossed over the details. The result was a pretty video, with pretty music that almost created feeling.

In the second video, the founder told her full story, explaining how losing her parents shaped her company and product. The difference in emotional impact was kind of incredible.

And making your customers feel is a huge part of making your customers act. Because we — consumers, people, humans — don’t buy products or services…we buy feelings.

4. Pay attention to people signals

For goodness’ sake, solve the searcher’s problem

Featured Speaker: Wil Reynolds

Founder of Seer Interactive, Wil Reynolds, danced his way onto the stage, and delivered a really strong talk on SEO, conversion optimization, and the importance of people signals.

Wil Reynolds at CTA Conf
Wil remembers when he f*ed up, and forgot about the HUMAN element.

He didn’t mince words, explaining that marketers too often put conversions before customers. We ask “how do I get?” when we should be asking, “how do I help my customer get what they need?”

When you do an amazing job on search, you get to help people who are lost solve their problems.

– Wil Reynolds

Wil painted a picture of how we, as marketers, are letting our own wants override solving our customers’ problems. In the world of search, Wil pointed out that Google rewards pages that solve the searchers’ query. So solve the searchers’ query!

Much like we allude to stories, but often don’t tell them, we talk about listening to our customers, but often don’t really listen.

Instead of showing them product comparisons when they search “best CRM platform”, we pay to show them a landing page that claims “My product is the best! Get in my funnel!”

This isn’t just an issue in search or performance. In conversion optimization, there is an emphasis on velocity over user research. There is pressure to test more, and test faster.

But, we must take the time to do the research. To get as close to our customers’ problem, and tailor our marketing experience to their needs.

Win at SEO and CRO with a long-term vision

Featured Speaker: Rand Fishkin

Building on Wil’s session on Day 1, SEO wizard, Rand Fishkin, gave the audience actionable tips around how to optimize for searcher intent.

Rand pointed to conversion optimization.

At its core, conversion optimization is about getting into your customers’ minds, and testing changes to get closer to the best possible customer experience. To give your customer what they need, you must soothe their pain points, and provide a solution.

You can apply this same concept to SEO: If you 1) gain a deep understanding of what searchers are seeking, and 2) determine why some searchers come away unsatisfied, you can optimize for searcher task accomplishment.

Rand Fishkin at CTA Conf
Rand demonstrates how establishing trust leads to ROI.

Unfortunately, Rand pointed out, there is still a conflict between SEO and CRO, because conversion rate and searcher satisfaction are sometimes in direct opposition.

For example, let’s say you want to get more blog subscriptions, so you add a pop-up to your blog post. This may lead to a higher conversion rate on the page, but lower searcher satisfaction. Some readers might bounce, which may lead to lower organic traffic.

But, Rand ended on a high note:

You can win with long-term thinking. By always asking, ‘are we building a brand that’s helping people succeed?’

– Rand Fishkin

5. Don’t fear disruption. Own it.

Featured Speaker: Mitch Joel

One of the final speakers on Day 1 was marketing thought-leader, Mitch Joel, who shook things up a bit. Mitch spoke about what it means to be disruptive (and how to not fear disruption).

Mitch Joel at CTA Conf
“For a seed to achieve its greatest expression, it must come completely undone.”

When I ask C-Suite marketers to define disruption, the definition is never consistent. In fact, I often don’t get a definition of disruption, I get a definition of destruction.

– Mitch Joel

He asked, if disruption is the big bad wolf, who are the heroes in this marketing story?

Well, like the three little pigs, Mitch discussed three ways to be disruptive rather than be disrupted:

  1. Transformation: Business transformation is not your products or services, etc. It’s inside out. And it starts with technology. You need to be using the same tech, same form of communication that your customers are using.
  2. Innovative marketing: Innovation is not re-allocation of resources. It isn’t investing more in Google Adwords versus another channel. Real innovation is about making and creating new products and experiences that we can use to market with.
  3. Micro-transactions: Marketers and businesses get caught up in the macro transaction, in the purchase. But we live in a world of micro-transactions. This is the customer journey, and it is extremely important to understand.

Mitch Joel emphasized the fact that if you can apply these ‘three little pigs’ to your business model, you will be in a great place, though he recognized that it’s not always easy.

But nothing great is ever easy.

6. Be bold enough to be wrong

Featured Speaker: Michael Aagaard

Senior Conversion Optimizer at Unbounce, Michael Aagaard, closed out the two-day conference. His message was a simple but powerful warning against the trap of confirmation bias.

We, as humans, are not interested in information, but confirmation.

– Michael Aagaard

Confirmation bias refers to our tendency to search for and recall information in ways that confirm our existing beliefs, hypotheses, and expectations. And it is a threat to data-driven marketing.

Michael Aagaard at CTA Conf
Michael takes us back to ye olde London to make a point about the enduring power of confirmation bias.

When you A/B test, you are searching for objectivity. You are trying to figure out which variation your users prefer, outside of your own opinions and beliefs about what works best.

But it’s rarely that simple, even if you are a pro.

Michael showed us a landing page that he analyzed for a client, featuring a stock photo hero image. He said he had railed against the photo, and shown the client examples of the hundreds of other stock photos featuring the same model.

But, when he tested the landing page, he found that the original version, featuring the ‘terrible’ stock photo, was the clear winner.

“Maybe,” he said, “users don’t spend hours scouring the internet for stock photo sinners like I do.”

He urged the audience to be bold enough to be wrong, to challenge our hypotheses, and get out of the marketing bubble when we are trying to solve problems.

If we don’t get out of the marketing bubble, we end up making assumptions, and designing experiences for ourselves.

– Michael Aagaard

Go hang out with your customer success teams and sales teams; get outsider input on your ‘great’ ideas. Go find your own natural skeptic, and challenge your hypotheses.

Were you at CTA Conf 17? What were your most important takeaways? Who were your favorite speakers, and why? Let us know in the comments!

The post ‘Get past personas’, and other takeaways from CTA Conf 17 appeared first on WiderFunnel Conversion Optimization.

More – 

‘Get past personas’, and other takeaways from CTA Conf 17

How to Micro Test New Product/Service Ideas Using AdWords

Launching a new business idea or deciding to develop a new product for your company is not without risk. Many of the best business ideas have come from inspiration, intuition or in-depth insight into an industry. While some of these ideas have risen to dominate the modern world, such as search engines, barcodes and credit card readers, many fine ideas still result in bankruptcy for their company, due to insufficient demand or failure to properly research customer desire. If you build it will they come? Often smart business entrepreneurs can still make big mistakes. With new product, service or business…

The post How to Micro Test New Product/Service Ideas Using AdWords appeared first on The Daily Egg.

See the original article here: 

How to Micro Test New Product/Service Ideas Using AdWords

The 7 Principles of Conversion-Centered Design [Free 56-Page Ebook]

I’d like to meet the person who goes into IKEA to pick up a new fridge and walks out with only the fridge. If you’re like me, you inevitably wind up with a car full of junk products, an ice cream in one hand and two hotdogs in the other.

That’s because IKEA stores aren’t designed to help you achieve a single goal.

conversion-centered-design-principles-ikea-650
That’s a pretty crappy attention ratio. Image credit: ALEXANDER LEONOV via Shutterstock.com.

They don’t care about the “optimal route” to the cash register — they want you to snake in and out of the showrooms. They want you to stop and fantasize about chopping imaginary vegetables on their impeccable countertops.

If you’re shopping for a new fridge and you know that’s all you need, you’re better off going to an appliance showroom, where the goal is clear: Get your gadget and get out.

This focus on a singular goal is the same focus that lies at the heart of our latest ebook:

Maximize Conversions Using Conversion-Centered Design

Download this ebook and become an expert at building delightful, high-converting marketing campaigns.
By entering your email you’ll receive weekly Unbounce Blog updates and other resources to help you become a marketing genius.

For a marketer, conversion means convincing a visitor to do one thing and one thing only. Not one of many things, not accomplishing it in under seven seconds, not successfully navigating from one point to another — just completing a single business-driven objective.

Conversion-Centered Design (CCD) helps you design experiences that guide the visitor towards completing that one specific action, using persuasive design and psychological triggers to increase conversions. In other words, it’s about persuasion.

And as you’ll learn, persuading your prospects to take the desired action you want them to take doesn’t have to be difficult (especially when you’re not distracting them with 99¢ hotdogs).

You’ll learn:

  • The theory behind each of the 7 CCD principles (Attention, Context, Clarity, Congruence, Credibility, Closing, Continuance) and how they affect conversion rates.
  • How to leverage the principles to create and optimize high-converting marketing campaigns.
  • Why landing pages are instrumental to improving the ROI of your marketing campaigns.

You can grab the framework as a downloadable ebook above, or check out the content on our interactive site here.

More – 

The 7 Principles of Conversion-Centered Design [Free 56-Page Ebook]