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.

Improve this question
7
  • Does everybody use all databases?
    – DarrylGodden
    Aug 24, 2017 at 10:07
  • Sorry, I meant to write data tables. Yes all buttons open a table!
    – emma.j
    Aug 24, 2017 at 10:08
  • That's not what I meant, do all users need to see all 5 tables?
    – DarrylGodden
    Aug 24, 2017 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, 2017 at 10:27
  • 2
    Well they either respect your expertise or they don't.
    – DarrylGodden
    Aug 24, 2017 at 11:06

2 Answers 2

Reset to default
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.

Improve this answer
0
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

Improve this answer

Your Answer

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

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