Cells allow us to keep simplicity within our designs. We’re giving users the bigger picture without giving them the finer details until they need it.
# Description
Interactive cells: Clicking or tapping on an interactive cell will reveal more content usually held within a sheet.
- Cells navigating to sheets also allows users to stay in context.
- We also use them for size and colour selectors within sheets, it isn’t necessary to use chevrons in these events.
Non-interactive cells: When we design non-interactive cells we won't use chevrons or indicate in any way that the cell is interactive, the purpose of this cell is to house useful content.
Cells are composed of items containing primary and supplemental actions, which are represented by icons and text. There are various cell types available in NBUX, cells can contain the following:
- Labels
- Text
- Icons
- Chevrons
The cell content should be easy enough for users to scan. The content has been positioned specifically to create a hierarchy of importance.
There are 3 height variants for cells 56px, 72px and 88px. It is at the designers discretion which formatting they use within the design.
# Must include
- Title (left and/or right aligned)
# Optional
- Label - (left and/or right aligned)
- Icon - to help users who are scanning pages
- Chevron - to convey something will happen once pressed
- Divider - except for the last cell in the list
# Rules
Use dividers between rows, this will help to separate the content.
The last cell in the group does not need a divider.
If a cell is to be used for navigation, you must use a chevron to demonstrate this.
A Chevron is used amongst other designs to convey navigation (mostly within our apps). By using the chevron we are informing our user they are going to move forward a step.
- We use the chevron to inform users by tapping or clicking they will reveal more content.
Chevrons must always be used on the right; the user needs to see the labelling first to help decide on whether or not they want to move on in their journey.
- According to NNg, Icons make good touch targets. Right alignment is also easier to touch on mobile devices.
# Accessibility
- The cell header should be concise but descriptive of the information the cell will be navigating the user to. This will also be useful to those users using assistive technology.
- Cells should have a touch target area of 56px
- Cells should use the
aria-role='button' - The full cell button must be selectable to help users who might have dexterity conditions or those with visual impairments
- Icons do not need alt text as they are used for decorative purposes.