Hello my name is St�phanie – a talk on “special characters”, inclusive design and user experience
On making the web more inclusive, one character at a time
No there’s no encoding issues in your browser 🙂 This is just one of the many strange ways some sites misspell my name: St?phanie, Stêphanie or Stéphanie. This talk is about user experience and how encoding and database decisions about formats and characters can create an awful experience.
The experience with have today doesn’t start on the web. What happens if you can’t get your parcel because your name was so poorly encoded that the postman can’t read it and find your address? It’s an awful experience to almost miss a flight because the name on your passport doesn’t match the name on your boarding pass. And what happens when you apply for a visa, can’t enter the special character in your name but might get denied access to the country because again, your Visa application doesn’t exactly match your passport?
I think it’s time we discuss encoding, diversity and user experience and stop putting the needs of our systems, database, before the needs of our users!
The slides in English
Slides are available on Speakerdeck and here:
Hello my name is Stéphanie - slides
The Video in English
The talk was recorded in English at Voxxed Thessaloniki:
The slides in French
Slides are in French, they are available on Speakerdeck and here
The conference video in French is available here
The article
This talk is based on an article I wrote in 2018 for the Pastry project. Since the site is dead, I’m copy pasting the article here instead.
Hello, my name is Stéphanie
But some of you call me St�phanie, St?phanie, Stêphanie or Stéphanie.
This is a tale about naming, encoding and user experience in a globalized diverse world.
When I listen to the world around me, it becomes very clear that naming things can be complicated, especially when it comes to naming your CSS classes and your first born. My Mum broke the mold: naming me wasn’t hard for her (and she never had to deal with CSS).
For my Mum, naming me wasn’t. She was buying flowers and there was this little girl, the florist’s daughter, with blonde hair and a big smile, playing in front of the sunflowers. That little girl looked so happy. Nine months later, the little girl’s smile was still deep in my mother’s memory, along with the light, the sun and the joy she felt. She decided to name me Stéphanie, like the little flower girl. I love that story; my Mum even wrote a poem about it (in French, sorry people). I celebrate my name (hi Mum, love you!). One of the things that I don’t love is that my name was the source of some problems around the web. Well, not my name as such but the é part of it. Let’s be precise about such challenges.
The form challenge, special characters shall not paaaaassss
(you should read this title with the voice of Gandalf in the movies)
On the web, we are usually asked for a name to complete most types of forms: subscription forms, payment or shipping forms, etc. This is when things get funny for me sometimes.
For some reason, people on some of those sites decided that special characters would not be allowed in the name fields. Thank goodness, many of these websites provide error messages of varying degrees of rudeness to inform me of such a decision.
What follows are real error messages I encountered while trying to fill some forms:
- The robot way: “First name is invalid”. Yup, that’s helpful, thanks a lot. As you know, my name is valid: I have my Mum’s poem to prove it!
- The variant “First name is in an invalid format”. Well at least they blame the format, not my name.
- The robot way with slightly more information: “Oops something is not right, please only use A-Z in your name”. Hum, at least I can kind of guess that they don’t like my é.
- The really strict one “special characters are forbidden” Ok, forbidden by WHOM? WHY? Can I talk to that person and explain them a few things?s I have a poem they should read about this matter.
- Another variant “special characters are not allowed (a-z0-9, ‘_’ and spaces)”. Again, who is not allowing them and why. At this point I don’t understand if what is between brackets is what’s allowed or forbidden. I’m starting to think there’s a conspiracy going on.
I wish I could tell you that this happened to me only on foreign sites, but the last example is actually a translation of an error message in a French site.
At this point, I’m usually resigned and enter Stephanie instead of Stéphanie. What other choice do I have? Guessing what is wrong with a form field (even if I’m now used to) and being force to misspell my own name is kind of a poor user experience. When you think about it, it’s also not the best way to start a relationship if this was a subscription form for your product.
Typography glitches
Sometimes the sites will allow me to keep my é (hurray! Or as we say in French: hourra!) but fail to display it properly because the font they are using has is missing the é glyph. As far as I know, this can happen for 2 reasons:
- Because the font designer did not design special characters. Not much we can do about that one, but if you choose a font for your website, especially a copy font, it would be nice to make sure it displays different glyphs properly.
- It also happens for fonts that would normally support the glyph, but the people building the site decided to subset the font and remove some glyphs for performance purposes to load a smaller font file. I guess this choice would be totally fine on a site where you control 100% of the content, but if you let users enter information at some points, they might need those special characters.
This leads to interesting things: sometimes my name is printed St▯phanie, the ▯ being the missing character in the font. Sometimes it’s printed Stephanie, with the e falling back to the system serif font.
Let the encoding fun begin
Just because the site let me spell my name correctly with an é in the submission form and loaded the right font, it doesn’t mean that my name will be rendered correctly on the site. This is where the encoding fun begins.
On the screen, my name is sometimes printed St�phanie, St?phanie, Stêphanie or Stéphanie.
I was poorly encoded during 5 years on a famous French front end developer forum while working for the company.
My name was correctly encoded in the database, but for some reasons, it would print Stéphanie directly in the HTML. The site was in UTF-8 and everything, I’m not even sure what the issue was. This became a private joke with other moderators on the forum. Eventually they corrected it.
At a conference, they printed St�phanie on my badge. Apparently, the badges were printed directly from the participant database. It was okay on their site but something went wrong with the printer. They were really sorry for me. It was an interesting ice-breaker though 😀
Delivery issues
The forum and conference examples are kind of fun and not really harmful situations. But sometimes poor encoding can really damage your experience.
When I ordered online from a foreign website, my name was so poorly encoded that you could not recognize it. It had merged with my last name, something like Stéé©ph©aLter. Do you really think that the postman will take the time to try to decode this? Nope. I was lucky I sent this to my work so they could find me via the company front desk, otherwise the parcel would never have arrived.
When it comes to e-commerce, we should remember that the user experience does not stop after we sold the product. Shipment is also part of the global experience. If a customer can’t get their product because of encoding issues, that’s on us as well.
Administrative nightmares, now with 20% more encoding issues.
And it doesn’t stop at e-commerce, while preparing this article, I sent a tweet asking people to tell me stories of their encoding issues. A person named Léa answered me that her name often became “Løa” on her payslip. This could become a problem with administrations who tend to refuse your proof of identity if they don’t see the exact same name.
Speaking about administration, many countries have this clause in visa form filling, telling you that they can turn back upon arrival if your information does not match your passport. What do you think would happen if you have a special character in your name, are applying for that visa and then the visa form does not allow special characters in your name? This is exactly what happened to Joani Eväkallio.
It’s the same for plane (or hotel) reservations, being enable to retrieve the reservation because of special characters’ issues happened to me a lot. I’m actually so used to is that I always use Stephanie instead of Stéphanie just to avoid those issues.
But when it comes to visa or official documents, you can’t misspell your name just to please some form/database. Something as trivial as a decision to not support special characters on a form can lead to really complicated issues for people on the other end of this form, so, let’s take those decisions, wisely shall we?
Forget the é, it’s about inclusivity and making the web a welcoming place for everybody
In the end, it’s not that much about my name and my little é. Some people might have an apostrophe in their last name (hello Scott O’Hara, Irish and Dutch people among many others), some people might have names with kanjis, Arabic, Cyrillic characters, etc. and they will mostly have the same issues as I have, or even worse.
We live in a globalized world where people are constantly on the move. Digital nomads, e-commerce fanatics, travel bloggers are not the only ones living across the world. We routinely buy from China, get conference calls from 2 oceans away and deal with customer support in other countries. . Our websites should take this into account. It’s a poor user experience to be forced to misspell your own name to get access to a site, it’s even worse when this lead to shipment or administrative difficulties.
We should not refuse the use of certain characters in forms just because it’s easier to manage our database this way, this is laziness. We should build inclusive forms and sites that follow Postel’s law: “Be conservative in what you send, be liberal in what you accept”
If you want to go further
