THE "ENGLISH" TEXT BOX
Translating characters for better usability
The text box is one of the most common UI elements. Despite the fact that, conceptually, it is a better fit for desktop environments, where typing text is the de-facto standard, text boxes also have managed to cut their way through and appear in many touchscreen UIs, where read and select is usually preferable. Just think about it… Google, the main product of one of the largest companies in the world, is conceptually nothing more than a text box and a button (that usually concedes to hitting the Enter key as a faster alternative).
Example of text boxes and their different states. Image attributed to: http://www.ipfaces.org/sites/default/files/images/iphone/textfields.png
Text boxes everywhere The wide adoption of the text box in online and offline products, running on literally all kinds of devices often gets me thinking: In what ways can we improve the usability of something so common? Of course, my UX twisted brain kindly reminds me that any changes are applicable only for a specific, well-defined and well-understood context of usage. So what improvements can one come up with in the spirit of Google, who for example added auto completion feature and dropdown with list of suggestions to their search a while ago? Usually my brain gets “inspired” on this usability topic upon encountering an error when filling a form and failing to submit it. And more specifically, when I was required to enter some data in a text box but my entry failed to match the expected format by the developer of the form. Imagine a text box, where you are expected to enter your e-mail. A placeholder text can mimic the expected format and reduce error rates, but it does not guarantee 100% error-free input. Let’s imagine something else, like a text box expecting the date you were born. There are many formats one can use to enter a date, such as numeric values alone, or mixture of numeric input for day and year and alphabetical abbreviation of the month. A placeholder might help here as well, but luckily someone gave this a serious thought and came up with the calendar picker, eliminating errors on the date format completely. However, that implies creating another UI component, which is not always possible or desired. Text boxes improved for real Without further ado let’s look into what motivated me to post this blog. Many of us on the web are non-native English speakers and additionally many internet users speak more than one language. As a result it is often the case that we have more than one language and keyboard set up on our devices. However, we are often expected to enter textual data in a particular language – usually English. What happens most of the time as we enter some text in a text box in another alphabet is that parsing fails and we get an error. We switch the keyboards, enter the text again in the desired language and problem is solved. But is that necessary? Isn’t there something more usable – a design to avoid this completely by not allowing the problem to occur in the first place? Yes there is a solution, and here is an example www.trip.bg – a website for booking flights (the UI is in Bulgarian and uses the Cyrillic alphabet so I beg your pardon for that but my point should be clear).
The “English” text box in action. Image attributed to: www.trip.bg Not only does the text box convert my Cyrillic “ф” to the English “f”, but it also makes it a capital “F” at the same time because this complies with the format that I am expected to use when entering my name. It does similar conversion for more complicated scenarios too – transforming the Cyrillic „ч“ to the equivalent English combination of characters “CH”. Somebody put a really good thinking into the UX of the website, taking in account the targeted user group – people that are very likely to have a Cyrillic keyboard setup, and the expected format by airline carriers – English capital letters. The outcome is obvious – one happy user, hopefully many more, and one blog post on the topic.
It is a common practice that UI elements tend to become more and more complex. This complexity usually reflects to both developers and end users that interact with these elements. Fortunately, some people do put a very serious thought in the UIs they design and build to deliver a more usable product to their customers. I strongly believe that such efforts should be recognized and praised because they more or less impact our lives as users in a positive manner. I also hope that more and more designers will learn from such cases and use these “hacks” for their own products. However, one thing that we should never forget is that no two use cases are exactly the same and we must carefully craft the UX of a product or service by gaining enough insights so that we are able to make well-informed decisions. Decisions such as automatically to “translate” a character to its counterpart in the expected alphabet.