<p>Published on <a href="https://blog.prototypr.io/the-3-key-components-of-an-input-field-a4613cabd7ee?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Emmanuel Torres </p>
<h4>We can all agree that even the littlest detail in design can make a significant impact on user experience. This article should help my fellow designers realize that an input field should be alive — not just a dead-form waiting to be filled up. You might want to grab a coffee. Let’s get started…</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*g1_4HTuBd-Hr2b2HJNj03Q.jpeg"></p>
<h3>Who’s this article for?</h3>
<p>UI/UX Designers</p>
<h3>What is the goal of this article?</h3>
<p>This article aims to give awareness to my fellow designers that an input field has 3 key components. Not just an eye-candy text box with gradients at the background.</p>
<h3>Why did I wrote this article?</h3>
<p>I’ve seen a lot of UI/UX design inspirations with aesthetically-impressive forms, but the problem lies in the lack of functionality. The designs serve little to no purpose for the benefit of users. Focusing a portion of your design on aesthetics alone contradict the purpose of UI/UX. These designs might create inaccurate references to aspiring designers. It’s good to create a sleek design; it’s better to make every aspect functional and reasonable. Balance is key..</p>
<h3>The Components</h3>
<p>As I start my day browsing designs from various UI sources, I’ve seen a lot of beautiful forms getting popular. You can see those gorgeous gradients, eye-catchy mockups, etc. You name it. However, it just looks cute and it doesn’t even solve a problem. As I do my research, I realized that an input field should have these 3 key components:</p>
<ol>
<li>Input Field (The placeholder)</li>
<li>The Microcopy (The language when the input field responds to user)</li>
<li>The Interaction (How the input field reacts from actions)</li>
</ol>
<h3>1. The Input Field</h3>
<p>It’s simply the box, the line, or wherever the user would input the details. I assume that you can design an input field. Although this article would not discuss the full details on how to design an input field, I’ll share great samples and references for you:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*wMV1qmKv2ggsjQM0LKi_hg.png">Shipment Form by <a href="https://dribbble.com/juliakhusainova">juliakhusainova</a><img alt="" src="https://cdn-images-1.medium.com/max/800/1*TVBzO3aPNGeduU69hk6t_A.png">Profile form by yours truly <a href="https://dribbble.com/emmanueltorresph">Emmanuel Torres</a><img alt="" src="https://cdn-images-1.medium.com/max/800/1*SUded3AMKROvReWXPHvTzw.jpeg">Schedule Meeting Form by <a href="https://dribbble.com/petrasnargela">Petra Nargela</a></p>
<p>Further reading:</p>
<ul>
<li><a href="https://blog.prototypr.io/">Design Better Forms</a></li>
<li><a href="http://www.uxbooth.com/articles/the-new-rules-of-form-design/">The New Rules of Form Design</a></li>
<li><a href="https://uxplanet.org/designing-more-efficient-forms-structure-inputs-labels-and-actions-e3a47007114f">Designing More Efficient Forms: Structure, Inputs, Labels and Actions</a></li>
</ul>
<h3>2. The Microcopy</h3>
<p>For me, this is one of the most underrated UX principle that designers usually overlook and should start focusing on. See those little words? If you remove them, it will be a total chaos.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*h7SDtBksHmfN6jxks748fA.png">Signup form shows proper validation by <a href="http://www.twitter.com">Twitter</a><img alt="" src="https://cdn-images-1.medium.com/max/907/1*CfqoLgCpONaCa4iF3SrI5w.png">The input box has default texts which helps users to fill up. Image from <a href="http://www.airbnb.com">Airbnb</a><img alt="" src="https://cdn-images-1.medium.com/max/801/1*Cszpg5w4llfqkGXPOftPwg.png">Google account creation indicates which fields are required. Image by <a href="http://www.google.com">Google</a></p>
<p>Further reading:</p>
<ul>
<li><a href="https://uxdesign.cc/the-magic-of-microcopy-a56c5decbe1f">The Magic of Microcopy</a></li>
<li><a href="https://uxplanet.org/microcopy-tiny-words-with-a-huge-ux-impact-90140acc6e42">Microcopy: Tiny Words With A Huge UX Impact</a></li>
<li><a href="https://conversionxl.com/blog/microcopy/">Microcopy: Tiny Words That Make A Huge Impact On Conversions</a></li>
</ul>
<h3>3. The Interaction</h3>
<p>The interaction is the soul of an input field. It simply makes it “alive”. The interaction design of the form ultimately gives the users the proper understanding and guidance on how the data should be entered.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*WKDPFqQevKwl7K_LXp6K7A.gif">Email address validation by <a href="https://dribbble.com/leozakour">Leo Zakour</a><img alt="" src="https://cdn-images-1.medium.com/max/800/1*VqZq4Qm3r8Qr6CECwMDZmQ.gif">Email suggestion validation by <a href="https://dribbble.com/Henne22">Jan Henneberg</a><img alt="" src="https://cdn-images-1.medium.com/max/800/1*zu-_KrLqllabYJM_CjA94A.gif">The input field, the microcopy, and the interaction are all here. <a href="https://dribbble.com/shots/3821373-Form-Validation-Interaction-Design">View via Dribbble</a><img alt="" src="https://cdn-images-1.medium.com/max/800/1*wCn_qhQXPTid48FCbJJFjA.gif">Here’s another sample I’ve created. <a href="https://dribbble.com/shots/3831709-Create-Password-Form-Validation">View via Dribbble</a></p>
<h3>Takeaways</h3>
<p>Input fields are one of the most used UI components of an application. It’s so common that most of designers overlook the process of designing these simple fields. Let’s keep in mind that we always prioritize the usability of the forms and how it can help users input data. Thanks for your time reading.</p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=a4613cabd7ee" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/the-3-key-components-of-an-input-field-a4613cabd7ee">The 3 Key Components Of An Input Field</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>


The 3 Key Components Of An Input Field

We can all agree that even the littlest detail in design can make a significant impact on user experience. This article should help my fellow designers realize that an input field shou…

Top Stories