24 the probability of the user touching the higher end of the button (than on |
24 the probability of the user touching the higher end of the button (than on |
25 the either side of the key) is high, button and icon sizes can be increased |
25 the either side of the key) is high, button and icon sizes can be increased |
26 vertically.</p><p>Essential information or features, such as a label, instructions, |
26 vertically.</p><p>Essential information or features, such as a label, instructions, |
27 or sub-controls should never be placed below an interface element that can |
27 or sub-controls should never be placed below an interface element that can |
28 be touched, as it may be hidden by the user's finger.</p><fig id="GUID-6D8108A5-9009-443D-9DF9-FA7AEFE1AD43"> |
28 be touched, as it may be hidden by the user's finger.</p><fig id="GUID-6D8108A5-9009-443D-9DF9-FA7AEFE1AD43"> |
29 <image href="GUID-70FC2D13-493D-433F-9CFB-ACF9F512513F_d0e75057_href.png" placement="inline"/> |
29 <image href="GUID-70FC2D13-493D-433F-9CFB-ACF9F512513F_d0e69973_href.png" placement="inline"/> |
30 </fig>Following are some useful tips that can be used while placing essential |
30 </fig>Following are some useful tips that can be used while placing essential |
31 information or features on interface element:<ul> |
31 information or features on interface element:<ul> |
32 <li><p>With interfaces having input devices, it makes sense to place targets |
32 <li><p>With interfaces having input devices, it makes sense to place targets |
33 like menu items on the edges of screens because the cursor movement stops |
33 like menu items on the edges of screens because the cursor movement stops |
34 at the edge of the screen. </p></li> |
34 at the edge of the screen. </p></li> |
37 it on a new target. Users may have difficulties in reaching the objects located |
37 it on a new target. Users may have difficulties in reaching the objects located |
38 on the edges of the screen, especially if the physical device has protruding |
38 on the edges of the screen, especially if the physical device has protruding |
39 edges around the touch screen panel. Additionally, with some devices, the |
39 edges around the touch screen panel. Additionally, with some devices, the |
40 screen edges may be less sensitive to register the touch input.</p></li> |
40 screen edges may be less sensitive to register the touch input.</p></li> |
41 </ul> </section> |
41 </ul> </section> |
|
42 <section id="GUID-8974B60A-15AA-49DD-BC40-04D31CBA5205"><title>Finger usable UI</title><p>Sylus can be used as |
|
43 the input method with touch UI, but events apply to finger use also. However, |
|
44 in some cases the components may not be finger optimized due to the size of |
|
45 objects, for example, virtual keyboard or text field.</p><p>In Symbian, UI |
|
46 style defines the target minimum sizes for a UI element considered as finger |
|
47 usable:</p><ul> |
|
48 <li><p>7 x 7 mm with 1 mm gaps for index finger usage </p></li> |
|
49 <li><p>8 x 8 mm with 2 mm gaps for thumb usage </p></li> |
|
50 <li><p>List type of components should have minimum of 5 mm line spacing</p></li> |
|
51 </ul><p>Targets are general as in practice sizes can be use case dependent, |
|
52 for example, due to frequency of use, efficiency vs. error criticality or |
|
53 ease of error correction, location of the button (edge of screen vs. center).</p><p>The |
|
54 visible area of the component and the component's active area should be identical. |
|
55 There are exception cases to this rule though:</p><ul> |
|
56 <li><p>When components are located near the edge of the display, the touchable |
|
57 area should extend fully to the edge of the display (beyond the components |
|
58 visible graphics). </p></li> |
|
59 <li><p>Visible area is smaller than the active area in order to keep the balance |
|
60 in look and feel of the UI. For example, scrollbar has wider touch area than |
|
61 visible area. </p></li> |
|
62 <li><p>Active area is smaller than the visible area in order to avoid unwanted |
|
63 presses to contiguous active areas. In this case, there it should be graphically |
|
64 indicated where the user should tap. Example: fixed toolbar buttons in landscape |
|
65 layout.</p></li> |
|
66 </ul></section> |
42 </conbody></concept> |
67 </conbody></concept> |