- Guidelines
- React API Reference
Carousels present multiple pieces of content in a compact, horizontally or vertically scrollable format, allowing users to browse through items efficiently while maintaining focus on individual content pieces.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use carousels to showcase multiple related items, featured content, or when space is limited and progressive disclosure is beneficial. |
| Content | Ensure each carousel item is self-contained and meaningful. Maintain consistent sizing and content hierarchy across items. |
| Behavior | Provide clear navigation controls. Support both mouse/touch interactions and keyboard navigation. Implement smooth, predictable transitions. |
| States | Clearly indicate current position and available navigation options. Disable navigation buttons when at boundaries. |
| Feedback | Use visual indicators like dots or arrows to show navigation state. Provide accessible labels for navigation controls. |
| Examples | Product showcases, image galleries, testimonials, featured articles, or any collection where users benefit from browsing one item at a time. |
Best Practices
- Consistent Item Sizing: Maintain uniform dimensions for a polished appearance.
- Clear Navigation: Provide intuitive navigation controls that are easily accessible.
- Keyboard Support: Ensure full keyboard accessibility with arrow key navigation.
- Responsive Design: Adapt to different screen sizes and orientations appropriately.
- Performance: Optimize for smooth scrolling and minimal layout shifts.
Do’s and Don’ts
Do
- Provide clear navigation controls and indicators. * Support keyboard navigation (arrow keys). * Use consistent item sizing and spacing. * Include accessible labels for screen readers. * Optimize for touch interactions on mobile devices.
Don't
- Auto-advance without user control or clear indication. * Hide critical content that users might miss. * Use carousels for primary navigation or essential information. * Overcrowd items or make navigation controls too small.
Additional Guidance
-
Psychological Impact:
- Focus: Carousels help users focus on individual items without overwhelming choices.
- Discovery: Enable content exploration in a structured, predictable manner.
- Engagement: Interactive navigation keeps users engaged with the content.
-
Accessibility Considerations:
- Implement proper ARIA labels and roles
- Ensure keyboard navigation works intuitively
- Provide alternative ways to access all content
- Consider users with motion sensitivity preferences