Forms that help rather than blame: labels, validation and recovery
HCI1104 · Unit 6 of 10
A form is a conversation with an error budget, so prevention and recovery, not validation, determine whether it works, and the label is the mechanism by which the conversation remains addressable.
Forms that help rather than blame: labels, validation and recovery
A form is the one page where the reader stops reading and starts working. A form has to be answered, and every answer is a commitment that can be got wrong. Treat it as a conversation rather than a container and the design questions order themselves. The field must say what it wants before it asks. The designer sets an error budget for the mistakes that follow. The label keeps the conversation addressable. Validation is not the centre of form design. Prevention and recovery are. The strongest counter to this unit's thesis is that its own remedy is the disputed one. Bargas-Avila and colleagues (2010) hold that validation should wait for submit, and they report that messages shown as a reader left a field produced more consecutive errors. The units before it asked how a page is read. This one asks what happens when the reader has to answer it.
The design of a form changes the data it collects
Couper, Traugott and Lamias (2001) embedded three experiments in a web survey sent to 1,602 students. They varied progress reminders, one screen against one question per screen, and radio buttons against typed numeric entry. Format threatens data quality, and it is measured rather than assumed.
Mavletova and Couper (2014) moved the question onto the phone. They compared scrolling with paging, and SMS with email invitations, among Russian panel members on a mobile device. Scrolling gave significantly faster completion, fewer technical problems and higher ratings, with a lower but not significantly lower breakoff rate. SMS invitations worked better than email.
The label is what makes the field addressable
Islam, Borodin and Ramakrishnan (2010) start from the failure. Labels are often missing from fields or unassociated with them. To a screen reader user an unlabelled field is a control with nothing to announce, which is enough to block a transaction such as paying a bill. Their mixture-model technique associates a field with a nearby candidate label, tested on real pages. The need for the technique is the finding, because the platform does not guarantee the association.
Placement matters too. The guideline chapter reviews an eye-tracking comparison reporting that top-aligned labels needed the fewest fixations (Bargas-Avila et al., 2010). The substitute people reach for is not a label. Kunz, Quoss and Gummer (2020) tested placeholder text in an open-ended question: long placeholders implying an extensive answer produced longer but slower and less substantive answers, and short ones gave no benefit.
Prevention: state the rule before the reader breaks it
Bargas-Avila and colleagues (2010) derive twenty guidelines and mark in their own table which rest on data and which on expert practice. Guideline 13 requires a format rule to be stated in advance, as the rule without an example. It rests on an experiment in which stating the restriction before the field produced significantly fewer errors and trials.
Pauwels and colleagues (2009) tested the marking Guideline 4 requires. Twenty-four participants completed forms where required fields carried the customary asterisk or a coloured background. The coloured version produced fewer errors, faster fill-in and higher satisfaction. The convention that spread was the asterisk, and the experiment did not prefer it.
Seckler and colleagues (2014) asked whether the set survives real pages. Sixty-five participants in a controlled eye-tracking experiment used forms taken from real company websites. The improved forms were completed faster, with fewer submission trials and higher satisfaction. A bundle of twenty cannot show which guidelines did the work, but it is the strongest evidence here that the rules transfer.
Recovery: the message you write and the field you keep
Recovery is where the budget is paid. The guideline chapter requires a message to use familiar language and to say what went wrong and how to correct it (Guideline 14). Familiar language is not a courtesy: a reader may have low literacy, or may not read the interface's language fluently. It forbids clearing a field already filled (Guideline 15), and it asks that the problem be noticeable at a glance through colour, icons and text (Guideline 17). The chapter's own table marks Guideline 15 as resting on expert practice rather than data. Inspection of published forms points the same way. Wiyono and Rochimah (2018) assessed the error messages on existing forms against parameters drawn from design guidelines, and they found the messages frequently failing those parameters.
The reader's own report is the last channel. Wegener and colleagues (2024) build an accessibility feedback form through participatory design. Their process was a literature review, a survey of 40 people, focus groups with 12, interviews with three developers and an evaluation with five visually impaired users. Comprehensible sub-tasks and compatibility with assistive technology are what let those users report problems automated tools miss. The form is therefore an instrument in both directions.
Work one failure end to end. A reader submits a payment form whose card number fails a check-digit test. The message names the field and says what to do. The form returns with the name, address and expiry still filled, and only the card field cleared, so the reader corrects one field and resends. The same failure met with a vague message, or by redrawing the form empty, makes the reader re-enter everything for one mistake.
Conventions that have outrun their evidence
Masking, the CAPTCHA and the autofilled field are near-universal, and the security case for masking was debated for over a decade before it was measured. Hu and colleagues (2024) assessed masking across popular browsers and sites. They surveyed more than 200 users and ran login experiments with 600 participants. Masking was ubiquitous, and 44 users held misconceptions, including 26 who believed it protects a site from hacking. Its effect on login usability was overall limited, and 82 per cent wanted it on by default with a toggle. What masking secures is protection against shoulder surfing.
Alnfiai (2020) took the same route with the CAPTCHA, designing HearAct and SeeAct to present an image and its sound together and take a tap or a swipe as the answer. The gesture versions had a higher success rate, needed less solving time and were preferred by every group. The constraint was met by redesigning the task, not by adding a door.
Lin, Ilia and Polakis (2020) show what happens when a convention is handed to a party the designer did not choose. They conceal form fields in ways that autofill still populates, and found the practice in at least 5.8 per cent of the forms Chrome autofilled in the Alexa top 100,000.
Contested question: does validation wait for submit, or follow the field?
The disagreement is sharp, and both sides can be named. The guideline position is that validation should wait. Bargas-Avila and colleagues (2010) tell designers to show errors after the form is sent, all together and embedded (Guideline 16). Their review of the authors' earlier experiment reports that messages at submit produced fewer consecutive errors. Messages shown as the reader left an erroneous field produced significantly more, because participants dismissed them.
The practitioner position is that validation should follow the field. Wroblewski (2009) tested 22 users on six versions of a registration form, and the best inline version improved every measure: success up 22 per cent, errors down 22 per cent, satisfaction up 31 per cent, completion time down 42 per cent, and eye fixations down 47 per cent. The study is more careful than its headline. Validating before and while the reader typed produced higher error rates and worse satisfaction. Validating on blur was seven to ten seconds faster than the interrupting versions.
What would settle it is a factorial comparison of timing, at submit, on blur and on keystroke with a delay, crossed with field difficulty. It would report completion time, errors, abandonment, and whether the messages were read. The two studies disagree partly because they count different things as an error. A smaller dispute remains. Orsini and colleagues (2013) defend the validity, reliability and sensitivity of the Intranet Satisfaction Questionnaire against peer reviews, so even the instruments that measure how a form felt are contestable.
While the question is open, a designer should prevent the error first and recover well when prevention fails. State the format rule before the field, keep whatever the reader has already entered, and word the message so it says what went wrong and what to do.
Where the argument is heading
Three directions are visible in named work. The first gives part of the form to the platform. Because the browser already fills fields (Lin et al., 2020), the demand is a form that declares its fields well enough for a machine to complete them. The second rebuilds the field's own instruments to include the people the conventions exclude. Alnfiai (2020) redesigns the task, and Wegener and colleagues (2024) design with disabled users rather than for them. The third is that the strongest evidence keeps arriving from outside this field, since Hu and colleagues (2024) needed a security venue to measure a convention HCI had debated for a decade. Form quality looks set to be judged by recovery and machine-readability rather than by validation.
The sources this unit rests on
- Bargas-Avila, J. A., Brenzikofer, O., Roth, S. P., Tuch, A. N., Orsini, S. and Opwis, K. (2010). Simple but Crucial User Interfaces in the World Wide Web: Introducing 20 Guidelines for Usable Web Form Design. In User Interfaces. InTech. doi:10.5772/9500 The chapter derives twenty guidelines and marks which rest on data and which on expert practice. Guideline 16 says show errors after the form is sent.
- Seckler, M., Heinz, S., Bargas-Avila, J. A., Opwis, K. and Tuch, A. N. (2014). Designing usable web forms. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. doi:10.1145/2556288.2557265 Sixty-five participants used forms from real company websites in a controlled eye-tracking experiment. The improved forms were completed faster, with fewer submission trials and higher satisfaction.
- Pauwels, S. L., Hubscher, C., Leuthold, S., Bargas-Avila, J. A. and Opwis, K. (2009). Error prevention in online forms: Use [colour] instead of asterisks to mark required-fields. Interacting with Computers. doi:10.1016/j.intcom.2009.05.007 Twenty-four participants completed forms where required fields carried the customary asterisk or a coloured background. The coloured marking produced fewer errors, faster fill-in and higher satisfaction.
- Orsini, S., Opwis, K. and Bargas-Avila, J. A. (2013). Response to the Reviews on Bargas-Avila et al. (2009) 'Intranet Satisfaction Questionnaire: Development and Validation of a Questionnaire to Measure User Satisfaction with the Intranet'. Interacting with Computers. doi:10.1093/iwc/iwt012 The authors reply to peer reviews of a questionnaire measuring intranet satisfaction. It is a methodological exchange, not a study, and it shows the field's own instruments are disputed.
- Couper, M. P., Traugott, M. W. and Lamias, M. J. (2001). Web Survey Design and Administration. Public Opinion Quarterly. doi:10.1086/322199 Three experiments were embedded in a web survey sent to 1,602 students, varying progress reminders, screens per item and input type. Format is treated as an influence on data quality to be measured, not assumed.
- Mavletova, A. and Couper, M. P. (2014). Mobile Web Survey Design: Scrolling versus Paging, SMS versus E-mail Invitations. Journal of Survey Statistics and Methodology. doi:10.1093/jssam/smu015 A Russian access panel completed a survey on a mobile device while scrolling and paging versions and SMS and email invitations were compared. Scrolling gave faster completion, fewer technical problems and higher ratings.
- Kunz, T., Quoss, F. and Gummer, T. (2020). Using Placeholder Text in Narrative Open-Ended Questions in Web Surveys. Journal of Survey Statistics and Methodology. doi:10.1093/jssam/smaa039 An experiment with opt-in panelists in Germany tested placeholder text in an open-ended question. Long placeholders produced longer answers but less substantive content, so the authors advise against the device.
- Wiyono, B. S. and Rochimah, S. (2018). Error Message Quality of Web Form: Assessment on Existing Parameters. 2018 International Seminar on Research of Information Technology and Intelligent Systems (ISRITI). doi:10.1109/isriti.2018.8864256 The authors assessed the quality of error messages on existing web forms against parameters drawn from design guidelines and found them frequently failing those parameters. It is the inspection evidence that error handling, not validation, is where forms fail users.
- Islam, M. A., Borodin, Y. and Ramakrishnan, I. V. (2010). Mixture model based label association techniques for web accessibility. Proceedings of the 23rd annual ACM symposium on User Interface Software and Technology. doi:10.1145/1866029.1866041 The paper addresses pages where fields carry no label or an unassociated label, presenting mixture-model techniques for linking a field to a nearby candidate label. An unlabelled field has no name to announce.
- Hu, Y., Alroomi, S., Sahin, S. and Li, F. (2024). Unmasking the Security and Usability of Password Masking. Proceedings of the 2024 ACM SIGSAC Conference on Computer and Communications Security. doi:10.1145/3658644.3690333 The authors assessed masking across popular browsers and sites, surveyed more than 200 users and ran login experiments with 600 participants. Masking was ubiquitous, 44 users held misconceptions about it, and its effect on usability was limited.
- Alnfiai, M. (2020). Evaluating the accessibility and usability of a universal CAPTCHA based on gestures for smartphones. Universal Access in the Information Society. doi:10.1007/s10209-020-00730-x The study developed HearAct and SeeAct, CAPTCHAs that present an image and its sound together and take a tap or a swipe as the answer. They had a higher success rate and needed less solving time.
- Lin, X., Ilia, P. and Polakis, J. (2020). Fill in the Blanks: Empirical Analysis of the Privacy Threats of Browser Form Autofill. Proceedings of the 2020 ACM SIGSAC Conference on Computer and Communications Security. doi:10.1145/3372297.3417271 The authors conceal form fields so that autofill still populates them, found in at least 5.8 per cent of the forms Chrome autofilled in the Alexa top 100,000. They then exploit autofill previews as a side channel.
- Wegener, A., Fausel, K., Haug, S. and Maedche, A. (2024). A Universal Web Accessibility Feedback Form: A Participatory Design Study. Proceedings of the 21st International Web for All Conference. doi:10.1145/3677846.3677853 The study builds an accessibility feedback form through a survey of 40 people, focus groups with 12, developer interviews and an evaluation with five visually impaired users. Assistive-technology compatibility lets those users report problems tools miss.
- Wroblewski, L. (2009). Inline Validation in Web Forms. A List Apart, 1 September 2009. https://alistapart.com/article/inline-validation-in-web-forms/ Twenty-two users completed six versions of a registration form, and the best inline version improved success, errors, satisfaction, completion time and eye fixations. The same study found validating while a reader typed raised error rates.