Related items should be grouped relatively close to each other to help improve readability. In the following examples you can see the difference in grouping the sliders with their associated values together and separately.

University of Illinois at Urbana-Champaign

It's important to consider how your app scales content and responds to various devices and user inputs. These greatly influence the ability for your user to interpret and interact with your design.

Accessible Layout

Material Design Documentation

Touch and pointer targets help account for inaccuracies when users are tapping elements on an app. This is extremely beneficial for users who aren't able to see the screen or have difficulties with small touch targets.

Touch and Pointer Targets

Having a responsive and flexible layout means that your content is scaled in relation to your user's screen size. This helps prevent your content getting truncated or displayed improperly across different device types. Keeping this in mind allows you to design inclusively for a larger range of users and their respective devices.

Responsive layouts

Grouping Items

For those with vision impairments, users might increase font sizes to help improve readability. Mobile devices and browsers should include features that allow them to adjust their font size system-wide. With that in mind, be sure there is sufficient space in your design to support large and foreign language fonts.

Learn Before

Related