Future UI evolution
- Introduction: current UI
- 1 — Window management
- 1.0 — Concerns
- 1.1 — Proposal: window management flexibility
- 1.2 — Persistence
- 1.3 — Window handle
- 1.4 — Proposal: vertical alignment
- 1.5 — Proposal: enlarge workspace
- 2 — Tabs
- 2.0 — Concerns
- 2.1 — Proposal: tabs on the side
- 2.2 — Proposal: tabs and windows
- 2.3 — Proposal: sorting criteria
- 2.4 — Proposal: tab customisation
- 3 — Library
- 3.0 — Concerns
- 3.1 — Proposal: reorganize Library
- 3.2 — Proposal: search
- 4 — Web apps
- 4.0 — Concerns
- 4.1 — Alternative proposal: tray
- 4.2 — Alternative proposal: pinned tabs
- 4.3 — Alternative proposal: right side
- 5 — Content
- 5.1 — Proposal: New Tab page
- 5.2 — Proposal: Zoom buttons
- 6 — Summary
- 7 — Planning
Browser window and tray.
Windows are placed on a cylinder around the user.
Up to 3 windows can be open at the same time.
If we "unroll" that cylinder, we get:
There is limited control over browser windows.
The maximum number of windows is limited to 3, regardless of their size.
Regular windows:
Small windows:
Windows only grow upwards and can not be aligned vertically.
Windows can only be placed side by side.
Windows are situated at a fixed distance; it is not possible to move windows "farther".
It is possible to reorder windows, but the UI is a bit confusing.
Allow more flexibility when placing windows around the user.
One approach could be to divide the cylinder in smaller sections and allow a window to span several of these.
This is just an attempt to illustrate this idea:
If we "unroll" the cylinder:
The number of windows and their placements are preserved between executions of the app.
This functionality is already available in Wolvic, but it will need to be extended to cover more complex windows layouts.
Provide functionality in the top bar that allows for the direct manipulation of windows.
The top bar includes a handle so windows can be "grabbed" and moved in the space, as well as a button to close the window.
One possible way to implement this could be with a bar above the window, like other VR enviroments do:
"Reorder" mode: our current reizing mode could be extended so it also allows you to resize and rearrange the windows in the workspace.
Closing and moving windows should be doable without entering this mode, so the most common cases for window management are more reachable.
Make it possible to align windows vertically:
Let the user make the cylinder wider, allowing for more and larger browser windows.
Switching between tabs requires users to:
- click to open the Tabs dialog
- find the desired tab
- click on it
This makes it difficult to identify which tabs are currently open and switch to them.
The list of tabs includes all open tabs in all the windows.
Clicking on a tab which is another window will brings that tab to the current window.
When you close a window, you only close the one tab that it was showing.
Currently our list of tabs is sorted by the most recently used, causing the entire list to be rearranged every time a new tab is selected.
My suggestion it to position the list of tabs on the side of the window, within the user's peripheral vision. This would make it easier for users to see which tabs are open without obstructing the page they are currently visiting.
Are tabs in non-active windows always visible? (See section 7 for a comparison)
Associate each tab with a window, which is more similar to how browser windows work on other platforms.
Drag tabs to another window to move them. Drag tabs to an emtpy space to open a new window there.
Customize the criteria for sorting tabs.
Customize tab behaviour: allow users to choose between the current system, tabs on the side, and tabs on top of the window.
For simplicity and performance, currently we pause media playback when the user leaves a tab. Would it be fine to preserve this behaviour?
If you wanted to e.g. have music playing in the background, you would need to have that website open in another window. Perhaps that would be fine? It seems to fit well with the idea of some webapps being always visible in smaller side windows.
The Library is available from the tray and includes different kinds of stuff: bookmarks, downloads, history, extensions, etc.
It might not be obvious to the user that she has to open the "Library" to reach any of this.
It is also not obvious what is the relationship between each type of content in the Library.
Break up the Library and move its components to different places, where each of them makes more sense:
- Bookmarks are accessible from the main UI and also from the New Tab page
- Downloads are directly accessible from the main UI
- History becomes a section in the Bookmarks (?) and is also accessible through the URL/search bar
- Web Apps are configurable from the app launcher UI (see below)
- Extensions in Settings
The Library button is replaced by direct access to Bookmarks and Downloads.
History becomes one section in the Bookmarks.
(It also remains accessible through the URL/search bar.)
The list of Web Apps is always available from a launcher (see below), which includes an Edit button that opens the UI that is currently in the Library.
Extensions get their own section in the Settings.
We already have search functionality for bookmarks, but at the moment we just use it for suggestions in the URL bar.
The downloads storage also supports search, so it wouldn't be hard to add that functionality to the UI. Same for the history.
We are not making the most out of Web apps yet: they need to be easily available and present themselves as if they are "real" apps.
Web Apps should be available from an "App launcher" that makes them look as if they are real apps.
We are still deciding where this element would be. The following are some possibilities.
Web apps are presented as launchers in the tray. This can be similar to the new system tray on Oculus.
This is one possibility, just for illustration:
The idea is that the user would open webapps from these launchers (or focus them if they are already open) and then handle the websites as another window/tab.
Note the Edit button on the bottom right: it would open the UI to configure the list of Web Apps.
Web apps are "pinned tabs" in the tab list, like in the desktop. Clicking an Web App links works pretty much like clicking a regular tab.
Similar to the previous one, but Web App links are placed along the right side of the window.
A New Tab page is a good place to have a search bar, links to the most used sites, bookmarks, etc. and it also gives us a good place to notify the user when the version is updated.
For example, this is how Firefox does it:
Once we have completed the migration to Chromium, we will be able to include zoom buttons in the UI.
It might also be interesting to have a gesture for zooming in and out, e.g. getting your index fingers closer or father apart.
A vision of how some of the ideas above could be combined to evolve the UI of Wolvic:
An alternative where the tab lists of non-active windows are hidden:
