BLOG
UI Tools Mobile Menu
Suggest Tool
Orbit Design System

Orbit Design System

Open source design framework for your upcoming trip endeavor.

Visit Website Figma File

About Orbit Design System

Open source design framework for your upcoming trip endeavor.

Design patterns

progressive disclosure

Users approach your designs with conflicting goals. They desire many features, but they don't want to take the effort to learn how to use them (simplicity). How much should you give them without overwhelming them?

Progressive disclosure is the solution. By adhering to this approach, you may maintain everything else at the user's fingertips while only displaying the information they need to make a decision at that moment. This entails determining which options in a particular flow are the most crucial and making it plain to users how to access other options.

What it means for you, progressive disclosure

You can control the large amount of information you have at your disposal by using progressive disclosure. It's challenging for users to decide what is vital and what isn't if you try to offer all of the options at once. As a result, individuals experience information overload, which raises the likelihood that they won't take any action.

You wish to make your designs simpler to emphasize what's crucial in order to assist users through this. It's crucial to remember to make it obvious how users can access the secondary options if they so choose and that they are still available.

Because you don't want people to believe they can't do something they actually can, the concept of user desire is crucial. Make sure they don't depart looking for another way to accomplish something they can do with your design.

selecting the elements for actions

It's advantageous to have many options occasionally. Sometimes it can be too much to handle (which is why Orbit is based around progressive disclosure). We offer buttons, button links, and text links as some of the various presentation methods for potential actions.

You can use this interactive decision tree to get advice on which component to use. The justifications for the recommendations are detailed below.

designing forms

We prefer using a one-column layout for straightforward forms rather than many columns. It is easier for the user to fill out the forms one at a time by moving down the columns in a straight line as opposed to jumping between columns, which could cause them to skip some fields. Additionally, since there isn't enough room for multiple columns on mobile devices, one-column layouts are used on both the desktop and mobile platforms.

A multi-column layout is preferable for more complex forms. When you have a lot of fields for users to fill out, it's advisable to arrange them into 2 columns to make the form more manageable and concise.

combining fields with same content

Consider utilizing groups whenever your form has fields with similar contents (like different sections of an address). If you want to illustrate the relationship visually, think about closing the gaps between connected fields. Using input groups is preferable in some circumstances.

Increasing the variety of inputs

You can obtain a wide variety of information from users. Certain form elements are better suited for a particular information type. With the correct component, users may have a better user experience, fill out the form more quickly, and complete it more often.

Use the InputFile component, for instance, if you need users to upload attachments. Try to avoid utilizing only InputField and Select components because each of these input types has unique features.

Blog Posts About Design System

Related Products View All
VTEX Design System
VTEX Design System

VTEX Styleguide is the design system for VTEX, serving as the home for all reusable patterns, components, and assets related to product design.

UI2 Figma's Design System
UI2 Figma's Design System

Figma's UI2 Design System is a comprehensive set of design guidelines and resources that help teams create consistent, high-quality user interfaces (UIs) across web, mobile, and other digital platforms.

Radius Design System
Radius Design System

You may speed up your design system by using the opinionated collection of open-source tools and frameworks known as The Radius.

Primer Design System
Primer Design System

Design, construct, and produce using the design system on GitHub

Paste Design System
Paste Design System

At Twilio, the Paste design system is employed to create user interfaces that are intuitive, unified, and of the highest caliber. With tools and resources, Paste assists Product Designers and Engineers in creating consumer UIs in Figma and React.

Paradigm Design System
Paradigm Design System

For Mail.ru products, Paradigm is a design system that enables us to preserve the integrity of the user experience while streamlining design and development resources.

Palmetto Design System
Palmetto Design System

The goal of the Palmetto Design System is to make it easier and faster for us to produce applications with the Palmetto brand.

Pajamas Design System
Pajamas Design System

These rules establish the requirements for maintaining a consistent brand image. The GitLab brand has developed into what it is today because to the cooperation of many contributors and iterative procedures, just like their product and business. It serves as a creative outlet for Gitlab's mission, vision, and core principles.

OSKRHQ Design System
OSKRHQ Design System

A largely subjective but feasible method for creating adaptive digital interfaces with a shared anatomy.

Native Base Design System
Native Base Design System

NativeBase is an open-source, utility-focused component toolkit that enables you to create UIs for Android, iOS, and the web that are all consistent.

Suggest Product