Mixing completely different design elements on a screen (Mobile App)



Just curious what you all think about mixing design elements.

Is there any reason why you can not have a screen that uses accordions to display information on a page that also uses large button links to direct a user to a different page?


Removed my previous reply as not relevant.

Regarding these large buttons, I see two reasons:

  • Accordion is best used to allow users to see the whole picture in a limited space and to disclose the needed information by request. The large buttons under the accordion turn out to be out of screen, thus not revealing the whole picture.
  • Address, Contact Info, Notifications Settings, Payment Methods, etc. are expected to be the items of Profile settings. Implementing them through different components violates the Consistency and standards golden rule. Similar actions should be triggered through similar patterns.


Very good reply, thank you. I agree and in my original design, the accordion headers were not as large as these and you could see the larger button links clearly on the screen. With the original design it was actually pretty nice because you had the accordions at a thumb reach as well as the button links.

My feeling was that having links different than the accordion headers would make it clear to the user that they are only links and have no other action.


If you want to combine accordion and button links on the page my suggestion would be to visually separate the accordion and the buttons group to emphasize their different meaning.


I agree! That’s the Gestalt Principle Proximity that you mean right?

@lincolnstudios Here is some more information about it. It might be useful. I would really make it two different areas, one is the accordion and the other are the links/buttons that will send you somewhere.


Yes yes, that’s right, I was thinking about the Proximity Principle.


Thank you all for helping with this, I think I have more than enough to actually try to get this page rebuilt with something to clearly separate the two sections but most of all, having context to back it up.