A transfer list is a UI element of a predefined collection of options that allows users to add and remove them from one list and move to another.
A transfer list consists of the transfer of items between two column choice boxes. The transfer is done from both directions and is completed through specific buttons. For some lists, users can also drag and drop items between lists.
Types of Transfer List in UI/UX Design
Basic Transfer List
A basic transfer list allows users to move each item independently or all of them. They are good for short lists with a small number of items.
The transfer is done through four buttons. To move only one item at a time, users can do it through the “>” or “<” buttons. But they also have the option to “move all” represented by the “>>” or “<<” buttons. This feature is not necessary for all transfer lists of this type.
Enhanced Transfer List
An enhanced transfer list is good for long lists with many items. Because of this, the list can be scrollable and can also include additional features or interactions like a search bar.
For this type of transfer list, the “move all” buttons are replaced with a checkbox that allows users to “select all” or “select none”. In this case, there are only two buttons – “<” and “>” that allow users to move the checked boxes to the other list.
When to Use Transfer Lists in UI/UX Design
Transfer lists are used when users must filter and sort items based on specific attributes.
Transfer lists are used if users must choose multiple items at the same time.
Transfer lists are used in task management, where users need to categorize, prioritize, or organize tasks based on different criteria.
Use the Transfer List UI Element in Your UI/UX Design with uinkits
Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find transfer lists and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!
So, get your uinkits package and start designing now!