<p>Published on <a href="https://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Momoh Silm </p>
<p>Forms are of pivotal importance to individuals &amp; businesses alike. When it comes to collecting data, forms most often than not is the direction we all take (perhaps due to it’s long-time presence around us offline before the internet boom). Therefore, creating user-friendly forms is a major key to increasing the completion rate of your forms.</p>
<h3>Form Anatomy</h3>
<p>Forms vary in purpose, content and size but there are basic elements to help your users skate through filling your form effortlessly.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*dUz_KNVOJaADtWhdCbsUiA.png">Anatomy of Amazon’s “Create account” form</p>
<p>i. <strong>Category or Section:</strong> This element helps users navigate the form as it walks them through the process. It is especially useful when you group the data to be collected into more than one category on your form e.g Personal details, Occupational details &amp; Financial details.</p>
<p>ii. <strong>Label: </strong>The label tells the user what data is expected from them in any particular input field.</p>
<p>iii. <strong>Placeholder:</strong> Extra description about the Label.</p>
<p>iv. <strong>Error Message:</strong> Gives the user feedback on why their input in the <em>input field </em>is unacceptable.</p>
<p>v. <strong>Primary CTA button:</strong> A button at the end of the form which the user uses to submit the input(s) on the form.</p>
<h3>Form States</h3>
<p>At the very basics, there are 3 phases your form should go through during user interaction;</p>
<p>i. <strong>Default State:</strong> This is what your form looks like before any input from the user.</p>
<p>ii. <strong>Focus State:</strong> This places emphasis on the exact input field the user is interacting with. This helps improve focus &amp; reduces scan time if a user turns away from their screen for a second.</p>
<p>iii. <strong>Feedback State:</strong> This is where the user receives feedback (most of the time error messages). Sometimes, this state can happen after the user moves to the next input field. However, if the data cannot be immediately verified, it happens when the user tries to submit the form by clicking a button.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*LKuyk6Z_cuoSgND5UZkTSg.png">Amazon’s Default, Focus &amp; Feedback State</p>
<h3>Best Practices</h3>
<h4>1. Keep it simple.</h4>
<p>Keep your forms short and simple. Collect only necessary data and avoid duplicating input fields in the name of verification e.g Instead of duplicating the password field, allow users view the password they have chosen to create.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*zGgBOxjtNRxyBvlUT3uxvA.png">Different options of verifying a user’s password as seen on Jumia &amp; Amazon</p>
<h4>2. Use Inline Validation.</h4>
<p>When giving feedback about a wrong input by the user, it’s best to attach the feedback to the particular field it addresses.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*pK2AfeACLQSpfp1iN1jgwg.png">Facebook &amp; Amazon employing 2 different techniques for Validation feedback</p>
<h4>3. Group related fields.</h4>
<p>It is of great importance to group related fields together and sort them in standard sequences. This helps users fill in the required data easily without too much cognitive load and with minimal attention span.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/838/1*9VnXw867ObmNHKwK9kGPGw.png">A truncated view of hotels.ng’s checkout page showing proper grouping of related fields</p>
<h4>4. Use Labels &amp; Left align them.</h4>
<p>Always place labels (as shown in<em> Form Anatomy</em> above) above the input fields. Do not replace <em>placeholder text</em> with Labels. Without labels, users will find it difficult to cross-check their inputs before submitting a form as it tends to make them think a lot.</p>
<p>When using labels, always left align them above the input field. There’s a comprehensive research report on how this is the most efficient method for users below.</p>
<p><a href="https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php">Label Placement in Forms</a></p>
<h4>5. Match fields to the type &amp; size of the input field.</h4>
<p>In simpler terms, always try to make sure the length of the input field is in proportion to the type of input that is expected e.g The input field for <strong>address</strong> should be longer than the input field for <strong>zip code</strong>.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*qF_ItTDhSdYWVy_tPEexzw.png">Flutterwave’s Rave Login input field sizes are in proportion to the length of the input expected<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-whkfmo1C-OHKG8C-uRzbg.png">Payporte’s input fields are not as proportional to the expected input data</p>
<h4>6. CTA buttons</h4>
<p>All forms should have a button at the end be it a SUBMIT button or a NEXT button. In any scenario whereby there has to be more than one button, emphasis should be placed on the primary button while the alternative button should be less prominent.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/904/1*CUsLngNWY3zW1NTQov9FJQ.png">Amazon does a great job of placing more emphasis on the Primary button</p>
<p>When using modals to collect data (forms in a modal), the alternative button is sometimes a CLOSE button which closes the modal. Another way around this is to use a <strong>x</strong> icon at the top right corner as a replacement for the alternative button as seen below.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*kyJaizqL9wtQ3jkBJA4Viw.png">Medium’s sign in modal uses the x icon to close the modal instead of a ‘close’ button</p>
<h4>7. The Search field</h4>
<p>Don’t hide your search form especially if your website is content heavy then searching might be one of the preferred options to get around.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*G7v1ZfYsLEXscvIY9nyC6g.png">Amazon’s search field is very prominent</p>
<p>Also, after a user performs a search do not clear the search box after submission and results have been showed. This allows the user easily glance back at the search bar to know what he/she searched for initially.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*b5fDUJQlWWKTawuOWEXe9g.png">Medium does a good job of not clearing the search bar after results are displayed</p>
<h4>8. Clarity</h4>
<p>Clearly convey messages to the users. Tell them what is expected and be as clear as possible leaving no room for ambiguity. Nobody likes filling forms, nobody loves filling it twice.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/815/1*yqZu_2x0qKXFuArCrHUpIQ.png">Cowrywise does well in making its labels as clear as possible &amp; even the button’s text is well descriptive</p>
<p><em>All product images here are neither for promotion nor defamation purposes. This content is solely for educational purposes.</em></p>
<p>Enjoyed the read? Leave some ‘claps’ below so others can find this post 🙂<br />You can also let me know in the comments section if I missed anything.</p>
<p>Peace ✌🏽</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=46e3f7f4eef2" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2">Creating User-friendly forms</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Creating User-friendly forms

Top Stories