1

I have a form with some prefilled data. The footer is sticky with a "continue" button that takes you to the next page.

All the fields of this 3 page form are required (we have this note at the top of the page) so the continue button was disabled until all the info was filled out.

My team put this infront of users and they didn't like that there wasn't an indication of what was needed to continue.

After alot of thought I came up with that the continue button could be dynamic - saying the next field that needed to be completed.

For example:

The user needs to fill in the street address and city as two input boxes.

While fields are empty the continue button says "Enter your address". On input of the street address the button can change to "Enter the city" etc.

For the entire form. With this the button wouldn't be disabled but act as a way to teleport the user (anchor scroll) to the item they missed and give indication of what is needed.

With aria labeling I am hoping that the screen reader can watch the input and signal the user of the dynamic text after they finish the field they are on. However is this needed? Since a screen reader most likely will tab to the next field on the keyboard this information is not nessesary unless they accidentally skip something and then upon getting to the end of the form tabbing to the continue button -where it can read to them that they have a question missing and can press enter on the button to imediately focus the field they need.

Looking for any advice. I don't see this type of button convention anywhere - but don't know if that's because it's bad or because no one wants to try it.

I'm well aware of the conventions of forms - they are one of the oldest patterns. But with others looking into how to present them better - like type form - I wonder if there is any value add to trying something new when user testing has suggested a pain point.

Many of the business partners like this idea and wonder why this is not mainstream. But I can't find information for why this is not done.

This is why I am starting a conversation. I want to know if there are pitfalls to this. I plan to take this to our next testing - but wanted to consult the community for feedback. Thanks.

  • Maybe someone else has better knowledge than me but I don't think screen readers can pick up dynamic text changes. You might be better off removing the sticky footer and using a more accepted approach of putting the button at the bottom of the page and showing warnings for unfilled required fields. – Andrew Martin Jul 25 '17 at 7:04
  • Screen readers can pick up on dynamic text - the developer needs to code it as such- but there are tags for this. There are many concerns from the product team about the long scrolling of the form. This is why we added a sticky footer so it's always avaliable especially - for mobile. – Veronica Kimes Jul 25 '17 at 14:24
  • There's no real point in having it always available if it isn't always enabled - You could try chunking your forms to make shorter pages. Long forms are bad for accessibility: Users with attention or cognitive impairments find them difficult to understand and they're difficult for non-mouse or motor-impaired users to navigate. – Andrew Martin Jul 25 '17 at 14:48
  • We shortened the form from 90 questions to 30 questions. The form is chucked into 3 pages - 6 questions on page 1 for personal information - 4 of them are prefilled. 13 questions on page 2 and the remainder on page 3. Page 1 has 2 questions under the fold on a 1024x768 tablet. So a larger desktop screen will not need to scroll. Page 2 and 3 have about 2 page heights on tablet. Granted this is increased on phone sides. – Veronica Kimes Jul 25 '17 at 17:13
  • By my rough calculations that mean you still have about 21 questions on page three. Along with page 2 they are likely to be very daunting to complete try breaking them across 5 or 6 pages instead and make sure you let the user know how many there are and where they are in the process. – Andrew Martin Jul 26 '17 at 7:41
1

I like the idea of a sticky footer for forms.

It works especially well when editing a long form that doesn't fit the screen. Users don't have to scroll all the way up or down to find that save/submit button.

However...

Having a dynamic text label in the disabled button is not a good idea, because...

  • Users will not see it. The button is already disabled so visibility is low.
  • When users see it the initial reaction might be good; 'Oh! I have to enter my address. Thanks!'. But imagine that the user has not filled in five fields. The flow of going back and forth between the form and the button is tiring.

Try this;

Keep the sticky footer, but use a more generally used way of showing required or optional fields. Common ways are using the asterisk (*) for required fields or showing 'optional' for optional fields. I like the latter one best because it keeps your form clean. There are more required fields than optional fields, so labeling the optional fields results in less clutter.

Don't forget; people use other sites too. They are used to a certain way of filling out forms. In fact, filling out forms is one of the most common ways of interacting with a website or application. Don't try and invent a pattern for that. Use commonly used patterns.

  • In reference to: "Users will not see it. The button is already disabled so visibility is low." When the button was continue it was disabled but with the dynamic labels it would be enabled as a travel point. We would have anchors to the question that is not answered and the user could imediately travel to the question. I think this is valuable especially on moble. – Veronica Kimes Jul 25 '17 at 14:16
  • In regard to: "But imagine that the user has not filled in five fields. The flow of going back and forth between the form and the button is tiring." The button is static in the footer but the screen is still scrollable. The user doesn't have to use the button it is there as a quick teleport to what you lack. The button would say only the next item needed and once that is selected or has input it changes to the next item needed to be filled out. – Veronica Kimes Jul 25 '17 at 14:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.