Mobile

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.

mobile-foundations-intro

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.

Mobile buttons

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.

Mobile spacing
mobile-foundations-spacing-do

DO: Use large components and ample spacing to create optimal touch targets.

mobile-foundations-spacing-don't

DON’T: Use small components or tight spacing that could lead to accidental tapping.

User feedback should be presented after an item is selected or pressed. Some examples include using the active button state to indicate a button is being pressed or to use an temporary toast alert message to confirm an action was completed.

Mobile user feedback

Any features that rely on hover to display important or critical information should be changed to be able to be tapped and accessed by a user on mobile touch devices. Sometimes an alternate container, such as a side panel, bottom sheet, or a modal could be used to display the information. 

Hover Alternatives

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.

Mobile keyboards

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.

mobile-foundations-font-sizes

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.

mobile-foundations-touch-map

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.

mobile-foundations-tap

Long press is an action gesture that can reveal additional modes and features and is often used to reveal bulk actions and selection.

mobile-foundations-long-press

Swipe allows users to move specific elements within a container horizontally, typically images or cards. Swipe can also be used to navigate between tabs.

mobile-foundations-swipe

Scroll allows users to slide containers horiztontally or vertically and move continuously through content.

mobile-foundations-scroll

Drag allows users to slide a component across the screen and typically brings items into and out of view.

mobile-foundations-drag

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.

mobile-foundations-long-press-and-drag

Steven Hoober, UX Matters, Design for Fingers, Touch, and People, Part 1 (2017)

Google Material Design, Gestures