![]() ![]() In my experience, it appears that the choice of icon doesn’t really matter as long as it isn’t overloaded with various meanings in the same UI. They clearly communicate the purpose of the icon and the behavior to be expected. Both of them serve the same purpose (expansion) and look similar. Assuming that, like in many accordions, the sub-items will slide in between two sections, what icon would you choose to communicate this behavior? An arrow pointing down, an arrow pointing to the right, a chevron pointing down, a plus, a circled plus - maybe something entirely different? Zvv.ch combines two horizontal accordions with the same icon (circled plus) - one to indicate trip options, and one to indicate stops between two locations. ![]() What do we know? Well, obviously, in most left-to-right interfaces, the category name will be left-aligned, too. A classic example of an accordion on Nsb.no, a Norwegian trip-planner, with an icon aligned to the right edge of the bar, and the entire bar acting as an expansion trigger. However, what if the user clicks on a collapsed card while another card is open? Should the expanded card close automatically, or not? What if not all items can be displayed - should the user be automatically scrolled up? Let’s take a closer look at these, and related issues, one by one. ![]() Once the category is expanded, the icon should change to indicate collapsing. An accordion always contains the category title, an expanded and a collapsed state, an icon indicating expansion, and the spacing between them. Now, if we look a bit more closely into the accordion’s barebones, it won’t be difficult to see all of its atomic elements. But in all the different contexts we have to thoroughly consider two things: the visual design and the interaction design of an accordion to eliminate all points of confusion and misinterpretation. An accordion for a navigation will require a different approach than a Q&A section. Now, don’t get me wrong: context matters. However, even a component as predictable and frequently used as an accordion has a lot of room for interpretation and ambiguity. How difficult can designing an accordion be? Well, one has to consider many things. More often than not, it works surprisingly well. In fact, if you encounter a problem of any kind - too many navigation options, too much content, too detailed a view - a good starting point would be to explore how you could utilize the good ol’ accordion to solve that problem. As a result, the design stays focused and displays critical information first, while everything else is easily accessible. It’s an immensely useful pattern for progressive disclosure - highlighting important details of a section and revealing more details upon a tap or click, if necessary. There is a good reason why the accordion is probably the most established workhorse in responsive design. Subscribe to our email newsletter to not miss the next ones.Part 2: Perfect Responsive Configurator.But before we head off to complex interface problems, let’s start with something seemingly simple and obvious: an accordion. Tighten up your seat belts: in this new series of articles on SmashingMag, we’ll look into examples of everything from carousels to filters, calculators, charts, timelines, maps, multi-column tables, almighty pricing plans all the way to seating selection in airline and cinema websites. This series of articles is a summary of observations and experiments made throughout the time. Over the last few years, I spent a lot of time working with various companies trying out various approaches and studying them in usability tests. We don’t need to apply them exactly as they are to every problem we encounter, but we can build on top of them, using our experience to inform our decisions because we know they’ve worked in other projects fairly well. Sometimes we use these patterns without even thinking about them, and there is a good reason for it: Coming up with a brand new solution every time we encounter an interface problem is time-consuming and risky, because we just don’t know how much time will be needed to implement a new solution and whether it will gracefully succeed or miserably fail in usability tests.ĭesign patterns can be extremely helpful, mostly because they save time and get us better results, faster. Navigation? Off-canvas! Deals of the day? Carousel! You get the idea. As designers, we tend to think of design patterns as generic off-the-shelf solutions that can be applied to various contexts almost mechanically, often without proper consideration. ![]() An almost mythical phrase that often inspires either awe or resentment. ![]()
0 Comments
Leave a Reply. |