guidelines

Organization

The process of structuring a user interface to avoid information overload for the user.

It is important to organize your UI's content, components and features so that your users don't get overwhelmed or lost while using it. Instead of providing users with every tool and/or feature up front, you'll want to present users with what they need only when they need it. A good way to do this is to divide your tools and features into categories and then choose where and when to display each category.

What are the best ways to organize my user interface?

1. Use different views (pages)

Views are the most obvious solution when it comes to organization. You might have separate views for each step of a user flow. However, depending on the complexity of your application, you might even have a separate view for different user flows altogether. Views are most often traversed using a navigation menu.

2. Use toolbars and/or sidebars

Toolbars (ie. top/bottom bars) and sidebars can be used within a view or views to further help organize your interface. This is where it becomes important to categorize your tools, so you can make sure the user does not have to think about where they need to go to complete a specific task/action/etc.

3. Use tabs and/or panels

Tabs and panels may be used within toolbars or sidebars. These components allow you to further break down the categorization of your tools or features in order to provide more clarity for the user.

NOTE: It is okay to hide content behind actions

It is often beneficial to hide content until a user completes a certain action. It may add an additional click or two, but depending on the complexity of the UI, it will help de-clutter the space, which will help avoid overwhelming your users.

Here are examples of organization as listed above using a screenshot of Figma as an example