Grid View
The Grid View allows objects to be laid out on the tablet or phone screen in a grid that may be scrolled vertically (up/down) or horizontally (left/right). The Flick, Swipe, or Drag gesture is used to scroll the grid view. Grid Views are both a layout manager and method of navigation. Tapping on a grid view item allows the user to drill-into that object or open up the object using Popup. Once the user has drilled into an object, a method should exist to return to the Grid View. There are few common grid layouts:
- Home Screen: This grid has an icon with a label below it, similar to device home screen.
- Gallery: This is a uniform grid where the edges of the items usually touch, similar to a photo gallery.
- Dashboard: This is more of masonry layout, with a mix of card/ tile dimensions.
Appearance
Appearance characteristics for this pattern.
- Columns/Rows: Consists of a number of columns and rows. The number of columns and rows may change based on orientation of the device (portrait vs landscape mode). Spanning multiple cells and/or rows is also possible.
- Negative Space: This is the space that surrounds objects within the grid and helps improve readability of the screen. Note that the negative space should not be too small or big. Small negative space causes the screen to look too crowded and big negative space causes the objects to be too apart and disconnected. On a gallery there maybe no negative space.
- Item Size: Items within the grid should be the same size in most grids, expect maybe the Dashboard layout.
- Content: Each item may contain any type of content (e.g. label, graphic, chart, form, table, text, etc...), but information displayed in an object should be limited, so that the object does not appear cluttered.
- Orientation: When orientation of the device changes, layout of the grid may need to change.
Behavior
Common behaviors for this pattern.
- Scrolling: Swipe, flick, or drag to scroll the grid view vertically (up/down) or horizontally (left/right).
- Interaction: Tap a grid view item to drill into that object or open up the object using popup.
- Animation: The grid view item may zoom, shake, fade, etc....
Usage
Usage guidelines for this pattern.
- Use the grid view if you need to lay out objects in an orderly way.
- Allow users to scroll the grid either vertically or horizontally.
- Note that horizontal scrolling is not so common, but some applications use it.
- For a dashboard style navigation, which requires horizontal scrolling and uses pagination dots instead of a scroll bar, see Drawer pattern.
- Provide users with a method to return to the grid view once they drill into an object.
- Limit the amount of information displayed in an object, so that the object does not appear cluttered. Make use of negative space.
- Limit the number of objects that appear within the grid to hundreds, not thousands.
Related
Fig 1. Home Screen
Fig 2. Gallery
Fig 3. Dashboard