UX Tip of the Week: Design Better Forms

Table of Contents

    Subscribe for Email Updates
    Girl at computer with forms to manage content on her website

    The Do's & Don'ts

    Styling forms is incredibly important for collecting data from your users. Whether its a sign-up wizard, a checkout process, or monotonous tax information, here are the Do’s and Don’ts for designing more user-friendly forms.

    Group button labels and input fields together. 

    Something as simple as making sure input labels are closer to their input box with a larger margin in between input groups will increase legibility. 

    Group Labels

    Avoid using input text as a label. 

    As much as we want to simplify and reduce form length, we must resist the temptation to use the input label within the fieldset as the field label. Once a user clicks into the input text, they’ll immediately lose the label and this can lead to confusion for users, especially on longer forms. 

    Always Label

    Stack options for quick scannability. 

    Ever notice that it’s easier for you to read a bulleted list than a paragraph of information? That’s because users consume information more quickly top to bottom than left to right. Stack checkboxes and radio buttons top to bottom rather than left to right for ease of consumption to your users. 


    Use clear input buttons. 

    Button UX/UI and input text is just as important as how the form looks. Be clear in your word choice so that a user is clear what action will occur when clicking your button. 


    Give users inline error codes. 

    There is nothing more confusing than an unclear error. Generic errors put all of the work on the end users, which will more than likely result in either a frustrating user experience or an abandonment of the form altogether. Giving a user inline error codes give explicit instruction to the user where they need to fix their data. 

    Clear Errors

    Use field length as a hint and an instruction. 

    Field length gives the user unwritten instruction as to what their input should be. For complete clarity, as well the ability to mitigate bad data, consider shortening field lengths to the appropriate width for fieldsets that always contain a specific number of characters such as postal codes and phone numbers. 

    Field Length Hints

    Group Like Fields. 

    Lastly, group related information on longer forms into consumable sections of data. It makes users feel less overwhelmed by long forms and is easier for users to consume in chunks. 

    Group Fields

    At the end of the day, no one really wants to fill out a form, but there are a lot of ways that you can make your forms easier to use and clear to your users. An easy-to-use form is a surefire way to an increase in conversions, sales, and engagement!

    Related Tags:

    About the Author

    Emily Oskay Gerrick

    Emily joined the Marketpath team in December of 2014 as a User Experience (UX) Designer. She serves as the product designer for Marketpath CMS, and the lead designer for the Pro Services division. Emily works directly with clients to establish their online marketing goals and outlines any functional requirements the custom website may need before designing client websites.

    Emily obtained her Masters of Science in Information Architecture & Knowledge Management with a concentration in User Experience Design from Kent State University in 2018. She previously attended Purdue University and graduated from Purdue University in May of 2013 with a B.A. in Visual Communication Design and Computer Science. In her free time, Emily enjoys cooking, drawing and designing, traveling the world, and spending time with her family and friends.

    Subscribe for Email Updates