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