Best practices to design inclusive name input fields
It’s Olympic year! One of my favorite parts about the Olympics is being exposed to a diverse range of names from many countries. Names are deeply personal. Many digital experiences, however, are still catching up to welcome and celebrate a wide variety of names. Let’s explore the importance of representation, along with the real-life impact around poorly-built name input fields and improving designs for better experiences.
Let’s start from 1998 in Nagano, Japan
The 1998 Winter Olympics were held in Nagano, Japan. Everyone was watching it on TV, and I was constantly asked by classmates if my family was hosting them. They couldn’t tell the difference between the city of Nagano and my surname, Nagao. (And of course, families don’t actually host the Olympics.) Many of them have never been exposed to Japan so it was cool seeing my language and culture represented in media.
I was obsessed with Michelle Kwan and dreamt of becoming a figure skater just like her. Seeing someone who looked like me competing for the United States was a big deal. I always got excited when we turned on the TV and she was gracing us with elegant moves, gorgeous outfits, and her fighting spirit. That dream didn’t pan out and I chose a completely different career path. But I’ll forever be thankful that she inspired me to have big dreams.
Michelle Kwan and another incredible Olympian, Kristi Yamaguchi, also inspired someone who eventually became the first American woman to land the historic triple Axel in the 2018 Winter Olympics in Pyeong Chang, South Korea. She is none other than the iconic Mirai Nagasu. It can’t be coincidence that we share a similar surname. We’ve come full circle!
When meeting new people, our names are the first piece of information we exchange. It helps build rapport with one another and get insight into each other’s identities. I’m lucky to be surrounded by friends from all walks of life with names that represent many cultures and stories. Unfortunately, many of us have also experienced childhood bullying because our names didn’t comfortably fit into someone else’s expectations of what names should be.
Similarly, websites and apps also haven’t solved the problem of accepting and storing different names. If your name is short, has spaces, or utilizes characters outside the 26 letters of the English alphabet, then you’ve certainly been told by computers that “Your name is invalid.” We’ve managed to build entire societies around incredible technological advances and yet, we’re still struggling with name input.
The 2011 Philadelphia Marathon and Jyrki’s story
I never pursued a figure skating career, but I picked up long distance running as a hobby. When I joined the Dashing Whippets Running Team, a local New York City run club, I met hundreds of wonderful members of varying backgrounds and abilities with many beautiful names. And that also meant lots of great stories of race registration hiccups.
One such person is Jyrki Ruohomäki, an incredibly hard-working athlete who registered and trained for the Philadelphia Marathon in 2011. This is one of the most popular and largest marathons and attracts registrants from all over the world. When he signed up, he typed in his name and kept the umlaut character.
“I was actually pleasantly surprised when I registered for Philly, as you were able to insert the umlaut, which usually isn’t the case.” -Jyrki Ruohomäki
Before discussing the impact of the umlaut, we need to understand how input fields work from a technical standpoint. All input data must go through a process called input validation. Before information is stored, we must make sure that it’s correct, useful, and compliant. People might accidentally enter wrong information (like an email where a phone number needs to be) so validating helps prevent problems. This is where error messages like “Please enter a valid name” come from because the validation process rejected the data and needs revision.
After accepting the data, it goes through input sanitization, a process to “clean up” the information. In Jyrki’s case, it could look like the ä updating to a. This process is important from a cybersecurity standpoint. Input fields are vulnerable to malicious attacks, so this process ensures that anything deemed a threat is removed before storing information. Hackers can enter scripts and code that can start a ripple effect of damage on the backend. While these protective measures might be good for computers, we must weigh them against real-life consequences when they fail.
Even though the registration system was able to accept Jyrki’s name, the umlaut in his surname formatted to “n++” when his profile was transferred into the time tracking software. On race day, he ran an amazing time of 2:36:46, which was a personal best. It was also 3rd place in his age and gender group and 36th place overall. This is an outstanding accomplishment! It’s 5:52 pace for 26.2 miles, or 3:43 pace for 42.2 kilometers. This result was also nowhere to be found.
Imagine putting your heart and soul into training to run your absolute best, only for the results to be unsearchable. Most people would be worried that the tracking chip in the bib was faulty, and the personal record (PR) wouldn’t “count” because it’s not permanently recorded.
The race organizers first located his results in the half marathon category. Eventually, they were able to change his surname to “Ruohomaki” (without the umlaut) and his race result was transferred to the full marathon category. His hard-earned PR will remain in Philadelphia Marathon’s history books for all time. Jyrki’s story is one example of how faulty name input fields can cause real-life impacts. Some stories might not have the best resolution as this one did so it’s our responsibility to design good inputs and name experiences.
3 tips to design better name experiences
I’ve had the pleasure of collaborating with brilliant designers, engineers, and product professionals on name input experiences. Over the years, we’ve learned many important lessons. These are my tips on designing for name input, leading to more inclusive experiences.
First — Design around a purpose
Input fields need purpose, especially for names. It’s nearly impossible to design and build a flawless name input field that accounts for every use case. In the marathon registration example, names can be used for many reasons. It can be printed on a bib, be used to track the athlete in real-time, match their name to a bank account to receive payment, send personalized marketing emails, and many more.
To create the best user experience for each purpose, we must collaborate with our design, research, product, and engineering partners. We need our research colleagues to understand mental models around names and a window to their past experiences. Names aren’t straightforward. For example, some people have traumatic memories associated with their legal name and colloquially use something else. In Iceland, surnames aren’t passed down the same way they are in other parts of the world.
Designers will have creative solutions on utilizing visual and interactive elements and be UX content’s closest collaborators. We can figure out if one input field for the full name is sufficient, or if we need two or more depending on the use case. Finally, product will understand the business implications to develop an efficient strategy and connect design with engineering.
Second — Influence the logic and write better error messages
Building a strong relationship with engineering partners can be game changing. By collaborating closely, we can reduce many unnecessary errors by directly influencing the logic. We can’t bypass cybersecurity issues and we still need a validation and sanitization process. But that doesn’t mean input fields should be bad. Custom rules can be added, and many companies already have the technical infrastructure to support it.
I believe that the best error message is no error message. But sometimes, it’s inevitable. So rather than invalidate someone’s name, we need to write mindful messages that focus on the best solution. If we know our limitations, we can surface them as requirements. For example, we could notify registrants that a running bib can fit names up to 15 characters. If we need their credit card or bank information to accept payment, the error can state that what they’ve typed doesn’t match the information on the account. If certain characters can’t be processed, then we must state the ones that are acceptable.
An honest conversation about assumptions around names should occur at the beginning of discovery and ultimately go beyond the input process. How names are stored and will appear for users is just as crucial. For example, we can’t assume that all names which start with Mac is Irish and should follow a certain capitalization rule (such as MacGregor). What about Japanese families who go by Machida? We can’t automatically capitalize their names to MacHida.
Third — Seek diverse perspectives and mentor future designers
As an individual, we’re only familiar with our own lived experiences. By seeking diverse perspectives, we expand our scope of knowledge which directly contributes to the logic and design. Other people’s stories and experiences can strengthen our conviction to advocate for their acceptance. If you have an opportunity to hire, look for people whose perspectives aren’t yet represented on your team.
I’m thankful to mentors and leaders who contributed to my personal career growth to bring a humanistic perspective to name input design. I believe that the next and subsequent generations will bring even more value and perspectives to improve the design field. If Michelle Kwan can make Mirai Nagasu believe that she can accomplish amazing things, and even surpass her, we can all do the same with friends in the younger generation. I want to open a path for them to become designers to voice their perspectives.
Wrapping up with the 2020(1) Tokyo Olympics
There was a magical moment in the men’s marathon when the American commentator explained to his audience why he references Osako Suguru as the way he did. He shared that in Japanese culture, surnames come first and then one’s given name. It’s these little details that can make a big difference in feeling seen and respected. Osako ran a gutsy race and finished in an incredible 6th place with a time of 2:10:41. It’s especially meaningful that this happened in our home country.
There are so many incredible athletes that I’m looking forward to cheering at the 2024 Paris Summer Olympics. As the years go on, I’m impressed with the efforts that commentators put into pronouncing athlete names and sharing background information on their culture. The Olympics isn’t just about celebrating athleticism but is a platform to share stories of how sports truly bring people together.
When I ran the TCS New York City Marathon in both 2017 and 2018, my name was on my racing singlet and all throughout the streets of my city, I heard so many people screaming my name! As a child, my name was mocked but nearly 20 years later, I got to run through my city twice and heard people in nearly every neighborhood root for me and pronounce my name correctly. Thank you, New York City for honoring my name!
Ultimately, I think it’s valuable to reflect on our day-to-day behaviors and apply that to the digital space. If someone corrects us on pronunciation or spelling, or asks to use a different name, we wouldn’t hesitate to respect that. It’s worth mirroring those habits in our digital platforms.
Thanks for reading!
Additional notes and recommended articles/videos
In researching for this article, I learned that there is a difference between an umlaut and a diaeresis. Previously, I’ve used these terms interchangeably but there is a distinction. An umlaut represents a sound change of the vowel itself. On the other hand, a diaeresis indicates that it will produce a separate sound with vowels next to it. For example, if someone’s name is Zoe, you’d say “Zo-” but if their name is Zoë, it would be pronounced “Zo-ey.”
Earlier, I used “full marathon” to distinguish the difference between a half marathon and a marathon. “Full marathon,” however, is a redundant term since a marathon only references a race that is 26.2 miles/42.2 kilometers. In other cultures/languages, “marathon” might be used interchangeably with “race” or “running event.”
I mentioned the 2020 Tokyo Olympics to reference Osako Suguru’s marathon event. The Olympics were held in 2021 but was still referenced as the “2020 Olympics.” Another technicality was that the marathon event was held in Sapporo instead of in Tokyo due to the weather.
I’ve also mentioned the importance of bringing in diverse perspectives. Years ago, I published Building Diverse Design Teams To Drive Innovation on Smashing Magazine. I did a deep dive on how the Competing Values Framework could be used to identify gaps in a team and what skills/perspectives are needed to diversify them. I’d love it if you could check this out, also!
Finally, here are some great articles and videos related to names:
- [YouTube video] Perfectly Named People on Jimmy Kimmel Live
- [Article] Senior official apologises for incorrect name for Ireland on Covid travel cert by Cormac McQuinn
- [Article] US Naming Laws by State via US Birth Certificates
- [Medium post] “Please enter a valid last name” by John Moore Williams
If you have more resources, please share them with me.
