Designing for CarPlay

Audio Apps

You can listen to an audiobook, answer your calls, listen to your messages, listen to podcasts, interact with maps and more. Audio Apps are a big part of the CarPlay experience, and it is the most common interface for the driver with the car.

Automaker Apps

There may be some unique apps that will come pre-installed with the car. These are unique for each brand or model. You have a big advantage if you are designing an App for a specific car, because you can have more control between hardware and software.

Voice Interaction

Voice interaction with Siri helps the drivers to control their apps without being distracted or take their hands off the steering wheel. That's why voice interaction is one of the key features in CarPlay. To activate Siri, you may need to press the voice control button present in many car models that, in general, is placed on the steering wheel.

Touch Interaction

You can also interact with CarPlay from the touchscreen. The interaction is similar to the iPad since it looks like a big tablet with big icons. In general, many of the apps for CarPlay have simple UIs, and this is due to the fact that the driver has to identify the interface they are watching in just one glance.

Knobs and Controls

Many car-manufactures made knobs, dials, and buttons available for the driver to interact and control CarPlay. This interaction type is more reassuring from the driver's perspective because they are more confident in interacting with analog controllers.

Layout

There are different display resolutions for CarPlay that you have to take into account. The system will automatically scale app icons and the interfaces. Make sure to test your app in the following screen sizes.

Color

Apple recommends to use a limited set of colors form your color palette and to find subtle ways to position your brand. Apple also recommends avoiding using similar colors for interactive and noninteractive elements since this can be confusing for the driver, and the user may find it difficult to know where to tap. You can learn more about the use of colors in CarPlay in Apple's Human Interface Guidelines.

Typography

You can use SF Pro when it comes to designing for CarPlay. In the same way as iOS, use SF Pro Text if you are planning to use text 19 points or smaller and SF Pro Display for text 20 points or larger. To learn more about Typography for CarPlay, you can go to Apple's HIG.

Images

CarPlay images are based on measurements in points, which maps to pixels in the display. The display's standard resolution will be 1:1 pixel, which means one pixel is equal to one point. But depending on the screen's resolution, CarPlay can also display a scale factor of 2.0 or 3.0. You can learn more about resolution and resize from Apple's HIG.

Branding

Besides the logo you can use color, font, imagery and the UX to stress the branding of your App. These are some of the characteristics that enhance the driver's experience. To learn more, you can read the Apple's HIG.

Animation

Like in any interface, make sure that your animation is consistent since the users are accustomed to specific patterns. Also, try to make animations optional because the driver needs to focus on the road more than contemplating the screen's animation. Good apps have subtle interactions and don't distract the driver’s attention. There are more tips and tricks in Apple's HIG and there is an interesting post by Lifewire where you can learn more about some good apps and their interactions in CarPlay.

List animation in Principle

In this section, we will create a scroll animation for the CarPlay UI using Principle. Let's open our Figma file. Here, you will notice two assets, a container and a list.

Let's put the list inside the container's frame; you will notice that part of the list will be hidden inside the frame.

Now, we are ready to import the assets from Figma to Principle. To do so, let's go to Principle, and click on import in the tab bar. Then, select the Figma tab and click on Import Page.

Let's select the list and activate the vertical scroll option.

One small detail, make sure to check the clip sublayers checkbox. You will find it underneath the vertical scroll dropdown. We use Clip Sublayers to mask the list.

Now, let's squeeze the bottom margin of the list layer to the edge of the mainframe. Like that, we can set the action zone.

Conclusion

CarPlay is an excellent addition to Apple's ecosystem and it brings many features from its other platforms to the Car. CarPlay enhances the user experience of the driver in different ways. There is a small number of Apps for CarPlay, compared with Apple's other platforms; these apps are significant for the user. For those reasons, you need to adjust your app for the Car and see how you can enhance the users' driving experience. Make sure that the information of your app is relevant, minimal, and that it takes little decision making.