3

The width is 1140px width. The content in tab 1 is more and takes width 1140px. so to maintain consistency can't change or make smaller width Suggest any other layout or better solution

Find attached wireframes Layout

wireframe

1
  • 1
    I don't see a problem with your design. I agree, keep the tab sections the same size. even if that results in great expanses of white space. Also you have the button near the fields. Bravo. – bloodyKnuckles Dec 26 '16 at 22:06
1

You could rearrange textbox 1,2 and 3 in columns. Also consider that fixed widths are almost inexistent right know so you should design the columns with proper responsive behavior.

3
  • Sorry I forgot to mention about it but the Tab is "Change Password". So It have 3 Textfield's as 1. Old password 2.New Password 3. Confirm Password. And I think it is not good UX to put these fields in columns – Rohit bhosale Dec 26 '16 at 17:20
  • Ohh it's a form, that change everything, in this case textfields should not be in columns, I think the whole component should not use the full width, it could be centered on the viewport or parent element. – Pablo Lobos Dec 26 '16 at 17:27
  • Centering will break the consistency. The form in tab 1 is left aligned. It cannot be center aligned because of large no. of textfields. Check this wireframe i.stack.imgur.com/6Vogl.jpg – Rohit bhosale Dec 26 '16 at 17:29
1

If you are in need of using the same card for both tabs (wide and short) your options are:

  1. Reduce the widest tab
  2. Keep empty space in the shortest tab

As you mention that Option 1 is not possible then you can only keep the long width in the short tab.

Empty space is not a problem in your design. So you can just keep it. The only thing is the action button (reset password) should be either on the right or on the left of the tab.

4
  • The container I have used for whole project is 1140px. So I have to maintain this card in this width. Also The "Tab 1" is having large number of textfields where as tab 2 which is "Change Password" is having only 3 fields. Have a look at this wireframe. i.stack.imgur.com/6Vogl.jpg – Rohit bhosale Dec 26 '16 at 17:34
  • The answer was according to that image. I don't find there is much problem with the empty space. It looks good to me. – Alvaro Dec 26 '16 at 17:37
  • Okay. Have a look at the first tab content and then 2nd. - - 1st tab i.imgur.com/APPZWUr.png - - 2nd tab i.stack.imgur.com/6Vogl.jpg – Rohit bhosale Dec 26 '16 at 17:42
  • You could display those inputs (billing add, zip, country etc.) one over the other, as you are doing in the password tab. But both options look good to me, either keeping the 1140px width or making it smaller. – Alvaro Dec 26 '16 at 18:01
0

From your comments on suggested solutions so far, it seems like this layout already works consistently within your sitewide style.

My only recommendation is this (based on how I've created forms in the past) : To better draw users' attention to the form, consider adding a slight gray background shade (#efefef or similar) to the forms (in all tabs), then set the tab container backgrounds to white. If padding is set on or within the form, not on the tab container, the white background only shows through when the form is not full-width. When this particular tab is active, white would be visible to the right of the form.

This would create a visual cue to the user that the form width is intentional. Also, grey color behind white form inputs is more visually attractive than white-on-white. If this looks off to you, though, keep the original. My suggestion may not look good, since you are already using grey as the background behind the tabs. Users expect consistency, and that's what you've given them. Good luck!

0

You can horizontally arranged three field, or a hand-drawn map is put in a blank area, in addition I think change the password and account to use the TAB is not reasonable.

0

If you prefer the form to use some more horizontal space, you can also consider placing the labels left of the fields. While there are some drawbacks to this (this article sums up the pros and cons nicely) your labels are somewhat of the same length so it shouldn't be too big of an issue.

0

I can suggest to set your inputs in an inner card in two ways:

  1. Accordion to login page of Yahoo!; let inner card at right side and add a note in left.
  2. Accordion to login page of Google; let inner card at middle.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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