Effective User-Friendly Touch-First Web Design

  1. Simplify
  2. Remember that touch controls are about direct manipulation
  3. Make sure your touch targets are BIG
  4. Do not rely on Hovering
  5. Give feedback and guidance where possible

 

Simplify

  • Strip out excess design elements and distracting content.
  • Make content the primary focus.
  • Make the calls to action distinctive and touch-able.

 

Remember that touch controls are about direct manipulation

  • Don’t rely on indirect controls, such as zoom sliders or scrolling buttons.
  • Make gestures work where it seems natural.
  • Indirect controls as a secondary option is okay

 

Make sure your touch targets are BIG

  • Fingers are not as precise as a mouse pointer: Don’t punish big fingers or poor accuracy.
  • Leave enough space between targets so users are less likely to tap the wrong one by mistake.
  • Hyperlinks should be distinct and touchable. If they are crowded too closely together it may be too easy to tap the wrong one by mistake.

For more details, check out Microsoft’s great research, implemented in its Windows Phone and Windows 8 designs.

 

Do not rely on hovering

  • There is no universal equivalent to a “mouse-over” in the world of touch devices.
  • Don’t rely on tooltips for critical information.  These are no longer discoverable on a touch device.
  • Don’t expose actions – such as edit/delete, etc. – on hover for the same reason.
  • Don’t rely on hover to change the appearance of an object or to reveal important information.
  • Don’t create any menus or drop-downs on hover

Instead:

  • Show menus when clicking or tapping a control
  • Make menus visually distinct as touchable controls
  • Make menus distinct visually as a menu or dropdown control compared to the other controls on the screen

Hover was once a convenient method of exposing extra actions or information; without hover, users need to tap or click to drill down. Re-evaluate the priority of the possible actions users can take and information they will see. Expose them as part of the main user interface if they are important or used often, rather than burying them behind an extra tap.

 

Give feedback and guidance where possible

For example, in a touch interface, users don’t know a target is active unless they tap it. If possible, give an indication – a change in appearance or an animation – that the action was successfully initiated before leaving the page. This way, if the page is unresponsive, the user knows that it is an issue with the page, not because they missed the touch target.

How would you design differently for a touch interface?