3

I'm trying to make a sidebar/panel to filter products and overall I use minimalist/flat design. Here is the layout, collapsed and expanded.

enter image description here

My problem is, as you can see, the accordion button (filter button) is somewhat invisible, especially when it is expanded. I want users to realize that it can be collapsed again by clicking it again. Do you have any idea about its design to make it bold but still simple/minimalist? I don't think I can use regular rounded button design because it's not quite a button (?).

Thank you, any idea appreciated! :)

2 Answers 2

4

You can give a color to the background of content inside the accordion panel, such as #f4f4f4 or light grey which will improve the depth and more noticeable. enter image description here

5
  • 1
    +1 for this. I would also add a bit more whitespace between sections and more distinction between headings. Currently 'Filter' and 'Rrentang Harga' are the same font but the latter is a part of 'Filter'.
    – Martyn
    Jan 15, 2017 at 15:34
  • @Martyn Thank you, yeah you are right maybe she could change the typeface or change it like the "Etalase". Jan 15, 2017 at 15:37
  • Actually the font size used in 'Filter' and 'Rentang Harga' is slightly different. And I can't use the same size as 'Etalase' because that section is more important than the others but only can be positioned under the 'Filter'. Btw is it okay to put the chevron arrows unaligned (in accordion and in select element) just like that?
    – Dolorosa
    Jan 15, 2017 at 15:50
  • @Rosiana You can simply make them bold then? I think the chevron is okay, it is conventional put in the right though. Jan 15, 2017 at 16:01
  • 1
    @Martyn Okay, thank you! I also put a line on top of the filter accordion button tho. Accepted :)
    – Dolorosa
    Jan 15, 2017 at 16:08
4

An alternative is doing as Material design deals with expansion panels:

As you can see when a panel is expanded, it separates from the others to deal with this problem.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.