As a company specializing in connected devices and hardware projects, we constantly delve into the topics on the edge between design and engineering.
One of the most important pieces of knowledge for both designers and developers is understanding the power of the native components. In this article, we’re going to dive into the most powerful iOS 16 updates in this area, with all there is to know about them.
But first, let us start with the definition itself.
What are native components?
Native components are user interface elements built into an operating system.
They can be applied in the application without writing custom code, making them very useful for developers. Thanks to that, we as designers can speed up the development process and thus focus more on the custom components that are crucial for the app.
Moreover, native components adopt built-in accessibility features, such as VoiceOver support, which can make the app more convenient to users with disabilities – all information is based on the iOS Guidelines.
Native components in iOS 16
The current Apple operating system for mobile devices is iOS 16, the successor of iOS 15. The public version was released on September 12th, 2022; at the time of writing this article, the current version of iOS and iPadOS is 16.3.1.
Each version update gives designers and developers more tools to work efficiently. Here, we’ll focus specifically on the most important native component updates in iOS 16. Those are:
Customizable sheets
Charts
Calendar
Note: The agreement with your client might define the version for which you are supposed to design their product – keep that in mind when working with native components.
Customizable sheets
One of the most commonly used components are the so-called sheets. In my opinion, it is one of the elements that is used most often. It can present the card with settings (like on Instagram) or some additional information instead of the classic alert component.
The problem lies in the height of the element – designers want to customize the content in it to make the design look perfect.
Only the latest version allows this feature from a native point of view. In iOS 16, you can adjust the height specifically to the content. Note that iOS 15 has only 2 height options - maximum and medium height, as shown below:
Charts
Charts are a big newcomer in iOS 16. We have access to different types of native chart components with various options to customize the axes, descriptions, colors, and rules of the interaction.
iOS charts. Source: Apple.
What you should know about charts:
The ranges can be fixed or dynamic, and they automatically adjust to changes in the data
The areas behind the data bars are touchable to ease tapping
You can add additional ticks to show the range of data more precisely,
The charts support all accessibility features
iOS chart anatomy. Source: Apple.
For more information about charts, read through the Charting Data section of Apple's Human Interface Guidelines.
Calendar (UICalendarView)
Finally, the calendar becomes a native component in iOS 16!
Here’s the most crucial information to keep in mind about the calendar:
It can be customized with background colors, radius corner, blur effect (UIBlurEffect) or background blur effect (UIVibrancyEffect).
It allows date-specific decorations in 3 different types: regular (circle image as default), image (specified image, color, and size), and a custom view – you can check out an example image decoration here.
You can specify available dates, e.g. active dates after 12.06 as shown in this example.
Date selection modes: single date, no date, range.
Conclusion
iOS 16 significantly extends the set of available native components. Thanks to that, developers and designers can cooperate more efficiently on building eye-catching, usable and well-developed products.
Looking to design an iOS app for your project? Contact us – our experts will help you handle the design and development process from start to finish.
Marta Mielcarek
UI Team Leader
