What should on-site chat look like?

(Benjamin Kampmann) #1

As mentioned earlier, I and @anouk are building an feature to add chat from within the Discourse Site. We already have the backbone in place (using XMPP, read more about that here), now our main concern lies with the user interface for chat.

The focus of the first version of chat will be on two main features: one-on-one-chat between people and a community-wide-chat-room, that - if configured by the community admin - even anonymous surfers could join. The question is: how to integrate the UI nicely into DC? The rules imho are simple: try to be minimally invasive on the existing interface and make sure even with a chat in place, the user is still able to use DC (as we know it from the composer).

I have been tinkering with different approaches but almost always end up with some part of the DC UI getting in the way – let this be the composer or the the progress-bar. Having thought hard about it for a couple of weeks, I feel I might be stuck and don’t see the forrest for the trees. So I was wondering if maybe any of you had a good idea on how to do that. Mockups highly appreciated!

//cc @pl3bs, @tobiaseigen, @purldator, @zogstrip

Big Picture Features Poll
(Benjamin Kampmann) #2

Oh, here, let me give you a base example of what I consider the hardest case when having to integrate chat into DC – all corners blocked with content everywhere. If you can fit in chat on this nicely (without changing any of the DC UI), chapeau!

Worse if you open the composer :wink:

(Dave McClure) #3

I think you’re on point for thinking of how Facebook chat and the Google chat within Gmail work first…

The progress bar seems like the main challenge. I’d honestly consider playing around with moving it just to get a better feel for what’s possible if it weren’t where it is. (could it be under the avatar / buttons?.. maybe if the style were more muted?).

Also, there was some talk of eventually replacing it with a custom scrollbar:

(Bcguy) #4

Generally - I think the UI should emulate the Discourse UI as closely as possible so that it fits with the site.

Also - IMHO its really important to save all chats and make them just part of another thread. The details of all this are - I agree - extremely difficult.

(Benjamin Kampmann) #5

Agreed. I was wondering, how it would feel if it was attached to the right side with a slide-in-out-grippie of some sort. But in any case, I don’t want to force such big changes onto the instance just because they want to add chat …

I was thinking of that. It would make a lot of sense for the “public community wide”-channel, but less so for more limited conversations, I think. In any case, as chat is much shorter phrases, I’d adapt the design for that. But that is all future talk, first we need to get chat off the ground in the first place. We can add this later.

(Dave McClure) #6

I understand not wanting to force the change. But I think it would be worthwhile to explore mock-ups with and without that constraint regardless.


I think the distinction between Discourse threads and chat is more blurred than would be the case in older message boards. Perhaps a substantial amount of the existing discussion interface could be used, with only a few minor tweaks for chat? After all, what are the main characteristics of on-site chat?

  • Real-time communication
  • Less information on each post so that the chat is more fluid
  • Notification of users typing (maybe optional?)
  • Time stamps
  • Maybe a way to convert chats into regular threads (perhaps for archival purposes)

Seems like a lot could be maintained and simply streamlined from current posting. Pardon this incredibly ugly mockup, but I think it would illustrate one possibility:

I probably wouldn’t use chat very often on Discourse, so I don’t have a strong preference for anything. Just thought I would throw out an idea. I would envision an option for each thread to be made into a “chat” thread, which would give it these UX changes. If you didn’t need the user typing alerts, I think you could probably implement chat in a pretty straightforward manner.

(mountain) #8

While typing a reply to suggest the idea of adding a side drawer to the left or right, I glanced up and looked at the ui with the lower drawer open.

Then I thought “If one can’t make a new spot, why not use one that already exists?”

So here’s my idea: take the composer drawer from below and allow a user to tab to a chat interface from within it.

It perpetuates what the drawer is for. The drawer is to type replies, talk, discuss. Now with a simple tab-over (and/or keyboard shortcut), it can be used to chat. This might be very helpful so a user can keep their eyes on the same spot in the ui and not have to worry about any other areas of the screen.

This can be done many different ways.

A button in “reply mode” can switch to chat mode. Ala’ Pidgin, it could have tabs within that have separate one-on-ones and the main community chat.

Of course, to keep up with what’s going on in the chat areas the reply mode can have small indicators as to new incoming messages.

And for me, the best thing: a user could possibly pull a single one-on-one or the community chat tab into the reply mode composer interface so they can talk while writing a post. Extremely useful if you need to talk with someone, or a group, when drafting a reply to something (staff members would need this more methinks).

Mockups? If this is plausible, I’ll see about making something. Won’t be pretty but better than nothing.

And if this isn’t feasible, no worries! Just letting my mind wander by letting my eyes look and the brain to go crazy.

(mountain) #9

I really like this idea too. A new RP site I go to has this same feature. A player can switch between ‘chat mode’ and ‘forum mode’. Chat mode strips all the forum things and only keeps the 100 last messages. Switching to forum mode makes it more presentable for those of us who like to type 500+ word replies in 15 minutes and want to keep all our work for others to read when it’s all said and done.

