Layout

People generally want the ability to use their favorite apps on all of their devices and in any orientation. In iOS, interface elements and layouts can be configured to automatically change shape and size on different devices, during multitasking on iPad, in split view, and when the screen is rotated. It’s essential that you plan ahead and design an app that provides a great experience in any context.

Maintain focus on the current content during context changes. Content is your highest priority. Changing focus when the environment changes can be disorienting, frustrating, and make people feel like they’ve lost control of the app.

Ensure primary content is clear at its default size. People shouldn’t have to scroll horizontally to read important text, or zoom to see primary images, unless they choose to change the size.

Maintain an overall consistent appearance throughout your app. In general, elements with similar functions should look similar.

Use visual weight and balance to denote importance. Large items catch the eye and appear more important than smaller ones. Larger items are also easier to tap, which is especially important when an app is used in distracting surroundings, such as in the kitchen or a gym. In general, place principal items in the upper half of the screen and—in a left-to-right reading context—near the left side of the screen.

Use alignment to ease scanning and to communicate organization and hierarchy. Alignment makes an app look neat and organized, helps people focus while scrolling, and makes it easier to find information. Indentation and alignment can also indicate how groups of content are related.

Avoid gratuitous layout changes. Just because someone rotates a device doesn’t mean the entire layout needs to change. For example, if your app shows a grid of images in portrait mode, it doesn’t have to present the same images as a list in landscape mode. Instead, it might simply adjust the dimensions of the grid. Try to maintain a comparable experience in all contexts.

If possible, support both portrait and landscape orientations. People prefer to use apps in different orientations, so it’s best when you can fulfill that expectation.

If your app supports only one orientation, support both variants. If it’s essential that your app run in a single orientation, make sure it supports both orientation variants. For example, if your app only runs in landscape mode, it should be usable regardless of whether the Home button is on the left or the right. If the device is rotated 180 degrees while using your app, your app should respond by rotating its content 180 degrees. If your app doesn't rotate automatically when someone holds the device wrong, they'll know instinctively to rotate it. You don't need to tell them.

Customize your app’s response to rotation according to context. A game that lets people move a character by rotating the device, for example, probably shouldn’t switch orientations during gameplay. It could, however, display menus and intro sequences based on the current orientation.

Provide ample spacing for interactive elements. Try to maintain a minimum tappable area of 44pt x 44pt for all controls.

Be prepared for text size changes. People expect most apps to respond appropriately when they choose a different text size in Settings. To accommodate some text-size changes, you might need to adjust the layout. For more information about text usage in your app, see Typography.

For implementation details on adaptivity, see Auto Layout Guide.