12

How do you design super long forms?

2 years ago from , Digital Product Designer

Looking to read opinions/facts on creating the best user experience for designing very long forms.

I've noticed the trend where you place the label inside the form field as the placeholder text, and when a user clicks in the input, the label then slides up to the top of the input. Is this the best practice for long forms to keep them shorter on the page?

10 comments

  • Eliot SlevinEliot Slevin, 2 years ago

    Hooo boi. I'm currently working on a product which does handles compliance- imagine a form which is so long it can take 40 hours to complete. That's what I'm making.

    Here's a few things I've discovered.

    1 Placeholders are usually bad.

    People mentioned this earlier in the thread and suggested floating labels, I'm not a fan of them either. But the reality is that if you've got some key info in a placeholder, it probably shouldn't be there. The Norman group has a lot of good research on this stuff - the value isn't in 'shortness", it's in reduced cognitive load.

    I came up with an alternative, we call it helper text. It's working for us.

    2 There's a lot of good research on forms

    I'm not talking a medium post I'm talking academic research and studies- the norman group is gold. Anything you can find from them, trust. The UK gov has also some good studies on forms. Chances are somebody has already thought "whats the best way to ask for a relative date?", and found out.

    3 Cognitive load and psychology is key.

    You have two goals. One reduce the cognitive load for a user. This means having logic in the form, splitting up sections, allowing them to fill it out in any order, autosave. Anything you can do to make them work less is good.

    Second goal is to keep them moving - make it clear what they're gonna need, how long it's going to take, how far through they are. This is part of why splitting up sections is such a good idea, it not only reduces cognitive load, it makes it feel easier.

    Feel free to hit me up if you have design issues, cause chances are i've already hit them.

    19 points
  • Marcel van Werkhoven, 2 years ago

    Some ideas:

    • Hide/show sections/fields based on selections
    • Split the form into multiple sections/pages
    • Offer a summary at the end of the form so users can review what they're going to submit (and change if needed)
    • Simplify the navigation

    For example, say you have a page with 4 sections of 10 fields. Place a 'next step' button at the end of each section to automatically scroll to the next section.

    Also, take into account the expectation of the user. If I'm using a contact form, I'm expecting a short form with a few fields (name/e-mail/phone/message). If I'm going to put in a job application I expect to be able to add more text and data as I'm trying to apply for this job the best way I can. Sometimes a longer form can actually work better than a shorter one.

    You can also improve the experience by making it more fun. Like adding illustrations or visuals into the background.

    Floating labels are tricky, as they don't work well across some of the older browsers. Labeled fields is still the best way to go in most cases.

    4 points
  • James Young, 2 years ago

    I can share some feedback on the work we've done on Selby College's application form over the last couple of years if you're interested.

    An example of their application form

    A couple of years ago their form was significantly longer (at least 50% more fields) and we've worked with them to trim that down based on feedback and testing we:

    • Removed practically all optional fields on the form and instead of putting required on all fields we put optional next to a few which cuts down on label noise
    • Some fields are legally required and have to be asked up front (learning/disability section for example)
    • Broke the form down initially into 6 sections in first iteration and then into 4 in current one when we trimmed more fields out
    • Added field notes on some inputs to help clarify what info we were collecting or why (eg. Mobile number field)
    • When you progress to next section, keep previous section open and easy to access if applicant needs to go back or review what they've written

    Completion rates on the 4 step form over the original version and also the 6 step process are up significantly which is good for the college because each application is potentially a valuable new student enrolling in what is an extremely competitive industry/market.

    Feedback from students is that the form is still quite long but a definite improvement. It's worth noting that the college admin team still speak to the applicant after they receive an application (which allowed us to remove many optional fields - offsetting that data collection to later to make the form less intimidating).

    I'm sure there's still a lot to improve on but that's just a few notes from a couple of short sprints to fix a big form for one of our clients.

    1 point
  • Marc Olivier LapierreMarc Olivier Lapierre, 2 years ago

    I am personally not a big fan of floating labels. This article does a great job breaking down the reasons why.

    A very long form looks intimidating and can make users rethink their decision; if it looks like it's gonna take me 15 minutes to fill, chances are I might reconsider doing it. For longer forms, I try to divide them into sections that are easier to digest. You can go the extreme route like Wealthsimple did and put one question per page, but I think this is going a bit too far and it just feels like an endless survey at that point.

    The hardest part is figuring out where to break the form and what should be bundled together so the architecture makes sense and flows naturally.

    Dividing into sections also makes it easier to track and get a more detailed breakdown of what users are doing and where the friction points are.

    1 point
    • chris limbrick, 2 years ago

      Thanks for the links and opinion... I'm also not a fan of the floating labels and don't think it makes for effective complex and long forms. It's currently implemented at work and they're resistant to change so I'm trying to figure out how to improve the UX.

      I'm thinking the best way to go about the inputs with floating labels is to section off parts of the form where it makes sense (i.e. think filling out a job application.) The caution is trying to make the form as short as possible so it's believed by others that switching from having standard labels to floating labels, and making the form shorter, will improve the experience for these complex forms. I don't think that's the case, which is why I'm asking for others opinions. :-)

      0 points
      • Chris CChris C, 2 years ago

        Have you tested different form input styles with your users to see which performs the best? Who is resistant to the change? Engineers? PM? Why are they resistant? Implementation effort & time? Other priorities? I think getting answers to those questions and testing would give you enough info to tell a compelling story for keeping, modifying, or completely changing your form designs & interactions.

        Also, if you take a look at that article that was shared, it's actually extremely subjective. Almost every point he makes against labels inside a field could be solved by a better design example than he chooses. I would look at other research that's been done with real data and not opinion-based. Look at the comments in that article for some really great responses.

        Here's a good one: https://static.lukew.com/webforms_lukew.pdf

        Another: https://www.lukew.com/ff/entry.asp?687

        EDIT: Added some clarification

        1 point
    • Joe ShoopJoe Shoop, 2 years ago

      Every single point in this article is a way that floating labels commonly fall short, but all of these potential problems can be accounted for and fixed.

      1. hints could appear on field focus, then go away once the user starts typing, like hints normally would.

      2. Make sure the text is large enough to be readable.

      3. Make sure there is enough space for the labels to move into.

      4. Keep animation to a minimum and ensure that it adds value, not just ornament.

      5. Make sure they have enough contrast to be readable.

      6. Style the input text differently than the placeholder label so it is clear that a field has been filled

      7. For radio buttons, he makes a good point. bBt dropdowns could still have a placeholder label if you don't have a default pre-selected.

      8. Keep label text short

      9. see 1.

      That said, the primary benefit of placeholder labels is to reduce vertical height, and to make an unfilled form feel less complicated. Sometimes those things are not a huge concern.

      1 point
  • Sjors TimmerSjors Timmer, 2 years ago

    Hi,

    I've worked on quite a few forms, so perhaps I can help you. Can you specify what you mean by very long/complex forms? Are we talking 10 questions, 20, or a 100?

    Here's a good resource if you are indeed working with very long forms: https://paper.dropbox.com/doc/Organising-long-tasks-Save-and-return-jOJz53EyXrr2ulxtJPdSx

    I grouped a few of my design tips in this slide deck: https://www.slideshare.net/sjors/design-better-forms-75498519

    Here's some further solid advice: https://www.gov.uk/service-manual/design/form-structure and here some visual examples (with code :) https://govuk-elements.herokuapp.com/form-elements/

    Also, perhaps good to know; you might encounter some friction between what's the best converting form and what's the most accessible form. In the end it's up to you to fight the right fight :)

    1 point
  • Diego LafuenteDiego Lafuente, 2 years ago

    Step by step! Obviously!

    https://www.youtube.com/watch?v=nITMhO3ZPZM

    0 points
  • Dean HaydenDean Hayden, 2 years ago

    As others have mentioned, spread things out so it seems less of a laborious task either by clearly labelled sections or additional pages (mark where they are in the process).

    Page length is almost irrelevant as people prefer something easy to digest and fill out with minimal chances of making errors (clear labelling, supporting text, examples within fields).

    If you have additional helpers either in a tooltip or other device you have to question why it's hidden; if a field needs longer explanation then surely this is content that should be surfaced. These mechanisms can prove to be more difficult to implement if your considering touch based devices (phone, tablet etc.)

    Changing how labels are presented won't make the form any shorter, you'll only reduce page length.

    The ultimate goal is to make a form easy to complete.

    0 points