Terrible UI. Would love to help, but don't know how.

[ghost]

Sorry for the nondescript title, but I honestly couldn't come up with a better one.

The UI for the desktop app (on Mac) is absolutely horrendous. And no, this is not because it's an Electron app.

This is not a cricism of the developers behind the app, please don't take this personally. This is more of a call to action to fix it, if anything.

Now more than ever we need secure, private, cross-platform IM tools. The main reason why the masses still gravitate more towards proprietary platforms is that they are simply more polished and look better.

You have done an incredible job of putting together an amazing product. In many ways - the hardest work has been done. But that doesn't mean that it's "good enough". I would love to recommend Signal too all my friends, family and colleagues, but in all honesty, I simply cannot do it while it looks and feels so much more inferior than any other free (as in beer) proprietery platform. The mobile app is not much better.

I would love to help out and have a ton of ideas on how to make this thing look and work better, but the current barrier for entry is unreasonably high. I have now spent two days trying to set up a dev environment, but to no avail. I know how Electron works and have used it on a number of projects. All I want to do is inject some CSS and changes JS into the UI.

Could someone with enough knowledge of the desktop app please release a fork that would make it possible to essentially "theme" the thing or possibly point me in the right direction? It can be something as basic as having to edit the bundle contents.

If you want people to help you, you must make it easy for them to do so. Is there really no way to have a simple way of injecting JS and CSS into the UI without completely rebuilding the app?

Sorry if this came out as a bit of a rant, but I would really love to help. 💖

[scottnonnenberg-signal]

@filipp So, this seems like a two-prong comment.

First, a complaint about the UI. It would help if you could provide some examples of applications which aren't 'horrendous' - then we could start to understand your meaning.

The second part of your request is for a new feature: support for custom, user-provided themes. While that won't be happening any time soon, it's relatively simple to download this repo, install the dependencies, and then start changing CSS. Storybook makes it very quick and iterative to see visual changes in most UI elements: start it with yarn dev:storybook

Please let us know if you have any difficulty following the steps in our contributing guide: https://github.com/signalapp/Signal-Desktop/blob/development/CONTRIBUTING.md

[ddcech]

I also feel like the UI is a bit rough around the edges. @filipp if you start a fork, let me know. I might be able to help.

[ghost]

@scottnonnenberg-signal Thank you very much for your reply. I think my repo setup is stuck at an incompatible version of Node. I guess I have to look into ways of running multiple versions of it on the same machine since I still need the latest version for other projects. Sorry for my strong language. There's no single "horrendous" thing that sticks out, but just tons and tons of tiny bugs and missing usability features that makes it feel incredibly unpolished and simply not ready for prime time if you want to compete with the proprietary apps out there.

@ddcech Thanks for your response. Currently I feel like it would be just easier to start a client from scratch using the Signal libs, but with @scottnonnenberg-signal's reply I'm gonna give it a few more whacks. Would be a shame to duplicate a ton of effort yet again. I don't see any reason why the official desktop client couldn't or shouldn't be the best one out there.

[Mr-Pepe]

You could start by creating issues for the tons and tons of tiny bugs and missing usability features.

[scottnonnenberg-signal]

@filipp nvm is a good tool for multiple Node.js versions on the same machine: https://github.com/nvm-sh/nvm

[ghost]

@Mr-Pepe I don't want to report these issues, I want to fix them. Especially with over 1.1k active issues in the repo already.

@scottnonnenberg-signal Thank you, I will check that out.

[joshgrift]

@filipp How about a mockup? That could help everyone see what it could look like.

[ghost]

@dotjersh I suck at mockups, unfortunately. I noticed someone already added drop shadows to contextual menus in the latest update! 👏👏👏

[azuredusk10]

Hey @filipp - I wonder if I might be able to help. I'm a UX and UI designer who would also love to see Signal flourish. I've made a few mockups for the mobile apps recently and would be happy to help mock up small improvements we could make to the desktop app together.

You can contact me via the community forums: https://community.signalusers.org/u/azuredusk10/summary

[hrishikesh-dahiya]

Just an additional input regarding the UI/UX of Signal app. I would suggest the team to look at the Whatsapp desktop app for reference, it has killed in UX/UI as per my understanding and if the desktop app is more attractive, people would love to migrate to Signal app

