Symbian3/SDK/Source/GUID-0D093C3D-4D85-455E-B685-064A9B25B1FE.dita
author Dominic Pinkman <Dominic.Pinkman@Nokia.com>
Thu, 21 Jan 2010 18:18:20 +0000
changeset 0 89d6a7a84779
permissions -rw-r--r--
Initial contribution of Documentation_content according to Feature bug 1266 bug 1268 bug 1269 bug 1270 bug 1372 bug 1374 bug 1375 bug 1379 bug 1380 bug 1381 bug 1382 bug 1383 bug 1385

<?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-0D093C3D-4D85-455E-B685-064A9B25B1FE" xml:lang="en"><title>Touch
UI user experience</title><prolog><metadata><keywords/></metadata></prolog><conbody>
<p>In general, the touch UI in Symbian emulates the functionality of the Arrow
and Selection keys, but there are many deviations to this general principle.
Touch interaction design is a success if mobile device users choose to use
the stylus or finger even if all the same tasks could be done on the hardware
keys. All Symbian common components are touch-enabled, allowing full use with
a finger.</p>
<p>The touch UI is designed to enable full task flow with touch, without the
need to switch to hardware keys. Thus, the design ensures that users can complete
a task with the chosen interaction method (keys or touch) from start to finish.
However, the touch user interface offers some usability benefits compared
with keyboard use.</p>
<p>Observe the following guidelines when designing applications for touch
use:</p>
<ul>
<li><p>Base design decisions on real use cases.</p></li>
<li><p>Enable touch only for obvious functions to make sure that users can
find them.</p></li>
<li><p>Keep in mind that not every item on the screen has to have a functionality
attached to it and that the functionality should not be too surprising or
radical.</p></li>
<li><p>Keep in mind that theme design alone is not sufficient as means of
indicating touch functionality; where one theme may indicate touch, another
may not.</p></li>
</ul>
<p>In touch interaction, touch refers to pressing the finger or stylus against
the touch screen, tap corresponds to touch and release, while touch and drag
means touching and moving the finger or stylus along the screen. Basic touch
interaction is achieved through a short tap and long tap. In the short tap,
users place down and lift up a finger on the same item within a short period
of time. For example, when selecting items from a list, the first short tap
moves the focus to an item and the second short tap performs the Set function.
There is no time dependency between the taps. A long tap performs some specific
actions (described in more detail in <xref href="GUID-C11AF871-56C8-4EA4-A1E0-E2B23372EF84.dita">Touch
down and hold</xref>)
when users hold down the finger on a component for a set amount of time. The
following table lists the actions that take place on various finger movements. </p>
<note><p>The touch and drag functionality is not supported by Symbian
as an integrated part of the style, but it is supported in some selected applications
like moving items in the <xref href="GUID-86AADA3E-B77C-45CC-B523-785B75BAA5AA.dita">Menu</xref>.
You can use it in 3rd party applications.</p></note>
<table id="GUID-1A7C0B14-3A0D-4CC1-B6C4-377AC4615E2F"><title>Touch events</title>
<tgroup cols="2"><colspec colname="col1" colwidth="0.47*"/><colspec colname="col2" colwidth="1.53*"/>
<thead>
<row>
<entry>Touch type</entry>
<entry>Description</entry>
</row>
</thead>
<tbody>
<row>
<entry><p>Touch</p></entry>
<entry><p>The following actions take place on touch: </p><ul>
<li><p>The component or control under the finger takes active focus. </p></li>
<li><p>The button under the finger changes its appearance to the pressed down
status. </p></li>
<li><p>Scrolling is activated if the finger is on a scrollbar.</p></li>
</ul></entry>
</row>
<row>
<entry><p>Tap</p></entry>
<entry><p>The following actions take place on a tap (touch and release): </p><ul>
<li><p>The menu command under the finger is activated. </p></li>
<li><p>The button that was pressed down is released and the corresponding
function is performed (unless it is a latching button as in a toolbar).</p></li>
</ul></entry>
</row>
<row>
<entry><p>Touch and cancel</p></entry>
<entry><p>Users can cancel any action on the objects on which they place the
finger by dragging the finger outside the object area before lifting it. If
the users drag the finger back onto the object before they lift it, the action
is performed.</p></entry>
</row>
<row>
<entry><p>Touch and drag</p></entry>
<entry><p>Users can place the finger on the screen and move it on the screen
without lifting it. This kind of dragging can be used to: </p><ul>
<li><p>Scroll lists and grids. </p></li>
<li><p>Select multiple objects in lists (see <xref href="GUID-D9F25AAD-18A1-43AC-B59B-82396DAA68F9.dita">Touch
based multiple selection</xref>). </p></li>
<li><p>Browse menu items. When the finger moves on a menu item, the item is
focused and opens possible submenu panes. Lifting the finger performs the
focused menu command. </p></li>
<li><p>Highlight text in appropriate editor fields (<i>paint</i> it). </p></li>
<li><p>Perform application-specific functions, such as drawing lines or dragging
selections.</p></li>
</ul></entry>
</row>
</tbody>
</tgroup>
</table>
<section id="GUID-48D98CA8-47ED-4E6D-8A43-388D8A0293E5"><title>Using
touch events in C++ applications</title><p>For implementation information
on using the <xref href="GUID-29486886-CB54-4A83-AD6D-70F971A86DFC.dita">application
and UI frameworks</xref> for receiving touch events, see <xref href="GUID-EF7FF39E-929F-4767-B475-5D582D37BB32.dita">Window
server events</xref> and <xref href="GUID-4D2AA522-82AB-4D1E-9F1E-5C6A35DEF195.dita">Pointer
events</xref>.</p></section>
</conbody></concept>