UX School
Published in

UX School

Bad Form Design: “First name must be at least 4 characters”

How small UX changes in form design lead to big user impact

Question: Should there be character limitations on first and last name input fields in a form?

My answer: Absolutely not. Well, let’s walk through this…

Last week, I was on the City of Chicago official city website for contesting citations. I had received a parking ticket while parked at a broken meter box. According to the city ordinance, I was allowed to park for free if I report the broken meter within 24 hours.

To contest the citation, I needed to fill out a form that included the ticket number and my personal information. And this is where I discovered a “funny” UX problem.

Apparently, the name ‘Kim’ is not long enough…

After filling out the form fields and clicking submit, I was met with an error message that prevented me from proceeding: “First Name must be at least 4 characters.” From the screenshot, there are 2 problematic issues to address:

  1. First Name is not a required field because there is no asterisk (*) next to it to indicate that the form field needs an input.
  2. There is a character minimum for the form field.

In the field of human-centered design, small details like this really affect the end-user experience. There are at least 220 three-character names. This is dehumanizing in a way because the system is deeming someone as unreal, or invalid.

Required Form Fields

According to the Nielsen Norman Group, using an asterisk to mark required fields on forms is an easy way to improve usability. Take Sephora as an example, when signing into your account, it is required that you input your email and password. These fields are indicated with an asterisk.

Given this almost universally understood indication of a user requirement, let’s look at the City of Chicago’s form again.

Last Name, Email, Re-enter Email, and Date are followed by asterisks, which would indicate that those fields are required. This means that First Name and Mobile Phone number should in theory not be required. However, in my experience, a First Name (that met the character minimum) is required.

Here’s I would redesign this:

  • Indicate a form field is required with an asterisk or ‘required’ text.
  • Check that required form fields are indicated.
  • Include failing feedback to highlight mistakes such as empty required fields, invalid email (e.g. when the email doesn’t contain an ‘@’), etc.

Providing indications and user feedback on a form, even if the form seems short, helps the user meet the requirements when submitting. There’s nothing more frustrating after filling out form fields than meeting an unexpected error.

Minimum Character Limit

In theory, there should not be a minimum limit for name lengths to allow the user to enter whatever their valid real name is. For example, Ian, Ivy, Rue, Kit, and Ash would have similar problems submitting the form as I did, assuming their legal names were also only 3-letters long.

In practice, this ideal would be a little harder to implement. Take Facebook’s name constraints that they enforce:

Your name can’t include:

  • Words or phrases that go against our Community Standards (example: slurs, representing dangerous individuals).
  • Words or phrases that represent organizations instead of persons.
  • Symbols, numbers, unusual capitalization, repeating characters, or punctuation.
  • Characters from multiple languages.
  • Titles of any kind (example: professional, religious).

While length is not explicitly mentioned in the list, Facebook user names are required to be between 5 and 50 characters.

Why have a limit at all?

Character limits are part of technical limitations that *should* get surfaced in developer-designer collaboration. 2 reasons would require a system to require lower and upper character limits: security and storage.

Input should be validated to ensure it is of the correct type, length, format, and range. That way, when users log in to access information, it can be verified through the database. A vulnerability that allows for users to freely input fields would cause messy data and potentially bots to break into your system.

Storage is a practical application of maximum character limits because it would be impossible to store a name that is legitimately 1,073,741,823 bytes long. Fun fact: the longest person’s name is only 747 characters long.

Here’s how I’d redesign the experience:

  • Remove the minimum character requirement.
  • Implement a maximum character requirement that works for the majority of names in the database — perhaps 50 characters is a good start.

Conclusion

As a UX designer, I often find these hiccups in user journeys quite hilarious. They’re totally an eye-rolling and “I could do better” moment for me as I proceed with my task.

Despite my legal name not meeting the criteria, I was able to submit the citation contest form by filling in my first and middle name into the First Name field. Ideally, an important process established by the city would have a better experience for filling out the form. This could include hovering info icons, fail feedback, and field requirements properly indicated. But until then, we continue the stigma that government paperwork is a pain in the butt to complete.

--

--

--

UX career advice for UX designers, brought to you by UXBeginner.com

Recommended from Medium

How To Start A Web Design Business — Complete Guide 2019

We Finally Have Simple Tables in Notion!

Go-ahead for £40m Manchester spec office scheme

Myths about Sketch2React

The unexpected benefits I got from writing about Product Design

Writing on a personal diary with a cup of coffee

The Ultimate Guide to Adobe XD Tutorials: From Beginner to Expert

Some free advice for UX researchers

How Graphic Designers are Combining Brand Strategy and Typography | Hudson Valley Style Magazine

How Graphic Designers are Combining Brand Strategy and Typography — Typography Quotes from the Visual Essay on the Cosmic Intelligence of Design (2018) by Graphic Designer Maxwell Alexander

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kim Chung

Kim Chung

Eat🍦 Sleep 💤 & Lift 🏋🏻‍♀️ Great ideas will come 💭

More from Medium

Dating apps, take one

The only easy way to get hired as a junior UX Designer

Colors accessibility — Know the top 3 problems and how to fix them…

On the left, the Accessibility For Devs logo in color, with the 6 colors of neurodiversity, and on the right, the same logo in grayscale.

Does your Web Design affect your credibility