Revamped UI

[ImGunter]

I think a revamped ui with much nicer and simpler menus would go a long way for mumble maybe adding image support could also help it stand out against the growing competition possibly some type of chat system using the open source signal protocol there’s a lot of things that can be done to make mumble an even more fantastic program.

[Kissaki]

Have you used the new UI themes in/from 1.3.0 yet?

What kind of simplifications would you like to see?

[ImGunter]

Yes I have tried it does look cleaner but I think it would be nice to have a cleaner ui similar to how ts5 looks just to make it more accessible to people I feel like it could thrive if it had that

[azlux]

Something like that talk to you ?
A friend have make mumble like discord (with gravit designer software).

[azlux]

@ImGunter for the image support, i've imagine some way to implement it #3597 .

[toby63]

I want to add my concept:
I am no artist, so it is not very clean and its also a bit fuzzy, but I think you can see what its about.

The basic idea is to have two seperate tabs (a server tab and a channel tab).
This has mainly two reasons:

1. Three rows (like e.g. Discord) are a bit to much imo
2. I like the focus on one channel (as thats my usual way to spent my time on a server)

So first we got the Server tab:

• The general idea is to make icons and text bigger (I would maybe also make the users bigger than they are in the picture) and to give channels more details (symbols possible, short description and expandable) as well as a better visible seperation (with the boxes around them).
• The users also have more details (symbols, status (like afk), little versions of profile pictures) and direct functions (If you click one them, you can mute them, use volume control and get more information).
  The green microfone presents the audio status (this would mean "talking").
• I also added a field for server news and announcements that can be closed by the user.
• On the right side more text can be added about the server and the channels.

Second we got the Channel tab:
As you can see we have the chat on the left and a user list on the right.
The user profiles are expandable as well (if you click on the profile); see below.
For better visibility the messages are in boxes and the user names are coloured.
Improvements: Maybe I will add the Channel information as an expandable box above the userlist.

Then we got a user profile in expanded view:
The status (like afk) should be visible in the normal view as well.
Just like in the server tab you can mute them, use volume control and get more information directly by clicking on the buttons.
The triangle is just an indicator for the expansion, you should be able to just click somewhere to close the expanded view, but it could be a button as well.

What do you think about this concept?

Credits:

• I used some icons from the default theme by xpoke.
• I used some avatars by ryumo deviantart, as profile examples.

[ImGunter]

This is a super neat concept tbh!

[Krzmbrzl]

@toby63 First off: thanks for the detailed explanation and illustration 👍

I do think this would be a viable design choice to have. That being said though, personally I don't like the idea of separating the server and the channel stuff. On the other hand the server-tab is pretty much as things work right now (and which I prefer) so maybe I wouldn't even be bothered by optionally being able to switch to a channel tab.

Regarding this issue as a whole:
From what I have seen in the code-base I have the impression that in order to mess with the UI and make significant changes to it (whatever that'll be exactly), we'd come at risk of breaking (core) functionality as the UI and the functionality is pretty intertwined at some places.
Of course that's definitely not a good design choice and I'm sure it hasn't been intended from the beginning. However a growing code base tends to grow in a way that is most convenient and not in a way that would be best for refactoring of that scale.
Thus I believe that before we can start turning the UI upside down, we have to cleanly separate the back- and frontend.

@davidebeatrici and I are already thinking about tackling that problem though so there are chances that this will be done in the (somewhat) near future. At this point I won't state any details or promises on this though.

[toby63]

To summarize points that I would like to change or achieve with a renewed user interface + theme (combined with changes elsewhere):

• customisability: As some users like the old style, it should probably be up to the user what to use
• option to increase fonts and icons (or bigger fonts and icons by default), see also Make Font-size configurable #1850 Make font size configurable #1872 (only fonts)
• option to add more space around the channels and users (seems to be available with themes but I would like to set it as user)
• option to position and customize IconToolbar (partly already possible, but I would like to align it in the center for example), see also Move / Remove Individual Icons from Icon Toolbar #3388
• Chat seperation:
  (Note: it seems that it is already planned to seperate some chats (Server/Channel and Private Tabs), but I would go further)
  • Channel Chat (main chat)
  • Server Chat (not necessary, optional or integrated in Channel chat (click on Main Channe)
  • Private Chat (seperate window(s), with tabs per conversation); see also Private messages in separate tabs #2521
  • Log (hidden (=activate via menu) or seperate)
  • Notifications (maybe the same as "Log"; option to disable; seperate or with pop-ups)
• different user colours (customisable, chosen by users, maybe option to disable); see also Chat message highlighting for selected user or coloring per user #3538, More Colors for Chat Messages #3092
• different position of chat (should not fill the window to the bottom, especially the input mask should be more central and bigger)
• boxes around chat messages (see also my concept)
• Channel details:
  • information/text:
    1. directly visible (e.g. text behind or under channel name)
    2. visible in seperate area or window (maybe expandable or info button in channel, see also Channel description box #3386 (though a bit different))
  • icons: different icons, symbols and maybe even pictures for channels, see also Channel and User Group Flags (Icons) #1632
  • spacer between channels, see also spacer channels #3384
  • "boxes" around channels (see also my concept)
• User details:
  • icons, profile pictures, see also Channel and User Group Flags (Icons) #1632
  • status: like afk (seperate from audio status)
  • buttons when clicked on user (for mute, volume control and more information)
    • more information (when clicked shows more information about the user in seperate window or area)
• (additional idea) two tab system (seperate Server and Channel Tab) (option to enable/disable), (see also my concept)
• (additional idea) add search option and filter for chat (e.g.: only show messages from user x)
  • add hashtags to search for (con: maybe to much twitter 😄)

Edit: I reworked the list, I hope it is better now. I also added more issue links.

[toby63]

@Krzmbrzl:

That being said though, personally I don't like the idea of separating the server and the channel stuff. On the other hand the server-tab is pretty much as things work right now (and which I prefer) so maybe I wouldn't even be bothered by optionally being able to switch to a channel tab.

That was exactly my intention to keep the Server Tab fully functional on its own.
An additional idea would be to let people disable the Channel Tab in the options, if they feel bothered by it.

we'd come at risk of breaking (core) functionality as the UI and the functionality is pretty intertwined
at some places. [...] Thus I believe that before we can start turning the UI upside down, we have to cleanly separate the back- and frontend.
@davidebeatrici and I are already thinking about tackling that problem though so there are chances that this will be done in the (somewhat) near future. At this point I won't state any details or promises on this though.

That is unfortunate and promising at the same time.
I thought it could be easier to add a different UI, even though this is a long-term goal of course.

[toby63]

@ImGunter Why closing? The status as dicarded was applied automatically, so it is no decision.
I think this Issue can still be useful, if somebody wants to work on it in the future :).

[seniorm0ment]

If something like this is ever implemented, I'd prefer it just be a user theme. I really like Mumble's current minimal GUI, and hate Discord's style. However I understand people switching from Discord may want a similar style, so I think making Mumble fairly themeable would be the way to go.

[gitgrub]

Yes, please keep the ui simple. The quality of mumble is that its fast and lean.

[Louisdelez]

I think the idea is very good and I was thinking to improve the concept, what could be good is to make a version by merging Mumble and Rocket.chat for the voice part and the chat part all in a nice design.