The Evolution of the Touch Panel Cursor

Simple CursorThe Simple Cursor
The Simple Cursor is the most basic of all cursor controls and consists of 5 buttons representing up, down, left, right, and select. Each button can have a different image for inactive and active states totaling 10 images. A separate background image can also be incorporated. This works well on simple designs that incorporate oversized controls since the active states are otherwise obscured by the user’s finger.

The Multi-Mode Cursor
Multi-Mode CursorThe Multi-Mode Cursor unfortunately doesn’t work across all platforms, but where it works, it works very well. This cursor is made up of a single image representing the entire inactive state, and 5 images representing up, down, left, right, and select. This requires only 6 images in total, each displaying the entire cursor control in its respective state. Transparent buttons are placed over the desired hot spots to activate each function. Since only one image for each state is shown at any one time, the appearance of the entire cursor can be altered with each touch — note the green light being cast across the center of the cursor from the top.

9-Square Grid CursorThe 9-Square Grid Cursor
The 9-Square Grid Cursor divides its bounding area into a 3×3 matrix. The four corners are fillers designed to give the cursor a unibody appearance. The remaining 5 squares make up the touchable hot spots and can utilize additional images for active states. The 9-Square Grid Cursor is compatible with all platforms and generally looks better than the Simple Cursor, but shares the same issue of its active states being obscured when touched. Its active states also falls short of the Multi-Mode Cursor in terms of potential eye-candy. Adaptation and Insight maximize the capabilities of the 9-Square Grid Cursor.

The Guifx Perimeter Cursor
Guifx Perimeter CursorOur latest innovation is the Guifx Perimeter Cursor which takes the best attributes of our preceding cursor styles and combines them into a single, elegant design. The touchable hot spots work the same as with the 9-Square Grid Cursor, but each row and column around the perimeter of the bounding area are capable of displaying full active states similar to those previously only possible with the Multi-Mode Cursor. But unlike the Multi-Mode Cursor, the Guifx Perimeter Cursor works across all platforms. You’ll find the Guifx Perimeter Cursor implemented in Meta, S3, and many more Guifx designs to come.

What’s next for the touch panel cursor? Oh believe me, we’re already working on it 😉

Leave a Comment

You must be logged in to post a comment.