• When a form contains a large number of questions that are only related by a few topics, multiple web pages are probably a good way to organize the form

• When a form contains a large number of questions related to a single topic, one long web page is generally a good way to organize the form

• Consider asking optional questions only after a form is completed. Chances are you’ll get more answers than if these questions were put in the initial form

• Use the minimal amount of  visual information necessary to distinguish content groups

• Any visual element that is not helping your layout ends up hurting it

• Include scope, position, and status (the total number of pages gives a person a sense of the scope of this form: How long will it take to complete and what are the different sections/steps? The indicator of current position lets people know where they are relative to the entire form. The form status indicates whether the offer was submitted or not and when it was last saved. For long forms, providing the option to save or doing so automatically is a great way to keep people on a path to completion

• (optional vs required form fields) Indicating the majority case versus the minority case increases the amount of information that overlies a form

• It's better to be explicit when indicating what is optional or required. Literally including the phrase “optional” after a label is much clearer than any visual symbol you could use to mean the same thing

• Indicators next to labels give people a way to scan a form quickly and determine what questions require an answer. Indicators aligned with the input fields can make this difficult because of the variety of shapes and sizes that input fields can have

• We can provide a flexible input field that allows people to answer the question any way they wish (blowing phone numbers to be entered as 513-916-7522, 5139167522, 513.916,7522, (513)916-7522, etc. is best, but if the user needs to enter the number in a specific format, affordances like input box size and labels are needed

• Because radio buttons are mutually exclusive, they should have a default value selected. It's also a good idea to make sure both the radio button and its label can be selected to activate a radio button selection

• When not in use, drop-down menus only display the currently selected choice. As a result, they are better candidates than radio buttons for long lists of mutually exclusive choices since they use a minimum of screen real estate

• Unfortunately drop down menus are hard to use, commonly overlooked, and often ignored.

• Well written problem statement “ A form that allows novice users to select up to six total tickets from any of three different classes. Because of the infrequency of use, the overall audience should be considered recurring novices, meaning that the design should optimize for learn-ability, obviousness, and error prevention. “

• Example of a good affordance: The size of the zipcode input matches the size of an actual zip code in the usa

• The most effective designs: They presented their Submit and Cancel options left-aligned with the input fields and labels above them.nThese findings map well to our first form design principle: illuminate a clear path to completion.  You should be conscious of where you place form actions, since primary actions directly aligned with input fields tend to decrease completion times and the less time people have to spend on your forms, the happier they will be.

• Instead of a separate question to address terms of service, the primary action can cover both the term of service and form completion “by clicking primary action....”

• If excessive instructions are required to explain how to complete your form, the chances are the questions you are asking are either phrased poorly, too complex, or unnecessary

• Instructional text is appropriate when forms ask for unfamiliar data: what’s a pac code? When people question why they are being asked for specific data, when people may be concerned about the security or privacy of their data. When there are recommended ways of providing data: separate tags with commas. When certain data fields are optional or required when the bulk of the form is not.

• Because they show no help text up front, automatic inline help systems tend to work best for forms that ask questions people are likely to have answers for but may be apprehensive or unsure about how to provide them. When specific help text needs to be provided for each input field, consider using a method that displays help adjacent to the field to which it applies. When help text is specific to a group of inputs, consider using a  method that consistently displays help text in a predictable location.

• associating symbols with labels allows people to scan forms more easily for information they need

• Forms that ask complex questions and tend to get reused by the same people are good candidates for user-activated inline help.

• Success messages tell people what they wanted to hear from the moment they started filling in a form- they’re done!

• When present, an error message is arguably the most important element on the page.

• more concerning than the visual presentation of this error message is teh lack of a clear way to resolve the error itself

• For most folks, you’ll need one or two types of message. If you think you need three, you’re edging into complexity that hurts the user (and likely the system). If you hit four or more, you’ve teh done something horribly wrong and should start over.

• Sucess messages, on the other hand, should never block people’s progress-they should encourage more of it. 

Additional inputs

• Page jumping pushes existing content down the form and can sometimes disrupt people’s awareness of their position on the page. As a result, its always a good idea to try and minimize the amount of page jumping within a form. When using inline additions that expose additional input fields below an action, try to avoid very large sets of input fields that will push the content on a web page down substantially. When you have a lot of additional options, exposing them to the side or in an overlay might be a better option.

• The sample from Kayak shows up automatically when the date field is active and provides two months’ worth of dates to choose from. Clearly including all these dates on the form would have added a lot of noise - its much better to surface these options only when they are needed.

• When additional inputs need to be considered in isolation, a modal overlay window might be required.

Selection-dependent inputs

• Flexible inputs allow people to answer questions how they want, an additional inputs allow people to include supplementary questions they want to answer, selection-dependent inputs require people to answer follow-up questions based on their answers to an initial question

• While selection-dependent inputs may seem like a basic user interface design problem, there are a myriad solutions to be found addressing this problem online, indicating there’s more complexity to this interaction than one might initially assume. In fact, each solution for selection-dependent inputs tends to have both clear advantages and disadvantages

• Page level selection-dependent inputs place follow up questions on a separate web page from the initial choice

• While the relationship between their initial selection and the dependent inputs is clear to most people, the two-step model removes valuable context (you can no longer see and easily access the options you did not choose)

• page-level selection performed averagely, safe solution, slower completion times

• When completing a form, many people move from top to bottom and as a result may ignore horizontal inputs. There may also be a lack of clarity about whether horizontal tabs are mutually exclusive

• horizontal tab selection dependent inputs have high satisfaction and completion rates, but are less easy to process as other forms.

• Vertical tabs performed best

• Drop down lists average performance

• Expose below radio buttons a strong visual indication of the dependency between the initial selection and its additional inputs can help communicate relationship more clearly

• near perfect satisfaction

• After trying a few different options in the initial set of radio buttons, people lose sight of which option is active and its relationship to the selection dependent inputs. This phenomenon becomes even more problematic when the quantity of selection dependent options is large because the association between the initial selection and additional options becomes less clear

• Expose within radio buttons hid irrelevant input form inputs from people until they needed them It was easy on the initial and completely quickly

• Exposed inactive don’t use

• Exposed groups don’t use

• When you’re exploring if gradual engagement might be right for your web service, its important to consider how a series of interactions can explain how potential customers can use your service and why they should care. Gradual engagement isn’t well served by simply distributing each of your sign up form input fields onto separate web pages

• As people interacted with sites that followed these principles, chances are they didn’t even realize they were filling in a form. Instead, they felt they were making a movie or setting up a family tree. Gradual engagements like these have the potential to make forms essentially disappear by focusing on the things people want to achieve instead of the data fields required by a back-end database. That’s our friend the “outside in” instead of “inside out” way of thinking. 

• Design the form to prevent certain kinds of errors

• Use drop-downs instead of open text fields, if you can; offer input hints, input prompts, forgiving format

• Clearly mark all the required fields as required and don’t ask for too many in the first place

• When errors happen show error message on top of the form even if you put it next to the controls

• ^important for visually impaired users - the top of the form is read to them first, so they know immediately that the form has an error

• put an attention getting graphic there and use text that’s stronger than the body text (red and bold)

• Make error messages short but detailed enough to explain both which field it is and what wen wrong: “you haven’t given us your address” versus “not enough information

• use ordinary language, not computerese: “Is that a letter in our ZIP code?” versus “numeric validation error”

• Be polite: “Sorry, but something went wrong! Please click ‘go’ again” versus “Javascript Error 693” 

• Put primary action on the outer edge

• Best to put the back button as far away as possible, consider at the top of the form- the “Back” button is then in a similar place to where most browsers put the browser’s “Back” button. Also, the “Back” button is probably not needed at the bottom of the page once the user fills out the form — “if they fill out the form and click back, they will lose their answers.

• Back button needs to look like an intractable button

• If the “Back” link blends in with the rest of the page, users sometimes can’t find a way to go back and usually start searching at the bottom of the page. So to make it work, the “Back” button should be visible and noticeable.

If a form has a known number of steps to be completed, a step-by-step indicator can help users orient themselves. In the example below, we use an ordered list with a list item for every step. Visually hidden text is used to indicate the current and completed steps. If possible, provide a link to steps already completed, so the user can review them. In this case, any data already entered in the current step should be saved.

https://bootcamp.uxdesign.cc/form-ui-design-36-tips-best-practices-112128c16429

https://blog.prototype.io/8-rules-for-perfect-button-design-185d1202ee9c

https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112

https://www.researchgate.net/publication/225367546_Touch_Screen_User_Interfaces_for_Older_Adults_Button_Size_and_Spacing

https://rosenfeldmedia.com/books/web-form-design/

https://www.ventureharbour.com/form-design-best-practices/

https://uxdesign.cc/simple-ux-design-tips-for-better-focus-states-9a7a0c22fce4

https://www.smashingmagazine.com/2022/08/back-button-ux-design/

https://www.w3.org/WAI/tutorials/forms/multi-page/#using-step-by-step-indicator

https://a.co/d/3fEBNFz