User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
The options are as follows:
My client insists that option 2 increases affordance, but I’m not convinced. Has a best practice been established for this pattern?
To answer your question directly, I think typically the best initial state of any menu is closed. Also, whether or not an accordion menu is open or closed I think depends on the context in which it is used.
I think your client has a point but it's not concerning affordance. The affordance of 'expansion' and 'collapse' is provided by the arrow icons which appear next to the section headers in the accordion. You shouldn't need to provide more affordance for this unless your users prove to be unfamiliar with this pattern.
A defining feature of an accordion menu is that it appears as a vertical list when fully collapsed. Additionally, I question the appropriateness of a menu containing content and a Learn More link. What you show in your example doesn't appear to be a menu, but rather two separate accordion panels.
Putting these qualms aside however, I think the real problem your client may be speaking too is whether or not an accordion is the right component for the information you wish to display. An accordion is appropriate for screens with limited space. But by stacking two accordions side by side you are conceding that space is not a challenge. Additionally, the screen headline is Customer Benefits so the client may have the expectation that it would conform to common page designs which list benefits that are immediately visible. See the following examples of page designs featuring customer benefits taken from MailChimp Pro and Stencil.
First of all, I'm not sure about the "first two buckets open" thing... is that just because you have a two-column list of accordions (not something I commonly see)? Can the user open just ONE side, or does triggering one trigger both to keep them in sync? Finally, do they stay open until explicitly closed or do they "toggle", closing others when you open a new one in a given column?
Now, I have no idea what the rest of your page or site looks like, and I know nothing about your wireframes, users, or use cases, so I can't say any of this with authority, of course, so take it all with a grain of salt.
My concern with the two column thing is this: if the goal in opening the first two together is to keep them looking even, you are going to constrain the amount of content that can be in there, or you have to code them to open the same amount regardless of content. Even then, if the idea is to keep them looking even, you will need to control the height and/or content of every panel, which does not necessarily seem like a winning strategy. Along with that, I think having TWO items open to start might be more ambiguous and confusing to people than just one or none. I think that the two-column approach, while it might work in wireframe and mockup, will look lopsided and out of sync in practice, or will put constraints on your content, which a wireframe should generally not do. I also think that the two-column set of accordions is uncommon enough that just having them in a two-column format may rob you of some of the usual affordance of accordion panels.
I think a one-column approach may be your best bet... it is fairly standard for a reason. If the concern is vertical space, why not simply give those headers less padding and stack them in one column of accordions? That way you also have the option of having one open (make sure it is your highest traffic one! test that) and not unbalancing the layout.
As for open or closed affecting the affordance of the controls... I'm not really sure that will make much difference. If you have a stack of accordion headers with a common icon for expand-collapse, people will figure out they need to click on one to open it. Once they do, they won't be confused any more.
You are not wrong either ways - but collapsed menus are better for user in case there is no business bias.
Collapsed Version
If you want your users to have a fair opportunity and see all options in the menu before the pick one, go with this version. Let user's CHOICE drive their first click.
Expanded Options
If you want to persuade users and want them to chose some options more than the others, then expanded version is your way to go. By expanding menus, you are able to talk more about them than the others.
INTENTION vs INTERACTION
Expanded menu does a better job of explaining collapse/expand interaction - but users care more about their INTENTION than system's INTERACTION. In user's thought process, "WHY" comes before "How" and if you are addressing "WHY" first, you are on the right track. With this understood, users would want to know about all the options they have before wanting to know if interaction is collapsing/expanding. This aspect advocates all collapsed version is better than first two expanded ones.
Hope this answer your question.
