1

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

1

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.

0

If the users only need to compare 2 tabs (not more) side by side, you can consider mimicking what windows platform do on their applications by producing a split-screen effect on the tabs.

Steps as follows:

  1. Dragging the tab to the side of the window
  2. The tab will occupy half the windows screen while the remaining tabs will move into thumbnail mode on the other half of the screen
  3. User to select the tab that they want to compare side by side
  4. Screen splits into 2 for viewers

Please bear in mind the tabs will look cluttered when you do this, have to be cautious on the amount of information that you're presenting on each tab for the comparison to be useful!

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.