UX Design Guidelines for IAP
This page recommends elements of UX design to incorporate into your app to maintain a consistent look-and-feel with the Amazon Appstore.
User Interface (UI) Design Guidelines
To maintain a cohesive look with Amazon, the parts of your app's UI that deal with IAP should use the same color palette and styles as the Amazon Appstore. This section provides those values as a reference.
General Color Palette
The following table lists the colors and their hex values used by the Amazon Appstore client UI elements:
| Color name | Hex Value | Example |
|---|---|---|
| Black | #000000 | |
| Background Grey | #333333 | |
| Secondary Background Grey | #4d4d4d | |
| Light Grey | #999997 | |
| Very Light Grey | #bcbcbc | |
| White | #ffffff | |
| Error Text Orange | #ff9900 | |
| Hyperlink Text | #448ccb |
Recommended Font Styles
Fonts are standard Android fonts, e.g. Droid Sans, Droid Serif, and Droid Sans Mono
| Name | Size | Weight | Color Name | Color Hex Value | Color Example |
|---|---|---|---|---|---|
| Body block header | 24sp | Regular | White | #ffffff | |
| Body copy | 16sp | Regular | Light Grey | #999997 | |
| Sub-heading | 15sp | Regular | Light Grey | #999997 | |
| Text input | 21sp | Regular | Black | #000000 | |
| Text input hint | 21sp | Regular | Very Light Grey | #bcbcbc | |
| Button label | 18sp | Regular | White | #ffffff | |
| Error Text | 18sp | Regular | Error Text Orange | #ff9900 | |
| Hyperlink | 16sp | Regular | Hyperlink Text | #448ccb |
User Experience (UX) Design Guidelines
The following lists give Do's and Do Not's for designing a user experience (UX) for your app that is cohesive with the Amazon Appstore:
DO's:
- Always provide an obvious visual indication that a purchased item is available and, if needed, how to access the item within the app.
- If your app requires that a user have an account to complete a purchase, have the user create the account before he or she can initiate a purchase.
- Use the IAP API to retrieve and display price and product information.
- Read the IAP documentation to determine how to handle all purchase responses.
DO NOT's:
-
Send information about a transaction state or status messages to your app's users. (The IAP API handles confirmations and messaging to end users, including transaction success and failure messages.)
Note: An exception to this guideline is that you may display status messages when a user cancels out of an IAP transaction. These messages do not interrupt the flow and can be helpful to users. - Prevent a customer from accessing content that they have previously purchased or have a current subscription for.
- Include extraneous steps or confirmations, such as extra dialog boxes, before the purchase experience.
Example
The following UI mockup example shows the incorrect and correct way for your app to interact with a user who is making an in-app purchase:
