0

Background info

  • There is a discussion in our design team about 'inset' vs 'full width'. But we all wants to respect the safe area of 16px left and right on a mobile device.
  • Some people believe in 'inset' elements: 16px safe area is already needed from the edge of the screen to the container/card. As a result content is on 32px from the edge of the screen.
  • Others believe in 'full width' elements: only 16px safe area is needed from the edge to the screen to the content in the container/card. As a result the elements themselves can be full width.
  • Research shows that Apple uses a lot of inset list-items and elements in for example the setting page (gray background). Also a lot of 'new' apps are using cards and other inset elements. Material is also using full-width.
  • We have to deal with design system elements on both gray and white backgrounds. Read only text, list-items, radio and checkboxes all have a white background.
  • We have a mobile app and webapp.
  • Ideally there are no complex rules to remember what to do in which situation.

Examples

  • I added some examples below. In case of using 'inset' the gray page looks very nice to me, however the white version is using a lot of space left and right (32px on both sides).
  • In case of using 'full width' you can less clearly see the sections, because you have to rely on horizontal dividers only. Also we experience some problems with radiobuttons, because we highlight the full row. However, there is no space issue. You can solve the radiobutton problem by not changing the background and border, but that solution is less clear to me.

Question:

  • How to best respect the safe area of 16px left/right in our situation. What are the reasons to choose for inset vs full width design? Are there any usability problems with one or another?

Respecting the safe area of 16px left and right

Examples of the result on both gray and white backgrounds

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.