1

I have a page as below.

enter image description here

I have to show table with multiple input columns(> 30). in the region "input able with many coloumns"

One Idea is have arrows on right and left and navigate.

Another is have bread crumbs on top and use accesskeys to slide the columns below.

But with both the above the region seems cluttered.

The Meta data on left consists on simple stats like Sum, Median. I am thinking of collapsing it but the table has to be shown as it gives an insight needed for input.

The Region on the left is a master region. For which Sub-Region is like a Detail.

How should I Arrange my regions? Or what way to follow to have the input table not cluttered and optimized for keyboard navigation

Improve this question

2 Answers 2

Reset to default
1

As you write "table with >30 input columns", I assume the user to spend quite a lot of time editing this table. Tables with 30 columns tend to take up complete screens, so I think the design should change to give InputTable a page of its own. Below, I've written down some thoughts on getting MasterList, MetaData, and InputForm+SomeOtherRegion ouf of the way.

During this time, there is probably no need to look at the master list, or select other master items (which would change the entire contents of SubRegion, I understand). So when the user starts editing the input table, the master list can (and should) be moved off the screen. Depending on the the other stuff in SubRegion, you can even think about a full-page master list and a full-page SubRegion. If this is not feasible (because the user needs to switch master items while looking at InputForm and SomeOtherRegion), I would consider moving the InputTable to another full page.

Similarly, I would also move the MetaData out of the way. It takes horizontal space from the 30 columns, which will already be cramped on a regular screen without the MetaData pane. If the user needs to see MetaData while editing the InputTable, you might put them both onto an own page. Maybe the MetaData is shown on this page, and there's a link to navigate to the MetaData+InputTable page?

As you did not write anything about the number of rows in the InputTable, I assume there are only few (because the table is not tall in your design). If that assumption is wrong, you need to make vertical space by either collapsing SomeOtherRegion and InputForm, or by moving the InputTable to a page of its own.

Improve this answer
1
  • Thanks for the comments. I would remove the meta data part and show it with a visual, parallel in a region below or above the table.
    – WannaBeCoder
    Nov 15, 2017 at 9:42
0

I think we can categorise different coloumns into groups and use breadcrumbs (as you mentioned). Visually differentiate breadcrumbs by dividing that place by a line or different background light grey color to that section, to avoid clutter.

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.