UI/UX Redesign

Problem to solve

Make multi-user more intuitive by giving only important information to users. The current UX/UI is good but can be improved by optimizing the menus and testing innovative ways to display the addon information

Proposal

  1. Do a benchmark
  2. Find ways to condense/optimize information for the user
  3. WIP: Find ways to improve communication in multi-user sessions
  4. Successfully adapting the addon UI to that of blender
  5. WIP: UI/UX Implementation
  6. Do some tests during sessions and adapt accordingly

Further details

1. Benchmark

  • Unreal Engine Multi-user

Presence is present, there is no bbox. You can remove it and put it back with "Multi-user" so it's not a problem. On the other hand there is a Presence menu directly in the "online user" section, it can be useful if there are a lot of people in the same scene and you want to hide only some of them (example: a bbox the size of a mountain, or an array that takes a lot of space on the screen). It remains to be seen if it would be really useful during sessions, and if the occasion is rare we could add it as an option in the addon preferences.

image

In addition to the multi-user snap to view, it would be nice to have the teleport option as unreal multi-user. I can't find the snap to view of the multi-user adon

Unreal multi-user has a session history that is accessible to everyone, you can see the session logs. But above all we can see that users can lock and unlock the datablocks they are working on. It might be nice to integrate it in the multi-user to avoid conflicts and constant loading. For example with the textures that reload for everyone at each slight modification, it leaves the choice to the users to do it in their corner without impacting the others, and conversely if they want to share their textures live they can by working on them without locking the datablock

image

For a workflow that includes an asset library, we can also take inspiration from the unreal engine multi-user. They also use the blocking system here, by adding a lock overlay on assets that are blocked by oneself/by others/or that are being modified

image

The server system is similar to the one we use (only on the features, the UI is to far from the one of Blender), they have a separate menu especially to store the servers, which allows to keep several servers in memory. The servers are represented as a list with one server per line. The main menu changes according to the status of the user, we do the same thing, on one side to connect/host or register servers, and on the other side to see the status of the session in which the user is. Doing it this way removes a lot of useless information from the screen (info from a session when not connected and vice versa). One of the additions of the unreal engine multi-user is the appearance of a "Leave" button located on the main bar to gain clarity. The problem is that you can't really do it on Blender, as everything is scalable. I think it's good to centralize everything on the multi-user deployable menu in the viewport.

Unreal Engine multi-user uses buttons with icons to avoid text and keep it compact. We can also see that there are just the name and the address, the two important elements to define a server. Maybe we can avoid displaying what is useless or too much in the menu. For example by pasting the address to the port if possible

image

  • Mixer

Multi-user and Mixer are quite similar from a UI point of view, each is located in the 3D viewport pannels and each is centralized. Mixer puts user preferences on the same line to save space (name + color). It's the same for the address but they don't make the difference between the different ports in the UI. Multi-user can try to paste the port next to the address to condense.

image

There is a small gear for additional tools/options. It is very small and hides well the information that users rarely need. It's a good way to condense the information while making it easy to read.

image

🚧To try :

  • Presence menu directly in the "online user" section.
  • Lock/Unlock datablock visual (Blocking for asset library if possible in an animation studio)
  • Add more icon, align information when needed (name+color, server+port, ...)
  • Change the position of the "Advenced" menu
  • Keep the menu centralized, add shortcut in connection with Blender. For example hide the multi-user overlay when hiding all overlays
  • Reduce drop-down menus
  • Change the presence UI, remove icons and use text as in the Blender overlay
  • if you have some idea, just comment the issue 🎉

2. Optimize information

The user info panel can be removed to show directly the name and color of the user on a single line.

image

You can also remove the drop-down panel from the Network and paste it to the name. It would be nice to freeze the position of the Join and Host buttons, to avoid them switching from time to time when using the addon. We could also position the Join and Host buttons in the same place as the exit button once we are in session to have intuitive positions. We can also recreate/reimagine the interface of the servers presets to condense it, for example by pasting the port to the IP, hiding the "Connect as admin", or completely using a different template to define the servers (menu that appears, visible server list, ...) Also we can rename "Connect" to "Join" so that it is consistent with the buttons above.

image

The mutli-user overlay is present both in the addon options and in the Blender overlay menu. It would be nice if when you deactivate the general overlay of blender, the overlay of the multi-user is also removed. There is a slight contrast between the way the viewport overlays are displayed in blender and in the Multi-user, it would be nice to get closer to the blender UI to blend the addon in the software. So we remove the icons, we start instead on checkboxes with a short title and we grey out the info that we can't use (for example if "Show session status" is not checked, we should grey out "Text scale" "Horizontal/vertical position") When you see all the information on the screen, you know that nothing is hidden, but you also know what is not used by graying out certain information. In this configuration it's not a problem to display too much information, we'll look for the overlay options, they are not present in the viewport so it shouldn't bother us too much.

image image

for advanced settings we can keep it this way or put it in the top left corner in icon but it should be removed once in session if some settings can't be changed.

image

Current things to discuss:

  • User Info
    • Get feedback on the ideas
    • Remove the drop-dow menu
    • Link the name to the color on the same line
  • Network
    • Get feedback on the ideas
    • Remove the drop-down menu
    • Freeze the Join and Host buttons locations
    • Debate on the servers presets interface to find solutions
    • Rename "Connect" to "Join"
  • Overlay
    • Get feedback on the ideas
  • Advanced
    • Get feedback on the ideas

System d'enregistrement preset server/Hash code pour une clée pour ajouter des serveurs/Connect as admin/First user experience/Feedback sur le discord + Blender Collab/Colorblind/Color preset for users

3. Improve commuication

4. Adatping UI

5. Session Feedback

Links / references

Unreal Engine Multi-user : https://docs.unrealengine.com/4.26/en-US/ProductionPipelines/MultiUserEditing/

Mixer : https://ubisoft-mixer.readthedocs.io/en/latest/index.html

/cc @project-manager

Edited by Fabian ADAM