[ddcech]

@hrishikesh-dahiya also check out Telegram. IMO the best chat app UX

[cynicer]

I can just agree, the desktop UI is just incomplete. Not really terrible, it's just so basic it can't be good when you're switching from Telegram or even WhatsApp. There should be the same feature set on the desktop app as there is on the mobile ones. Would love to be Signal competing with Telegram in terms of UI, would make it perfect.

[simonmueck]

You have to say it gets better every update but i definitely share your opinion. Even a way to change background colors and or bubbles of chats would go miles. Honestly I would even be satisfies with menus where you just paste a hex-code in

[TheFern2]

I agree the app definitely needs user settings for color palettes, current themes are way too harsh either too light or too dark. This contrast is probably more important, that the sticker package upload. In whatsapp is was easier to change on chrome, just by using stylus css or dark reader.

[jrozelle]

@hrishikesh-dahiya also check out Telegram. IMO the best chat app UX

+1

I'm switching from Telegram to signal, and I hope some improvements on the desktop app. And I know its will come, thank to dev :-)

I can say that, for me, I would love : cmd+k shortcut, for searching another conversation by his name, and navigate between results with arrow keys a compact mode : I dont need to see contact list and current conversation at the same time, because I can switch quickly with cmd+k :-)

[csalvato]

First, a complaint about the UI. It would help if you could provide some examples of applications which aren't 'horrendous' - then we could start to understand your meaning.

Just to put in my relatively meaningless 2¢, the Telegram UI is a great role model to keep our eyes on.

I've been using Telegram for a while and have really come to love it. Here's what I found that's missing from Signal, and chafes when coming from Telegram:

1. Adding GIFs is much more difficult. On Telegram, you just type @gif and it pulls up the searchable gif selection. This doesn't exist at all on the desktop app (and is hidden behind two taps on the iOS app).
2. Link previews aka unfurling links are delayed and that delay is irritating compared to Telegram. You need to paste, wait for the preview, then send. IMO the client should be rendering the HTML links it detects in the chat, if possible, rather than the sender rendering and then sending them over.
3. On telegram, you can make the contacts list appear as a group of avatars, so the name + avatar doesn't take up so much screen real estate:

4. Editing messages on Telegram is easy. Just tap the up key and it opens an editor to change the message. I believe that Signal (like WhatsApp) doesn't allow the ability to edit, period. If there's some way around that, it would surely help with feature parity (e.g. edits with an audit log, or similar)
5. The desktop app doesn't let you change any group settings on the app. You need to go into the mobile app to get the share link, send invites, change settings, etc. Anything possible from the mobile app should also be possible from the desktop app, and, imo, this is conspicuously missing.
6. You can't change the sound of the notification on Signal Desktop, which means I have to turn the sounds off entirely. I prefer my notification sounds to be very subtle so that people don't hear them on video calls, but the default on OS X is pretty loud and a conspicuous notification sound.
7. Following #6, there's far fewer settings you can set on the UX in the Preferences pane. Compared to Telegram and the mobile app, this feels very limited.
8. Small things, like the buttons on the Desktop UI just look amateurish (no offense intended). For example, compare these two settings panels:

9. Right clicking on a chat or conversation doesn't bring up a context menu with settings for the chat. That feels really weird.
10. The two checkmarks in the bottom right of each message are useless if you're new to the app and don't know what they mean. Telegram provides a timestamp when hovering over the checkmarks, and WhatsApp lets you click and see exactly who read, and who did not. This also shows what they mean.

I'll report back with other concrete suggestions as I continue to use the app. I can probably help with some of these, but not all.

[csalvato]

cc @azuredusk10 @scottnonnenberg-signal ☝🏼

[TheFern2]

@filipp So, this seems like a two-prong comment.

First, a complaint about the UI. It would help if you could provide some examples of applications which aren't 'horrendous' - then we could start to understand your meaning.

The second part of your request is for a new feature: support for custom, user-provided themes. While that won't be happening any time soon, it's relatively simple to download this repo, install the dependencies, and then start changing CSS. Storybook makes it very quick and iterative to see visual changes in most UI elements: start it with yarn dev:storybook

