When we talk of apps for cars, we need to distinguish two different kinds of software.
- Applications on your mobile phone mostly helping you to get information about the situation on the road or about your car and manage some of its aspects. In most cases, it requires you to install the phone on your car's dashboard or send the information onto the car's display.
These are apps like car scanners, navigation solutions, driving expense calculators, and apps helping you to buy or rent a car and find a place to park, so there's nothing to talk about in terms of the design approach.
- Applications built into your car. They might have all the same kinds of purposes, but developing them implies you not only need to deliver a graphical user interface used when the car is idle and on the go (requiring driver’s constant attention), but also adopt it to an available physical medium.
But is building them indeed so different and what does it require? Keep on reading this post delivered by EGO, one of the top design and prototyping companies in the region according to Clutch.
What is Automotive UI and How Is It Different From Mobile UIs?
At first, automotive user interfaces were primarily mechanical and aimed to inform the user about their car's speed, rev counter, gas level, etc. Then, it became clear people also want to be entertained during driving. That started with adding radio and media players to the cars.
Combining these two functions, 50 years later we got advanced infotainment systems in our vehicles expected to provide information AND entertain at the same time. Currently, the infotainment systems get replaced with functionality mirroring the possibilities of your smartphone.
But then, 80 years of progress have also led to a variety of possible interfaces: GUIs, speech recognition modules, gesture-based and touch-based systems. In addition, the functionality has become much more complex: mechanical parts like mirrors get replaced with electronics to expand their advantages and provide unseen driving support (up to auto-piloting). Electronics, in turn, imply having software that should be updatable. Testing such interfaces becomes a huge part of the process.
Making user interfaces for mobile, web, and desktop applications has become extremely sophisticated: as an Android and iOS development agency, we make extensive research to find out users' needs, make numerous iterations and collect feedback to achieve an adequate performance of the product and its design. With automotive UIs, it gets even more complicated since here we also have users' safety at stake.
As the end argument, you don’t just buy apps for your car for $4.99. The automotive software is part of the car that might affect your desire to buy it. Hence, its poor usability can lead to losses of millions of dollars.
And unlike with mobile app development, there are yet no industry-forming players like Apple and Android who push and dictated UX standards to car interfaces. The market is scattered, almost every company has its own product development departments and unique approaches to making automotive interfaces.
Are There Any Basic Design Principles and Best Practices For Automotive UIs?
Still, there are numerous researches, case studies, and our own expertise that reveals basic design principles for automobiles.
For instance, The US National Highway Traffic Safety Administration has guidelines saying the driver should complete tasks in 12 seconds. Distractions from the road should be no longer than 1,5 sec. That helps a lot when designing interfaces.
When working on our automotive products and preparing this blog post, we also relied on the articles printed in 2017’s book “Automotive User Interfaces” by Gerrit Meixner and Christian Muller – if you want to learn the subject in detail, we from EGO, a custom app development company, recommend reading it.
Back to best practices. We’ll drop here general UX and UI practices that help increase readability, usability, and safety. Here are the automotive industry-related common practices:
- Use short texts for messages meant to be read while driving.
- Used dark UIs for most cases to reduce glares and distraction and achieve high contrast, but navigation maps should be offered in light colors to make them as readable as possible.
- Select readable fonts with the size that allows the user to read them from the driver's seat.
- Three main features that should be easily accessible on touch interfaces are managing media, navigation, and doing calls. For them, you'll prefer to use icons than text labels. Other features usually appear to be secondary.
- Avoid complex gestures like multi-touch interactions, touch-and-hold, and multiple tapping. Though interfaces go graphical nowadays, physical buttons always perform better.
- Voice interfaces are not preferred since there are too many cases when drivers prefer to be quiet.
More practices are dictated by Google and Apple, but they are quite different. Let’s take a closer look at them.
Where Do Google and Apple Stand In Terms of Automotive UIs?
Earlier we mentioned that there are no industry-accepted design standards. Still, Google and Apple put a lot of effort to address this issue. Some of them are quite similar and are included in the list above. Now let's take a deeper look at the differences between their approaches.
As of 2021, Google has Design for Driving Foundations that they follow when making their Android Auto and Android Automotive OS. If you're hearing about them for the first time, the difference is that Android Auto is the technology helping you to use your phone via the car display, while Android Automotive is Android functionality already built into your car, so it doesn't require your phone to function.
Here are the design practices that are standing out among others:
- If you intend your app to dub information in audio format, provide top priority to the messages critical to driving; other sources (like music) should be automatically lowered at this moment.
- Avoid animations, video, and auto-scrolling content, especially if it is not related to driving. It distracts drivers and drivers cannot control its pace.
- Consider adjusting the interface color scheme to the time of the day (in most cases it is enough to have positive and negative content polarity).
- Touch elements should have an appropriate size.
If you're considering doing an app for Android Auto and AAOS, notice that in the case of AAOS you need to adjust your product's interface to car-maker visual style and recommendations, not Google's. If the third-party visual style is inconsistent, that might be tricky. As app creators for hire, we once had such a case, and we needed to find the perfect balance between usability and visual consistency.
Apple offers CarPlay, a technology helping to utilize iOS functionality on the screen of your car. Simply speaking, it's the competitor of Android Auto that lets you interact with your iPhone apps via the car's touch screen while you're driving.
Since Apple has its own distinctive visual style and does not plan to let car-makers develop alternative iOS-compatible interfaces, the company's recommendations are mostly about following their specific human interface guidelines. For instance, Apple suggests that the interface shouldn't interrupt users' controls due to connection problems, which is quite obvious. However, here are a few things that you might want to think through:
In case the iPhone is locked or in the trunk, the app and the CarPlay should still function and be accessible.
- If you want to take advantage of Siri, help it learn specific terms that can be used when interacting with your service or product.
- Any animation – if you can't avoid it – should be first of all optional, and also consistent and realistic.
- Consider making your app compatible with colorblind people.
In general, if you're making an iOS app to use in the car, Apple will tell you how to design its every single element, from alerts and buttons to tables and texts.
And although Apple doesn’t have a dedicated Android Automotive-like OS for carmakers, it plans to start manufacturing its own cars in 2024, which most probably will possess an alternated version of iOS/iPadOS.
What About Other Market Players?
Now let's take a closer look at what car manufacturers offer to the drivers. As a mobile/web design company in addition to development, we’ll focus mostly on graphical user interfaces. They are gaining market share and gradually replacing mechanical buttons and toggles. We’re not going to cover gesture-based and voice interfaces here — currently there seems to be a consensus they are not going to become the primary methods of interacting with the car in the nearest future (there are too many user cases when those might not be preferable).
Following the above-mentioned best practices, building an automotive UI for a specific display doesn’t pose a challenge.
The problem is that the primary goal of the car makers is to make their cars visually appealing and comfortable for a driver. Because of that, they experiment with displays. And they experiment a lot.
Of course, it would be great if all cars went the Tesla way.
In their latest Model S and X cars, they put a 17" console harnessing 10.28 teraflops of processing power. We assume building an app for this device will be no different from building a tablet app.
Other automakers are already offering pretty much the same approach, though usually, it's a bit more... unconventional. Take Audi for example.
Having three screens brings additional difficulty in finding the best user experience. Apart from that, you need to tap the UI element to highlight it, and then press it with a little bit more force to enable it. This helps avoid false operation but by the cost of longer distractions from the road, so you’ll want your users to make as few taps as possible.
And here is BMW's i-Next concept car with an extra-wide screen showing an unusual approach to the graphical framing and separation of different widgets (on the right).
And then, what if the actual interaction-enabled screen is not on the dashboard?
Because Byton's M-byte offers just that – a tablet-like display to interact with the huge dashboard screen inserted right into the steering wheel. And there's one more between the driver and the co-driver, and two more for back passengers.
With those huge screens, it becomes super-easy to get distracted from the road, so Byton also added the eye-tracking camera to the dashboard that shuts off the screen if you're looking at it for too long. Imagine designing a user experience with such limitations.
Finally, the last variation of screen design worth mentioning is the curved display.
Porshe follows here the idea of only slightly-curved displays used in desktop systems, and it shouldn’t be problematic in terms of designing interfaces for it. Continental is on the other end of the spectrum here.
All of the above-mentioned brands develop their own software. Depending on the investments and attention paid to these works, you can see various levels of consistency and up-to-dateness of the interfaces on the photos above.
We have connections with various design and prototype companies like us, and they say that with such market granularity, it is impossible to make universal apps for all cars. Even more, building an app for one car manufacturer appears to be cumbersome: different car models may have a different number, sizes and positioning of the screens, and different versions of software, so maintaining a park of different versions of your app will be a major part of your expenses.
On the other side, there’s Google and Apple. Android Automotive is said to appear in Cadillacs, Chevrolets, Buicks, and more GMCs in 2021, while now you can find it in Polestar 2 and some older GMC vehicles, as well as in Renault, Nissan, Mitsubishi, and Fiat Chryslers automobiles. So this is quite a list. And CarPlay, which is not an operating system requiring adaptation to the car's hardware, but just an extension, is available in more than 600 models – the full list can be found here.
So if you’re considering building an app for automobiles right now, sticking with Google and Apple will help access a bigger audience.
EGO Hands-On Experience in Building Automotive UIs
Carmakers prefer building in-house design and development teams for their proprietary solutions: in the long run, it appears to be cheaper, but the expertise gained often appears to be too limited, which results in interfaces lacking modern look-and-feel.
For third-party companies wanting to offer drivers innovative products, the best way to go is to build apps compatible with CarPlay and Android Auto/AAOS. However, in 99% of cases, those appear to be initially implemented for smartphones and only require alternative "car mode" including UX/UI for cars that should be done according to the best practices listed above.
As an experience Android and iPhone development company, We have a few projects that can relate to the automotive industry but basically are mobile apps:
The Store
Check for more
- Zutobi, an app helping students to learn driving rules (read our case study here)
- A white-label app for vehicle inspection and valuation
- Traffic Live, an app informing Switzerland drivers about traffic disruptions and danger zones on the roads via alerts
As with any other app, the first versions of these solutions were delivered in 2-5 months and later were improved based on the users' feedback (or stakeholders' requirements).
According to our estimations, adopting any app for Android Auto or Car Play will require only 1-3 months, and building an app from scratch for AAOS won't be significantly different in terms of resources and timelines than building a mobile app.
How to Start Making Your Automotive App And How EGO Can Help
If you have an idea of an automotive app and you're considering what to do next, there are two things we believe you should do first. They are common for any mobile project, but you will adjust them to the automotive industry whenever required intuitively.
- First of all, you need to think your idea through and polish it so that it would include not only basic statements but also technical requirements, expected outcomes, a monetization model, etc. You can learn more about it in our blog post: I Have an App Idea. What’s Next? A 5-Step Guide to Success
- If you or your company has no expertise in software development, you'll need to find a development partner. If you didn’t practice that before, you'll need to understand first how such businesses operate. There's a post "Takeoff With EGO" which reveals our approach. It might be unique in many aspects, but the general flow is quite similar in all companies like ours.
One More Thing
Being a mobile app agency of choice in over 150+ projects, we see that there is a huge problem with business expertise when it comes to digital. Entrepreneurs often have great ideas about apps and services, but they lack the knowledge of checking them against the global market expectations. And it's a fact too known that most ideas based on pure assumptions eventually fail. The only major difference with the automotive industry is that those failures may be much more expensive here.
That's why for over three years now we've been switching from a software development company to a digital business partner ready to consult and help you with the business aspect of app development as well. Having learned from the ups and downs of our clients, we know how to come up with the strategy that will lead your future product to success.
So if you have an idea for an automotive app or service and you’re ready to hit the ground running, consider our plans for starters.
