Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 1 down vote favorite

I'm designing a dashboard where each box on the board contains a data table. They have fixed height so not all records can be displayed. I used the scroll bar for each box so that users can see more data within each box. But I don't like it and didn't think it's easy to user. Any advice on how to change it? Btw, this will also need to work on mobile devices...

enter image description here

share|improve this question
Will they need to be looking at 4 lists at the same time? – VoronoiPotato Nov 27 '12 at 0:38
@VoronoiPotato Usually they don't but all boxes need to be shown on the same page. They only scroll one box at a time. – wcdomy Nov 27 '12 at 0:45
Will the user need to be able to compare the different lists? What kind of data is going in these boxes? Is the data similar from box to box? – VoronoiPotato Nov 27 '12 at 0:45
@VoronoiPotato No. They don't need to compare. They are interdependent. – wcdomy Nov 27 '12 at 0:51

3 Answers

up vote 4 down vote

One way to solve this problem in an elegant and unobtrusive way, is to add a "Load more" or "View more" link or action button at the bottom of the display area in each grid. Check out the mockup below.

enter image description here

The user can click/tap on that footer link to load/fetch more records. (Display a "loading.." message to provide feedback to the user on what's going on while you fetch the data in the background. This is what makes it unobtrusive).

enter image description here

Finally, just display the new set of records at the bottom of the existing set to make sure the user doesn't lose the previous set. So every time the user clicks/taps "View more", you can just keep appending to the already displayed set of records.

enter image description here

UPDATE: Based on the comment below, I've changed the design a little bit to ensure the size of the grid remains the same. Check out the mockup below.

The user can view only a specific number of records at any given time. He can hit the link at the top to see the previous "n" records or the link at the footer to see the next "n" records. (I've added the arrow icons for visual indication of previous and next set).

enter image description here

Hope that helps.

share|improve this answer
I think it looks great. But one of the requirements is that the height of the box will need to be fixed. Using your method will keep growing the height of the box, unfortunately... – wcdomy Nov 27 '12 at 1:31
2  
Why is that a requirement? A big part of UX is to question requirements. So many tend to be completely arbitrary. ;) – DA01 Nov 27 '12 at 7:08
I think this is a great solution to your problem. I find it unlikely that you have a requirement like "I want four data tables with all the information and I want to scroll in them". Perhaps the stakeholder said it in those words, but was that what he meant? In my experience, when someone asks for a dashboard, they want a fast and easy way to get up to date. To have a quick peak at key information. If they want more, you can make it accessible in a way, like simply using a link to a different page or the solution in this answer. – Misha Scholte Jan 20 at 17:39
up vote 2 down vote

My initial thought is to simply do away with the internal scroll bars. This is a dashboard, not an in-depth analysis. Pick a reasonable number of records to show per module and simply list them all out. The user can scroll the page to see them all. This would be much easier/faster than having to navigate individual scrolling panes.

However, the addition of 'has to work on mobile' adds a bit more complexity. A dashboard of this resolution (referring to data resolution) likely isn't all that useful on a phone. Instead, I'd suggest really focusing on the key data elements that need to be exposed on the surface for a mobile user. Would 5 records each be enough? If so, perhaps one scrolling page is acceptable. If it's 25 records each, then I'd consider not trying to place them all on one screen, but instead make it easy to navigate to each quickly. Perhaps swiping side-to-side to swap modules.

share|improve this answer
up vote 0 down vote

How about adding horizontal page scrolling?

I know it's not conventional, and highly undesired in the desktop environment, but with the right implementation it could work great on both platforms.

You can consider utilizing a carousel to scroll to further tables outside the scope of the screen. This would create an appealing browsing experience especially for the mobile/tablet viewers.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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