0

The project I am making has tables in it. I am working on responsive now. Big tables that do not fit in a small device, I have given them vertical scroll.

So my tables look like this in desktop enter image description here

and in mobile it looks like this

enter image description here

The scrollbar appears when user touch on the table. I don't want to show scrollbar all the time.

I am thinking to give note below the table saying "Scroll the above table to see more content.".

What else I can do so that users can easily get to know about scrollable content and not miss the important content by mistake.

1

My first question is, are you able to change/modify the table on desktop?

For me currently it is a bit unclear what the goal of the table is. It looks like a table where the user can see the balance of an account (incoming/outgoing flow of money) (forgive me if I am wrong).

Yes I can change the table layout/structure

When I create an element in an application or a website, I always ask myself 'what question should be answered when the user looks or sees this element'. I will presume that this is indeed a table for the balance of incoming and outgoing cashflows.

As such I think it is best to highlight the difference between outgoing and incoming.

Example 1

This example has focus on all information in 1 table. enter image description here

Here you can click the 'outgoing' and it will dropdown to show the results.

Example 2

Here you have 2 different tabs with the information enter image description here

No I can not change the layout/structure

If you can not change the layout, it will be harder to make it user friendly. You can, as you mentioned put some text under the table. Another option could be something like this. enter image description here

You can put an icon in the darker area that hints you can scroll.

(I am sorry for the poor mockups, just started using Balsamiq as a mockup tool to test out)

  • I can not change table layout as it is an accounting format. liked your idea. upvoted :) – vaishali kapadia Jul 2 '18 at 7:34

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.