Using familiar patterns and UI to highlight the tappable nature of our components.
At a glance
In an effort to clean up and simplify the UI across the app, we’ve made a few changes with regards to displaying CTAs on cards. Now, the entire card is tappable, with a focus on displaying glanceable information.
Here is an overview of the tappable pattern and how we differentiate it from non tappable components, too.
Tappable components
Here is an overview of the key components within the system, noting if and what tappable variants exist alongside useful notes and rules.
Action List
Here is an overview of the key components within the system, noting if and what tappable variants exist alongside useful notes and rules.
Notes
Shadow to be applied to stack of list items, if more than one. If standalone, shadow is applied to single component.
Tappable variants
Navigation
Editable
Data
Toggle
Reward
Non-tappable variants
Navigation
Editable
Data
Toggle
Reward
Notes
All balance cards are tappable in their nature, with multiple tap areas designated within each card (see individual specifications for details).
Tappable variants
Direct Debit
On Demand
Pay G
Non-tappable variants
None available
Cards
Containers used to present content in a visually distinct and organised manner. They group related information into digestible chunks.
Notes
Cards on the home layer and layer 1s are mostly all tappable, taking users to onwards journeys. At layer 2 and below, non-tappable variants can be used to cap journeys but still present information that requires no further detail.
Tappable variants
Text
Data
Image
Offer
Disruptive
Non-tappable variants
Text
Data
Chips
A compact UI element that allows the user to either input or select a quick predefined value into the interface.
Notes
All chips are tappable and should never be used in a non-tappable instance. The colour of a chip changes to denote its tapped state, as chips do not launch onward journeys, affecting the page, data or component they are related to.
Tappable variants
Idle
Selected
Non-tappable variants
None available
Filters
A compact UI element that allows the user to either input or select a quick predefined value into the interface.
Notes
All filters are tappable and should never be used in a non-tappable instance. The colour of a filter changes to denote its tapped state, as filters do not launch onward journeys, affecting the page, data or component they are related to.
Tappable variants
Idle
Selected
Non-tappable variants
None available
Inputs
Inputs are user interface elements that allow users to input and edit text, numbers and information.
Notes
Drop shadow is applied to text area on idle, selected, filled, focus and error states. This information does not include radios and checkboxes, which are tappable by default (see Element).
Tappable variants
Currency
Date of birth
Date picker
Location
Password
Select
Text
Text area
Non-tappable variants
Large reference number
Tabs
Tabs organise content into sections, letting users switch between views without leaving the screen.
Notes
Drop shadows are not directly applied to the typography or iconography within tabs. However, where necessary, they should sit on a darker surface to aid differentiation and encourage tapping.
Tappable variants
Full width
Left aligned
Non-tappable variants
None available
Toggles
Native toggles (iOS and Android) are used throughout the app to allow users to change settings and update preferences.
Notes
Toggles should always sit with text to describe their use. Shadow is applied to the toggle to denote that it is tappable and can sit in page or within a list. In some circumstances, a shadow can be added to the list component (if the entire list item is tappable).
Tappable variants
In page (toggle only)
In list (entire item)
Non-tappable variants
In list (entire item)
Tooltip
Small pop ups that provide explanation about or highlight new UI elements or features. Tooltips do not block user interactions.
Notes
Tooltips as a component are not tappable – they do not take the user anywhere. The larger variants have a dismiss button, which is tappable and a tap off of a tooltip will also dismiss it.
Tappable variants
None available
Non-tappable variants
None available
Bottom action bar
A bottom action bar is anchored to the bottom of an app screen and provides quick access to up to 2 actions.
Notes
The CTAs within the bottom action bar are the tappable elements. Currently, no drop shadow is applied to these as they are global components.
Tappable variants
Solid
Outline
Non-tappable variants
None available
Text and links
Text and links can sit in-page (on surface colour) and within a card or list component.
Notes
By default, text is not a tappable element. Applying the “link” type style denotes that this part of the text is tappable, and will link the user to necessary terms, conditions or page.
When the “link” type style is applied, the typography colour should change to, ‘semantic surface link’ to aid comprehension.
Notes
Typically, the element, when included within the bottom sheet will pull through the tappable rules that it uses elsewhere – the drop shadow is applied to the individual element, where necessary.
Typographically, follow the rules above for links.
Anatomy
A breakdown of the key visual indicators which differentiate a tappable element from a non-tappable one. Individual component guardrails exist for the above elements, but this can be used as a quick guide.
Action list
- Include a drop shadow to denote a tappable element
- Apply to entire standalone element (including toggles)
- Apply to combined element rather than individual, if stacked
- 12px radius on component corners
- Ensure entire line is included as the tap area
- Use a drop shadow on a non tappable element
- Apply a drop shadow to individual line items, if stacked (apply to combined element)
- Change corner radius
- Use an ‘external’ list element as a tappable item
- Add CTA buttons within list items
Standalone
Tappable variant
- 12px corner radius
- Tap area covers entire component
- App card drop shadow applied to individual element
Non tappable variant
- 12px corner radius
- No drop shadow applied to element indicates tapping has no affect
- Sits on surface – no white fill
Combined
Tappable variant
- 12px corner radius
- App card drop shadow applied to entire element, not individual line items
- Tap area from edge to edge (width) and from divider to divider (height)
Non tappable variant
- 12px corner radius
- No drop shadow applied to element indicates tapping has no affect
Editable
- 12px corner radius
- App card drop shadow applied to entire element, not individual line items
- ‘Link’ typography style applied to the entry point. Surface/link colour applied
Cards
-
Include a drop shadow to denote
a tappable elemen
-Apply to entire standalone element (including toggles) - 12px radius on component corners
- Ensure entire card is included as the tap area
- Use a drop shadow on a non tappable element
- Add CTA buttons within a tappable card – the card itself acts as the CTA
- Add additional tappable elements within a tappable card (e.g. icons should not be tappable)
- Change corner radius
Tappable variant
- 12px corner radius
- App card drop shadow applied to individual element
- Card acts as the CTA – no CTA buttons should be placed on a tappable tile.
Non tappable variant
- 12px corner radius
- No drop shadow applied to element indicates tapping has no affect – no further data is available
Text and links
- Ensure tappable text uses the link style
- Ensure tappable text uses the link colour
- Ensure a min 48px height and width tap area is defined around link text
- Use link text within a sentence or on its own, on a tappable card. Display link on layer 2 page. Editable list items exist as a component, if required.
Tappable variant
Tap area is on linked text (min 48px height and width)
Non tappable variant
Bottom sheet
- Consider using an element with a border to denote a tappable item, to remain consistent with checkboxes and radio buttons and cards
- Only include one set of tappable items (link text can be included alongside)
- Use a drop shadow on elements within the bottom sheet – this is to ensure it remains simple and glanceable
- Include more than one set of tappable items within a bottom sheet – the purpose is to remain simple and glanceable
Text and action
Tappable primary and secondary CTAs within bottom action bar
Text link with correct typography and colour styles
Text and action Large reference number
Tappable area within bottom sheet with secondary reference information. Copy icon aids indication of tappability.
Radio card
Tappable card within bottom sheet within radio card. Radio and outline aids indication of selected state.
Radio button
Radio buttons use an outlined circle to denote their tappability, turning blue when selected.
Checkboxes
Checkboxes use an outlined box to denote their tappability, turning blue when selected.