The complexity of a “simple” keyboard
Simple? I thought so too…
When the task of drawing a keyboard was given to me, I immediately thought:
- Piece of cake!
At the end of the first day, I saw that I was mistaken. But I still didn’t know how much…
Have you ever noticed all the interactions that happen when you type a single letter?
On one hand, when a keyboard is tapped we don’t think about all or even any interaction that happens behind it. On the other hand, the good UX should be exactly this way, invisible to the users.
So, let’s get started…
I had to develop a translator keyboard. Taking the following factors into consideration:
iOS users shouldn’t notice that they are using a translator keyboard.
It should be good enough that users will think they’re using the official Apple keyboard.
The users must identify themselves with the keyboard.
The translation actions must be simple and the most invisible possible through the eyes.
I used Apple keyboard as my north. The first sketch was made based on it.
All colors as keys and letters were maintained as close as possible. Some of the first challenges were that background is provided by the system. Even on light mode or dark mode, the keyboard has transparency and one of my biggest challenges was with this damn alpha (lol). I will cover it below.
I started to analyse with a keen eye every single interaction and test numerous possibilities, so my questions were:
what happens when a key letter is tapped?
A box extension on the top of the letter you are typing appears to allow you to see what you are typing because this moment you have your finger over the entire letter.
What happens if the letter has accentuation like: á, ç, ñ, ń?
We were taught in Apple’s case that when a letter has variations the device needs to recognize the long press (also known as press-and-hold) gesture on the key to show the possible letter variations to that pressed letter. That will allow us to select the letter we want without releasing our finger from the screen, just smoothly go to the letter to select it and as we go through with our finger the letter selected will turn blue so the user will noticed that some action has happened. Also, for the most recent iPhones, the user feels a small vibration in their finger called haptic feedback also happens. I really LOVE the way Apple thinks about feedback! It’s one of the most important deliveries for the user because the user must notice that the interaction, no matter which, happened.
During my research I also discovered that if a letter with accentuation is tapped, what I call the “letters accentuation box” will appear on touch down, but on the Apple keyboard this action must happen just in place (in place means that the action will happen when your finger is tapping in that place), but the keyboard is not programmed to action happening ‘in place’. If you go around with your finger on the top of your screen for instance, “the letters accentuation box” will continue appearing but you can’t select any letter. Instead, the box will just appear there turning useless and if you release your finger anywhere, the letter will be written but not the accentuation ones, just the main letter. Apple, let’s get that fixed, ok?😄
What happens when a user touches the dark grey key as shift, backspace or return?
It turns into light grey the same as the other key colours.
The shift key has 3 states: default, first capital letter, all capital letters and so on…
Of course I cannot forget about the little detail of the new keyboard from iPhone X forward. The change language key and speech are now on the bottom of the screen, for instance. Not enough, I needed to think about the iPhone 4 omg!
Indeed, the developer has some limitations since Apple is almost like a top-secret company (lol) and there are many things they don’t allow us to do or maybe the developer will take decades to discover. For example: the change language button when tapped a list of languages that you have selected on settings will appear for you to choose the keyboard. What is the code to do it?
As we had a tight deadline we needed to opt for an MVP keyboard so some features will be improved later.
A CEO that I had usually said: "- perfection is the enemy."
So, we first needed to release a good version, and then keep working to improve it.
Well, after this little scenario overall about my research/analysis, I started to draw.
First of all, I had to have a menu where the user could:
- Choose Languages (source language and target language). As the industry standard, the source language will assume the device language and the target language will assume the last language used on the app (or by default each country has its own target language).
- Paste Text
- Copy Text
- Settings — to choose preferences like: Keyboard Layout (QWERTY, AZERTY, QWERTZ), Prediction ON/OFF, Space Bar Shortcut and Auto-Capitalization
These features above must appear on the translator keyboard (not forgetting the damn alpha), so it was practically impossible when the keyboard has an alpha background because the feature must be hidden. The keyboard has to look like the Apple keyboard and how can you hide something with transparency or anything that has alpha over another alpha won’t match at all and the aesthetic is never going to fit perfectly.
In fact, I came to a conclusion about the colours, or rather, opacity like emojis menu localised on the bottom of the keyboard, when it’s selected: The selection is black with alpha 10% on light mode and white with 10% alpha on dark mode (if someone is struggling with it too, I hope this tip be useful).
As well there were other features will be implemented later because those features hadn’t passed on the usability test. One example is the Translation view. The user could choose between three different layouts to send the translation:
- Only the translated text
2. The text translated with the flag of the language next to the text.
3. The source text and translated text both with respective country flags.
At the time, to edit the text in layout 2 or 3 wasn’t possible to do this with accuracy (developer issues).
I began to write this text without even knowing that it could later turn into an article while I was seeing what happens on the prediction area on Apple keyboard. No wonder if no one realizes how many interactions happen during a simple tap of a single letter!
If you are trying to enhance your senses, I hope this outflow works for you to be mindful of all these little tiny things.
