What are Bottom Sheets in UI Design and How to Use them?

UI design bottom sheets are an overlay that is placed at the bottom of a screen and contains additional information, details, or actions. Bottom sheets are used to maintain a focused experience on the parent view, while the bottom sheets are anchored to the bottom of the screen. 

Bottom sheets are UI design elements that have become more and more common in design as they offer accessibility and essential elements for the users. They just slide up from the bottom of the screen and include from the navigation menu more detailed displays.

Bottom sheets have the purpose of creating a better user experience as they are placed on each design page and have access to design elements that are one click away from you. They are easy to implement and are starting to be the to-go choice for more and more UI/UX designers.

Bottom sheets are a versatile element that can carry a wide range of information and layouts, such as menu items, can trigger actions, and contain additional content. Bottom sheets offer an interactive way in which users can interact with the design and provide faster responses.

• Standard

Standard bottom sheets co-exist with the parent view of the screen. This element gives the user the ability to interact simultaneously with both screens. Standard bottom sheets are used to maintain a secondary feature available on the screen while the users interact with the main design focus.

• Modal

Modal bottom sheets appear over the content from an app, disabling the app functions until the modal element is dismissed. A modal bottom sheet can be interacted with or dismissed, as its behavior is suitable for a menu, giving the users the ability to focus on the available options.

Behavior

Use bottom sheets when you want to present additional information or simple tasks. A bottom sheet allows the users to continually see the parent view as it helps the users interact while the original context is available. Creating accessible bottom sheets is mandatory for a great user experience.  Creating a visual hierarchy can help trigger an intuitive behavior while keeping it consistent and easy to follow. 

Interaction

Standard bottom sheets have the ability to remain on screen when the user interacts with the main design. They give the user the ability to scroll through the main design as they carry a default evolution of 8dp. When the focus of the user is switched to the standard bottom sheet the full-screen height of the component needs to be accompanied by a collapse icon.

Bottom sheets need to be used when the user has the ability to dismiss the element in order to better interact with the main content.

Modal bottom sheets must be interacted with or dismissed in order to regain accessibility to the main design. This type of bottom sheet should be used when multiple options and actions are offered as it helps the user focus on the tasks more easily. 

Modal bottom sheets can also be used to present additional actions. Modal bottom sheets appear when a user triggers an action and needs to have the ability to be dismissed. 

• Use bottom sheets close-packed and medium size. Every UI/UX design needs to be readable and easy to comprehend by its users and, opting for close-packed bottom sheets can increase the user experience. 
• The content available on a bottom sheet needs to be secondary, not carry the main information.
• The user needs to have the ability to dismiss a bottom sheet in order to better interact with the main content.
• In order to provide access to the main interactions, the initial state of the modal bottom sheet needs to be capped at 50% of the screen’s height. 

Designing can be a more complicated job than you would expect it. It takes time, dedication, and a lot of creativity. And if you are just starting out, a design system might be a little more complicated than a UI kit. So, if you are just starting out your design career, a UI kit will be your savior, and as you are switching to more complex designs, a design system will do you wonders.

‍

However, creating bottom sheets can become easier than ever with the help of a design system. With a design system, we automatically eliminate this dead time. Creating a component takes time – not only for designing but also for research and feedback. However, clearer guidelines mean less research and fewer rounds of feedback, which means fewer revisions. With a design system, it also means fewer risks of error. 

Choosing and creating the right bottom sheet might take more time than the one we have to spare, and this is where a design system comes into play. With unikits design system, every UI/UX designer has the ability to customize and choose the right avatar for their design.

We at uinkits understand the importance of great user experiences and creating amazing UI designs. That’s why we’ve developed a Figma UI Kit with design components that include these essential UI elements that enable you to design intuitive and user-friendly interfaces effortlessly.

“You press the button, we do the rest.” – Kodak.

Inspired by this iconic tagline from Kodak, we believe in simplifying the design process for you. Our Figma UI Kit, uinkits, is a complete design system with UI components that allows you, as a UI UX designer, to create your products as quickly as pressing a button.

Our design system includes UI components, icons, variables, cards, buttons and everything you need for your design process. All you have to do is take your UI design component needed, and you’re ready to use it in your designs!