2

I'm creating my first Node.js web application which is a combination of Chat rooms and game (drawing) rooms. As for now I'm not quite sure how to put these 2 features in practice.

Here is what I had first in mind: Basic chat screen: chat room screen

Basic drawing game screen: game room screen

Waiting screen: start screen upon entering a game room

So my question to you is:

I would like to add a feature where users can join several chat rooms. How to implement this design wise? (the rooms shouldn't be visible while ingame)

If you have any suggestion, do say so! As I'm quite a rookie when it comes to user experience.

  • How many chat rooms is 'several'? Because the first thought is just to segment the basic chat screen into columns / rows and have each 'cell' as one chat window. But if you're expecting people to be simultaneously in 10 rooms at once then that's a bit trickier to design. – JonW Oct 15 '14 at 14:55
  • Good question, To be honest I don't know. I'm still wondering whether to implement private messaging. It wont be for the near future, thats for sure. I would be able to limit the amount of rooms people could join (to 5 or something). – Goowik Oct 15 '14 at 17:50
  • 2
    Wouldn't be good to implement a tab-like system? Whenever user joins a second room, a tab appears above (like firefox) so that he can browse through rooms. – Carbon Oct 16 '14 at 14:00
  • So you mean in the empty bar next to the brand ('title')? I might need to use that to insert menu's and a profile dropdown menu. But a tab system might be nice. – Goowik Oct 16 '14 at 14:16
2

I'd suggest a tabbed-interface for multiple rooms. You could have in-browser tabs that separate which room you're in, just like standard browser tabs. This uses minimal space at the top of the window, is easily understood, and works nicely.

|improve this answer|||||
0

A good example of multiple-room-handling for study may be tested right here on StackExchange, with the SE chat.

If you join multiple rooms, it simply has an extra list view which shows the names of the other rooms you are present in...and the last message posted in that room. There is a button in the list where you can switch your current view to swap to that room, and then your formerly current room becomes one in the "last message only shown" list.

I could take screenshots and describe it further. But the best thing to do is just go try it. If you want to post without bothering anyone, use the Sandbox:

http://chat.stackexchange.com/rooms/1/sandbox

Then try joining (for instance) the UX chat simultaneously:

http://chat.stackexchange.com/rooms/389/ux-chat

Once you've joined multiple rooms open a browser window for each. Then look under the avatar list to see how it handles the list of rooms you are in with the latest message in that room.

If you're looking for an open-source clone of StackExchange chat, see Miaou:

http://dystroy.org/miaou/static/intro.html

It's MIT licensed, so you can stealborrow without worries.

You might even want to implement your drawing app as an extension and avoid reimplementing all that functionality...because it allows you to integrate games in the chat. See Miaou Games where you can play "Tribo".

(Note: The developer of Miaou is (perhaps obviously) an SE user...and is likely willing to answer questions.)

|improve this answer|||||
  • Note that miaou, to improve further the multi-room experience, uses a preview of messages in the other rooms. This makes it much easier than on SE to follow multiple rooms in my experience. – Florian Margaine Feb 27 '15 at 7:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.