2

I'm working on a web application. The application is already built and deployed to clients. It runs on a wide range of internet browsers. I am tasked to add chat functionality to the application. This functionality supports users logged onto the site chatting to each other. There will be 2 new primary UIs. The first is list of users that are available for you to chat with (similar to Trillian or Skype). And the second is a tabbed UI/window that will be all your chat conversations (each conversation between you and another user will be in it's own tab within this window).

I'm more of a developer than a UI/UX expert, so I have all the technical aspects figured out. I'm trying to determine the best way to integrate these windows into the existing application in terms of usability. Here are the first few approaches I have thought of.

(A) Have my two windows ("User List" and "Chat Conversations") each be a pop up window. There will be a button/link on the application that will let the user open their "User List" as a pop up. From there they can open conversations by double clicking user names in the list which will open another pop up with conversations in it, the "Chat Conversations" window. If you then click a second user it will open a new conversation in the existing "Chat Conversations" window. At most, you will have 2 pop ups open.

(B) Combine my two windows ("User List" and "Chat Conversations") into one pop up. Have the list of users be a portion of the popup and the conversations be the other portion. This way you only have one pop up open.

(C) Instead of using pop ups, use a floating div that will stay within the main browser/application window. The user can move the div around or hide/show it. It will take up space over the existing application though when you're using it. If you have multiple conversations going on it it would take up a lot of space if not all.

I'd like to get peoples' thoughts on these approaches or other approaches I'm not thinking of. Which would be most usable and most familiar to users?

Improve this question

2 Answers 2

Reset to default
1

Another alternative if you have a single page app is to have dedicated area for messaging This could be in minimized state when there is no messaging.

Advantage of having this and your floating div is user doesn't have to switch windows or keep track of open windows. It is also lightweight as its in the same application context.

The advantage of multiple windows is when the messaging is a primary function of the application. In that case I would prefer your option b. Also If I have multiple monitors I would be moving that window to my secondary monitor

Improve this answer
1
  • I think the popping in/out described by @devin above could allow both approaches
    – TSmith
    Commented Nov 25, 2014 at 15:46
0

I like (B), so have active conversations listed ontop of the stack, and then available contacts underneath. Similar to how Skype handles.

As for placement, have you considered a panel that can expand and collapse, fixed within the navigation. Alternatively a fixed panel that can be 'popped out' via a button that will then transform it into a separate window that can me moved to a second monitor, etc.

Improve this answer
1
  • I didn't describe it well but I was thinking of an expandable/collapsible panel as option (C) above. I do really like the idea of popping out that panel into a window if you want (similar to the "Compose" window in GMail).
    – TSmith
    Commented Nov 25, 2014 at 15:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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