Stop making those weird gestures, start typing!

I think that it is the best time to connect oldschool-boring password typing with new-fresh-visionary gesture recognition. I hope that connection like this is going to provide appropriate usability for boys and girls, old and young.

In the following post I’m going to describe how to adjust code created in the Handling user gestures post to use both characters and gestures. I will also describe how I resolved usability issues and how the application handles the backspace key usage.

I would like to remind you that all of the sources are available in my Github repository. Moreover, in the README file, you can find short project description with its main assumptions.

Handling keys

The very first thing we have to do is to create an input which will handle all of the characters.

So the question is how are we going to handle all of those characters? The answer is simple – jQuery API. Quick look at the documentation and we can find keypress event. Let’s check what is it returning.

Going through all of those printed values we can find very interesting one. It is stored in the “which” parameter.

Why did I skip the other ones?

“To determine which character was entered, examine the event object that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the .which property so you can reliably use it to retrieve the character code.”

It is worth to notice that it returns an ASCII code so we need a simple converter. JavaScript provides such a tool:

Now we should consider how to store pressed keys. One of the easiest ways is to change the GesturesHandler a little bit. We can adapt it to handle not only gestures but also characters. For this purpose, we need uncomplicated class which will be representing character/key.

Since GestureHandler stores also characters, “Gesture” part of its name is out of date. I renamed it to PasswordElementsHandler.

Adding a simple logic to the keypress event handler, we could have a quite nice functionality.

Backspace key logic

During the tests I met one trivial problem. Our logic does not respect backspace key so it is impossible to make a change in the password.

There a problem has appeared. keypress event provides us information about character which was entered. It means that this mechanism won’t work with the backspace key. To handle this key we are forced to use another key-releated event named keyup.

As you know backspace’s ASCII code is 8. This simple handler allows to remove the last letter, but we need to update PasswordElementHandler status or notify it that the last letter should be removed from storage.

At this video you can see that it is required to refocus the input after drawing gesture. By adding one simple line of code we can improve its usability.

After another set of tests, I ­noticed that when the console is closed, user doesn’t know that gestures are submitted properly. It seems that we need something that will appear after gesture drawing in the text input. We can represent each of the gestures by character and append it to the input after the  processGestureStoring() procedure.

As you can see at the video this solution works really well. Unfortunately, it behaves inconsistently when we connect gestures, characters and backspace key together. Pressing backspace removes the last character but not the last password element. To solve this bug, we must perform some refactoring in the PasswordElementsHandler class.

After series of changes the text input and the gesture area work as expected. Furthermore, we are able to merge characters and gestures. The next step will be sending submitted password to the backend application.

I would like to remind you that all of the sources are available in my Github repository.

You may also like