Styling Accordions
Accordions are nifty pieces of UI — excellent for hiding secondary content, showing multiple tier menus, etc. They may be one of my favorite pieces of UI, now that I think about it.
As I was prototyping along one day, I put some chevrons from Font Awesome in to signify an accordion, without much thought to it. One of our designers came over and asked what I thought about using +/- icons rather than the chevron. I didn’t have any particular reason for using chevrons other than a personal preference, so I switched it out no problem.
I wondered though — what does the general population think? I put out a poll on both Facebook and in Designer Hangout.
My prediction was that it would run about 50/50. After all, both patterns are pretty common out in the internet, and maybe I would see a generational difference.
Turns out, there are some strong opinions! My favorite ones were those who had quite specific orders in which direction and types of icons were used.
59 comments later, I think I have a conclusion. It was a little tough to judge, because technically, chevrons “won”, but it was mentioned by multiple people that +/- was clearer, but aesthetically they liked >/v. So this is how I’ve decided to settle the issue.
I’ve made some slight adjustments from the image above — it was noted by more than a few people that the borders around the plus/minus indicated to them something more like adding or removing, and it could also be confused with zooming.
There was also a clear preference for right/down chevrons, rather than up down.
In the end, I did not notice a generational difference.
This was quite fun, and I hope to continue doing small polls and seeing if there are other “50/50” type UI choices that could be settled. Have any suggestions?
Ashley Crutcher is a Digital Designer at Intervarsity located in Madison, WI. She tweets at @ashleyspixels and enjoys cuddling with her cat, crafting, working out, and thinking too much about everything.
