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><a href="https://uxplanet.org/3-best-form-design-practices-for-your-design-process-383510b31613">medium bookmark / Raindrop.io</a> |  </p>
<div>
<div>
<div>
<div>
<div>
<p>UI/UX Designer. Learning to unlearn. Astronaut of the psyche and french-fry enthusiast.</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*Vw5dv7kUJmvmQIwgoXudJA.png" alt="1*Vw5dv7kUJmvmQIwgoXudJA.png"></div>
</div>
<p>Forms are a part of everyday life, and honestly, they aren’t always the best of experiences. Whether it may be confirming your plane tickets for a getaway or checking out items for your shopping cart. We all have wished that forms could be designed just a little bit better.</p>
<p>Even though we now have more options of introducing emerging tech, bots, biometrics and more into our interactive designs, the fundamental structure and purpose of forms have changed very little from the paper forms that we still have around today.</p>
<p>Essentially, forms need to be <strong>Communicative</strong> and <strong>Accommodating</strong>.</p>
<p><strong>Communicative forms </strong>help users understand why they are there in the first place, and it also makes them feel like they are having a conversation with you, not an interrogation.</p>
<p><strong>Accommodating forms</strong> help users feel they are getting the right amount of attention. When they make mistakes in the form-filling process, good forms help them find their way back, or make things easier. They consider designs that assist in various disabilities.</p>
<p>Below are three good practices that can inform your next form-building project for your work or your own website.</p>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<h4><strong>1. Take away as many form fields as possible, until you can’t, and then you try some more.</strong></h4>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*pslZafyttvJkSq1lhZAhpg.png" alt="1*pslZafyttvJkSq1lhZAhpg.png"></div>
</div>
<p>In the example above, Airbnb allows users to sign up with their e-mail, but with minimal fields and absolute ease for the customer. I know it‘s sometimes impossible to get rid of some items in your form (for many reasons) but we should always strive for minimal fields. To make my design process abit more organised, I will ask some of these questions below:</p>
<ul>
<li><em>Can labels be reworked so additional fields wouldn’t need to be included? — Having a ‘Full Name’ field instead of breaking it into ‘First’ and ‘Last name’?</em></li>
<li><em>Can this item be asked of the customer at another stage in their journey (not in this form)?</em></li>
<li><em>Can an item be removed with negotiation from stakeholders/product owners?(this is tough, as you’ll need to justify your reasoning, preferably with data</em>☺)</li>
</ul>
<p>Unless we were all fortunate enough to allow for single-click social media sign-ins or integrating Google Sign-in to our forms, we will need to consider this ‘necessarily-minimal’ approach. This take-away certainly rings true to Antoine de Saint-Exupery’s famous quote:</p>
<blockquote><p><em>“Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away”</em></p></blockquote>
<h4>2. Consider why you use a particular style of <strong>Form field Design</strong></h4>
<p>There have been several form interaction designs that have been circulating around, but they should be used for a good reason and for a specific intention in your design.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*EW_9oYow7BGf8O5rsVgoGQ.gif" alt="1*EW_9oYow7BGf8O5rsVgoGQ.gif"></div>
</div>
<p>Dynamic Single-Form Field Design</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*PGwARkTznSG9CrKJvLx3PA.gif" alt="1*PGwARkTznSG9CrKJvLx3PA.gif"></div>
</div>
<p>Natural Language Form Design</p>
<p>The micro-interactions included in these examples are fun! They bring a smile to you and your customers, and it could also increase your conversion rates. There are lots of different things that you can do in your form. Among plenty of awesome examples of text-input designs online, <a href="https://tympanus.net/Development/TextInputEffects/">here is an amazing resource.</a></p>
<p>However, you need to keep in mind the audiences which you are designing for and if some microinteractions are appropriate for your project. You also might not want to make interactions that makes the task more complex than it should be.</p>
<h4>3. <strong>Look at the big picture of your forms</strong></h4>
<p>This is probably the most challenging, but the most rewarding form design practice you could implement into your workflow. Designing better forms does not only stay at the element, component-level but rather it has to address the uncomfortable/challenging (often unspoken) question of what the high-level purpose of your form actually is.</p>
<p>It may seem straightforward to say that ‘we want our customers to sign up for our newsletter’, or that ‘we want users to create an account as soon as they arrive on our site’ and that’s okay, but what are the implications of having them do those things at that time? What are the possible strategies that are involved when you include your form at certain stages of the customer journey?</p>
<p>Thinking about the strategy of your forms and how it fits into your overall design will truly benefit the work that you do, your team/organisation does, and most importantly the experience of your target audiences.</p>
<p>I am by no means an expert on form-design, and I’m on a continuous path of exploration and learning in the field of design.</p>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<p><em>Additional readings (these helped me):</em></p>
<p>In-depth on everything Form-related (foundations in print, but many concepts are transferrable): <a href="https://www.amazon.com/Form-Book-Creating-Printed-Online/dp/0500515085">The Form Book</a></p>
<p>Good guidelines for Form Usability: <a href="https://www.nngroup.com/articles/web-form-design/">Website Forms Usability: Top 10 Recommendations</a></p>
<p>Types of Form Design: <a href="https://uxdesign.cc/form-design-for-complex-applications-d8a1d025eba6">Form Design for Complex Applications</a></p>
<p>Form Label Design: <a href="https://uxplanet.org/float-label-pattern-in-ux-form-design-7ab5e33010ab">Float label pattern in UX form design</a></p>
<p>Good questions in form design: <a href="https://medium.com/clear-left-thinking/a-simple-approach-to-improving-form-design-cff22deb6df">A simple approach to improving form design</a></p>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<p>Open to questions and healthy discussions about form-design (because we love it so much) or your design process.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*aqEauJFC0ZtS87PE1NltzQ.png" alt="1*aqEauJFC0ZtS87PE1NltzQ.png"></div>
</div>
<p>Also, <a href="http://kennethlees.com/">I have a website</a>.</p>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<div></div>
</div>
</div>
</div>
</div>
<div><a href="https://uxplanet.org/3-best-form-design-practices-for-your-design-process-383510b31613">https://uxplanet.org/3-best-form-design-practices-for-your-design-process-383510b31613</a></div>


3 Best Form Design Practices for your design process A short takeaway of form-design practices and i…

3 Best Form Design Practices for your design process A short takeaway of form-design practices and i…

Top Stories