Embedded Files
An ergonomic smartphone keyboard helps you better communicate with GenAI and ML.
Reimagine and redesign keyboard using
Human-Centered Design.
Secondary Research
What is a keyboard?
The physical and the smartphone keyboards we use everyday.
Going through the history of the keyboard, I found that keyboards were first introduced in musical instruments.
The intrinsic bijective nature of keyboards.
In short, a one-to-one connection.
I started with secondary research. What first came into my mind are the standard computer keyboards. But later I think of something that we use every day, that is smartphone keyboards. Besides, going through the history of the keyboard, I found that keyboards were first introduced in musical instruments.
With all the information, I identified the intrinsic bijective nature of keyboards. That is, one input is only linked to one output, and the output can only be produced by the very input. Therefore, functioning properly is one of the most important aspects of a keyboard. During the following interviews, the responses of the interviewees also support this argument.
Bijection
One input is linked to one output.
The output can only be produce by the same input.
Interviews
What is essential?
I interviewed people across multiple generations, from Generation Z to their parent's generation. Using the data gathered from the interviews, I identified some insights.
INTERVIEW QUESTIONS
What do you do with the keyboard?
What does the keyboard mean to you?
Which type of keyboard is most commonly used?
What kind of keyboards have you used?
What type of keyboard is your favorite?
Which do you dislike the most?
Can you talk about any frustration you encountered when using keyboards?
Are there any new features you want the keyboard to have?
Will you try some novel keyboard designs?
Do you use more virtual keyboards or physical keyboards?
Thoughts on mechanical (virtual) keyboards?
Does the haptic feel of the keyboard matter?
Does the keyboard affect moods?
The original interview data and keywords extraction.
Using a mind map to organize keywords information structure, with this, I came up with the following insights.
Interview Takeaway
Keyboard, the primary input interface of digital devices. An interface that we use every day, and yet barely think about it.
Key Insights
Habituation
As people get more exposed to certain types of keyboards, they get used to the layout and the interface.
Effectiveness
This is arguably what people care about the most, that is "a properly functional" keyboard. A keyboard that functions properly. Also link back to secondary research finding.
Efficiency
People are likely to use the built-in keyboard because it is the most convenient one, and always desire to have more efficient keyboards or input methods.
Emotion
Not only does the quality of the keyboards might affect peopleʼs emotions. It also works the other way around, that is, peopleʼs emotions change the way they interact with the keyboard, especially those intense emotions like anger, anxiety, and arousal.
An unexpected finding. Keyboard and emotion have a strong connection.
Design Exploration
I created 50+ sketches exploring different input media, forms, functions, etc. Designs ranged from physical redesign to speculative and futuristic ones.
Design Decisions
Let’s go digital.
Digital keyboards have incomparable flexibility to avoid possible unpleasant situations, such as forget to switch input language or cap lock. This design will include a prominent voice dictation button to enhance the usability for all generation.
This design decision reflected the insights habituation, effectiveness, and efficiency.
Convenient and ergonomic.
The built-in keyboards are usually peoples’ first choice, but people also find themselves in an unhealthy posture. A convenient design that also keep people in a healthy posture is a must.
This design decision reflected the insights effectiveness and efficiency.
Time to calm down.
There are so many reasons that will get people irritated while using keyboards. The keyboard uses algorithm to identify the usersʼ moods. This design aims to elevate peoplesʼ self-awareness of their mental states and help people calm down.
This design decision reflected the insights emotion and effectiveness.
Problem Space - Ergonomic
The built-in smartphone keyboard is not so ergonomic.
The current keyboard layout requires a lot of thumb movements to operate. Therefore, for extra stability to maintain higher effectiveness, people use their little fingers as support. However, this will result in a sore finger after a long period of usage.
Ergonomic design can not only help increase the effectiveness of one-hand operation but also increase efficiency.
Ergonomic design can help increase the effectiveness and efficiency of one-hand operation.
Design Process - Ergonomic
Building ergonomic keyboard using thumb zone.
Using the thumb zone idea to start my ergonomic keyboard design.
Sketch and test!
Central keys are easy to reach with neural hand posture.
The furthest keys are also within reach without stretching.
Keys at the edge of the screen is hard to reach...
Iterate on the layout of the keyboard.
Iterate the layout to include all function keys and improve the reachability of the keys at the edge of the screen. From fan shape (upper left) to more curvy designs (lower left).
New layout with better reachability at edges, complete function keys, and easier for future implementation.
The keys at the edges of the new design are easier to reach without bending the thumb too hard. The round-key design also make it easier for future implementation.
Design Process – Texting Peacefully
Help people stay mindful when strong negative emotions occur while texting.
A simple storyboard illustrates how the users might interact with this keyboard.
UI designs and interactions
Before the keyboard intervene.
Using algorithms to detect the tone of the text and the mental states of the users.
Using deep breathing sessions to help users direct attention from original situations.
After the break, the users might text in a more neutral tone.
Design is not a linear process.
Sometimes, we take a detour.
What went wrong?
Maybe we don't have to text peacefully?
Why? People want to express their emotions.
Originally, if the keyboard detects the presence of certain emotions, it will try to help the users to reach a more neutral state of mind.
Yet, I tested the protoype with some users, and they argued that they don't want to sound peaceful all the time. Sometimes, they wanted to express their emotions and feelings.
What's next?
Research, research, and research.
What is the role of emotion?
To help communicate.
The feedback led to another question.
What is the role of emotion in human communication?
After research and some interview, I found that emotions actually help people better communicate. In-person interaction is full of body language, micro-expressions, and emotions. However, in the virtual realm, there exists no this kind of information.
People need to express their emotions.
“Sometimes, I immediately regret after sending mean text messages. It is just so unnecessary.”
Identify the True Needs
Emotions can help people communicate, but people also want a reminder.
Although emotions play a vital role in in-person communication, sometimes, they might also have negative impacts.
I conducted a quick follow-up interview with several people to validate the needs. They responded that sometimes they regretted sending certain messages to people right after sending the text. Therefore, using tone detection to help people avoid sending impulsive text became the new goal.
New Design Goal
Bring emotions to virtual world and help people better communicate with tone detection.
Finding the role of emotions in communication and the first draft of two-step verification.
Extra verification steps to help people avoid sending messages they will regret. After sending the message, the keyboard will suggest stickers and emojis that fit into the context to help convey the sender's intention.
Results
An ergonomic smartphone keyboard that brings emotion to the virtual world and help people better communicate.
The ergonomic keyboard that everyone wants.
I mean literally.
After finishing the design of Keymotion, I showed this keyboard to interview participants without explaining what this design was about. As soon as they saw the keyboard, they knew exactly the purpose of the new layout and responded that's what they had always wanted.
Keymotion clearly provides a clear affordance of how to use it, and it also reflects the desire of the general public to use their smartphone keyboard with one hand.
People can customize the position and the size of their keyboard.
This is the customization UI. It will ask the user to use their thumb to draw the area that can be easily reached. By doing so, the keyboard is perfectly ergonomic to individuals.
The keyboard is all set up and matches the userʼs normal hand gesture. They can always come back and adjust the layout.
Keymotion is not only design for right-haned users. Based on the customization input shape, it will determine if the user is right-haned or left-handed. For left-handed users, Keymotion will generate a mirrored layout.
The return key and delete key are placed in different positions to reduce mishitting rate. The dictation key is highlighted in green to increase the usability for all ages.
Micro-interaction of Keymotion. The keys will enlarge when hit to help people see what key they have hit. It will also vibrate to provide haptic feedback.
Prototyped in Figma.
Tone detection helps people better communicate.
Before sending a message, Keymotion will utilize two-step verification to help people avoid sending the message to the wrong person, and give them the chance to edit improper text.
Using on-device machine learning, Keymotion can determine the tone of the text by analyzing data such as typing speed, words used, tone detection, etc.
Notice that the confirmation button is placed on the left, which is at a different position than people would expect. The short pause of the user flow can allow people to think twice.
The algorithm was trained through a large database and the userʼs feedback. This is the interface of the userʼs feedback after people clicked the feedback button.
When people choose to modify, Keymotion will highlight the keywords that are related to the emotion detected.
Tap on the word and the replacement suggestion will pop out on the top of the keyboard.
Through on-device machine learning, Keymotion can generate text that sounds like the userʼs tone in different emotions. And people can swipe to change the tone.
After selecting the desired tone, users will be directed back to the confirmation page.
When the message is sent, Keymotion will automatically suggest suitable stickers and emojis to help people further clarify the intent of the text.
Key Takeaways
Challenge the design decisions.
Go back to the users.
Embrace the detours.
As a designer, it's easy for us to fall in love with our own ideas. However, sometimes, the solutions we think of might have drifted away from real-world users.
For this project, I ditched the mindfulness function completely. Although I loved that idea, that was not the function that people wanted.
Despite the disappointment, I changed the course of design and embraced this detour. Turned out, it led me to a better place.
Next Steps
Implement and iterate.
Design shouldn't happen in a vacuum. Implementation is the only way to actually test a design. I can expect there should be a handful of engineering obstacles occur on the way. These obstacles should also be a great chance to iterate and hone the design.
Designed in 2021.
Google Sites
Report abuse