<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-image-1.jpeg" alt=""/></figure>



<h2>Simple rules that will help you design forms users will like to complete</h2>



<p>Forms have existed for a significant amount of time, greatly simplifying the task of drafting complaints and various other legal pleadings. With the advance of information and its processing, means to gather the data are also evolving. As printed forms were here for years we can learn a few tips from their design.</p>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-Image-2-1024x435.jpeg" alt="" class="wp-image-113925"/></figure>



<h2 id="2dbd">Text field anatomy</h2>



<p>Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. Text field component design should provide a clear affordance for interaction, making the fields discoverable in layouts, efficient to fill in, and accessible.</p>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-Image-3-1024x435.jpeg" alt="" class="wp-image-113926"/></figure>



<p><strong>Here are key elements of the basic Text field:</strong></p>



<ol><li><strong>Container</strong>&nbsp;— interactable input area&nbsp;</li><li><strong>Input text</strong>&nbsp;— entered into the text field</li><li><strong>Label Text</strong>&nbsp;— tell users what information belongs in a given form field</li><li><strong>Placeholder text&nbsp;</strong>— is a description or example of the information required that is replaced with input text after users provide it</li><li><strong>Helper or Validation text(optional)</strong>&nbsp;— provides additional context or validation message&nbsp;</li><li><strong>Leading icon(optional)&nbsp;</strong>— describe the type of input a text field requires</li><li><strong>Trailing icon(optional)</strong>&nbsp;— additional control for entered text, like clear, hide/show, etc</li></ol>



<h2 id="5db8">Text field types</h2>



<p>Most of them are based on basic text fields that were modified to better handle specific types of information, like the credit card numbers. Here are just a few examples of input types that are most commonly used throughout UIs we creating:</p>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-image-4-1024x809.jpeg" alt="" class="wp-image-113927"/></figure>



<p>(<em>We specifically are not talking about few input types like checkboxes and radio buttons as we will cover them later in the series</em>)</p>



<h2 id="4469">Use appropriate input type for data you collecting</h2>



<p>Providing the right type of the text field for requested data will help users enter information in the right format and avoid mistakes, making the process as easy and efficient as possible.</p>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-image-5-1024x553.jpeg" alt="" class="wp-image-113928"/></figure>



<h2 id="ec30">Text fields have to change their appearance based on state and user interactions</h2>



<p>This can be done by providing visual cues that will communicate the state of the text field. Input text fields can have one of the following states: inactive, hover, disabled, focused, validation, error. All states should be clearly differentiated from one another, and consistent throughout the whole form and application. Better to follow best practices to not challenge formed user mental models.</p>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-image-6-1024x478.jpeg" alt="" class="wp-image-113929"/></figure>



<h2 id="a9a9">Choosing the best text field style</h2>



<p>Usually, you will have three main options for label positioning: top, left, and right-aligned. The best style for you will depend on key goals and sizes of the form, components library, and platform you design for. All of them have some advantages and disadvantages.</p>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-image-7-1024x478.jpeg" alt="" class="wp-image-113930"/></figure>



<p>Underline input popularized with original Material design guidelines are not the best option. There were already revised based on the large&nbsp;<a href="https://medium.com/google-design/the-evolution-of-material-designs-text-fields-603688b3fe03" target="_blank" rel="noreferrer noopener">Evolution of Material Design’s study</a>&nbsp;that I recommend you to check out. Interestingly enough the same study showed that users prefer inputs with rounded corners.</p>



<h2 id="c95f">Left-aligned labels</h2>



<p>A good choice when the data requested is unfamiliar for users</p>



<ul><li><strong>Advantages:&nbsp;</strong>Easily scalable labels, good use of vertical space</li><li><strong>Disadvantages:&nbsp;</strong>Excesisbe and variable distance between labels and corresponding inputs increase completion time</li></ul>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-Image-7-1-1024x539.jpeg" alt="" class="wp-image-113931"/></figure>



<h2 id="090f">Right-aligned labels</h2>



<p>Have nearly twice faster completion time vs left-aligned labels</p>



