The Apple’s App store Review guidelines, mostly emphasis on the design aesthetics as a top priority in order to publish your app in the market. By the end of this course, you will be able to identify the best approach to choose a button style based on the iOS design guidelines.

What we’ve learned so far

• Design knowledge is very crucial for an iOS developer as the Apple’s App Store approval process scrutinizes based on the design aesthetics. In order to avoid such a situation it is recommended to go through the guidelines. So far, we have learned the following:


• Learning iOS guidelines for the dimensions of different iPhone devices such Apple 5s, 6s, 6s plus, 7s and 7s Plus.


• Learning iOS guidelines for the Text styles (Typography).


• Identifying the relevant solutions for Navigation bar of Apple devices.

Objective

• Given definition of iOS design guidelines for buttons and 6 example app screens that explains the matching criteria, the student will be able to recall all the design guidelines for a button and identify if a button in an App screen meets the design guidelines.

Entering Skills

• Before going into this module, you should be able to define screen sizes of different iPhone devices, Typography rules and recall a suitable navigation bar following the rules mentioned in iOS guidelines for iPhone 7. If you are not sure of any of the above concepts or you haven’t completed these units, you should not continue.

Why not just create any button?

• Buttons play a major role in iOS App design. Every button has a particular purpose, and if your design does not reflect as per the iOS design guidelines, there are high chances that your app will get rejected at the App store. You will also get to identify if a button design meets the guidelines or not. This unit will let you think twice on the screens that you have designed are either good enough for submission to the app store or need to re-iterate.

Principle

• App development is a time taking process. Design and development are very crucial in this process. If the app is not well designed at the first place, the time spent on coding is all gone to waste as it's likely to get rejected by the app store. Thus, Apple has provided the interface guidelines for its developers to let developers understand the basic guidelines which could save ample time for themselves as well as the reviewers at Apple. For example, if the app does not use the system provided items like the button sizes and icons, it is more likely to get rejected.


• A good button should follow the iOS guidelines for button.

iOS guidelines for designing a button

• The buttons should be used for action items; thus, the title of the button should be a verb and short.


• Buttons can only have pointed or rounded corners.


• Height of the button is recommended to be either 44px, 66px or 88px.


• The text should be center aligned inside the button.


• The color of the title and the button should be contrasting.


• Every word in the title should be either camel case or upper case.


• Title should be kept as short as possible. It should not be overly crowded.


• If a button has both text and an Icon, then the title should start with the icon and should be center aligned to the button.


• Just Icons or text can also be used as buttons if necessary. The chosen icons should be a thin style icon without a stroke to it.

Let's practice identifying good buttons

Click on next button to start practice

Well done! You have seen different ways of representing a good button as well as identified the bad buttons based on the iOS guidelines. If you think you are familiar with the guidelines for button, please click “Next” to take a quick test. After the test, you will receive a score and based on it you can move forward with the course. If you think you are not ready for the test, then please click on “Start Over” to review the practise session again.

All the best!!!

Thank you for completing the test. Please review the score by clicking "Submit". If you got any of the questions wrong, please go through the module again. If you get all the answers right, you can proceed to the next module.