23

I'm currently working on a web application where the pages will open in different tabs. And I'm curious which UX is better:

A) tabs that open directly on the application page

B) tabs that open as browser tabs

enter image description here

Improve this question
6
  • 10
    Why do you feel like users will want to have tabs on your webapp?
    – user67467
    Commented Jul 26, 2021 at 17:40
  • 1
    why not both? (i.e. make it so the user can go either route)
    – Michael
    Commented Jul 27, 2021 at 2:53
  • 2
    Are those different instances of the same type (i.e. multiple different templates, logically separated by each other) or are those different parts of one document (like worksheets in a spreadsheet)?
    – Tim
    Commented Jul 27, 2021 at 10:23
  • it will be different part from on application. For example, initial page is list of worksheets or spreadsheet. And then user can open each in different tab, or page
    – jimmytedesky
    Commented Jul 27, 2021 at 10:26
  • 1
    IF you need tabs, use the tabs people are already used to: browser tabs. If the user wants to keep them organized in a separate window, they're free to, and they can also split them across monitors, along with many other benefits.
    – Cullub
    Commented Jul 27, 2021 at 19:44

7 Answers 7

Reset to default
21

It's not a matter of better, it's what is the problem trying to be solved.

I don't have any real details about your use case, but you can see some logic applied across a range of domains.

A: Open in application tab

  • This allows for a feeling of continuity inside the application.
  • These tabs are usually located in subnavigation, so they provide specific context about which 'place' they belong to in the application. They are usually different instances of the same entity type, similar to your example of invoices.

B: Open in new browser tab This pattern happens a lot in domains where the content is used for comparison.

  • Incident management, where you may have several different view alterations of the same data, but comparing it on different timescales, or drilling into different details
  • This also allows people working across related records to throw together an ad-hoc 'dashboard' on a large monitor, piecing several browser windows together to get a larger picture.
  • Open in new browser tab is often used as a 'jump off' to view related content (or different content related to an entity or slice of time) w/o leaving the current view in the app.
Improve this answer
7
  • 11
    Browser tabs have convenient shorthands (Alt + digit on Linux, Ctrl + digit on Windows).
    – Simon Richter
    Commented Jul 26, 2021 at 16:57
  • 1
    @SimonRichter I don't have a *nix setup at hand, but the Windows version is next to useless because in both FF and Chrome Ctrl+23 shows tab 2 followed by tab 3 as opposed to tab 23; and would only be marginally less useful even if I could navigate directly to any of the 20-50 tabs I have open because counting that many would take longer than moving my hand from the keyboard to mouse, clicking on he tab, and returning to the keyboard.
    – Dan Is Fiddling By Firelight
    Commented Jul 26, 2021 at 18:11
  • 4
    @SimonRichter Additionally, browser tabs often has functionality such as dragging the tab out into its own separate windows. You can of course emulate all of this, but it's extra work.
    – Michael
    Commented Jul 27, 2021 at 2:43
  • 3
    Separate browser tabs can also be moved to separate windows, and therefore separate screens. As someone who has implemented a webapp that emulated this behavior with internal tabs, I can tell you in no uncertain terms that if your users want this functionality—say, to compare things in one tab against another and have a full screen for each—you want to let the browser/OS handle it, you do not want to try to implement it yourself.
    – KRyan
    Commented Jul 27, 2021 at 14:23
  • 2
    @DanIsFiddlingByFirelight ctrl+tab and ctrl+shift+tab to cycle forward and backward through tabs starting from the current one, regardless of number.
    – user3067860
    Commented Jul 28, 2021 at 16:05
5

Overall my opinion is that using browser tabs would be the more familiar experience for the user and easier for them to work with. Absent compelling reasons to use in-app tabs, the overhead of implementing them and the potential confusion to the user seem like good reasons to avoid them.

Some thoughts on preferring browser tabs:

  • the user is already familiar with browser tabs
    • they may prefer to switch between tabs using the shortcuts and ui they're familiar with
    • they may have browser extensions for organizing and selecting tabs
  • features like rearranging tabs, handling cases where the number of tabs overflows the available space, dragging tabs out into new windows, grouping tabs, closing multiple tabs (eg. all tabs to the right) are already implemented by the browser and may be desired or expected by the user

Some reasons you might want application tabs

  • If the webapp might also be deployed as a desktop app, then in-application tabs might be the best option to maintain a consistent experience
  • If the application performs background work such as requests to keep the UI up to date and the application state in sync (logged in status, notifications, etc), then it might be reduce the resource usage on the client machine to have just a single tab with the application running. Of course, background work could be paused when a tab loses focus, but that could result in a window of time where the user sees the application with outdated state when returning to an inactive browser tab
  • ability to extend tab functionality within the application
    • eg. Intellij has settings to limit the number of tabs that are open and allows configuring how tabs are closed when the limit is reached
    • allow users to save a configuration of opened tabs.
  • ability to share state more easily between opened tabs