Only problem is chat indicators (maybe use the notification talk-bubble in the upper right?) or being able to multitask chats. That is the biggest downfall of the system, since I have to have multiple Chrome tabs open if I may be RPing in one window but chatting in another.

(Benjamin Kampmann) #10

Love the discussion this sparked. Plenty of ideas flying around and I love it.

Of course! All Mockups are accepted. And if they require huge changes in the UI, they need to make up for that by being incredibly awesome :wink: . But then still, we might add that as a template to be able to choose from. However, for the first (and default) iteration, I’d like to keep the UI changes light. Getting it out of the door first and then improve upon it. But, yes, please post your mockups however strange and invasive

@purldator, @ZeroFlux, I consider (and am currently approaching) chat as a casual feature alongside the more meaningful conversations that happen on the community. Something like the chit-chat at the kitchen of the office or over coffee on breaks at conferences, while the big important stuff is discussed in meetings and on stage, the conversations are needed to feel taking part, catch up on each other and just be connected on a more human level.

Out of that, I do like the idea that this actually off the record of normal DC and not too tightly integrated or to be confused with more meaningful messaging and important conversation. We are actually pondering to add End-To-End-OTR-Chat on it, too. Another reason to opt with a protocol (and backbone) that has already systems for spam and abuse blocking in place, as even the hosting server won’t have access to the content then. But I am drifting off topic here (though I’m happy to discuss any of that with anyone interested). Point being, I see chat more as an entertaining side-feature to catch up on a more personal level, binding the community on the different level and bring people closer with it, while browsing the latest updates and changes of the “proper conversations”. And as such, the design needs to support that notion.

Aside from that very conceptional reason, I have also a very pragmatical point why I won’t be doing anything to the composer window: the composer is a beast of its own. I have had the fun of having to work on it and it a highly complex and stateful piece of the UI that is rather fragile and easy to break. Supporting an external plugin that does major changes on it, is going to be impossible in the long-run. Unless the core team decides to open up extensibility here (which I don’t think is easy either), touching the composer just is too much work…

Non-the-less, I’d like to see mockups about any of this. It sparks other ideas and allows to copy concept to other areas. Love the discussion, keep it going!

(mountain) #11

That sounds like shoutbox territory. There was something like that discussed and mockup’d here.

But like all things, I believe we can find a middle ground. I agree that chat shouldn’t interfere with the forum discussions. Chat should accentuate the main discourse. Like what I mentioned to you before: allowing you to chat with debate opponents so things don’t get heated, or casual talk that may spur actual discussion topics. That is how I used the shoutbox and IRC chat for my own community.

(Sam Saffron) #12

To me the absolute simplest solution is to add a chat tab and use massage_bus as the backend, keeping chat topics for every day of chat (as hidden topics). Only thing missing from message_bus atm is presence and it can quite simply be added in if needed.

(NomNuggetNom ) #13

A slide out from the right would do nicely I think. Discourse already uses the slide up editor, so I think it would fit well. I’m really excited for this plugin, I would LOVE something like this. Our users really miss a shoutbox.

(mountain) #14

I considered that but would interfere with the composer drawer, I think.

(NomNuggetNom ) #15

Hmm. Good point. Perhaps the composer would slide down out of view or you would lose the preview? Or the chat area would stay above (vertically) the composer.

Another idea would be to add a separate tab at the top along with Categories and New that says “Chat” with the number of unread messages next to it. Or the number of participants.

(mountain) #16

That’s why I instead wanted to use the composer drawer itself. Less clutter on the ui and uses real estate already built into the core. A simple small button here and there, or a keystroke, can switch things around, ect. Since the composer is where users already type to discuss, it makes sense for me to be the same spot to chat too.

I like that idea too. A chat center of some kind. But that might be focusing too much on the chat and away from the discussions.

(Filip) #17

What about another button somewhere here on the top bar:

which, when clicked, opens a little drop-down menu like the notifications box with an area to type at the bottom and messages displayed in the box.

(Erlend Sogge Heggen) #18

Unfortunately it’s not due until v1.3, but the “full height slide-out hamburger menu” sounds like the perfect thing to piggyback for a chat panel as well. You’d just add an additional “chat” icon like @FHTzoob is describing here (said icon is unfortunately hijacked by Notifications) and clicking that would bring out the chat sidebar.

Until that time, surely you must have considered using your own sidebar theme & plugin?

If that’s no good, then if it’s possible to apply whichever one of these menu types to Discourse, I’d go with that.

On a different note, have you looked into possible integrations with Slack? I don’t know exactly how their XMPP works, but it would be absolutely off the chain if we could integrate our Slack chat with the Discourse chat (note that they also have a concept of “Guests” in the paid plan).

(mountain) #19

No thank you. I’d rather it stay open source.

(Erlend Sogge Heggen) #20

Please read what I’m writing before making blunt replies. I’m talking about an integration with a proprietary product, not making it a dependency. This would not impact the licensing of @lightyear’s code whatsoever.