New Design UI/UX
Accordion
Well-designed accordions can significantly enhance a UI by helping users find information quickly without overwhelming them with too much content at once.
Anatomy
Target Area
Smaller targets are harder to click or tap compared to larger ones. This is particularly challenging for individuals with limited motor control or for those using their phone with one hand, relying on their thumb. Ensure a minimum of 12px padding to help people with disailities get easy access to your informations.
Clicking the Entire Header Should Expand the Menu
Clicking anywhere within the header section should trigger the expansion of the accordion. Limiting the interaction to a small icon can create usability issues and make the component harder to interact with. A larger clickable area ensures a smoother and more intuitive user experience.
The entire header area of an accordion should be clickable, not just the icon. This improves accessibility and makes the component easier to use, especially on touch devices. Users should be able to expand or collapse a section by clicking anywhere within the header.
Clicking anywhere within the header section should trigger the expansion of the accordion. Limiting the interaction to a small icon can create usability issues and make the component harder to interact with. A larger clickable area ensures a smoother and more intuitive user experience.
New Design UI/UX
Accordions are vertically stacked interactive containers used to show and hide sections of content.