Double tap to zoom

It works like this:

  1. Double tap works with content that can be zoomed in on, like a web page, image or map. The content is usually displayed full screen.

  2. A user can double tap a specific target on the screen to magnify that target.

  3. The level of magnification is fixed, and the screen content is adapted to the magnification. (e.g. text is wrapped to fit the screen width)

  4. If the user double taps again….

  5. … the content is scaled down to the original size

Use when

You can use double tap if your app displays content that can be zoomed into, like a web page, image or map. Double tap allows the user to magnify a specific target (e.g. a specific portion of text, or a street on a map) to enhance its visibility. The zoom level is fixed, and screen-content is adapted to the magnification level. If you want to allow stepless magnification, or if there's no specific target to magnify, consider using Pinch & Spread. Ideally, both methods of magnification are used, allowing the user to use the method of their choice.

The Good

  • Zoom in on a specific target - no panning necessary after magnification
  • Fixed magnification level allows for faster magnification (than pinch&spread)
  • Content of screen is adapted instantly - improves readability

The Bad

  • Does not allow stepless magnification - only one fixed level

    Examples

    Internet Browser

    1 In the browser, a web page is displayed full screen, scaled to the screen's width. When a specific item, in this case the article, is double tapped...

    2 ... the browser zooms in on the article, automatically wrapping the text so it fits the screen's width. When the user double taps again (anywhere on the screen)...

    3 ...the browser scales down the website to fit the screen.

    HTC Sense Gallery

    1 In the gallery, a user can tap an item in the grid view...

    2 ... to display it full screen. When the user double taps the image...

    3 ...the gallery zooms in on the image. When the image is double tapped again...

    4 ...the gallery zooms out again.

    Google maps

    1 In Google maps, a map and a location is displayed.

    2 By double tapping, the user can zoom in on a specific point on the map.

    3 Double tapping again zooms the maps in more. This in contrary to images and web pages, where the second double tap zooms back out.

    One Response to Double tap to zoom

    1. CJ says:

      So the double-tap-to-zoom gesture page is missing a small refinement that seems to be standard on both Ios and Android:

      If you have manually zoomed in on something, the first double-tap returns you to the ‘standard’ view, and the second one zooms in to the preset level (with the third going back to standard as usual).

      This makes some sense as instead of doing the initial double-tap zoom in, you have replaced it with a manual one, and still want to execute the binary zoom/non-zoom transition when you double tap, however you are starting from zoomed in position already rather than the non-zoomed one.

      Hope this makes sense, it seems fairly standard across the different apps / devices I have tried it on (although that is a far from exhaustive analysis…).

    Leave a comment