Collapse all Symbian^3 Product Developer Library

Moving in touch UI

Dragging and flicking

Dragging event is a combination of touch down, move and stop (or touch release). Flicking is a combination of touch down and move (dragging), and touch release with speed. Dragging and flicking are one of the methods to control the content. Dragging and flicking can be disabled per component if required.

Note: If dragging and flicking are used, then focus scrolling is not possible.

Dragging and flicking are used in lists, grids, options menu, editors, viewers and forms. If there is a highlighted text in an editor or viewer, the highlight is always fixed where it was when the movement started. Dragging and flicking can also be performed on the contents which fits to the display.

When dragging the content over the borders, borders can provide the boundary effect to indicate that user has reached the end of the content.

Dragging the content reveals empty space. There can be as much empty area visible as user can drag the display.

Dragging and flicking are names for the touch event combinations described in the following table.

Table 1. Default dragging and flicking events.
User action	State change	Feedback
Touch down	Takes hold of position.	Highlight is shown on the touched item. Tactile: Basic list effect and audio feedback provided with touch-down event.
Move (Drag)	The content follows the finger. The content, control handle or whole canvas follows the finger movement. In lists, grids, viewers and editors, only vertical movement is supported. Content views (e.g., Browser) support 360° movement.	Highlight disappears. Tactile: Sensitive list effect and audio feedback provided whenever a new item appears on the screen. No continuous audio feedback with flick.
Stop and touch release	The content scrolling stops. With touch release, the content does not move. Nothing is activated.	Tactile: Basic list effect and audio feedback provided with touch down event. No feedback is provided with touch release.
Touch release with speed after dragging (Flick)	Touch release: The content continues its movement with the direction and speed that it had at the moment of touch release. The movement has friction; it slows down and stops. The amount of content that moves before it stops is related to the speed of flick. The highlighted item continues its movement out of the visible display.	Tactile: Touch release after move does not provide tactile feedback.
Touch down during the scrolling followed by flick	Stops the movement. If the user makes another flick (touch down + move + touch release with speed) before a very short time-out, the content continues movement at the speed of the second flick. Note: Movement has to be stopped before any other activity can occur. Any key press and another active window opening on top of the content (global notes and queries) stops the movement.	Highlight appears after time-out. Tactile: Basic list effect provided with touch down event if the movement is stopped. No feedback is provided with touch release. Note: If the content continues to move, the same move feedback is provided without any extra feedback.
Touch down and move out of the content	The content follows the finger.	Tactile: Sensitive list effect and audio feedback given with touch down event and whenever a new item appears on the screen.
Touch down and move in empty area	The entire empty area is inactive. If there is any content in the component that allows flicking/dragging, and if the user does a touch down and move in the empty area outside the content, the content follows the normal list touch down and move functionality.	Tactile: For the completely empty area, no feedback provided. For the component where there is content, moving the empty list follows normal drag/flick feedback. There is no feedback for the touch down event in the empty area.
Touch down and move, and touch release at the start or end of the content.	Inactive	Tactile: No feedback provided.

Scrollbar

In Touch UI, vertical and horizontal scrollbars can be used for scrolling. Scrollbars do not take active focus.

Scrollbar consists of the following elements:

Scrollbar area - It is the exact area ’under’ the scrollbar thumb plus the extended usage area. The area changes its color when the scrollbar has the control.
Extended usage area - It is the invisible area where the user can touch to be able to scroll.
Scrollbar thumb - It is the 'handle' with which the user can scroll the screen.
Scrollbar control area - It is the entire main pane area (after the user touches the scrollbar thumb to move, touch away from the scrollbar area, and still be able to control it).

Table 2. Default touch events for scrollbar.
User action	State change	Feedback
Touch down on a scrollbar, no thumb	Scrolling is activated when there is a scrollbar under the touch event. Scrollbar thumb is moved towards the touch down position on the scroll bar. Scrolling is done for a page at a time.	Scrollbar color is changed to indicate that the scrollbar has the control. Tactile: No feedback is provided when touch down on a scrollbar and no thumb is used. Sensitive slider effect and audio feedback given when thumb is moved towards the touch down position. No feedback is provided with touch release.
Touch down on a scrollbar thumb	Scrollbar thumb can be moved in desired direction. Scrollbar thumb color is changed as an indication to the users that scrolling can be performed.	Scrollbar thumb color is changed to indicate scrolling activation. Tactile: Sensitive slider effect and audio feedback provided with touch down and release events.
Touch down and hold scrollbar, no thumb	This action performs a “key repeat”. The scrollbar thumb is moved towards the touch down position	Tactile: Sensitive slider effect and audio feedback provided with touch down and with steps.
Touch down and move	Scrollbar thumb is moved along with the touch event. Touch down on scrollbar thumb, dragging and touch release are performed on the scrollbar control area.	Tactile: Sensitive slider effect and audio feedback provided with touch down event. Smooth slider effect provided with the drag event. Sensitive slider effect provided with touch release.
Touch down on scrollbar thumb and move to out of the scrollbar control area	Scrollbar thumb remains in the position where it was when the finger left the scrollbar control area. If the user moves the touch out of the scrollbar control area and back, the thumb will continue to move along with the touch event. After touch down on scrollbar thumb, touch is dragged out from the scrollbar control area, without releasing the touch.	Tactile: Sensitive slider effect and audio feedback provided with touch down. No feedback is provided if the thumb is not moving. If the thumb moves, smooth slide feedback provided. Note: If touch release happens outside the scrollbar, no feedback is provided.

Moving in hybrid devices

Hybrid devices are combinations of touch screen and physical keyboard. If there is detected touch event ongoing, then events initiated from the keyboard are not detected. For example, if there is touch down event detected, then the Navi keys are inactive. Also, if there is an ongoing hardware keyboard event, then the ongoing touch events (active touch event) are disabled. Following hardware keys are always active and key events are detected even if there is ongoing touch event.

Control key §KEY_CTRL§
Shift key §KEY_SHIFT§
Power key §KEY_POWER§
Keylock
Camera key §KEY_CAMERA§

Note: While using the hardware keys, focus moves to a given item before opening it.

Parent topic: Touch UI user experience