0

I have a mobile website which shows multiple data tables. Rather than showing all of these tables, I have put them into an accordion, so that the user can click on the one that they want to open. However, all you can see is a long line of buttons:

buttons

Can anyone suggest a way to make this look better?

Many thanks in advance.

  • Does everybody use all databases? – DarrylGodden Aug 24 '17 at 10:07
  • Sorry, I meant to write data tables. Yes all buttons open a table! – emma.j Aug 24 '17 at 10:08
  • That's not what I meant, do all users need to see all 5 tables? – DarrylGodden Aug 24 '17 at 10:09
  • 1
    Sounds, to me, like you need to go through an information architecture process. I find it hard to believe that all 17 tables hold equal value for all users, I could be wrong. – DarrylGodden Aug 24 '17 at 10:27
  • 2
    Well they either respect your expertise or they don't. – DarrylGodden Aug 24 '17 at 11:06
3
  1. Ensure that the colours you are using provide enough contrast. Currently the orange background you have selected does not offer enough contrast. (according to http://contrastchecker.com/)

  2. Make it obvious that the "accordion" options are expandable. People usually go for a downwards arrow icon or a link that says "view more".

    Examples:

enter image description here enter image description here

  1. If users do not have the need to compare data between tables, add a functionality where only one table is open. That way if the user opens multiple tables the screen doesn't turn into a long scrolling trip for the user.

  2. Besides that, as other people suggested, ensure that the user sees only tables that are applicable to her and / or have data to view.

2

I'm not sure if using accordions is the right solution. Consider what you're actually presenting to the user. It's a list of labels that are linked to individual detail pages with content that relates to the label presented. You could easily have a list and include some overview information in the list row as well. Check out Robinhood. On the right you can see the list view, almost exactly the same concept, and on the left you can see the detail view.

enter image description here

You could also alternatively have one single view with tabs for each of the individual buttons. Check Google material's usage of tabs.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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