Swim Lane
The Swim Lane pattern is a method for browsing related content presented in different lanes on a page. The user can scroll each swim lane by swipe or drag gesture. To select an item, the user must tap it. The swim lane pattern consists of the following elements:
- Lane Headers: Identify the content or type of information displayed in each lane.
- Lanes: Contain lane items.
- Lane Items: Containers that display information about an object or display different components inside them. Displayed in lanes. Separated from each other by a negative space.
Appearance
Appearance characteristics for this pattern.
- Orientation: Lanes are in horizontal or vertical orientation. Horizontal orientation is most common.
- Lane Headers: Placed above each lane; usually left-aligned at the start of each lane.
- Lane Items: Usually rectangular or square and separated from each other by a negative space. Lane items display information about an object and can contain different components.
- Components: A variety of components can be used to build a swim lane, including a Carousel, Conveyor, Filmstrip or Table.
- Lane Number: Either single lane or multiple lanes can be implemented on a page. Avoid to many lanes.
- Pagination Dots: Are not usually displayed when there are multiple lanes.
- Overflow: Partially visible lane items, which are displayed on the edge of the lane, indicate that more lane items are available.
- Selection: The selected lane item is usually highlighted or differentiated from other lane items. In smaller lanes, sometimes the selected lane items grows to span most of the lane.
Behavior
Common behaviors for this pattern.
- Scrolling: Drag or Swipe to scroll through content in a lane.
- Pagination Dots: Tap a dot to bring the items represented by the selected dot into view.
- Selection: Tap a lane item to select it. This may open a new page or it may support the selection of items in other lanes.
- In-Lane Selection: Item selection is mutually exclusive, so only one lane item may be selected at one time.
- Across-Lane Selection: Allows the selection of one lane item per lane; the information may then be submitted by using a button.
- Hierarchical Selection: Tap an item in the first lane to change what is shown in the second lane and so forth. For example the first swim lane may show actors. Tapping an actor will display movie categories in the second swim lane. Tapping a category in the second swim lane will display movies in the third swim lane.
Usage
Usage guidelines for this pattern.
- Pagination dots can help navigate to different sections of the lane fairly quickly, but can clutter on multiple lanes.
- Do not use scroll bars to navigate lanes.
- Circular lanes are not recommended. Allowing lanes to scroll past the start or end can confuse users where items begin and end.
- On tablets, limit the number of visible horizontal lanes to four in landscape orientation and five in portrait orientation. On phones, limit the number of visible horizontal lanes to three in landscape orientation and four in portrait orientation.
Related
Fig 1. Swimlane - Tablet (click to enlarge)