Help with chat feature

Question

I'm building the chat feature for a web project. We have a couple of specifications:

1. Support for general messages that will be broadcasted to all users subscribed to the room chat, and for that I have a tab called General.
2. Support for private messages where the current user must be able to select the receivers from the users list. So I've a Users tab with checkboxes elements, a textarea and a button at the bottom.

Here's a simple mockup that illustrates the scenario:

BTW I'm not a UX designer, so I'm looking for some suggestions.

• Should I activate the Private tab when the send button is clicked in order to show the conversations history?
• Or should I just override the users list and show there the conversations?

Answer 1

I would divide it in public and private. BTW I'm not aware of mobile conventions (maybe top buttons should be inside a hamburger menu to save space or to have 1 control with all the possible actions in that page).

^{download bmml source – Wireframes created with Balsamiq Mockups}

An alternative would be to make the "Choose participants dialog" a tab (similar to your users tabs) and removing the cancel button. For me it would depend on how much actions you can do respect to users (apart from start a conversation).

Anyway it's always good to show who are participating in the chat when you are in a private conversation, showing the icon as the other answer states is a good option. (I didn't include it in the mockups)

Answer 2

You could use chat bubbles in a horizontal list (which is technically a tab) like on the facebook messenger app, with a small number within a circle to indicate the amount of unread messages

Here's a chat plugin i found quite user friendly. Even being quite feature heavy, it seems easy to use. might give you some ideas

www.spot.im