The Making of a Keypad

Most of its design decisions inherits from WeLoan, which adopts the results of data analytics. And some adjustments are made due to the differences of the target audience and customer acquisition.

The most interesting part is the realization of the custom keypad.

Conventionally, the handler of tapping a button, in this case, display the number you tapped on the input, is bind to event click().

But due to the mechanism of web/mini program, click() event will only be triggered 200ms after the finger touches the screen. That’s not a big deal for most buttons in most scenarios. But on a keypad, where users are tapping buttons consecutively, will create a sense of staggering.

And since a button is not “clicked” until your finger leaves the screen, the handler binds to touchend() instead of touchstart().

To make the feedback of a tapped button more “vivid”, a short vibrate is also added.

A custom input is also required. The main challenge is you have to insert the caret “manually” every time the user taps a number, which is done automatically on native inputs.

A natural idea is to explode the string into blocks of number. And insert the caret into the block when the user taps it.

But the problem a human finger is not as precise as a mouse cursor, the target is too small most of the time.

0 is tapped but the user is aiming for 1

So an inline padding should be added to the end of each block to increase the touch target.

But what if users taps the yellow area?

In this case, the user is definitely intended to append more numbers to the end of the string, we need to handle the last block specifically by extending its width all the way to the right.

UI design is not just about images, it also lies behind the screen.