3

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:

enter image description here

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?
  • 1
    Ideally when dealing with a chat feature, you should be in the 'private chat' channel before starting you write the message. This should also allow you to view chat history or received messages. – Daniel Zahra Apr 16 '15 at 7:28
  • Yep, General tab aim is hold the conversations broadcasted to all the chat-room users. And my dilemma is if should I use the private tab to list the individual conversations or just get ride that tab and use the same where the users list is?. – slackmart Apr 16 '15 at 14:55
  • 1
    Spend some time in Slack. If you take their break-out success as evidence, users (and investors) are quite pleased with their chat solution. – plainclothes Apr 16 '15 at 18:53
2

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).

mockup

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)

  • 1
    Wow, definitely it is a great explanation. Thank you so much. – slackmart Apr 16 '15 at 21:04
3

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

enter image description here

www.spot.im

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.