large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p>Published on <a href="https://blog.prototypr.io/use-these-top-10-tips-when-you-design-forms-d095d6e3ab8a?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Chaymae Lougmani </p>
<h4>Best practice in form design</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*fTIV0IAJ2dwz6CUGrQbcZg.png"></p>
<h4>Why this article?</h4>
<p>Digging into accessibility and usability in form design was a shocking experience. I felt frustrated when I tried screen readers, accessing input field using only keyboard and changing the colour contrast in my screen. I shared the whole experience in a few talks, some people asked me if I would write about it and here I am!</p>
<h3>Forms are important and a lot of business rely on them</h3>
<p>A form is an electronic document that contains a structured set of related user input fields.</p>
<p>Following best practice in form design helps business by making it easy for user to complete their goals. It makes their experience seamless and delightful which usually results on a rise in completion rate.</p>
<p>Sometimes the effort could be as small as changing the call to action message. Jared M. Spool wrote an article about <a href="https://articles.uie.com/three_hund_million_button/">The $300 Million Button</a> that resulted in an increase of $300 million for an e-commerce business.</p>
<blockquote><p>“The number of customers purchasing went up by 45%. The extra purchases resulted in an extra $15 million the first month. For the first year, the site saw an additional $300,000,000” — Jared M. Spool</p></blockquote>
<p>User frequently leave sites because:</p>
<p>•They keep getting an error in a form<br /> •They don’t want to register<br /> •They don’t want to give unnecessary information</p>
<h3>The 10 golden rules</h3>
<p>I summarised part of my talks about usability in form design. The chapter merges <a href="https://www.nngroup.com/articles/web-form-design/">10 recommendations</a> by Kathryn Whitenton with examples I found in different websites to back up each point. I also added a few things from <a href="https://creedbooks.co.uk/products/web-form-design?utm_medium=cpc&amp;utm_source=googlepla">Web Form Design</a> by Luke Wroblewski</p>
<h4>1. Keep it short</h4>
<p>Eliminating unnecessary fields requires time but increases the conversion rate.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/459/1*rztLRl5Lf3as9Dlag9LDVw.png"></p>
<h4>2. Visually group related labels and fields</h4>
<p>Labels should be close to the fields. Use some white space to group or separate elements visually. If the form is long, you can break it down to steps. One step per page.</p>
<p>If your form asks about different topics, section it into separate groups of fields and name the groups accordingly.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Uf29FhIHxHrAhkWf0KEGSw.png"><a href="https://www.nngroup.com/articles/form-design-white-space/">https://www.nngroup.com/articles/form-design-white-space/</a></p>
<h4>3. Present fields in a single column layout</h4>
<p>Multiple columns interrupt the vertical momentum of moving down the form.</p>
<p>There are some exceptions to this rule: short and/or logically related fields such as City, State, and Zip Code can be presented on the same row.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/670/1*mXra45DwrkX-V2dpuMcQVg.png"><a href="http://www.lukew.com/ff/entry.asp?571">http://www.lukew.com/ff/entry.asp?571</a></p>
<h4>‘Option A’ vs ‘Option B’</h4>
<p>If you had to choose between ‘Option A’ and ‘Option B’, which one will you go with?</p>
<p>I’ve done a few talks about usability and accessibility in form design. Every time I asked this question, it created a noise and people started debating. Some raise their hands for option A and some for option B. The best option is B’ and this is based on a research <a href="https://www.lukew.com/ff/entry.asp?571"><strong>Primary &amp; Secondary Actions in Web Forms</strong></a><strong> </strong>by Luke Wroblewski.</p>
<p>The primary call to action should be on the left and aligned with the rest of the form. Easy scan and quick access by keyboard.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*tApO_tHhBUSQwcQBPZokqg.png"></p>
<h4>Primary call to action</h4>
<p>Make the weight of the primary call to action stands more than the secondary one. This helps reduce errors and it’s easy to access by keyboard.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/931/1*fyUeqdA5zofheZ5AzzPYGw.png"><a href="http://www.lukew.com/ff/entry.asp?571">http://www.lukew.com/ff/entry.asp?571</a></p>
<h4>4. Use logical sequencing</h4>
<p>Stick to standard sequences and consider regional or cultural differences such as date formats.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*udkLF6opUhlZH-rXSvUpNA.png"></p>
<p>It’s important to consider the cultural difference in sequencing information. Dates as an example, Japan, Europe and the US all have a different way of displaying it.</p>
<h4>5. Avoid placeholder text</h4>
<p>Without labels, users cannot check their work before submitting a form. Disappearing placeholder text strains users’ short-term memory.</p>
<p>A placeholder is supposed to help users understand what’s required from them.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_O5cei_iDrt0zDvomZ56qg.png"></p>
<h4>6. Match fields to the type and size of the input field</h4>
<p>In this instance, if your form requires a 3 digits security number, design for that size. Imagine if the security number field was as big as the rest of the fields? This would easily create doubts and confusion.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/882/1*zkA3nBqLGTEmAI2Ghd33zw.png">Marks &amp; Spencer</p>
<h4>7. Distinguish optional and required fields</h4>
<p>No more asterisk symbol* in forms. If you don’t need the information, don’t ask for it.</p>
<p>If, for marketing reasons, you want to collect more data than what you need, you can always ask for it later.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/822/1*AO00b3NP7UsdxPAvAqiDNg.png"><a href="http://patternry.com/p=required-form-fields/">http://patternry.com/p=required-form-fields/</a></p>
<h4>8. Explain any input or formatting requirements</h4>
<p>It’s important to explain what you require from the user. This prevents errors which results on reducing the completion time.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/884/1*yURMHw3htfok7--iWiQLEg.png">©2017 asos.com Ltd</p>
<h4>9. Avoid Reset and Clear buttons</h4>
<p>Thankfully this is not a common practice but you can still see it in old websites.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*i5o8QhdvqZNvBhUW3EnYOg.png"><a href="http://www.lukew.com/ff/entry.asp?571">http://www.lukew.com/ff/entry.asp?571</a></p>
<h4>10. Provide highly visible and specific error messages</h4>
<p>Be specific about the error message otherwise users won’t know what went wrong and what’s required from them.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/908/1*6hYzOu3Ga4Lgju8J2EazOQ.png">Gmail</p>
<h3>Wrap Up</h3>
<p>It doesn’t take a substantial amount of time and effort to make a form usable and the experience more enjoyable.</p>
<p>Here’s the deck for a talk I did for Women Who Code and Mobile UX London about <a href="https://chaymae.co/deck-women-who-code.pdf"><strong>How to Design Good Forms</strong></a>. See you next time for <strong>Accessibility and Usability in Form Design</strong>, where I’ll be sharing my experience with screen readers.</p>
<h4>Before you go!</h4>
<p>If you liked this article, clap and share. Get in touch if you have any questions or any examples you want to share.</p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=d095d6e3ab8a" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/use-these-top-10-tips-when-you-design-forms-d095d6e3ab8a">Use these top 10 tips when you design for 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>


Use these top 10 tips when you design for forms

Use these top 10 tips when you design for forms

Best practice in form design

Why this article?

Top Stories