Skip to content

Future UI evolution

Felipe Erias edited this page Oct 4, 2024 · 2 revisions

Index

  • Introduction: Current UI
  • 1 β€” Window Management
    • 1.0 β€” Concerns
    • 1.1 β€” Proposal: Window Management Flexibility
    • 1.2 β€” Ongoing: Persistence
    • 1.3 β€” Ongoing: Direct Manipulation
    • 1.4 β€” Implemented: Vertical Alignment
    • 1.5 β€” Implemented: Enlarge Workspace
  • 2 β€” Tabs
    • 2.0 β€” Concerns
    • 2.1 β€” Ongoing: Tabs Location
    • 2.2 β€” Ongoing: Tabs Customisation
    • 2.3 β€” Proposal: Relationship between Tabs and Windows
    • 2.4 β€” Proposal: Sorting Criteria
    • 2.5 β€” Proposal: Spaces
  • 3 β€” Library
    • 3.0 β€” Concerns
    • 3.1 β€” Proposal: Reorganize Library
    • 3.2 β€” Proposal: Search Library
  • 4 β€” Web apps
    • 4.0 β€” Concerns
    • 4.1 β€” Alternative proposal: Tray Button
    • 4.2 β€” Alternative proposal: Tray Launchers
    • 4.3 β€” Alternative proposal: Pinned Tabs
    • 4.4 β€” Alternative proposal: Right Side
  • 5 β€” Content
    • 5.1 β€” Proposal: New Tab
    • 5.2 β€” Implemented: Page Zoom (Chromium)
  • 6 β€” Summary

Introduction: Current UI

This document discusses existing opportunities for the improvement and evolution of the Wolvic user interface. It has been updated to note those proposals which have already been implemented.

Browser window and tray.

456fb0e1-1b84-4080-9e52-fc3cb23902b8

Windows are placed on a cylinder around the user.

Up to 3 windows can be open at the same time.

accae12e-1039-45a4-b41f-f11805e69019

If we "unroll" that cylinder, we get:

96a04e70-0de4-4361-b1db-3006070971f9

1 β€” Window management

1.0 β€” ☁️ Concerns

The overarching concern is that the user has limited control over browser windows:

  • The maximum number of windows is limited to three, regardless of their size.
  • Windows can only be placed side by side in a circle around the user.
  • It is possible but confusing to reorder windows.

1.1 β€” Proposal: window management flexibility

Allow more flexibility when placing windows around the user.

Cilinder

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:

ff2975f5-f90a-4ae2-ba49-da446ebdbd5c

If we "unroll" the cylinder:

1db4cfe0-32a8-4141-bdb9-245795c16483

Spatial

Depending on platform support, our window management should consider the possibility of placing windows in specific locations of the physical space around the user.

1.2 β€” πŸ› οΈ Ongoing: Persistence

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.

1.3 β€” πŸ› οΈ Ongoing: Direct Manipulation

Provide functionality that allows for the direct manipulation of windows.

βœ… Implemented: Handle Button

Since Wolvic 1.5.2 it is possible to move windows around the user. The UI to do this is a "handle" button at the bottom of the window.

move-handle-1

move-handle-2

Alternative: Window handle

One alternative could be that 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.

Alternative: Gestures

Complementary to the above, we could use the "grab" button in the controller and/or a specific hand gesture as a shortcut for dragging windows into new positions.

Question: "reorder" mode?

"Reorder" mode: our current reizing mode could be extended so it also allows you to resize and rearrange the windows in the workspace.

Ideally, closing and moving windows should be doable without entering this mode, so the most common cases for window management are more reachable.

1.4 β€” βœ… Implemented: Vertical Alignment

Since Wolvic 1.5.2 it is possible to align windows vertically:

e9565d99-b863-42dd-9525-50ebca095134

vertical-align

1.5 β€” βœ… Implemented: Enlarge Workspace

Since Wolvic 1.5.2 it is possible to make the cylinder wider:

91742b77-4686-4ed1-a8c3-f4ce2467ac90

window-distance

2 β€” Tabs

2.0 β€” ☁️ Concerns

Switching between open tabs

Switching between tabs requires users to:

  • click on the Tray 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.

Tabs and windows

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.

Sorting criteria

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.

2.1 β€” πŸ› οΈ Ongoing: Tabs Location

Support placing tabs on the top and the side of the window.

horizontal-tabs

vertical-tabs

This is currently being implemented in https://github.com/Igalia/wolvic/pull/1468

Question

Are tabs in non-active windows always visible?

2.2 β€” πŸ› οΈ Ongoing: Tabs Customisation

Customize tab behaviour: allow users to choose between the current system, tabs on the side, and tabs on top of the window.

tabs-location-settings

This is currently being implemented in https://github.com/Igalia/wolvic/pull/1468

2.3 β€” πŸ’‘ Proposal: Relationship between Tabs and Windows

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 empty space to open a new window there.

2.4 β€” πŸ’‘ Proposal: Sorting Criteria

Customize the criteria for sorting tabs.

2.5 β€” πŸ’‘ Proposal: Spaces

We are exploring ways to allow users to organize their windows and tabs into distinct groups or workspaces ("spaces"), creating a clearer and more structured browsing experience. The goal is to allow users to create separate spaces for different tasks, projects, or topics they are working on.

Taking advantage of the VR environment, each space will function as a container that holds specific windows and tabs related to a particular context.

Question

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 Web Apps being always visible in smaller side windows.

3 β€” Library

3.0 β€” ☁️ Concerns

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.

3.1 β€” πŸ’‘ Proposal: Reorganize 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

Bookmarks and Downloads

The Library button is replaced by direct access to Bookmarks and Downloads.

History

History becomes one section in the Bookmarks.

(It also remains accessible through the URL/search bar.)

Web Apps

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

Extensions get their own section in the Settings.

3.2 β€” πŸ’‘ Proposal: Search Library

We already have search functionality for Bookmarks, but at the moment we just use it for suggestions in the URL bar.

The backends used for History and Downloads also support search.

As seen in the sketches above, our intention is to add search functionality to Bookmarks, History, and Downloads.

4 β€” Web apps

4.1 β€” πŸ’‘ Alternative proposal: Tray Button

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.

4.1 β€” πŸ’‘ Alternative proposal: Tray Button

Add one dedicated button in the Tray to access the list of existing Web apps.

Maybe we could use the concept of "Shortcuts" here.

webapps-tray-button

4.2 β€” πŸ’‘ Alternative proposal: Tray Launchers

Web apps are presented as launchers in the tray. This can be similar to the new system tray on Oculus.

57593712-3025-4038-9ac1-add1d14f2ca0

This is one possibility, just for illustration:

The idea is that the user would open Web Apps 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.

4.2 β€” Alternative proposal: pinned tabs

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.

34bba4a2-9ad0-41f3-a49b-719fee5dc7e6

4.4 β€” πŸ’‘ Alternative proposal: Right Side

Similar to the previous one, but Web App links are placed along the right side of the window.

40d8a54f-b11d-4af9-b839-f5a23418f8c4

5 β€” Content

5.1 β€” πŸ’‘ Proposal: New Tab

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:

46174bc4-252d-4073-9ba8-6bb1bc999c28

5.2 β€” βœ… Implemented: Page Zoom (Chromium)

The Chromium-based version of Wolvic supports zoom buttons in the UI.

zoom-075

z00m-100

zoom0125

6 β€” Summary

A vision of how some of the ideas above could be combined to evolve the UI of Wolvic:

Clone this wiki locally