The Grammarly app for both Android and iOS includes a native keyboard. The motive behind the development of the keyboard, in contrast to a typical mobile app such as a text editor, is the same as Grammarly’s browser extensions: the writer’s assistant should be accessible any time the user writes. Grammarly Keyboard on Android is utilized more than 70 times each day by a typical user and significantly affects the way that people interact with phones.
The decision to create the Grammarly application for a keyboard that is native to the app led our team to several fascinating and challenging issues in mobile app design UX, performance, and testing. The blog will take a look at Android specifically, and where Grammarly is a stand-out app. Grammarly application is unique in the sense that, unlike other Android applications, it’s not an activity or even a fragment. The UI is constrained and continuously changing.
Each time you press Grammarly Keyboard triggers a number of simultaneous events. The keyboard seeks suggestions from its models for on-device while the request is processed, it also communicates with the backend for a thorough analysis of the text that you entered.
A second thread retrieves the list of synonyms for the word you are typing and displays these within the “suggestion strip” above the keys. The whole process takes tens of milliseconds. If you think this is interesting take an insider’s view of what it takes to build the keyboard app of your dreams.
Android keyboards
A Dell 3340 keyboard in Android is referred to as an IME also known as the input method editor. The Android documentation gives a great outline of the process of creating an IME however we’ll only briefly discuss the most important aspects. On Android, keyboards are an app whose status and visibility are managed by a component of a service called the Input Method Service.
In terms of features, all keyboards include an area above the keys that displays suggestions for predictive use. are shown to help users to type more quickly. In order to increase precision, keyboards utilize intelligent models to identify the characters most likely to be used to the keyboard by the user. In addition, in order to use autocorrect, many keyboards attempt to predict the words that the user wants to enter.
Additional requirements for Grammar
Like many Android keyboards, Grammarly has its own predictive autocorrect feature and Next-Word Prediction algorithms; we also developed our own method of recognizing gestures to offer users the option to type with a swipe.
Our objective was to extend the basics described earlier to help users improve their writing. In order to achieve this, we wanted to provide additional writing ideas by displaying similar types of alerts users receive from Grammarly’s web extension. If appropriate, we would like Grammarly’s keyboard to suggest synonyms that are appropriate for the current word.
For this, the Acer e1-531 keyboard draws its inspiration from two sources of data: (1) fast models saved on devices within the application for autocorrect, next-word prediction synonyms, and gesture typing; in addition, (2) Grammarly’s Backend that performs more detailed analysis at the paragraph and sentence level. Combining these two sources this keyboard can present pertinent writing ideas to users every time.
Key areas to build Grammarly’s keyboard
Below, we’ll discuss some of the intriguing challenges we’ve encountered while creating an application that has to be both a clever writing assistant as well as a quick reliable IME. We’ll be exploring several of these subjects further in our next blog post.
Allowing micro-interactions with each keypress
To create this keyboard Grammarly Keyboard, we had come up with a method to accommodate more information in an already limited and consistent space. It is crucial for users to get Grammarly’s suggestions however the amount of information displayed when typing can become confusing or even distracting.
We decided on a UX that lets the recommendations from the backend be displayed as alert cards alongside the Grammarly logo on the suggestion strip, and stack up when there are several cards. To enable users to view additional information for every alert we added an option to revise the view which replaces the keyboard layout and presents cards with explanations of what modifications could be made to the content.
The development of a state machine to support UI views
The user interface for a keyboard is simple. It’s mainly the view that shows various options above the keyboard, and another view that shows the layout of the keyboard. Although a keyboard may appear static in comparison to other apps, however, the UI changes constantly. Keyboards aren’t able to generate new views and screens.
Instead, based on the occasion, the views are replaced or switched out frequently in multiple locations at the same time. For instance, if an individual taps the symbol key, the layout of the keyboard changes by replacing the views of the letters keys with fresh views, and whenever a user presses the Grammarly logo, the layout of the keyboard changes onto the revised view. Trajectories for typing with gestures are drawn over the layout of the keyboard.
The suggestion section of Grammarly is more dynamic than the majority. The view hierarchy comprises the following views: the Grammarly logo autocorrects, next-word suggestions or autocorrect and synonyms, alert cards as well as a badge that sits above the Grammarly logo that shows the number of alerts on the stack, as well as important user-friendly prompts.
The views all have to work seamlessly with the suggestion strip, alternating between them or overlaying when necessary, and using specific animations for transitions. We created a state-driven design to ensure that the UI is enjoyable and fluid. Below, the layout inspector’s output illustrates how many views are in this suggestion strip.
