How to simultaneously open pages from different places in the hierarchy in the desktop app?

Question

We have a desktop app where user has to enter information on different pages.

All pages in the app are placed in a hierarchy. For example:

• Item 1
  • Item 1.1
  • Item 1.2
• Item 2
  • Item 2.1

But you can also open Item 1.1 from Item 3.

Sometimes user needs to open different pages simultaneously. For example, to copy information from one item to another.

How can the user open different pages simultaneously and still see his place in the hierarchy, and the way the user took to get to this page?

In the website we have tabs that are not connected to the web-site navigation. But this is not the web, but an app. Has anyone encountered this problem?

Answer 1

I would take my cue from the way IDEs (development tools) do it- many support the ability to "split" the current view into two windows so that two different items can be seen at once. If you think of your outline as the tree of files in the IDE, the use case is very similar.

Here is a video illustrating how window splitting works in Eclipse: https://vimeo.com/2862316

If you are able, you could even build your desktop app on top of Eclipse RCP and use their existing fancy windowing implementation.

Answer 2

Try using a pattern of hierarchical breadcrumbs combined with backlinks (sometimes found in eCommerce sites).

I'm not sure of the other constraints of your design (or the business domain of this app), but baymard has done some interesting work looking at breadcrumbs and history (it relates to the web, but I know you have a desktop app).

Typically, breadcrumbs are hierarchical. The advantage is that users given a specific URL can land on a page and see where they are in the hierarchy. (especially good if you have non numerical hierarchical titles that indicate major and minor versions or nesting)

Normally people rely on the Back button for historical context of where they came from. It sounds like you have the app which is a bit of a different case.

However, some eCommerce sites are dealing with the fact that users might come to a page as a result of filter and search.

Having a historical link allows the preservation of filters (or the page/object you came from which is outside the hierarchy e.g Item 1.1) users might still need context for. I'm not sure if this applies to your case though...

They advocate for at least a placement of a 'back to results':

Alas, breadcrumb links often don’t work like the browser “Back” button as they are typically hierarchy-based, whereas the web browser’s “Back” button is history-based (that is, it’s based on the user’s navigation path). Consequently, any previously applied filters and sorting options are lost when the user navigates back using a hierarchy-based breadcrumb. This is where history-based breadcrumbs enter the picture. When the breadcrumb is history-based it sends the user back to their previous page, which is often not the plain category list – for example the user may have filtered by a product attribute or applied a different sorting direction, or maybe even entered the product page in a non-linear fashion

See the history link in the screenshot below, positioned close to the hierarchy:

Try adding both for testing and assign users tasks where they enter from a specific window, and have to navigate to other levels to perform tasks on other related pages (but that are located outside the strict hierarchy).

Answer 3

Maybe you can try Photoshop/Safari approach of opening different files/websites into different pages/tabs while having the page navigation on the left. At any point, you can click on any page tab to either close or view.