Background
This is the UI/UX when adding or editing a Text Expander Snippet in Typing Hero prior to version 0.4.37.
The area at the bottom contains various input and action placeholders that can be inserted into a template.
There is also a check box that controls when to replace a keyword, and if the keyword should be replaced with a random template if it is a Multiple Templates Snippet.
As I talked with customers and discover problems they have, more features are added.
That makes the area at the bottom becoming cluttered.
It is also difficult to locate the placeholder one would like to insert.
Feedback from a user
Out of the blue, one of the first user gave feedback about the usage of chip element for everything.
It makes it difficult to distinguish what will happen when one tap on a Chip.
Tapping on one could show or hide a section above the Chip.
Tapping on another could insert the desired placeholder or show a dialog.
I took the feedback as a strong signal to improve in this area.
The changes and the result
I start with the check boxes.
I decided to move them under the keyword text field at the top as it is closely related to keyword.
For the chips to insert various input and action placeholders, I decided to use nested menu.
I also put the menu under the template text field that has focus.
The template text field now has hint text “Template”.
The button “Add new entry” is rephrased to “Add new template” and has a different visual to make it more prominent.
Thoughts
The changes are quite drastic and isn’t perfect.
I find it to be more involved when I want to insert a placeholder (more taps). But it is definitely faster to do that as it is easier to navigate and locate the placeholder.
The user who gave the feedback also agree on that. 🥳
I’d love to hear from you if you have feedback on the result.
Written by
