I have been working on a project where I had a case of showing a different set of data (different views) in different tabs. So I had to change layout size in each tab according to the dataset. Is it ok to change the layout sizes or does it cause inconsistency for the user.

Please check the wireframes attached and do the needful

when user switches from tab 1 to tab 2 there is a layout change hence the viewpoint of the user changes accordingly.

Tab 1 layout

Tab 2 layout

  • It will probably be a little jarring to see that happen. Is there a good reason why Layout #1 doesn't extend across the tabs above? – Steve Jones Sep 20 '17 at 7:28
  • some views have tables inside them hence large width and some has just small cards with basic info so small width – Harshith Sep 20 '17 at 7:29
  • Okay, but you can still lay them out to not jump around (maybe just the way you've done the sketches above). In general, okay to have different levels of complexity per tab, some tables, some just fields. If you have only very few fields on a tab, probably worth considering if they should migrate to another tab, rather than having their own. – Steve Jones Sep 20 '17 at 7:38

It does affect the user experience and can be very disconcerting.

Always keep the size of the container constant while changing the internal item placement and positioning.

Take the SE sites as a reference. Each tab; Questions, Tags, Users, Badges, Unanswered has different internal layouts but the surrounding container is always of the same size.

Notice that the outside container for all the 3 pages is of the same size while the items inside have been arranged accordingly. This really makes the experience of the website/application more immersive and easy

different SE UX pages with same container size

| improve this answer | |
  • In these examples, all views are 2 columned, but in my case data is never 2 columned. It is always a single set of data. I agree on this to this examples but what do i do in my case – Harshith Sep 20 '17 at 8:37
  • 1
    @Harshith Keep the width same for all tabs, and let the data/content inside it adjust itself. – DPS Sep 20 '17 at 8:47
  • in above examples, if you notice full width has been used so content can flow easily according to the screen resolution. but in my case, the text length cannot reduce more than 700px layout as it causes strain to the user for longer reading . so I need to keep width fixed and if I follow the above examples in my design there would be a lot of empty space and the user cannot focus on a content soi had to reduce layout size and grey out the area outside layout so the user can concentrate on content – Harshith Sep 20 '17 at 8:55
  • 1
    @Harshith - could you show a mockup with the type of data you have. I am sure the layouts can worked on to make them fit the same layout width – Shreyas Tripathy Sep 20 '17 at 9:19
  • can i get your mail id – Harshith Sep 20 '17 at 9:32

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.