How to optimize your app’s layout on iOS 7
Whilst there is not necessarily a right way and a wrong way to design your app’s layout, there are some tricks you can use to make sure that the user experience is as optimal as possible.
Ample Space for Controls
We all know that smartphone screens are small, and iPhones are consistently on the lower end of the screen-size spectrum.
To optimize your app’s layout for iOS 7, try to make sure that your main, controllable elements are at least 44×44 points. This way, users will have no trouble performing basic tasks with one finger or one hand while they are on the go.
Draw User Focus to Main Elements
There are two simple ways to draw the user’s attention to the main elements of your app.
1) Place important items in the upper-left of the screen (i.e. the menu) , with less important items going in the bottom-right (i.e. terms & conditions, privacy policies)
2) Make important items larger than less-important items, since larger items tend to draw the eye more easily. Larger items are also easier to access on a touchscreen, so users can perform the most essential tasks quickly and easily
Effectively communicating which elements of your app go together can a make-or-break factor of your app’s layout. This can also be done in two ways:
1) Use alignment and indentation to organize your content and make it easier for users to discern which groups of content are related. For example, align any images or graphics with the text that they compliment. This is a cue to the reader that the picture is meant to associated with that text.
2) Consistent UI elements will also help users understand which elements belong together. A general rule of thumb is that elements that perform similar functions should also look similar. Any design inconsistencies could confuse the user and make them waste unnecessary time trying to figure things out.
On the iPhone, users have the option of changing their default text-size setting across their device. While this is sometimes done for aesthetic reasons, many users actually use this feature due to visual impairments that make small text hard to read. If a user changes their default settings, they will expect your app to adhere to those settings as well.
For iOS 7, developers should consider adopting Dynamic Type, which will automatically adjust line spacing, line height, delineate between text types (heading, body, footer, etc…), and resize any text-size changes requested by the user.
Developers should also consider using a single font type throughout their app. This way, it will be easier for you to ensure that the font will render correctly at all different text sizes.
You should also consider making your app responsive to changes in text-size. For example, if you have a two-column, text-based app, you can make your layout shift to one column for any text-size larger than the default 17 points.
For more iOS 7 layout tips, visit Apple’s Developer Library!
Do you have any additional iOS 7 layout tips? Let us know in the comments.