Friday, December 11, 2009

Touch Screen UI Design Principles

Unfortunately there are no standard among touch screen based software developers. Even Floreant POS team started on doing research on existing POS system. We learned many of the existing POS are not touch screen friendly  at all.

To give an example,  one known Open source POS ( mostly designed for retail stores) uses thin Scroll bar which is not easy to use.

Interestingly our close sourced Microsoft has added those tips in MSDN (even though their flagship product MS Word is at the top in UI hall of shame ;)). Anyway lets share some nice efforts by them.


1. Target Area

 Research indicates that the minimum target area for efficient, accurate interaction using a finger is 6x6 millimeters (mm). This area translates to layout metrics as follows:

FontMillimetersRelative pixelsDLUs
9 point Segoe UI6x623x2313x13
8 point Tahoma6x623x2315x14

Furthermore, research shows that a minimum size of 10x10 mm (about 40x40 pixels) enables better speed and accuracy, and also feels more comfortable to users. When practical, use this larger size for command buttons used for the most important or frequently used commands.

2. System gestures

System gestures are defined and handled by Windows. As a result, all Windows programs have access to them. These gestures have equivalent mouse, keyboard, and application command messages:
System gestureSynthesized equivalent message
Hover (when supported)Mouse hover
Tap (down and up)Mouse left-click
Double tap (down and up twice)Mouse double left-click
Press and hold (down, pause, up)Mouse right-click
Drag (down, move, up)Mouse left-drag
Press, hold, and drag (down, pause, move, up)Mouse right-drag
Select (down, move over selectable objects, up)Mouse select
For more information, see SystemGesture Enumeration.

there are also other consideration including Control spacing, Control restrictions etc. I would recommend anyone to go through their page