Design principles for list component — Nr. 132
We see lists everywhere. A list of music in our playlist. A list of contacts.
We see lists everywhere. A list of music in our playlist. A list of contacts. When designing a list, there are a lot of things to consider. Here’s the shortlist:
Order. When you deal with a list, you must think about what’s the order logic. Is it alphabetical? Or should we sort based on the latest added item first? This is an obvious thing that you might miss.
Spacing density. When people see a list, they usually want to scan the list. Think about a list of transactions in your bank account. As a product designer, it’s important to decide when you want to make the list dense or airy. Consider making it dense if the users frequently scan the list. On the other hand, if the users are casually browsing the list—like the listing on Airbnb, maybe making it airy is fine.
Keep the content short and easy to scan. Put a strong hierarchy for the main information. For example, if it’s a list of contacts, then make the name stand out compared to the other information. Think: What is the most familiar information users will look at when scanning the list?
Consider icons. Think about the list of menus on the sidebar. It’s usually great to use icons to help users identify and differentiate the menu quickly.
Reorder interaction. Sometimes, you need the users to reorder the list. What’s the best way to reorder items? Can they do it using the keyboard? What if they want to reorder multiple items?
Bulk action. When users need to frequently edit the list, like editing their hundreds of products in their e-commerce store. How can you support them to do the action in bulk?
