Mandatory and Optional Component, What the h*ll is that?

Yoga Satria Wibowo
Odama
Published in
3 min readDec 13, 2021

Component in mobile design is very diverse, when we face many design teams we will met a various component name in UI Design. Some time ago I was exploring various design system from any startup in Indonesia and i found a quite interesting design component from OVO’s Ravier Design System, which is the most popular fintech in Indonesia. In their design system there is a component called Mandatory and Optional. What is Mandatory and Optional in Mobile design? and then what’s the different between Mandatory and Optional?

Mandatory and Optional

Basically Mandatory and Optional is only a component name from a design system, these components aren’t included in any fundamental design system like material design or any literature in the internet, but they are categorized in the bottom sheet if we refers to material design. So I think the mandatory and optional component is only included in OVO’s Ravier Design System.

Mandatory

Mandatory is an Component in OVO’s Ravier Design System that can categorized in bottom sheet. This mandatory component used to display high priority content

https://ravier.ovo.id/d/3hXjzK8CtxbC/components#/components/bottom-sheets

In the Mandatory component user can only hide the sheet when user click the button.

Optional

Optional Component is almost the same with Mandatory component, the different between this two component is content that contained in this sheet, if the Mandatory component is contained high priority content. The Optional component is only contain a content that does not really need more attention from the user.

https://ravier.ovo.id/d/3hXjzK8CtxbC/components#/components/bottom-sheets

In this Optional component, user can hide or close the sheet by swiping the sheet, taping the button or tapping on the outside of Optional component.

Conclusion

As a reminder, in the image below, the red mark is a place where the user can take action to close the available sheet. From the picture below, we can also realize that optional is more flexible but the use of mandatory also feels more assertive because mandatory only provides 1 path for action through the button located at the bottom of the sheet.

Although Mandatory and Optional component is only naming from a design system but the Mandatory and Optional can make UI Design fresher. Using Mandatory and Optional Component also can separate content that requires more attention from the user.

Thank you for reading this article, hopefully you can learn something new about UI Design.

Follow us on :

📷 Instagram: https://www.instagram.com/odamastudio/

🏀 Dribbble: https://dribbble.com/odamastudio

Behance: https://www.behance.net/odamastudio

--

--