I request some GUI advice ;-)

I need some advice for the dScribe project (I promise soon I will publish here the tool).

It's a web application and in many pages, I have to display or hide different part of the page regarding what the user choose to do.

The issue there is that I don't want to display a 'child' datagrid if an element in the 'parent' datagrid is not selected.

This looks simple to solve, but the grids are not nested !

They are disposed in different fieldsets.

What I have actually is what I call a GUI crisis or for a writer the blank page nightmare ;-)

Playing with hidden/visible panels is not good at all because it's look really bad to have some forms elements appearing/disappearing like the rabbit in the magician hat.

The other idea I have is to let the fieldset borders always visible, and a fake grey or blur  image of a grid in the middle.

The pros for this option is to keep a constant GUI but the cons is that I have to prepare many images regarding the different sizes I need.

Some ideas ?

 

3 Comments

  • I usually solve this sort of issue with tabs...there the child can be editied on a separate tab from the parent - not ideal as tabs shouldn't really depend on each other's content...but using the MS Webcontrols, you can enable / disable a tab in source...

    This is one of these things which is much easier in Winforms where you'd just spawn a separate child form. You can of course use this approach in web apps where you spawn a separate window - but I really dislike that approach (it's not a common practice).

    Scott

  • It's a very busy page. Does all of that content really need to be on the same page? It's very overwelming. I have to look left and right and up and down to find what I'm looking for. Where does one begin? What objects connect with what? Is nothing saved until I click the save button (hidden on the bottom left)?



    How about splitting out functionality so that each page does one thing. It might mean more clicks, but at least the user won't be confused as they use your software.



    Also, it looks like you are using images as functional links, such sissors and pencil. Often it's better to use text to avoid confusion as to what the icon does, and that the icon is even clickable. If you want to stick with icons, making the background transparent will show the gray background making it easier to see which icon goes with what row.



    Sorry if this wasn't the advise you wanted.

  • Hi Paschal,



    I agree with you on the fact that the GUI should stay uniform and should not show and hide big parts of the screen just like that !



    Here are my advices for you screen which is pretty heavy in terms of displayed informations :



    - For the "Sections" fieldset, try to vertical-align the combobox and the button.



    - I'd put the "Pages" and "Sections" fieldset on the same first row, and the "Versions" fieldset right under. And try to align the borders of the "Pages" and "Sections" fieldset.



    - I would also put numbers right before each fieldset Titles. This would help the user to know where is the order of the steps.



    - The "New" button (Versions Fieldset) and the "Submit" button (Elements Fieldset) should not be on the right... Above or below the datatable seems a good idea.



    - For your fake disable thing, why don't you use the disabled="true" attribute on your fieldset ? It would render it with the disable look. You can also use a CSS attribute (IE Specific Filter attribute) like : style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)". This will gray the object on which you apply this style. And when an element isn't selected in the parent datagrid, I'd display a simple sentence like "Please, select an element..." instead of the child datatable.



    But I have to recognize I didn't really guess how your screen does work :)



    And yes, I know, I'm very "maniac"... I don't know how to say it in English, but I know you know French.



    Hope my advices will be usefull !

Comments have been disabled for this content.