Mobile UI: 3D navigation with binary D-pad

Current mobile devices usually have binary cursor controllers (D-pad, direction buttons, etc.). If the D-pad's direction resolution is so low (typically 4 directions for cell phones, sometimes 8 as for the Game Boy Advance), how can a binary D-pad be used to navigate smoothly through 2D or 3D space? This page describes an interaction pattern suitable for running through a 2D or 3D game level with one thumb (on a D-pad).

 
Point and press!  
 
( Place the mouse cursor at various positions on the gray cross-shaped D-pad above and press the mouse button. There are 8 regions to press.)
 
If demo does not work, read this...
   

Virtual Thumb: The figure on the left is interactive. Use your mouse or keyboard to make the character travel through virtual space.

Mouse: The virtual D-pad (underneath character) can be pressed in 8 different directions by pointing (within D-pad circle) with your mouse cursor and pressing the left mouse button.

Keyboard: The direction keys (Left, Right, Up and Down arrows) can be pressed one or two at a time to point in 8 different directions when the applet has focus. To swerve (virtually) left, press the Up and Left (arrow) keys together. To swerve right, press Up and Right together. To side-step left or right, press the Down key together with either Left or Right. Green brackets around figure indicate that the applet has focus. Red brackets indicate that you must click on the figure to shift focus to it and enable keyboard control.

Visual Feedback: Check or uncheck the checkboxes to change the visual information. If all options are checked, the display is in the style of "Third Person" action games. If "character" and "camera lag" are unchecked then the display is in the style of "First Person Shooters".

Note: This demonstration is a work-in-progress. (1) Proper animations have not been included [yet] for backing up and lateral movement. (2) 4-direction and 360-direction interactions will be added. (3) Obstacle course? Platform jumping?

 
 
vizmo.com