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

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: