<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (c) 2007-2010 Nokia Corporation and/or its subsidiary(-ies) All rights reserved. -->
<!-- This component and the accompanying materials are made available under the terms of the License 
"Eclipse Public License v1.0" which accompanies this distribution, 
and is available at the URL "http://www.eclipse.org/legal/epl-v10.html". -->
<!-- Initial Contributors:
    Nokia Corporation - initial contribution.
Contributors: 
-->
<!DOCTYPE concept
  PUBLIC "-//OASIS//DTD DITA Concept//EN" "concept.dtd">
<concept id="GUID-5486EFD3-4660-4C19-A007-286DE48F6EEF" xml:lang="en"><title>Scaling
and positioning of controls</title><prolog><metadata><keywords/></metadata></prolog><conbody>
<section id="GUID-EF8CA4BE-130F-4117-9722-3F652DD1D244"> <p>Interface elements
a user has to select and manipulate should not be smaller than the smallest
average finger pad, that is, no smaller than 1 cm (0.4") in diameter or a
1 cm × 1 cm square.</p> <p>In the Symbian platform, UI style defines the minimum
sizes for a UI element considered as finger usable:</p><ul>
<li><p>7 x 7 mm with 1 mm gaps for index finger usage</p></li>
<li><p>8 x 8 mm with 2 mm gaps for thumb usage</p></li>
<li><p>List type of components should have minimum of 5 mm line spacing</p></li>
</ul><p>The width of a finger limits the density of items on screen. If the
items are too close, the user will not be able to choose a single one.</p><p>As
the probability of the user touching the higher end of the button (than on
the either side of the key) is high, button and icon sizes can be increased
vertically.</p><p>Essential information or features, such as a label, instructions,
or sub-controls should never be placed below an interface element that can
be touched, as it may be hidden by the user's finger.</p><fig id="GUID-6D8108A5-9009-443D-9DF9-FA7AEFE1AD43">
<image href="GUID-70FC2D13-493D-433F-9CFB-ACF9F512513F_d0e69973_href.png" placement="inline"/>
</fig>Following are some useful tips that can be used while placing essential
information or features on interface element:<ul>
<li><p>With interfaces having input devices, it makes sense to place targets
like menu items on the edges of screens because the cursor movement stops
at the edge of the screen. </p></li>
<li><p>When using a touch screen, a user seldom drags the finger across the
screen like a cursor. Instead, they most likely lift their finger and place
it on a new target. Users may have difficulties in reaching the objects located
on the edges of the screen, especially if the physical device has protruding
edges around the touch screen panel. Additionally, with some devices, the
screen edges may be less sensitive to register the touch input.</p></li>
</ul> </section>
<section id="GUID-8974B60A-15AA-49DD-BC40-04D31CBA5205"><title>Finger usable UI</title><p>Sylus can be used as
the input method with touch UI, but events apply to finger use also. However,
in some cases the components may not be finger optimized due to the size of
objects, for example, virtual keyboard or text field.</p><p>In Symbian, UI
style defines the target minimum sizes for a UI element considered as finger
usable:</p><ul>
<li><p>7 x 7 mm with 1 mm gaps for index finger usage </p></li>
<li><p>8 x 8 mm with 2 mm gaps for thumb usage </p></li>
<li><p>List type of components should have minimum of 5 mm line spacing</p></li>
</ul><p>Targets are general as in practice sizes can be use case dependent,
for example, due to frequency of use, efficiency vs. error criticality or
ease of error correction, location of the button (edge of screen vs. center).</p><p>The
visible area of the component and the component's active area should be identical.
There are exception cases to this rule though:</p><ul>
<li><p>When components are located near the edge of the display, the touchable
area should extend fully to the edge of the display (beyond the components
visible graphics). </p></li>
<li><p>Visible area is smaller than the active area in order to keep the balance
in look and feel of the UI. For example, scrollbar has wider touch area than
visible area. </p></li>
<li><p>Active area is smaller than the visible area in order to avoid unwanted
presses to contiguous active areas. In this case, there it should be graphically
indicated where the user should tap. Example: fixed toolbar buttons in landscape
layout.</p></li>
</ul></section>
</conbody></concept>