4

I am working on a webapp that is largely datagrids. When a row of the data grid is selected a detail pane slides up from the bottom of the app that displays various information related to the selected row. My issue is most of the information is also datagrids, usually with many rows and quite wide (wider than the browser requiring horizontal scrollbars). But occasionally I need to display more vertical information, such as a form. I had thought about having the form split into two columns when there is space but I have never found two column forms to be very usable. Do I have to suck it up and have a vertical form in a very horizontal space (with vertical scrolling) or is there an ingenious idea someone has that I haven't thought of?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Edit (additional info): Not shown in the mockup is a selector in the detail pane that allows the user to switch between a number of "pages" of information. Some of the detail pages are datagrids as they represent tabular information that is editable, while some of the detail pages are standard forms as they do not represent tabular information. All of the pages are expanded detail based on the selection in the main ddatagrid. To make things even more complicated the user can select more than one row from the main datagrid and make changes to the detail pages that will affect all items selected.

rdellara
  • 880
  • 8
  • 17

2 Answers2

2

I think the answer depends on how the form relates to the content of the row selected. All in all, I'd have to agree with @Majed about this particular layout being ineffective.

If the form is for editing the content of the row, I would suggest perhaps inline editing of the row's contents or a separate screen/dialogue for managing that content. Check out this article about table ui patterns.

Consider this:

Is it required that the user be able to see both the content in the original datagrid at the same time as the content below?

If not, you should consider a separate screen if the content below justifies it; otherwise a dialogue containing the info/form might be a decent solution.

As a side note, this has given me an interesting idea. It does require that the user doesn't need to be able to access information on the top table while interacting with data "below". I'm making a quick prototype. I'm going to toy around with this a bit, because it'd have to be done really well to actually work. A modal might be a better idea.

Its difficult to offer a decent answer without a better understanding of how the different information you want to display relates to each other.

Jordan Foreman
  • 161
  • 4
  • That prototype is interesting, but I'd still be very careful. It's still more information jammed in such small areas, it could make the user feel claustrophobic. But this is an interesting concept. I'd suggest that @rdellara toy around with the concept with more wireframing and user testing.

    Also, I agree with what you're saying Jordan!

     – UXerUIer Sep 05 '13 at 13:21
  • Thanks! And yeah, I debated even mentioning the prototype because it is in such a rough state. It would need some serious thought/work to just maybe be viable. – Jordan Foreman Sep 05 '13 at 14:45
  • Nah, it still is an interesting concept though! :D – UXerUIer Sep 05 '13 at 16:44
  • Thanks for the input. This project is beyond prototype and is receiving quite good feedback. However I have still not solved the vertical form issue. I have thus far managed to work my way around vertical forms. I agree with much of what has been said so far, but the users very much desire having both tables in view at the same time. – rdellara Dec 09 '14 at 00:38
  • Interesting concept. If the IA has been set, then not many options here, but to use visual cues, like different colors for the table and the secondary detailed view. – Eshwaren Manoharen Sep 06 '16 at 03:03
1

This sort of information layout is not elegant because of several reasons:

  1. Big amounts of data is shown in a small area
  2. The user has to scroll continuously to find what they want, which would be incredibly difficult to do if, say, they are looking for one row out of one hundred.
  3. How is the user going to search for data? How is the data going to help them search between all the grids? That can get really confusing and frustrating.

I highly suggest figuring out a way to put different sorts of data in different pages where someone can easily filter the data by a sort of search. Not only will they get more information in a bigger space, but they can also jump to where they want immediately. Additionally, make sure to have a way for the user to jump back to the top of the page if need being or possibly having a sticky navigation to make the scouring of the site easier.

Note: You will have to user test this to see if users get confused (with the current layout, I can easily see them getting frustrated) and make sure to build good information architecture because this is all information. Having everything at once with out allowing a user to sort or sift through it all can be too much to handle.

Best of luck!

UXerUIer
  • 5,485
  • 1
  • 23
  • 37