<ul><li><strong>Advantages:&nbsp;</strong>Text field labels and input are closely positioned that limits number of eye movements resulting in fast completion time</li><li><strong>Disadvantages:&nbsp;</strong>Harder to quickly scan the form and understand what all information is required</li></ul>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-Image-8-1024x539.jpeg" alt="" class="wp-image-113932"/></figure>



<h2 id="2142">Top aligned labels</h2>



<p>Fastest completion time and all-around best choice for the majority of the cases. Work well on mobile as they don't require a lot of horizontal space</p>



<ul><li><strong>Advantages:&nbsp;</strong>Allow users to capture input label and input text with one single eye movement, fastest completion time</li><li><strong>Disadvantages:&nbsp;</strong>Require more vertical space</li></ul>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-Image-9-1024x539.jpeg" alt="" class="wp-image-113933"/></figure>



<p>You can learn more on this topic&nbsp;<a href="http://static.lukew.com/webforms_lukew.pdf" target="_blank" rel="noreferrer noopener">“Best practices for form design- by Luke Wroblewski”</a>&nbsp;and in&nbsp;<a href="https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php" target="_blank" rel="noreferrer noopener">“ Label Placement in Forms — by Mateo Penzo”</a></p>



<h2 id="bee5">Length of text field should be proportional to the expected user input</h2>



<p>Using identical input length for all text fields in your forms will make them visually pleasing but will be harder to complete.</p>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-Image-9-1-1024x528.jpeg" alt="" class="wp-image-113934"/></figure>



<h2 id="90b5"><strong>Placeholders are not replacements for labels</strong></h2>



<p>Disappearing placeholder text strains users’ short-term memory. Without labels, users cannot check all information they provided before submitting a form. If you want a very minimalist form design you can use the Material design floating labels approach.</p>



<p>Placeholder text inside the form can sometimes confuse users, better to use hint text outside the field.</p>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-Image-10-1024x553.jpeg" alt="" class="wp-image-113935"/></figure>



<h2 id="ef09">Help users fill in forms</h2>



<ul><li>Help resolve partial queries with&nbsp;<strong>Auto-Complete.&nbsp;</strong>This<strong>&nbsp;</strong>happens within the input box where you type and you can press either enter or “right-arrow-key” to accept it.</li><li>Search a virtually unbounded list for related keywords and phrases with&nbsp;<strong>Auto-Suggest.&nbsp;</strong>This<strong>&nbsp;</strong>list appears as a multiple suggestion list in the form of the drop-down.</li><li><strong>Pre-fill fields and use smart defaults.&nbsp;</strong>Often you can easily detect a user’s country and the city by IP or geolocation. And based on most common scenarios and analytics you can define what should be selected by default. E-Commerce is an exception, don't preselect any preferences related to purchasing like size or color.</li></ul>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-Image-11-1024x539.jpeg" alt="" class="wp-image-113936"/></figure>



<ul><li><strong>Provide contextual information.</strong>&nbsp;If you know that in order to make the right decision or avoid mistakes users will need some additional information like an account balance when making a transfer, don’t hesitate to present it.</li></ul>



<h2 id="57fc">Use inline validation</h2>



<p>”Live inline validation” is where the validity of the user’s inputs are checked live as the user progresses through the form, as opposed to checking the inputs in a lump sum when the user submits the form. Implement it correctly to not do more harm:</p>



<ul><li><strong>Display validation messages</strong>&nbsp;close to the input and all together</li><li><strong>Don't shout on users</strong>, error messages should tell users how to fix the problem instead of blaming them</li><li>Avoid “<strong>premature validation”&nbsp;</strong>when the field<strong>&nbsp;</strong>is marked as invalid before they have finished typing</li><li>Consider using&nbsp;<strong>“positive validation”</strong>&nbsp;it can add a sense of delight and progression</li></ul>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-Image-12-1024x553.jpeg" alt="" class="wp-image-113937"/></figure>



<h2 id="e9ad">Reduce the number of fields</h2>



<p>It will remove the visual and cognitive load, and look much simpler.</p>



