iOS Developer Library


iOS Human Interface Guidelines



Wallet helps people view and manage passes, which are digital representations of physical items such as boarding passes, coupons, membership and rewards cards, and tickets. Wallet also lets people add their credit, debit, and store cards to use with Apple Pay. In your app, you can create a pass, distribute it to users, and update it when things change.

image: ../Art/pass_example_2x.png

The PassKit framework makes it easy to use custom content to assemble a pass and to access a pass when it’s in the user’s pass library. (To learn about the key concepts of Wallet technology and how to use the PassKit APIs in your app, see Wallet Developer Guide.) The following guidelines can help you create a pass that people appreciate having in Wallet and enjoy using.

Design a pass that looks good on all devices. When you choose a pass style—such as boarding pass, coupon, ticket, rewards card, or generic pass—you get a particular layout and set of fields to work with (for details about different pass styles, see Pass Style Sets the Overall Visual Appearance). The system displays your pass appropriately on each device, so it’s important to use the pass fields correctly. On Apple Watch, for example, the strip and thumbnail images are not displayed, so you don’t want to put essential information in these elements. To learn more about the layout of passes on Apple Watch, see Designing Passes for Apple Watch.

Use appropriate pass fields to display text. Using the fields allows VoiceOver users to get all the information in your pass and gives your pass a consistent appearance. It’s also a good idea to avoid embedding text in images and using custom fonts because not all images are displayed on all devices and it can be hard for users to read such text.

Avoid using language that identifies a device. You can’t predict the device on which users will view your pass, so you don’t want to include language that might not make sense on a particular device. For example, text that tells users to “slide to view” content doesn’t make sense when it appears on Apple Watch.

As much as possible, avoid simply reproducing an existing physical pass. Wallet has an established design aesthetic and passes that coordinate with this aesthetic tend to look best. Instead of replicating the appearance of a physical item, take this opportunity to design a clean, simple pass that follows the form and function of Wallet.

Be selective about the information you put on the front of a pass. People expect to be able to glance at a pass and quickly get the information they need, so the front of a pass should be uncluttered and easy to read. If there’s additional information that you think people might need, it’s better to put it on the back of the pass than to squeeze it onto the front. Note that passes on Apple Watch do not include a back view.

Avoid using a plain white background. A pass looks best when its background is a vivid, solid color or displays an image that uses strong, vibrant colors. As you design the background, always make sure that it doesn’t interfere with the readability of the content.

Use the logo text field for your company name. Text in the logo text field is rendered in a consistent font on all passes. To avoid clashing with other passes in Wallet, it’s recommended that you enter text into the logo text field instead of using a custom font.

Use a white company logo. The logo image is placed in the upper-left corner of the pass, next to your company name. For best results, supply a white, monochrome version of your logo that doesn’t include text. If you want to engrave the logo so that it matches the rendered logo text, add a black drop shadow with a 1 pixel y offset, a 1 pixel blur, and 35% opacity.

Use a rectangular barcode when possible. Because of the layout of a pass, a rectangular barcode—such as PDF417—can look better than a square barcode. As shown below on the right, a square barcode creates empty gutters on both sides and can vertically crowd the fields above and below it.

A rectangular barcode fits well in the layout

image: ../Art/rect_barcode_2x.png

A square barcode can crowd other fields

image: ../Art/square_barcode_2x.png

Optimize images for performance. Because users often receive passes via email or Safari, it’s important to make downloads as fast as possible. To improve the user experience, use the smallest image files that achieve the desired visual appearance.

Enhance the utility of a pass by updating it when appropriate. Even though a pass represents a physical item that doesn’t typically change, your digital pass can provide a better experience by reflecting real-world events. For example, you can update an airline boarding pass when a flight is delayed so that people always get current information when they check the pass.