How Constraint‑Based Design Can Revolutionize Financial Numeric Input

Constraint Design Thinking

Years of financial product design reveal that highly business‑specific products face many constraints, making generic solutions inefficient. Drawing on Don Norman’s design psychology, constraint‑based design limits possible actions through visibility and feedback, helping users quickly find appropriate interactions even in new contexts while reducing errors and opening space for innovative solutions.

Four Requirements of Financial Numeric Input

Limit input data range to improve efficiency – financial fields often have minimum and maximum limits, so the control must enforce these bounds.

Minimize interference with the surrounding UI – the input method should not occupy excessive screen space or obscure other content.

Support integer‑type input habits – users typically enter round numbers (hundreds, thousands) rather than scattered digits.

Enable quick adjustments – fine‑tuning should be possible without cumbersome steps.

Traditional numeric keyboards fail to meet these demands, as they consume half the screen and can obscure important information.

Existing Solutions and Their Limits

Gesture‑based sliders, like those used by Alipay for insurance or pension calculations, reduce keyboard interference but struggle with precise large‑range values, requiring users to make many small adjustments or revert to a keyboard.

Redesigned Input Control

The new control combines a gesture slider with "+" and "-" buttons, preserving the benefits of sliding while allowing precise integer entry and quick fine‑tuning.

Key features:

Axis displays minimum and maximum values, clearly defining the allowed range.

Linear sliding path offers faster input than discrete key presses.

Slider operation does not trigger keyboard pop‑up, keeping the UI clean.

"+" and "-" buttons adjust the value by one‑tenth of each scale division, enabling rapid micro‑adjustments.

The scale is divided based on the order of magnitude of the input range, allowing users to easily select round numbers even across a span of 500 to 300,000.

Compatibility with Traditional Keyboard

While the design encourages slider use, it still supports occasional keyboard entry for edge cases or user preference, with a clear rule for when the keyboard should appear.

Conclusion

Generic UI components work for most scenarios, but specialized, constraint‑heavy domains like finance require tailored solutions. By analyzing domain‑specific constraints and integrating them into the control design, we achieve higher efficiency, lower error rates, and a seamless user experience while still accommodating traditional input habits.

References: [1] Norman, Don. The Design of Everyday Things . 2013. [2] Rajput, R. K. A textbook of automobile engineering . 2007. [3] 张旭. 关于金融产品中的输入框设计. 小米金服用户体验公众号. 2019.