GUI Design pattern for module tabs where multiple tabs simultaneously in view



  • We are using a module tab pattern on a website which views financial information.

    Neilson (2016) specifies "Use tabs only when users don't need to see content from multiple tabs simultaneously". The GDS design system guidelines agree with this specifying "users will not need to view all the sections at once"

    We have multiple tabs each which hold financial or other relevant contextual data. Our users would like to be able to switch between these view quickly, but also put at least two side by side to be able to compare.

    We have tried using the natural browser and windows desktop behaviour to do this, but users do not find this intuitive and soon get lost.

    Is there a good GUI pattern that allows quick switching (as tabs does) but also allows side by side comparison, or are there better ways of solving the original need?

    For instance on the example below, the user might want to see past day and past year side by side, and have week and month close to hand (I know this isn't financial information - but illustrates the concept).

    Example tab pattern



  • Any switching between views will be demanding on brain cycles as it relies on retention of information. Also, if your users' exposure time to your interface is not high, the information will have to be scanned more often than would ideally be required, IMO.

    A table layout like yours may be better suited for vertical stacking, if you really want to leave the comparison up to a back-and-forth evaluation by the user. On a narrow viewport width, this will quickly become crowded if presented side-by-side.

    However, I'd advise you to first zoom out and recognize the functionality you're offering. Judging from the screenshot, you want to provide a comparison of data by a certain period. A graphic presentation of the data may be more useful in this case, which will allow you to plot multiple data points in the same view.


Log in to reply
 

Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2