Friday, December 11, 2009

Touch Screen UI Design Principle

Unfortunately there are no standard among touch screen based software developers. Even Floreant POS team started on doing research on existing POS system. We learnt many of the existing POS are not touch screen friendly  at all. To give an example one of known Open source POS ( mostly designed for retail stores) uses thin Scroll bar which is not easy to use.

Interestingly MSDN has great tips(although I read somewhere 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:

Font
Millimeters
Relative pixels
DLUs
9 point Segoe UI
6x6
23x23
13x13
8 point Tahoma
6x6
23x23
15x14

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 gesture
Synthesized 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