Open design discussion

[simbolo]

I have been reading through all these issues on the repo (Also some comments/suggestions on cabal's public channel) and I believe that the initial UI design it's slowly becoming a bottleneck for the current state of the project. I have created this issue to start an open discussion around UX/UI & design ideas for the desktop client and to start addressing all of them.

When I designed the user interface (PR/28) all I had in mind was to create a very basic starting point for the client. I didn't plan it at all; It all started with a simple draft on sketch and a one-day-marathon of getting this simple sketch done with some basic html/css. It was just and empty shell but y'all converted it into a living piece of awesomeness — Every time I pull down an update something magically gets better. You all rock!

I have started to mockup some ideas to address some of the pending issues and discuss ideas to support all the upcoming/blocked features for the desktop client.

So let's dive onto the mockups (Some of these are very raw so let's try to focus on the content/function rather than the UI which is not very polished)

Onboarding Nothing fancy here, all I care at this step of the user flow is the following (Unless something else is planned)

• Learn what Cabal is
• Differentiate between joining a cabal space or creating a new one

Cabal's Main UI First of all: The UI needed an overhaul to make it harmonize with the chromeless window; I tried to keep a familiar design but I got rid of most of the chrome UI elements and separators. I tried to make it very clean and very focused on the conversations.

• Cabal's share button is missing from this mockup, I am planning to add it as a micro-interaction.
• On cabal's switcher bar I have added a couple of new buttons: Search and preferences. (disguised as the user avatar that will serve as shortcut to the settings and other options)

Cabal's Sidebar Having a collapsing sidebar could be used to implement threaded conversations, and a lot of other useful features. I am working on a prototype as I am writing this to visually explain how it works.

Basic modal elements were also considered (nothing fancy here)

Settings Inspired by Atom's settings screen I tried to reuse components from the main chat screen to design this mockup. Hopefully easier to implement — This screen still needs more work and more planning.

System messages Very simple messages: I was thinking that some users might want to use cabal's conversations offline so these screens might need further work… They also need graphic content such as illustrations/icons and simple/straightforward copy.

It would be great to have a list with all the current defined use cases to design all the needed screens.

And a to wrap up… a dark theme. Just because… why not? ;)

I have started using Inter UI as the main typeface for cabal's UI. I think it works great and i'd love to have a congruent typeface on different operating systems (unlike the current implementation) – Thoughts on this?

I am working on a small design system as well wich borrows some cues and ideas from the macOS user interface guidelines, I'll be posting some WIP's here pretty soon.

So, just to wrap up: All of these screens are just mockups and ideas to start a constructive conversation about design. Comments, critique and ideas/wishlists are more than welcome (They are very needed!)

Let me know what do y'all think about all these ideas :)

Pd. Please forgive any typos or rubbish english, it's 4:23am and my brain is kind of skewed.

[cblgh]

omfg @simbolo THIS IS AMAZING 😭

I am too excited to write proper sentences so I'm just going to spout out my first few thoughts lol

+1 on Inter UI

I love the sidebar for threaded conversations / DMs. Honestly I agree with everything you've written lol. I'd be interested in seeing how you would design UI for https://github.com/cabal-club/cabal-desktop/issues/66#issuecomment-413981122 and the sharing of a cabal; this might be what you mean by micro-interaction though :3

I like the indicator of a peer being online

Here are some immediate thoughts for a first few things for the settings screen

Settings

• Notifications settings containing options to control how they are displayed:

  • Off
  • Respectful (no numbers / only glyphs for channel has new messages and you were mentioned)
  • Full
  • Toggle push notifications (on/off)

• Set cabal database location

• Toggle loading of images inline

seriously you've blown me away hoooly moly

[hackergrrl]

@simbolo Wow! I am blown away by your effort & quality, and just very honoured to see cabal be the recipient of your skilled attention & crafting. :heart: Having you appear on the project and offer your skillset has helped cabal make massive strides in UI/UX quality. Thank you.

My thoughts:

• +1 to the intro sequence that explains the model of how a cabal works. I want to be careful about claiming "it never goes down" (the website says this too), since I suspect it will be a common case where two people start a cabal, aren't online at the same time, and so they never see each other's messages. I'm not sure what the wording will be, but something that communicates that a) no servers are needed, b) as long as there are peers online, you can see new data, but also c) even without peers you can still use the app normally. This eventually consistent / spectrum of online/offline sort of app model is still new to a lot of people. Finding good metaphors to present at the very beginning could help a lot in helping uxers understand the powers & drawbacks of the tool.
• Chromeless window: can a uxer still drag the window around /wo the window decoration? (I'm on a tiling window manager that doesn't draw window decorations anyway, but I move my windows with the keyboard, so I haven't had to worry about this.)
• Main UI: I like the cleanness and the font choice. The green dot signal of online-ness is a nice touch.
• Peers sidebar: something I've been experimenting with in the kappa-core branch of cabal-terminal is to show all channel participants in the sidebar, but sort the current peers to the top, and gray out those who aren't currently online. Eventually I'd like to do this per-channel once we have proper channel membership.
• System messages / offline use: in cabal, offline use isn't any different from online use. Unlike client<->server apps, there's no real distinction. Online just means you have some peers to sync data to/from, and offline just means no peers are connected to you right now. Reading/writing chat messages works the same either way. I'd like the UI to make "offline" use feel as normal as online use, but still somehow communicate that "hey, you aren't connected to anyone else right now, so your messages might not find their way to the rest of the group until another peer connects to you".
• +1 to the initial sync screen. Seeing an empty cabal until messages arrive and are indexed can be confusing.

Beautiful designs @simbolo! :tada:

[cinnamon-bun]

Beautiful!

About the peer list -- peers come in several varieties:

• Peers you are currently connected directly to
• Peers you are not connected to directly, but they are online. You can know this because their recent actions have trickled over to you across the mesh of peers.
• Peers that were once around, but are not currently.

That could be further filtered by channel, but channels don't know who has "joined" them like in Slack. You can only know who has posted in a channel but not who is reading it.

To display this I'd propose 3 ways of showing peers in the sidebar:

• Directly connected to you (bright text, "connected" icon)
• Recently active (bright text)
• Idle (dim text)

[simbolo]

Thanks everybody for your comments, I will take them into consideration to polish all the rest of the mockups. I have been busy at work but yesterday I had some free time to polish the UI just a bit more:

I have way too much to explain of what I am doing here, but I will find some time to write more about it pretty soon.

Looking forward to weekend to contribute with more stuff!

[todrobbins]

@simbolo 🎉🎉🎉

What did you make your comps with? I'm ready to pitch in with building the UI/markup.

[simbolo]

Hey y'all! My job has been very demanding this month and I haven't been able to continue working on the mockup concepts at all. I am really sorry :/

@todrobbins All these designs were done in Sketch, I can upload them somewhere if you wanna pick this up! 🖖

[nikolaiwarner]

@simbolo <3 I think we're all in the same boat. lol When i have time soon (like soon for real :D) I'm going to make an inventory of all of the screens/ui i feel we'll need for the whole app and I'll post that here for discussion. Soon!

@todrobbins Just a heads up, I may go ahead and hack in and wire up a settings screen so that it's not blocking other features. And then if you want to make it pretty and fit our style guide go for it! 💅