Overview
Use a list when learners need to scan, compare, or follow related pieces of information. If the content reads naturally as a paragraph, a list is usually unnecessary.
Common Pitfalls to Avoid
- Using lists when a sentence or short paragraph would be clearer
- Mixing different types of information within the same list
- Creating lists with only one item
- Nesting lists excessively, making content difficult to scan
[Example]
- Bullet Level 1
- Sub Bullet Level 1
- Sub Bullet Level 2
- Sub Bullet Level 1
Guidelines
Do
ID
Use Parallel in Structure Grammar
Bullet points should be grammatically consistent to support readability and ensure a smooth scanning experience. Consistent grammar helps convey information clearly and accurately, reduces the chance of confusion, and enhances the overall effectiveness of your content. It also reflects attention to detail, builds credibility, and presents your message professionally, ultimately enhancing the user experience (UX).
ID
UX best practices recommend keeping lists to no more than three levels of nesting to support readability, accessibility, and maintainability. Deeply nested lists can be hard to scan, challenging for screen readers, and difficult to manage, especially in responsive designs. If more depth is needed, consider breaking the content into sections or using headings, and apply clear visual cues, such as indentation or bullet styles, to indicate hierarchy.
ID
When the order of items is essential, such as in step-by-step instructions, process flows, or ranked lists, it is essential to use numbered (ordered) lists in your HTML. This approach not only clearly communicates the intended sequence to readers but also improves the overall UX by making the content easier to follow and act upon. If the order is critical for sub-items within a numbered list, use letters to indicate their importance in the sequence.
ID
Production
Lists should not include single bullet points, especially as sub-bullets, because it breaks the visual and semantic hierarchy of the content. Lists are designed to group related items and show how they connect, helping students quickly understand the structure and flow of information. Proper use of lists also supports screen readers, ensuring accessibility and maintaining a clear content hierarchy for all learners.
ID
Production
Bullet point styles should remain consistent by using the default options provided in Bootstrap, regardless of the technology in use. Introducing unique or custom styles can create visual clutter, distract from the content, and reduce overall cohesion. By consistently using the default styles, you can ensure a clean, professional appearance that aligns with established design patterns, making the content easier to scan and understand. Sticking to default styles also supports accessibility and maintains harmony throughout the page layout.
Do Not
ID
Inconsistent grammar in bullet points disrupts readability and makes it harder for users to scan the content effectively. It can lead to confusion, misinterpretation, and a lack of clarity, undermining the message you’re trying to convey. Inconsistent grammar also diminishes credibility, appearing unprofessional and careless, which can reduce the overall effectiveness of your content. This inconsistency ultimately harms the UX and creates unnecessary barriers to understanding.
ID
Production
Lists should not include single bullet points, especially as sub-bullets, because it breaks the visual and semantic hierarchy of the content. Lists are designed to group related items and show how they connect, helping students quickly understand the structure and flow of information. Proper use of lists also supports screen readers, ensuring accessibility and maintaining a clear content hierarchy for all learners.
ID
Production
Exceed Three Levels of Nesting
UX best practices recommend keeping HTML lists to no more than three levels of nesting to support readability, accessibility, and maintainability. Deeply nested lists can be hard to scan, challenging for screen readers, and difficult to manage, especially in responsive designs. If more depth is needed, consider breaking content into sections or using headings, and apply clear visual cues like indentation or bullet styles to show hierarchy.
Production
Use Inconsistent Bullet Styles
Bullet point styles should remain consistent, using the default options provided in Bootstrap. Introducing unique or custom styles can create visual noise, distract from the content, and reduce overall cohesion. Consistent use of default styles ensures a clean, professional appearance and aligns with established design patterns, making the content easier to scan and interpret. Sticking to defaults also supports accessibility and maintains harmony across the page layout.