1

I'm working on improving the UX of one of our web applications. This is an application that runs as an intranet app.

The old style basically was a simple menu on the left and the current page on the right. I'm currently redesigning it so that the right space is a workspace that allows multiple windows to be open at the same time.

My issue with this is as follows. Say a user is using the app in fullscreen mode (which is our recommended way of using it, and is how it is used most of the time). We noticed that some of our clients have to use some external tools, or simply reference an e-mail, at the same time, on one screen. They exit fullscreen and drag the browser (with our app) to one side. Normally, this works fine - however, since we're now going to allow multiple small windows that are resizable and draggable, this creates a problem with resizing the available workspace.

What is an acceptable way of handling this?

Below you can see the original workspace, and two possible solutions that came to mind. I'm torn between the two - example one seems useful if the user needs to a quick check and then return to their fullscreen workspace, while example two seems a lot more user friendly if the switch to a smaller screen is permanent or for a longer period (it saves the user having to reposition everything).

Here you can see a fullscreen workspace with multiple windows opened: Fullscreen workspace with multiple windows opened

Ex. 1: Now the window has resized, and we've kept all windows in place and at their original sizes. The browser's scrollbars allow the user to view all content. Resized window, keeping all windows in place and at original sizes - utilizing browser scrollbars

Ex. 2: Here the window is resized, and all windows that were out of bounds or too large were repositioned and shrunk as necessary. Resized window, with windows that are out of bounds moved to the left boundary and shrunk as necessary

Disclaimer: I would like to note that having more than 2 windows open is usually unlikely, but the same basic principal applies, I think. The example shows 6 purely for demonstrational purposes.

  • 1
    Maybe there is also a third option: resize all windows in percentage. It may be applicable or not, it depends on the content you show – Adriano Repetti Feb 8 '17 at 14:23
  • That would be the most uniform, but I don't think it's realistic unless I can consistently predict the content in each screen. – Ivo Coumans Feb 8 '17 at 14:48
  • 1
    Yes, it depends on the content. If you're, for example, displaying big tables you will then need to put scrollbars there and it has the same problem. You might want to given them the opportunity to temporary zoom one window to fit entire area while they're working with another application. When they're done working with references and copying & pasting then they can switch back to original layout. – Adriano Repetti Feb 8 '17 at 14:52
  • Just a thought: It feels like an operating system in an operating system. Actually feels a bit weird. Maybe consider task bars like Photoshop or a grid view like many dashboard have? Where you can decide to expand the tools you need so they get more space? – Luc Franken May 12 '17 at 9:35
1

I prefer the second option post resizing as it is more functional than having to scroll across the viewport to sift through the palette windows to find the one I'm looking for. Plus horizontal scrolling is a pain on windows unless you decide to override Ctrl+scroll for your web-application and allow the user to scroll horizontally with it instead (still unconventional though).

Following is my suggestion with respect to the above detailed problem:

  1. Since you would be anyway repositioning the palette windows within your viewport in option 2, I'd suggest you stick the large palette window to the bottom of your viewport. That way, you would have the maximum space remaining in your viewport to reorient the rest of the palette windows.

  2. While repositioning the rest of the palette windows, evaluate their priority based on their utility, and also the remaining space in the viewport after positioning the large palette window. Now position the rest of the palette windows based on their priority in the available viewport space. In case you run short of space, you could minimize a few palette windows starting with the least prior window. If the user maximizes one of the minimized palette windows, let it overlap any of the other windows in the remaining context.

  • I was leaning towards option two, and you make some valid points. I really like the suggestion of trying to maximize window spaces for priority windows, and minimizing the low priority ones, instead of simply stacking everything. – Ivo Coumans Feb 8 '17 at 10:44
  • Happy to help. Cheers! Lemme know in case you come up with some other queries as well. – ikartik90 Feb 8 '17 at 12:04

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.