How do you design super long forms?

4 years ago from chris limbrick, Digital Product Designer

  • Marc Olivier LapierreMarc Olivier Lapierre, 4 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, 4 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, 4 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, 4 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