|
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>Scaling |
|
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 platform, UI style defines the minimum |
|
18 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 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 |
|
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 |
|
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"/> |
|
30 </fig>Following are some useful tips that can be used while placing essential |
|
31 information or features on interface element:<ul> |
|
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 |
|
34 at the edge of the screen. </p></li> |
|
35 <li><p>When using a touch screen, a user seldom drags the finger across the |
|
36 screen like a cursor. Instead, they most likely lift their finger and place |
|
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 |
|
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> |
|
41 </ul> </section> |
|
42 </conbody></concept> |