List DesignWe see lists in just about every application we use daily. The contacts in your phone, CRMs, email inbox, tasks apps, and social media apps all contain lists.List design is a crucial part of mobile app and web design projects, where designers must research and test the best ways to display content to users. Design list prototypes with code-like interactions using UXPin’s code-based design tool. Sign up for a free trial to discover how code-based design can enhance your prototyping and testing process.What is List Design?List design is the process of designing, prototyping, and testing lists to display multiple items of similar content. These list items could include a single line of text or a card component with an image thumbnail, text, and icon.Designers must decide on the best list item design based on the content they want to display. UX designers have three primary ways to structure content lists: horizontally, vertically, and grid layouts. An excellent example of these lists in action is Instagram:Main feed = vertical listStory feed = horizontal listSearch feed = masonry grid listUX designers have seemingly endless options and variations within these three list structures.What is the Difference Between a List and a Table?Designers use tables to display a dataset to users. Tables have a specific structure, including a header, rows, and columns with sorting and filters to find and manipulate data.  Lists don’t have a fixed structure. Each list item is independent rather than part of a structured dataset with rows and columns. The list item could feature a single line of text in a menu dropdown or a complex card component with lots of data.In summary, the most significant difference between lists and tables is the data structure. Tables have a specific design, while lists can exist in many formats.Anatomy of a List Designlist design how to prototype a listThere are three components to a list design:The list: All list items togetherList item: An individual item in the listList content: The content that makes a list item–image, text, metadata, title, subtitles, and other user interface elementsdesign system atomic library componentsIt’s helpful to use an atomic design approach when deciding how to put these pieces together. Atoms: The content within each list item–individual images and textMolecules: The components within each item–a profile image componentOrganisms: Each list itemTemplates: The entire list with a search field, filters, etc.What Makes a Great List UI Design?Good list UI design follows design thinking and user-centered design principles. The list design must match user needs while providing appropriate fields for the content. UX designers must pay attention to responsiveness and how the list will look across multiple devices and screen sizes.Material Design UI’s Principles of List DesignGoogle’s Material Design UI defines three principles for designing lists:Logical: Lists should be sorted in logical ways that make content easy to scan, such as alphabetical, numerical, chronological, or by user preference.Actionable: Lists present content in a way that makes it easy to identify a specific item in a collection and act on it.Consistent: Lists should present icons, text, and actions in a consistent format.Make Lists ScannableOne of the keys to designing a great list UI is making it easy for users to scan content to find what they need. The quicker someone can find what they need, the better the user experience and the more likely they are to use and recommend your product.HierarchyHierarchy plays a vital role in making lists scannable and easier to read. UX designers have several ways to create this visual hierarchy, including typography, color, spacing, images, etc.For example, this eCommerce list uses color, size, and typography to separate content and create a visual hierarchy:Product name: bold black and white typography top centerProduct description: smaller grey textPrice: Large dark textReviews: Small text with bright star iconsImage: Large circular product imageThis product list is an excellent example of a visual hierarchy that makes it easy for customers to scan products by the content that matters most to them–i.e., by product name, description, price, etc.In a more simplified example, Spotify uses font size and color to create a visual hierarchy between the song title and the artist. The different size and color make it easy for users to scan a playlist accordingly.shopidy list designAccessibilityLists can cause problems for screen readers, creating a poor user experience for visually impaired users. For example, screen readers can’t decipher nested lists correctly. So, designers should use a heading with an unordered or ordered list instead.Further reading on list accessibility:Types of List DesignsThere are three types of list designs:Text listsImage listsCard listsText List DesignThere are three types of text lists. These lists typically include text and an image, icon, and other UI elements like a checkbox or radio. Single-line listsTwo-line listsThree-line listsImage ListsDesigners use image lists when visuals are the primary content–like an image or video gallery. Sometimes a single line of text will accompany the image to provide detail or context.Where image lists don’t include text, designers must ensure to use descriptive alt attributes so screen readers can navigate the content accordingly.Card ListsCard lists typically include visual content and text and may also include a CTA. We often see these card lists in eCommerce store product lists that feature an image, title, short description, category tags, price, and “Add to cart” button.List Design Patterns and Interactionsinteraction click hi fiHere are some common list design patterns and interactions that you can apply to website and mobile app design projects.Checkboxes & RadiobuttonsCheckboxes and radiobuttons are essential UI elements to allow users to make selections and actions on list items. As a general rule, designers use checkboxes for selecting multiple list items and radios for a single selection.Scrolling & SwipingScrolling and swiping allow users to perform multiple actions. For example, many apps allow users to swipe list items left or right–one way to delete the other to archive.Designers must also create scrolling interactions and lazy loading to optimize performance.Select ListsSelect lists or dropdown menus allow users to select from several options–like choosing which shipping method they want at checkout. UX designers might also include a search feature for long dropdown menus, a feature we often see for state/province or country lists.Collapsing & ExpandingDesigners can use collapsable lists to hide and show details. Reducing the amount of content that’s always visible is crucial for usability and minimizing cognitive load. Collapsable interactions are also useful for nested lists or submenus.Reordering & SortingReordering list items gives users control over how they prioritize and experience data. Depending on their preference, they can move items manually up or down the list, usually by dragging and dropping. This customization creates a positive user experience because users can arrange content to suit their needs. Sorting works similar to reordering, except users choose from predefined categories rather than reorder list items manually. For example, Spotify allows users to sort a playlist by title, artist, album, or recently added.FilteringFiltering helps users find what they need much faster. Accommodation booking platforms like Airbnb and allow users to apply multiple filters to list properties that suit their needs and preferences.DividersDividers help create separation between content; however, they can add unnecessary “visual noise.” If your lists get too busy, try testing white space as an alternative content separator. List Design in UXPinwebdesign design system components states icons 1With UXPin’s code-based design tool, UX designers can build list prototypes that accurately resemble the final product. Our Multilevel Dropdown Navigation example demonstrates how designers can use States and Interactions to build a functioning dropdown list–using only a single frame.Increase Fidelity and Functionality with UXPin MergeTake your prototypes to the next level using UXPin’s proprietary Merge technology. Sync your product’s design system or an open-source component library from a repository to UXPin’s editor so designers can build prototypes using fully functioning code components.You can see Merge in action with our MUI library integration. Using MUI’s React library, designers can build fully functioning list prototypes. MUI’s React components come complete with states and interactions, so designers only have to focus on product design rather than building everything from scratch. Everything you see in MUI’s documentation, designers can replicate in UXPin without writing a single line of code.