<ul><li>Don’t break text like Full name and Date into multiple fields</li><li>Don't ask for the same info multiple times</li><li>Work with labels and hints copy to shorten it as much as possible</li></ul>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-Image-13-1024x553.jpeg" alt="" class="wp-image-113938"/></figure>



<h2 id="bae9">Hide irrelevant fields</h2>



<p>By disclosing information progressively, we reveal only the essentials and help users manage the complexity only when they need to.</p>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-Image-14-1024x510.jpeg" alt="" class="wp-image-113939"/></figure>



<h2 id="c00e">Use conditional logic</h2>



<p>Conditional logic allows automatically show or hide fields and skip pages in a form, based on visitor answers. This approach not only will reduce the number of fields but also make the fill-in process more personalized and conversation-like.</p>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-Image-15-1024x484.jpeg" alt="" class="wp-image-113940"/></figure>



<h2 id="9a19">Group related fields</h2>



<p>One of the easiest ways to simplify complex forms is to start grouping related fields. There are multiple principles of grouping in Gestalt psychology that help items feel related: Proximity, Similarity, Continuity, Closure, and Connectedness. Grouping dozens of unstructured fields into few manageable sets will significantly increase form usability.</p>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-Image-16-1024x672.jpeg" alt="" class="wp-image-113941"/></figure>



<h2 id="b0e2">Avoid using multiple column layouts</h2>



<p>One column layout creates a clear path to completion for the user. Consequences of using a multi-column form layout include users skipping fields where they actually have data to input, inputting data into the wrong fields, or simply coming to a halt that can lead to abandonment.</p>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-Image-17-1024x625.jpeg" alt="" class="wp-image-113942"/></figure>



<h1 id="f039">Break complex forms into a few simple steps</h1>



<p>Sometimes even after removing everything unnecessary, some forms can get huge. Breaking up the huge tasks into a series of smaller looks much easier and motivates them to carry out the process to the end.</p>



<ul><li><strong>Display the steps and visually communicate progress</strong>&nbsp;user makes, this gives more satisfaction and motivates to move forward</li><li><strong>Don’t granulate the form</strong>, too many steps will not help, just annoy users</li><li><strong>Carry on a summary of key information provide&nbsp;</strong>to reduce anxiety and need to have review step in the end</li></ul>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-Image-18-1024x539.jpeg" alt="" class="wp-image-113943"/></figure>



<h2 id="5384"><strong>Minimize the ability to navigate outside of the wizard</strong></h2>



<p>If the form is large enough to break into multiple steps, it deserves a separate clearly focused space to work with it. Exposing general navigation or any links that will disrupt the process will just create confusion. I would also advise against multi-step forms in small Pop-Ups.</p>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-Image-19-1024x524.jpeg" alt="" class="wp-image-113944"/></figure>



<h2 id="4fa4">Show the appropriate keyboard type</h2>



<p>Android or iOS provides several different keyboard types, each designed to facilitate a different type of input. To streamline data entry, the keyboard displayed when editing a text field should be appropriate to the type of content in the field. Be conscious of where the keyboard will appear. To not introduce scroll needlessly, position your text fields in the upper area.</p>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-Image-20-1024x552.jpeg" alt="" class="wp-image-113945"/></figure>



<h2 id="d6f7">Stop ridiculous password creation designs</h2>



<ul><li>Allow users to&nbsp;<strong>unmask their password</strong>&nbsp;instead of asking them to enter it 2 times, It will also work better for password generating apps</li><li><strong>Display password requirements</strong>&nbsp;all the time, and indicate users' progress towards meeting all the criteria. Try to simplify requirements for the user.</li><li>Use<strong>&nbsp;strength meters</strong>&nbsp;encourage users to create stronger passwords</li></ul>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/08/Taras-Image-21-1024x542.jpeg" alt="" class="wp-image-113946"/></figure>



<p><a target="_blank" rel="noreferrer noopener" href="https://uxdesign.cc/selection-controls-ui-component-series-3badc0bdb546"><br></a></p>

Text fields & Forms design — UI components series

How to simplify your design

I help businesses design great experiences www.windmillsmartsolutions.com. Sharing what I learned.

Taras Bakusevych