Touch Interface Design

Assessing the traffic data and your website analytics will likely show a significant portion of mobile web traffic, which to some, may be quite a surprise. Though it shouldn’t as mobile is one of the most popular devices to access the web. So the interface design of touchscreens on mobiles and tablets is important!

• Use natural interactions where possible.
• Size interactive elements adequately and allow finger tip precision on the input device (as opposed to mouse arrow precision).
• Keep wandering hands in mind by designing the UI (User Interface) so information does not get covered by hands, and avoid positioning labels underneath interacting elements by positioning labels above the interacting elements.
• Forget hovering and ToolTips as they’re absolutely useless in a touch screen environment. We design to make it clear what can be touched, dragged, pressed, etc., and what cannot be touched without relying on the mouse to roll over it.
• Optimize textual inputs so user interaction is primarily by means of graphical objects. Eliminating as much as possible the need to enter numbers and text.

Designing Visual Targets

The link text, icon, or other graphic element that affords an interaction is a visual target. Visual targets need to be big and clear enough so it attracts the user’s eye in navigation and that they understand that they ‘re actionable elements. The user needs to be confident what action it will perform when touched and that they can easily tap the target.

Designing Touch Targets

An area on screen that a user can touch to perform an action – this is a touch target. Touching a device’s screen outside a touch target should not activate the target.

Preventing Interference Errors

Ideally we make sure a touch target is the right size to ensure a user can tap it, and when a user fails to touch a target accurately it results in a miss and the target doesn’t activate. The result of a failed miss touch target is a key factor to consider and planning for error is crucial.