Table Of Content

These are helpful when you need to go into a little bit more detail about the line item itself. But when it comes to great UX, it’s the fine detail that counts. Lists are supposed to be a solution to reading comprehension, and the rival of grid UI designs. Based out of Copenhagen, Denmark, Anders Toxboe is a Product Discovery coach and trainer, helping both small and big clients get their product right. He also founded UI-Patterns.com and a series of other projects.
Why Choose a List Design Pattern?
It can be a star rating, CTA button, number rating, product price, item order, and other extra item information that designers want you to know. The designer in this case denotes each category clearly with large bold font, followed by groupings of images for that category, all related to clothing items within that category. We also like the clear hierarchy created with the use of different aspect ratios for the images. Many web list UI designs often tend to look overloaded, as designers try to take too much advantage of the extra screen space offered at higher resolutions. The designer made good use of the indented separator line and established a clear visual hierarchy for visual elements such as thumbnails, ratings and buttons in the UI design.
List Style Recipes
The items that display the client details are contained in a card design. It is a good example of how to create a card list design for your mobile apps. Keep in mind accessibility when designing your list, especially when it comes to interactions, such as adding list items or drag and drop.
Over 200k developers and product managers use LogRocket to create better digital experiences
Finally, archive lists are what we specifically use in situations where users search for items based on dates. All lists should contain items that appear clickable, and if users can customize the order of items in a list based on their personal priorities, it will greatly improve their user experience. If you have a large set of items or options, you need to present them to users in a way that allows them to fulfill their tasks. These tasks can involve viewing the content of different items quickly or searching for and selecting a particular item. Users will be best served with design patterns that prevent them from having to skip to different windows or pages when viewing content. Also, we should support users in searching for and selecting an item by guiding them through broader categories to their destination.
You can make each item look expandable or collapsible by using the ▲/▼ icons. However, when doing this, you’ll want to take special care that the relationship between items on the list and their subcategories is always clear. When it comes to improving the scannability of your list UI design, consistency is king. A good list UI design has to have a consistent design all the way through. Otherwise, it doesn’t really serve its function as a list and doesn’t help the user to scan through all the information which is precisely what it’s meant to do.

Image Bullets
Remote Food Ordering List has been made for a remote food delivery app. The list transition animations present different dishes in a very cool way, engaging users effectively. Service design can help our organizations innovate customer experience and build brand loyalty — and it’s great for small businesses. This wish list page was a project done for a ticket wallet app. On this page the user can accumulate a list of tickets they want to buy in the future. It lets your users know where they are in the filtering process and allows them to easily go back and switch off the filters.
Category listing — filter
There were a few different ways these destinations could have been displayed, such as image lists or on cards, but this vertical list actually works pretty well. To start with, you need to decide what type of list is the best fit for your list UI design. Here you need to think about how much information you should convey to your user at first glance and what order it should be in. Because lists are meant to summarize details to optimize scanning. That way, users can easily find what they’re looking for in the UI.
Ensure Your List Items Are Logical, Actionable, and Consistent
Getting list UI design right is crucial for achieving the optimal UX for you app or website. This is because lists make up a large part of many apps and website UI designs. The way they’re designed can have a huge impact on the usability of your product. Reducing the amount of content that’s always visible is crucial for usability and minimizing cognitive load.
Stay Off Santa's Naughty List: Four Ways To Responsibly Design Experiences This Holiday Season - Forrester
Stay Off Santa's Naughty List: Four Ways To Responsibly Design Experiences This Holiday Season.
Posted: Mon, 20 Nov 2023 08:00:00 GMT [source]
What Makes a Great List UI Design?
It is a good example of how to keep your lists consistent with the entire website style, especially the color scheme. Patch Dashboard Deposits Listing is a list UI design for Patch dashboard and has two subheadings for deposits. Each item has deposit history, current status, and other information displayed clearly. It is a good example of how you can create a two-line list with consistent visual language. In short, UI lists are good elements to create the best UX and UI for your projects.
It is a good tool for learning how to create different types of lists for your website project. As a part of the website or mobile app design, list UI design should be visualized and tested out on time when you and your team are working on it. You will surely need a handy prototyping tool to translate all list design ideas into prototypes and test every detail completely in your web/mobile app UIs. It will help you a lot in testing your entire design project to the fullest. Color schemes - A good color scheme helps designers engage users and convey an emotion or spirit easily. While designing a list UI design, the color scheme, which includes the color of icons, text, and rating buttons, etc, helps you attract users and make your interface stand out easily.
A single-line list, like the name suggests, has just one line per item. Single-line lists can be very effective in that they provide optimal scannability. Accommodation booking platforms like Airbnb and Booking.com allow users to apply multiple filters to list properties that suit their needs and preferences. Tables have a specific structure, including a header, rows, and columns with sorting and filters to find and manipulate data.
This ensures that all users of any ability will be able to fully use the list. By following these best practices, list design shouldn’t feel so tricky anymore. Here are some common list design patterns and interactions that you can apply to website and mobile app design projects. The photos folder shown here uses an archive list design pattern, to help users navigate within the vast amount of content. By zooming out to a year-level, you can quickly select the approximate timeframe, and then zoom in again for more details.
This best practice is closely connected with the previous one I described. Not all lists within your website or app interface should be immediately visible to users. I like this format because it also encourages user interaction, as each card is typically designed to be clickable, leading to more detailed content. As the owner of a web design agency in Chicago, I’ve faced these challenges myself. User interface designs are constantly evolving, and you must quickly adapt to changes in order to deliver top-quality products to clients. However, the core principles of list UI design remained the same.
For each action on a certain date, the type of action is added to allow the users to narrow their search according to the day and the group to which their target item would belong. Even if you’re not the to-do list maniac like some of us, lists are a great way to deliver content to your users. A list allows them to navigate quickly to the section of content that is most relevant to them, while maintaining an overview of the entire body of information that is accessible.