|
1 <?xml version="1.0" encoding="utf-8"?> |
|
2 <!-- Copyright (c) 2007-2010 Nokia Corporation and/or its subsidiary(-ies) All rights reserved. --> |
|
3 <!-- This component and the accompanying materials are made available under the terms of the License |
|
4 "Eclipse Public License v1.0" which accompanies this distribution, |
|
5 and is available at the URL "http://www.eclipse.org/legal/epl-v10.html". --> |
|
6 <!-- Initial Contributors: |
|
7 Nokia Corporation - initial contribution. |
|
8 Contributors: |
|
9 --> |
|
10 <!DOCTYPE concept |
|
11 PUBLIC "-//OASIS//DTD DITA Concept//EN" "concept.dtd"> |
|
12 <concept id="GUID-5486EFD3-4660-4C19-A007-286DE48F6EEF" xml:lang="en"><title>Scale |
|
13 and positioning of controls</title><prolog><metadata><keywords/></metadata></prolog><conbody> |
|
14 <section id="GUID-EF8CA4BE-130F-4117-9722-3F652DD1D244"> <p>Interface elements |
|
15 a user has to select and manipulate should not be smaller than the smallest |
|
16 average finger pad, that is, no smaller than 1 cm (0.4") in diameter or a |
|
17 1 cm × 1 cm square.</p> <p>In the Symbian OS, UI style defines |
|
18 the target minimum sizes for a UI element considered as finger usable:</p><ul> |
|
19 <li><p>7 x 7 mm with 1 mm gaps for index finger usage</p></li> |
|
20 <li><p>8 x 8 mm with 2 mm gaps for thumb usage</p></li> |
|
21 <li><p>List type of components should have minimum of 5 mm line spacing</p></li> |
|
22 </ul><p>The width of a finger limits the density of items on screen. If the |
|
23 items are too close, the user will not be able to choose a single one.</p><p>As |
|
24 the user is more likely to touch higher on the button by mistake than either |
|
25 side, button and icon sizes can be increased vertically.</p><p>Essential information |
|
26 or features, such as a label, instructions, or sub-controls should never be |
|
27 placed below an interface element that can be touched, as it may be hidden |
|
28 by the user's own body.</p><fig id="GUID-FF8225A9-0D9F-4E8F-8B19-32FAECEFE47C"> |
|
29 <image href="GUID-FD85921E-AC9F-481F-8A58-0D03D56661C0_d0e47154_href.png" scale="60" placement="inline"/> |
|
30 </fig><ul> |
|
31 <li><p>With interfaces with traditional input devices, it makes sense to place |
|
32 targets like menu items on the edges of screens: the user cannot overshoot |
|
33 the target, as the cursor stops at the edge of the screen. </p></li> |
|
34 <li><p>When using a touch screen, a user seldom drags his finger across the |
|
35 screen as he would with a cursor. Instead, they most likely lift their finger |
|
36 and place it on a new target. Users may have difficulties in reaching the |
|
37 objects located on the edges of the screen, especially if the physical device |
|
38 has protruding edges around the touch screen panel. Additionally, with some |
|
39 devices, the screen edges may be less sensitive to register the touch input.</p></li> |
|
40 </ul> </section> |
|
41 </conbody></concept> |