Swipe 2

Swipe Pattern

What Problem Does This Solve?

Interactively reveal content by peeling back a layer to see the content underneath it. This method provides a temporary view of the data without the specified layer.

When to Use This Pattern

You want to compare the content of two layers. Instead of making the top layer transparent – which distorts colors – or the need to turn layers on/off, you can redraw the area minus the area on top of it and move back and forth to see differences.

What’s the Solution?

When turned on, let the user select the layer to be displayed on top of the current map. Alternatively users could have the option to choose a second layer to compare the top layer against, maybe through options in a second dropdown list.

Why Use This Pattern?

It is often useful to see how certain layers overlay other layers for the purpose of comparison. This comparison is important to make decisions based on visual cues. Content-rich data like satellite imagery cannot be made transparent in a meaningful way and therefore can only be used as the base of any layer stack.

Special Considerations

The two layers must be clearly separated by a user interface element like a splitter, slider or any other element that visually indicates it can be dragged across the screen. This dragging element is used to peel the layer and by doing so revealing the content underneath.

When you position the mouse over the dragging element, the pointer will turn into an arrow that points in the direction that you can swipe the layer.

Related Patterns

  • Side-by-side
  • Lens

Examples

Please specify a Flickr ID for this gallery

Bolaxova step

2 thoughts on “Swipe

  1. Reply Shari Mar 14,2016 8:48 pm

    This excellent website really has all of the information and facts I wanted about this subject
    and didn’t know who to ask.

  2. Reply sri Sep 1,2016 10:06 am

    very well written article 🙂

Leave a Reply