Mobile design requires considerations for devices that are not only smaller than desktop devices, but are also used in many different ways in many different locations.
An optimal touch target size for selectable items on mobile is 48 pixels, with a minimum of 40 pixels. Within the design system our large or extra large sized components can be used. When needed, extra padding can help to create a larger touch target without enlarging the component itself.
Selectable items should be given ample spacing in addition to having a larger size for optimized touch targets to avoid user frustration from the accidental tapping of incorrect items. The amount of space needed will depend on the components being used. Spacing should use multiples of four and more spacing is needed when the component size is smaller.
DO: Use large components and ample spacing to create optimal touch targets.
DON’T: Use small components or tight spacing that could lead to accidental tapping.
Be sure to consider keyboard placement over the UI and the reduced space allowed for viewing when designing inputs such as forms and search. When appropriate, consider showing numerical keyboard for simpler typing in numeric only fields.
The optimal font size for body copy on mobile devices is 16 points or pixels, which is typography token body-01. This size should be used for paragraphs of text or anything that could be considered the body of the page or screen. Smaller font sizes can be used when needed for ancillary labels, but should ideally not be smaller than 11 pixels.
Research has shown that people tend to touch and view the center of a screen more accurately than the edges of the screen. With this in mind, aim to keep primary content should be in the center and secondary content towards the edges.
Additionally, there tends to be a higher level of accuracy when tapping at the center of the screen, so touch target safe areas there can be smaller — as small as 34 pixels, while corner touch target safe area should be about 64 pixels.
Gestures are movements a user performs on a touch device while interacting with a digital interface.
Tap is a gesture that allows users to navigate to other destinations or complete actions by touching components within the interface.
Long press is an action gesture that can reveal additional modes and features and is often used to reveal bulk actions and selection.
Swipe allows users to move specific elements within a container horizontally, typically images or cards. Swipe can also be used to navigate between tabs.
Scroll allows users to slide containers horiztontally or vertically and move continuously through content.
Drag allows users to slide a component across the screen and typically brings items into and out of view.
Long press and drag is a gesture that allows the user to select a specific element on screen and then move that element to another area on screen. It is typically used for reordering dashboards or lists.