Please let us know if you have any difficulty following the steps in our contributing guide: https://github.com/signalapp/Signal-Desktop/blob/development/CONTRIBUTING.md

I think I can contribute to user-provided themes, are we taking gui settings or something like theme.json? I haven't looked into the css yet in the code, but are the bubbles just randomly picking a color from css variables?

[TheFern2]

@filipp I think the title could use some polish, Terrible UI sounds a tad harsh for what still is a good working messenger regardless if it doesn't live up to what most of us were using before. Still an OSS project, that these wonderful folks built for us.

[DiedB]

If I may add to the points that have already been made here, it is a small inconvenience but the close button for the settings modal should always be visible, regardless of scroll position (by pinning it to the modal itself).

[csalvato]

11. When you first install Signal Desktop, the Light/Dark setting is unset, so defaults to Light. It would add a bit of polish to automatically set it to "System" on install, so Dark Mode users automatically have the app aligned with system settings.

[csalvato]

12. When opening photos, you can't press left + right keys to navigate to previous photos. You need to click out and then scroll up to the next photo and click on it. Relatively tedious compared to iMessage, WhatsApp and Telegram.

[llebout]

@csalvato

Link previews aka unfurling links are delayed and that delay is irritating compared to Telegram. You need to paste, wait for the preview, then send. IMO the client should be rendering the HTML links it detects in the chat, if possible, rather than the sender rendering and then sending them over.

Not acceptable privacy-wise. Telegram has their server rendering it but Telegram is not end to encrypted there, it doesnt have this feature at all in Telegram Secret Chats.

I believe the UI/UX is different on many points also because of differing requirements. Telegram end to end encrypts nothing by default, Signal cannot send non-end to end encrypted messages.

[csalvato]

@csalvato

Link previews aka unfurling links are delayed and that delay is irritating compared to Telegram. You need to paste, wait for the preview, then send. IMO the client should be rendering the HTML links it detects in the chat, if possible, rather than the sender rendering and then sending them over.

Not acceptable privacy-wise. Telegram has their server rendering it but Telegram is not end to encrypted there, it doesnt have this feature at all in Telegram Secret Chats.

I believe the UI/UX is different on many points also because of differing requirements. Telegram end to end encrypts nothing by default, Signal cannot send non-end to end encrypted messages.

Yes and no.

Yes, the way Signal does it is secure.

No, doing it in a way that doesn't require waiting is not insecure.

For example, the client can unfurl links after they are sent. When the client sees a chat with a link that is not unfurled, it can go out and fetch. Or mimic the UX of iMessage where you can tap on a link to preview it and generate the preview. This does not expose any privacy concerns.

As an aside, the pre-send unfurling previews load MUCH faster in WhatsApp than on Signal. The speed at which Signal fetches the link data is significantly worse than WhatsApp.

If we keep pointing to privacy as a reason why things can't exist, we won't find secure, beautiful ways to be secure + have a good experience.

I am not sure there is much room for disagreement that this UX can be vastly improved, with multiple options for improvement.

[llebout]

@csalvato

For example, the client can unfurl links after they are sent. When the client sees a chat with a link that is not unfurled, it can go out and fetch.

It's the sender or a server (but not possible in end-to-end encryption scenario for it to be a server) that must generate the link preview because otherwise there is either a data leak (end to end encryption violation), or a privacy risk in that users could send links that log their recipients IP address or other information.

For example, the client can unfurl links after they are sent.

It can do that yes, send the message then the sender could later append a preview. But since we can't edit messages on Signal right now for reasons I do not know (maybe security-related).

[shvchk]

Any progress on user themes? Simply loading user.css (if exists) from userDataPath would be enough in most cases, I'd guess. Looks like a feature that is relatively simple to implement and unlikely to break anything.

[furai]

I'd love to see some user themes happen. Current theme for me has just too much wasted space. I'd love to get compact mode where messages are on each line and possibly less padding around things in the navigation pane.

[josh-signal]

Going to close this since it doesn't follow the bug template. Feel free to keep discussing though or continue the discussion in the forums: https://community.signalusers.org/

edit: we've also made a lot of UI related updates in the past few months so hopefully it's not absolutely horrendous anymore 🙃