0

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

Improve this question
3
  • 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, 2017 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, 2017 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, 2017 at 7:38

1 Answer 1

Reset to default
4

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
5
  • 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, 2017 at 8:37
  • 1
    @Harshith Keep the width same for all tabs, and let the data/content inside it adjust itself.
    – Dipak
    Sep 20, 2017 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, 2017 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, 2017 at 9:19
  • can i get your mail id
    – Harshith
    Sep 20, 2017 at 9:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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