I would like to get some opinions. I need to make dialog with 3 tabs, every tab have different form, some very long and some very short. my dilemma is, if to make the dialog height change by the length of each tab or to make it the same height for all the tabs even if some of them will have large blank space (see the example...). If you have a examples of websites that use something similar i will be happy to see...
If you change the height, what is the effect on usability?
- The button area will jump about, when it should stay in the same place for consistency.
- The movement created by changing tabs could be very distracting for the user.
You probably don't want to change the height.
If you leave the height the same?
- There will be some tabs where there is empty space between the content and the button.
Not ideal to have lots of white space either, so what can we do about it?
Why do some screens need to be so long?
- Can you make them more concise? i.e. cut out fields that are no longer applicable due to previous selections?
- Can you split the long tab into 2 separate tabs?
- Would sub-tabs make sense for the longer screens?
- Are some of the options not applicable to all users? Perhaps you can hide them in a sub-dialog accessible via an "Advanced Options" button of some sort, or displayed automatically if the user selects a certain option?
You need to think about the above and then strike the best balance you can for your specific use case.
I don't have data to back up my answer but will leave my personal experience as UX practitioner and user.
In case you can't rearrange form elements to make the overall form height be more consistent across all tabs, you are left with the dilema described in your question.
- Make the tab container height change and button position vary across tabs, or
- Make the same height for all the tabs even if some of them will have large blank space
I'd say go with the first one. Let the tab height change.
The visual rhythm––consistent padding––by which form elements are laid out is more important than consistent tab height, therefore where each [submit] button is. Users scan content from top to bottom and 'expect' to see a consistent sequence of elements followed by a [submit] button. In other words, to present the button right after the last form field, and not make users wonder, is key. Also, this solution yields a smaller number of long tab containers (only tab 3 in image below).
The blank space option in case you decide to try fixed heights is, in my view, sub-optimal, and here is why:
- It makes all tabs unnecessary long right out off the bat;
- It makes users guess if there's a button in first place, or worst, makes them miss it completely;
- Error feedback might end up being far out of view (off of visible screen area).
Hope this image helps to visualize both solutions pros and cons:
Can you achieve best of both worlds (stable submit area but variable height)? Can you position the green submit area in the top right of all 3 tabs and then arrange the form into columns so that the user follows a down-then-over path through the forms and naturally ends up in the top right of the screen when they are finished?