User interactions

Must

Actions must be triggered when appropriate for the type of user interaction.

Description

Users will use a variety of input methods, sending different signals that can be listened for programmatically to trigger actions. This could be moving a mouse, touching a screen or pressing a key. It could also be using other controllers or assistive technology to mimic these interactions.

For mouse, touch and other pointer style interactions the most appropriate trigger will be a high level “click” event or an event at the end of the interaction. This allows users to change their mind and adjust focus, without being forced to commit to an action until the clicked mouse, or touch is removed.

For keyboard style interactions the most appropriate trigger will be a high level “keypress” event or an event at the start of the interaction. These users have already chosen focus.

Which trigger is most appropriate may vary for some interactive content. 

IOS

By default standard objects will not respond when first touched and will only respond on touch being removed from an object this is mostly therefore an issue for custom controls implementing multiple touches. Controls that contain multiple touches have the ability to respond to and take action upon receiving a touchesBegan:withEvent. Developers should avoid taking action in this method.

A Multiple touch enabled view that does not take action upon receiving the touchesBegan:withEvent method is preferred over a multiple touch enabled view that does take immediate action upon the user touching the display in the touchesBegan:withEvent method.

ANDROID

Care must be taken to avoid triggering touch controls on ACTION_DOWN, and instead trigger them on ACTION_UP.

On pointing devices with source class SOURCE_CLASS_POINTER such as touchscreens, the pointer coordinates specify absolute positions such as a view's x and y coordinates. Each complete gesture is represented by a sequence of motion events with actions that describe pointer state transitions and movements. A gesture starts with an ACTION_DOWN motion event that provides the location of the first pointer touch. As each additional pointer action goes down or up, the framework will generate a motion event with ACTION_POINTER_DOWN or ACTION_POINTER_UP accordingly. Pointer movements are described by motion events with ACTION_MOVE motion event. A gesture will end either when the final pointer goes up as represented by the ACTION_UP motion event or when the gesture is cancelled with ACTION_CANCEL. For more information, reference the Android Developer Reference – MotionEvent.

Each key press on the Android platform is described by a sequence of key events. A key press starts with the ACTION_DOWN key event. If the key is held sufficiently long that it repeats, then the initial down is followed by additional ACTION_DOWN key events and a non-zero value for getRepeatCount(). The last key event is an ACTION_UP for the key up. If the key press is cancelled, the key up event will have the FLAG_CANCELED flag set. For more information, reference the Android Developer Reference - KeyEvent.

Android examples

//A touch event listener attached to an element to perform an action on ACTION_UP
@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
if(action == MotionEvent.ACTION_UP){
...
}

return false;
}                        
//A touch event listener attached to an element to perform an action on ACTION_DOWN
@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
if(action == MotionEvent.ACTION_DOWN){
...
}

return false;
}                        

HTML

If not defaulting to onClick or onKeyPress events, use onTouchEnd or onKeyDown event handlers to trigger actions, rather than onTouchStart and onKeyUp.

HTML example

<script type="text/javascript">
function startGesture(e) {
  // store touch start source
}
function endGesture(e) {
  // if touch end source is different from touch start source return, else perform action
}
</script>
...
<div onTouchStart="startGesture(this);" onTouchEnd="endGesture(this);"> Swipe area </div>                        
<script type="text/javascript">
function startGesture(e) {
  // perform action
}
</style>
...
<div onTouchStart="startGesture(this);"> Swipe area </div>                        

TESTING

Procedures
  1. Navigate the app using the touchscreen.
  2. Navigate to the on-screen objects, elements, or controls.
  3. Begin to activate an item (touch it without lifting your finger or stylus).
  4. Verify that the item does not immediately trigger an action/event.
  5. Finish activating the item (remove your finger or stylus from the screen).
  6. Verify that the item now triggers the action/event.
Results

The following checks are all true:

  • Objects, elements, or controls do not trigger actions/events at the start of activation (when touched);
  • Objects, elements, or controls trigger actions/events when the user finishes activation (touch is removed).