Some screenshots of the settings Intellij has for its editor tabs to give an idea of the type of configuration you can offer your users with a custom implementation:

Improve this answer
4

The tabs belong to the application, not the browser, a browser is a different application.

Answer:

A – Tabs that open directly on the application page

Improve this answer
11
  • 5
    Same logic would apply to StackExchange, and yet it does not reimplement tabs itself.
    – Denis
    Commented Jul 26, 2021 at 13:29
  • 14
    Hard disagree. People are already familiar with the concept of tabs in a browser. I see no reason for the application to force me to use their re-implementation of tabs, simply "because".
    – MechMK1
    Commented Jul 26, 2021 at 17:01
  • 2
    @Denis when does stackexchange use tabs?
    – user67467
    Commented Jul 26, 2021 at 17:38
  • 12
    I don't understand these comments. StackExchange doesn't have any need for tabs, thus it doesn't implement any. But Google sheets has separate tabs-per-spreadsheet (implemented in its own webpage), and imo strongly benefits from that.
    – user67467
    Commented Jul 26, 2021 at 21:01
  • 6
    I upvoted this answer because it makes sense to me. If your app inherently needs some kind of tabbing—spreadsheets, coding IDE—it should be implemented in the app.
    – user67467
    Commented Jul 26, 2021 at 21:06
4

That depends on how tabs/pages are related in your application; but speaking of a more general scenario:

Are the tabs related amongst them i.e. different parts of the same information? Or are them different instances of the same page with different information?

In the former, tabs inside the app make sense, while in the latter navigator tabs (or "different windows") are more like it.

Using your sample image about invoices:

  • If tab1 is product info and tab2 is payment info and tab3 is shipping info, all from invoice F00001, then they should appear as tabs inside the app (UNLESS each tab is a completely different process)
  • If tab1 is info from invoice F00001 and tab2 is info from invoice F00002 and tab3 is info from invoice F00003, they should appear as different pages. It's up to both the navigator and the user wheter they'll be grouped as tabs in a window or as separate windows.

But then again, it completely depends on your application and how the information between pages is related.

Improve this answer
2

Application Tab

  • If you need some special/specific behaviors that can't be (easily) replicated using browser tab. i.e.
    • Code comparison, search in all tabs/files,... like in web IDEs.
    • Detach/Attach, show/hide, lock/unlock tabs/windows positions in image editor.
  • If you need to synchronize data between tabs. i.e.
    • When I click Save, I want to save the data in all tabs, like the spreadsheet's sheets.
    • When I edit data in this tab, I want it to reflect in other tabs, like in enterprise app with huge multi-pages form.
  • If the tabs are simple, and are just a section in the app. i.e.
    • Normal e-commerce sites showing information in multiple tabs.
  • If the tabs are part of the bigger picture, and are intended to be consumed together (which you should make sure switching between them are quick). i.e.
    • Tabs/windows of a dashboard.
    • Crazy nested panes of MS Azure Portal (yeah, this is not really tabs), where switching between panes is much faster than open a new tab and goes through the SSO flow (sometimes it asks you to re-enter the password)
  • If you have technical limitation. i.e.
    • Web games, apps that use a different rendering engine (Canvas, WebGL).
    • You product owner want to block right click.

Browser Tab

  • If none of the above and you just want tabs for the sake of tabs.
Improve this answer
1
  • 1
    As this answer correctly points out, if your app has some inherent need for tabs, the app should house them. If you just expect users might open pages in different tabs at the same time... that's obviously a job for the browser.
    – user67467
    Commented Jul 27, 2021 at 11:57
1

Many users will use browser tabs in any case, because they are used to do so.

So whatever you do, you should verify that browser tabs will work correctly and having the site open in multiple windows or tabs will not break the application.

Now, since you have to do most of the work for B in any case, are there any remaining reasons to do A also? That will depend entirely on the application, but for most cases, I would say no.

Improve this answer
0

Potentially, it is desirable to use browser tabs, as they are closer to the user browsing experience, BUT if you are building your own web app then you would be better to implement your own tab system within your app, because for your user, it would be easier to use and keep focused on.

Using browser tabs will disrupt your user's experience within your web app, especially if he/she has some other web apps or web sites open in the same browser.

Improve this answer

Your Answer

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

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