21 Jun Designing The Perfect Accordion – Smashing Magazine
Design patterns. An virtually legendary phrase that usually evokes both awe or resentment. As designers, we have a tendency to think about design patterns as generic off-the-shelf options that may be utilized to numerous contexts virtually mechanically, usually with out correct consideration. Navigation? Off-canvas! Deals of the day? Carousel! You get the concept.
Sometimes we use these patterns with out even serious about them, and there’s a good motive for it: Coming up with a model new answer each time we encounter an interface downside is time-consuming and dangerous, as a result of we simply don’t know the way a lot time might be wanted to implement a brand new answer and whether or not it should gracefully succeed or miserably fail in usability checks.
Design patterns could be extraordinarily useful, largely as a result of they save time and get us higher outcomes, sooner. We don’t want to use them precisely as they’re to each downside we encounter, however we are able to construct on prime of them, utilizing our expertise to tell our choices as a result of we all know they’ve labored in different tasks pretty nicely.
Over the previous few years, I spent lots of time working with numerous firms making an attempt out numerous approaches and learning them in usability checks. This sequence of articles is a abstract of observations and experiments made all through the time. Tighten up your seat belts: on this new sequence of articles on SmashingMagazine, we’ll look into examples of the whole lot from carousels to filters, calculators, charts, timelines, maps, multi-column tables, almighty pricing plans all the best way to seating choice in airline and cinema web sites. But earlier than we head off to complicated interface issues, let’s begin with one thing seemingly easy and apparent: an accordion.
Further Reading on SmashingMagazine: Link
The Barebones Of An Accordion Link
There is an efficient motive why the accordion might be probably the most established workhorse in responsive design. It’s an immensely helpful sample for progressive disclosure — highlighting necessary particulars of a bit and revealing extra particulars upon a faucet or click on, if needed. As a consequence, the design stays centered and shows crucial data first, whereas the whole lot else is well accessible. In truth, in case you encounter an issue of any variety — too many navigation choices, an excessive amount of content material, too detailed a view — a great start line can be to discover how you would make the most of the great ol’ accordion to unravel that downside. More usually than not, it really works surprisingly nicely.
However, even a element as predictable and continuously used as an accordion has lots of room for interpretation and ambiguity. We must completely think about each the visible design and the interplay design of an accordion to get rid of all factors of confusion and misinterpretation.
Now, if we glance a bit extra intently into the accordion’s barebones, it received’t be tough to see all of its atomic parts. An accordion all the time comprises the class title, an expanded and a collapsed state, an icon indicating enlargement, and the spacing between them. Once the class is expanded, the icon ought to change to point collapsing. However, what if the person clicks on a collapsed card whereas one other card is open? Should the expanded card shut robotically, or not? What if not all gadgets could be displayed — ought to the person be robotically scrolled up? Let’s take a better have a look at these, and associated points, one after the other.
Choosing An Icon To Indicate Expansion Link
Now, let’s get began. What do we all know? Well, clearly, in most left-to-right interfaces, the class identify might be left-aligned, too. Assuming that, like in lots of accordions, the sub-items will slide in between two sections, what icon would you select to speak this habits? An arrow pointing down, an arrow pointing to the appropriate, a chevron pointing down, a plus, a circled plus — possibly one thing totally totally different?
In my expertise, it seems that the selection of icon doesn’t actually matter so long as it isn’t overloaded with numerous meanings in the identical UI. E.g. you may doubtlessly use circled plus to point enlargement, zooming and a bundle of two gadgets in a pricing plans — and which may introduce confusion. However, in context of the accordion, customers appear to grasp that if among the navigation gadgets have an icon, whereas different sections don’t, it’s some sort of signal that extra content material is out there upon click on or faucet. We couldn’t spot any indication of 1 icon being roughly recognizable than others. However, it doesn’t imply that some choices won’t trigger extra confusion than others.
For instance, Slack13 makes use of an arrow pointing to the appropriate, though accordion gadgets slide in vertically between class titles, somewhat than from to the appropriate of it. Now, at this level it’s price asking what objective the path of the icon ought to have? It ought to most likely function an indicator of the path of motion, or extra particularly, the place the person’s view might be moved to as soon as the icon has been tapped or clicked. In Apple Mail on iOS, for instance, the chevron pointing to the appropriate maps to the motion of the person’s view from left to proper.
Having a mapping between the path of the icon and the motion of the person’s view appears affordable, however since totally different interfaces behave otherwise (with mysterious icons usually taking part in thoughts video games with customers) not everyone might be anticipating this habits. So ultimately, it doesn’t actually matter what you do as a designer: a method or one other, you received’t be capable of match the expectations of some of your customers. When designing, we are inclined to concentrate on what we’re designing, however even when we’re extraordinarily constant in our UIs, our customers will include expectations influenced by their experiences on web sites we’ve by no means even seen. The key, then, is to be as resilient as potential and supply a straightforward, easy restoration in case the expectations aren’t met.
So wanting again on the selection of the icon then, if the accordion gadgets slide in vertically, intuitively it appears protected to use any of the icons listed above besides the icon pointing to the appropriate. The solely concern to contemplate right here can be if the icon you select is already overloaded with one other which means in a special context — for instance, in case you’re utilizing a plus icon to focus on the components of a bundle deal in a pricing plan (the place the plus isn’t clickable), after which use precisely the identical plus icon for the accordion. In such a case, it’s higher to keep away from utilizing precisely the identical icon for various functions as it’d trigger confusion.
Is all of it cleared up then? Well, probably not.
Let’s take into consideration the anticipated interplay for a second. While the arrow and chevron normally function cues for change within the indicated path, the plus signifies addition and enlargement. In each circumstances, the change can occur in numerous methods: a faucet on the icon causes both an overlay with navigation gadgets showing above the content material, or the gadgets to slip in vertically (not horizontally). So far so good.
However, when a person lands on a web page, initially they don’t know in the event that they’ve landed on a long-scrolling web page with hyperlinks leaping to some components of the web page or only a “regular” web site with sections current on their very own separate pages. Quite usually, an arrow pointing down triggers jumps to sections inside the web page, somewhat than increasing navigation choices. It’s doubtless that the person may need been disoriented prior to now, being dropped at a bit of an extended web page after which returning again to the highest of the web page, and persevering with from there.
As a consequence, in case you select to make use of an arrow, you would possibly find yourself with some customers anticipating to be scrolled right down to that part of the web page, somewhat than see subitems sliding in between classes. Thus, the chevron appears to be a safer and extra predictable choice; in case you select to make use of it, then level it down in a collapsed state and level it up when expanded. For the plus icon, you would select between the minus icon or a detailed icon as a substitute.
So, what does all of this imply for us, as designers? First, if accordion gadgets are supposed to slip in horizontally from left to proper, it’s protected to make use of an arrow pointing to the appropriate. Secondly, if accordion gadgets are supposed to slip in vertically from prime to backside, both a chevron pointing down (not arrow!) or a plus icon would possibly work nicely.
With this in thoughts, a selection of the icon needs to be a fairly easy resolution. But relying on how shut that icon is to the class title, it’d trigger confusion, too. Now, what choices do we have to think about when selecting the place of that icon?
Choosing The Position Of The Icon Link
Options! Nevermind which icon you’ve chosen, you would select to put it a) to the left of the class identify or b) to the appropriate of it, or c) align the icon alongside the appropriate fringe of your complete navigation merchandise bar, spacing out the icon and the class identify.
Does the place matter? Actually it does. According to Viget’s “Testing Accordion Menu Designs and Iconography33,” some customers are inclined to concentrate on hitting particularly the icon, somewhat than your complete navigation bar. There is an easy motive why it occurs: prior to now, some customers may need been “burned” with various implementations of the accordion. On some web sites, the class title doesn’t set off enlargement and as a substitute goes straight to the class. In different implementations, a faucet on the navigation bar doesn’t trigger enlargement nor soar into the class — it does completely nothing.
Although we’ll in fact design your complete space to be successful goal, as not each navigation has this habits, some customers received’t know in case your navigation is among the “bad ones” or “good ones” till they really click on on it (or hover over it). As hover isn’t all the time obtainable, hitting the icon simply appears to be a safer wager — a click on on the icon will virtually all the time set off the anticipated habits. That’s an necessary element to know when designing an accordion.
Across numerous interfaces and implementations, it appeared that with the icon positioned to the appropriate of the class title, customers select to concentrate on the icon extra usually than if the icon is positioned on the left (the place customers click on on the class’s title or the empty bar). However, some customers nonetheless have a tendency to decide on the icon. Consequently, it’s a great resolution to make the icon massive sufficient for snug tapping, simply in case — no less than 44×44 pixels in measurement.
Left-aligned, right-inlined or right-aligned? It doesn’t appear to matter that a lot. But when you’ve got a bunch of accordions (possibly residing in a navigation menu), with the size of class titles various so much, toggling the accordion states throughout many sections would require barely extra focus than simply working down the navigation bar from prime to backside. It’s simply that the mouse pointer or finger must be repositioned on a regular basis to hit that fancy icon! Also, if the icon is right-inlined, on a slender display the finger would want to journey throughout the navigation space, obfuscating the view. With the icon positioned on the appropriate fringe of the bar, this concern can be resolved.
But if the icon is aligned to the appropriate fringe of the bar, we nonetheless must be cautious to not place it too removed from the class’s identify. Visually, it needs to be apparent that enlargement pertains to the class; so, in several viewports, the place of the icon may change to hold the visible connection apparent. Also, the icon may turn out to be barely bigger on wider screens. This choice appears to be preferable for a bunch of accordions, however doesn’t actually make an enormous distinction for a single accordion — nicely, until your information proves in any other case.
Designing Interaction For The Accordion Link
However, even with all these tremendous particulars out of the best way, the interplay nonetheless raises some questions. Let’s assume that the class title is left aligned and the icon is aligned to the appropriate fringe of the bar. Following up with the dialogue above, what ought to occur when a person clicks on the class identify or on the icon or on the empty area in between? Should all of them set off enlargement or ought to they serve totally different functions?
Well, we could be fairly sure about one factor: When the person clicks on the icon, they’re most likely anticipating some type of enlargement, so a faucet on an icon absolutely ought to immediate enlargement. The class title, nevertheless, could possibly be clicked with the intention of leaping straight to the class or with the intention of increasing.
If the class title triggers enlargement, we positively want to offer a hyperlink to the class within the sub-dropdown menu to let customers soar proper to that part (similar to “All items”). That signifies that the person’s journey from the entrance web page to a class would possibly trigger confusion as a result of they wouldn’t count on to want an additional faucet when clicking on the class title. However, restoration in that case is clear and doesn’t actually power person to revive the earlier state as they will proceed instantly.
If the hyperlink to the class within the accordion is clear, it received’t really feel disruptive, whereas leaping to a class as a substitute of getting to develop the navigation merchandise after which return again would possibly really feel disruptive. That’s why it’s most likely extra affordable to have each the icon and the class title triggering enlargement. It’s simply much less obtrusive this fashion. Should this interplay occur in between the class title and the icon as nicely? Some designers would possibly argue that when a person faucets on the realm when navigating the location, they may not need enlargement however somewhat “anchor” the mouser pointer to start out scrolling on the web page, and consequently it feels disruptive. That’s potential, in fact, nevertheless it’s unlikely to occur if the person chooses to open a navigation menu to discover the navigation choices.
Accordions are sometimes used for playing cards, and relying on the viewport’s width, playing cards could be fairly extensive, so whereas some customers will desperately attempt to hit the icon, a few of your customers might be used to collapsing and increasing playing cards by tapping on the empty space within the bar. Other customers might be used to the empty space serving no objective in any respect and can simply ignore it. Only few will count on the bar to function a hyperlink to the class. In our checks, it proved to be much less complicated to have empty area set off enlargement, somewhat than — nicely, frankly, anything, in order that’s what we select to make use of, too.
But what in case you do need the class title to be linked straight to the class? One concept can be to carry readability by having two visually distinctive parts that “hint” on the boundaries of parts — for instance, with totally different background shade for the icon and the class title (see the instance above). In our experiments, we couldn’t discover any change in habits and expectations — some folks will nonetheless click on on the class and marvel what occurred. Again, having the part linked throughout the expanded accordion appears to be a safer wager.
Good sufficient? Well, we aren’t there fairly but. What if the person faucets on the icon for enlargement however there isn’t sufficient area on the display to point out all subitems? Somebody in your staff would possibly counsel to robotically scroll up the web page to ensure that the expanded space is displayed on the very prime of the display. Is it a good suggestion?
Whenever we attempt to take management away from the person, that call must be completely examined and regarded. Perhaps the person is focused on viewing a number of sections without delay and needs to rapidly soar between the contents of those sections. Rather than making the person marvel in regards to the auto-scrolling or leaping habits after which scrolling again to revive the earlier state, it appears much less obtrusive simply to maintain issues as they’re, to depart the choice as much as the person, as they will scroll down if needed. Not many customers will count on the soar to the highest — not interrupting the movement or maybe having a permalink to the part (if it’s actually prolonged) appears to be a greater choice.
And then one other query arises: If one part is already expanded, and the person clicks on one other part, ought to the primary one collapse or keep as is? If the primary part is collapsed robotically nevertheless it’s not fairly what the person hoped for, they might all the time open it once more, however they wouldn’t be capable of scan or evaluate each classes concurrently. If the part stays expanded, they must actively shut the class they don’t want. Both choices appear to have affordable use circumstances.
The nature of an accordion would name for automated collapsing, nevertheless it won’t be the best choice by way of usability. For accordions with many gadgets, we have a tendency to depart sections expanded, as a result of the leaping round that happens because of panels closing and opening on the similar time is just too noisy. Hence, alternatively you would present a “collapse all”/”develop all” button, which could be very useful when designing a schedule or an in depth desk. If there aren’t that many gadgets, then the part could possibly be collapsed by default as a result of the soar can be minimal. (Please discover that the part would positively collapse for horizontal accordions — maintaining it open simply wouldn’t make sense.)
And then there’s something else. Nevermind the selection of icon or its place, each time an accordion is expanded, it needs to be straightforward to instantly collapse it. This interplay shouldn’t require any further motion of the mouse cursor or finger — similar to with another hide-and-reveal interplay. This signifies that the icon for collapsing and increasing ought to in fact change when activated, however its place ought to stay precisely the identical, permitting for an on the spot toggling of the accordion’s state.
Wrapping Up Link
Phew, that was a prolonged examination of a seemingly apparent design sample. So, how will we design the proper accordion? We select an icon that signifies enlargement (chevron pointing down or a plus icon), make it massive sufficient for snug tapping and place it throughout the appropriate fringe of the bar. The whole navigation bar triggers enlargement — with sufficient padding across the bar to toggle the states and a hyperlink to the class’s principal web page throughout the accordion’s class.
If we do select to make use of a chevron, the path ought to change on faucet, and if it’s a plus icon, it may simply transition into an “—” or “x” to point collapsing. To hold the interplay even clearer, we are able to use delicate transitions or animations that may slide in and slide out class gadgets.
Of course, your answer is likely to be very totally different as your context is likely to be very totally different as nicely, so if you’re in search of another answer, beneath you’ll discover some questions we all the time ask when designing an accordion.
Accordion Design Checklist Link
- What icon will you select to point enlargement?
- What icon will you select to point collapsing?
- Where precisely will you place the icon?
- How do you design a class title?
- How do you point out collapse and expanded states (past the icon)?
- What occurs if the person clicks on the class?
- Should the accordion include a hyperlink to the class’s principal web page?
- What occurs if the person clicks on empty area?
- Should an expanded part collapse robotically when one other part is chosen?
- What if there isn’t sufficient area to show all gadgets?
- Should you’ve gotten a “collapse all/open all” hyperlink or button?
- How will the interplay appear like when accessing the accordion through keyboard-only?
The stage of consideration required for a element as seemingly established and predictable as an accordion seems to be an virtually endless story of design experiments and usefulness periods, as a result of there are only some established tips for the looks and interplay of that element. While constructing an accessible accordion isn’t tough46, designing an accordion that’s universally understood isn’t that straightforward. Consequently, customers usually really feel misplaced as a result of their expectations aren’t matched or as a result of the interplay interrupts their movement. Our job is to cut back friction and ensure it occurs as hardly ever as needed. With a forgiving and resilient design we are able to obtain simply that.
Perhaps you had a really totally different experiences than those talked about within the article? Let us know within the feedback to this text! Also, when you’ve got one other element in thoughts that you simply’d like to have coated, tell us, too — we’ll see what we are able to do!
Stay Tuned! Link
This article is a a part of the brand new ongoing sequence about responsive design patterns right here, in your actually Smashing Magazine. We’ll be publishing an article on this sequence each two weeks. Don’t miss the subsequent one — on fancy (or not so fancy) date pickers.
Ah, focused on a (printed) guide protecting all the patterns, together with the one above? Let us know within the feedback, too — maybe we are able to look into combining all of those patterns into one single guide and publish it on Smashing Magazine. Keep rockin’!
(il al yk)
- 1 https://www.smashingmagazine.com/2016/05/smart-responsive-design-patterns-or-when-off-canvas-isnt-good-enough/
- 2 https://www.smashingmagazine.com/2016/02/design-mock-ups-need-dynamic-content-tools-plugins/
- three https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/
- four https://www.sarenosolutions.com/wp-content/uploads/2017/06/designing-the-perfect-accordion-smashing-magazine.png
- 5 http://schoolfinder.nyc.gov/
- 6 https://www.sarenosolutions.com/wp-content/uploads/2017/06/1498046702_887_designing-the-perfect-accordion-smashing-magazine.png
- 7 https://nsb.no/bestill/velg-togavgang?to=Oslo+Lufthavn&from=Oslo+S&departureDatetime=2017-05-22%2018:00&departureSearchForArrival=false&returnSearchForArrival=false&petFree=false&passengers=1&noStairs=false&passengerType1=1&bookingPassengerCategorySpecial_11=0&toStation=220000&fromStation=100000&turnOnly=false&selectedIndexOut=0f
- eight https://www.sarenosolutions.com/wp-content/uploads/2017/06/1498046702_968_designing-the-perfect-accordion-smashing-magazine.png
- 9 https://online.fahrplan.zvv.ch/bin/query.exe/dn.html?ignoreTypeCheck=yes&S=Zurich+Airport&REQ0JourneyStopsSID=A%3D1%40O%3DZurich+Airport%40X%3D8562801%40Y%3D47450064%40U%3D85%40L%3D008503016%40B%3D1%40p%3D1494925838%40&REQ0JourneyStopsS0A=255&getstop=1&REQ0JourneyStopsZ0A=255&Z=Lugano&REQ0JourneyStopsZID=A%3D1%40O%3DLugano%40X%3D8946874%40Y%3D46005506%40U%3D85%40L%3D008505300%40B%3D1%40p%3D1497341134%40&date=20.6.2017&time=14%3A09&REQ0HafasSearchForw=1
- 10 https://www.ableton.com/en/shop/push/
- 11 https://www.ableton.com/en/shop/push/
- 12 https://www.smashingmagazine.com/wp-content/uploads/2017/05/ableton-accordion-large-opt.png
- 13 https://slack.com/pricing
- 14 https://www.sarenosolutions.com/wp-content/uploads/2017/06/1498046702_246_designing-the-perfect-accordion-smashing-magazine.png
- 15 https://www.sarenosolutions.com/wp-content/uploads/2017/06/1498046702_323_designing-the-perfect-accordion-smashing-magazine.png
- 16 https://www.slack.com/pricing
- 17 https://www.smashingmagazine.com/wp-content/uploads/2017/06/apple-mail-large-opt.png
- 18 https://www.smashingmagazine.com/wp-content/uploads/2017/06/apple-mail-large-opt.png
- 19 https://www.sarenosolutions.com/wp-content/uploads/2017/06/1498046703_730_designing-the-perfect-accordion-smashing-magazine.png
- 20 https://us.leica-camera.com/Photography/Leica-M/Leica-M10
- 21 https://us.leica-camera.com/Photography/Leica-M/Leica-M10
- 22 https://www.sarenosolutions.com/wp-content/uploads/2017/06/1498046703_780_designing-the-perfect-accordion-smashing-magazine.png
- 23 http://www.tifwe.org
- 24 https://www.smashingmagazine.com/wp-content/uploads/2017/06/chevron-qso-large-opt.png
- 25 http://ourstory.qso.com.au/chapter/1970-to-1977
- 26 https://www.smashingmagazine.com/wp-content/uploads/2017/06/chevron-qso-large-opt.png
- 27 https://www.smashingmagazine.com/wp-content/uploads/2017/06/arrows-papilon-large-opt.png
- 28 https://live.papillonsdenuit.com/
- 29 https://www.smashingmagazine.com/wp-content/uploads/2017/06/arrows-papilon-large-opt.png
- 30 https://www.viget.com/articles/testing-accordion-menu-designs-iconography
- 31 https://www.viget.com/articles/testing-accordion-menu-designs-iconography
- 32 https://www.sarenosolutions.com/wp-content/uploads/2017/06/1498046703_914_designing-the-perfect-accordion-smashing-magazine.png
- 33 https://www.viget.com/articles/testing-accordion-menu-designs-iconography
- 34 https://www.smashingmagazine.com/wp-content/uploads/2017/06/belvedere-accordion-large-opt.png
- 35 https://www.smashingmagazine.com/wp-content/uploads/2017/06/belvedere-accordion-large-opt.png
- 36 https://www.smashingmagazine.com/wp-content/uploads/2017/06/premier-league-desktop-opt.png
- 37 https://www.premierleague.com/tables?co=1&se=54&mw=-1&ha=-1
- 38 https://www.smashingmagazine.com/wp-content/uploads/2017/06/premier-league-desktop-opt.png
- 39 https://www.sarenosolutions.com/wp-content/uploads/2017/06/1498046703_16_designing-the-perfect-accordion-smashing-magazine.png
- 40 https://www.sony.com/
- 41 https://www.sony.com/
- 42 https://www.smashingmagazine.com/wp-content/uploads/2017/06/sony-accordion-large-opt.png
- 43 https://www.sarenosolutions.com/wp-content/uploads/2017/06/1498046703_354_designing-the-perfect-accordion-smashing-magazine.png
- 44 https://www.sarenosolutions.com/wp-content/uploads/2017/06/1498046703_198_designing-the-perfect-accordion-smashing-magazine.png
- 45 https://www.sarenosolutions.com/wp-content/uploads/2017/06/1498046703_3_designing-the-perfect-accordion-smashing-magazine.png
- 46 http://heydonworks.com/practical_aria_examples/#progressive-collapsibles
↑ Back to prime
Tweet itShare on Facebook