Soft input panel for 480×320 LCD screen

I'm working on a Qt-based C++ project. The project includes a 480x320 TFT LCD screen for display. The screen is also capacitive and used for touch-based input. The screen is about the size of a credit card.

Qt does not supply a soft input panel (SIP, the virtual keyboard). Qt offers a full QWERTY keyboard example. Obviously a full QWERTY won't do due to screen size constraints. I need to implement the SIP for the project.

I've been through Google Scholar and papers relating to user interface design, small touch screens, and virtual keyboards. I have not found guidance on the layout of the input panels. Poupyrev and Maruyama's Tactile Interfaces for Small Touch Screens looks very promising, but it is missing the useful details.

My question is, what do the user interface folks recommend for the SIP? Specifically:

  • How many screens
  • Layout of keys on the screen
  • How to transition between screens

Here is my first attempt at constructing the input panel:

enter image description here

The UP and DOWN arrow move three lines at a time.

The BS is backspace; the RET is enter/return.

All other screens have the BACK arrow (upper right). It is included for consistency. I don't want to change things for a novice user.

The BACK arrow and RET key are the same function. They exit the input panel and return the result to the caller function.

I created the graphics using Gimp. I'm not a graphics guy and I realize they lack professional polish.

The touch-based input is used for initial configuration. Users will not need to regularly input data using it. I.e., it is not a "texting" app.

The input character set is that of a customary "strong" password.

  • Characters A - Z
  • Characters a - z
  • Characters 0 - 9
  • Characters with diacritics
  • Punctuation
  • Backspace and Enter

Based on initial design and testing, I think the screen limits keys to a 9x6 arrangement, using 51 pixel square per key. Anything smaller than 51 pixels causes missed touch events using a finger.

enter image description here

Tags: