ideas on instant messenger implementation on a website

Question

Im looking for a discussions, feedback and ideas on implementing a custom instant messenger implementation in my webapp. I have tried some ideas but they all lack and I dont feel like "ok this feels good lets go on with this concept"

1. facebook style bottom page always on ( don't like this one, its intrusive eats space )
2. Floating windows keeping them floated even true page reloads by remember position
3. Popup window that keeps open next to the website's or in a tab depending on browser config
4. any ideas by the community on how to implement an instant messenger?

Option #1 ofcourse is widely accepted but I don't like it at all it eats space and it feels like copycatting facebook.

Option #2 This feels like an innovative idea to me and has the most traction towards I want to implement, although im not sure how user friendly it is to keep windows open they would also eat up space and might interrupt with the other page elements.

Option #3 Several sites do this, I personally don't like switching between windows and it feels a bit unprofessional although several big site's use this method

Option #4 What is the community's look at implementing instant messenger features inside an existing web application?

Answer 1

I have an old idea on how an instant messenger should behave, Microsoft nearly implemented it in outlook.com, mine is a bit different.

The problem with gmail / fb -style chat is that it hides a quarter of the window. If you have 3 people chatting to you (quite common for me), you basically can't see the bottom of your messages in gmail.

Here's a demo for roundcube.

Of course, here, we don't have enough space.

I think that at outlook.com, the big mistake was that I can't switch between conversations easily: I have to go back-and-forth between buddies and conversations. This mockup solves just that. A few elements are missing though, as it was quickly copied:

This is the original mockup.

What's important in a chat?

• the conversation flow with the person I'm currently speaking to
• the availability of my friends (presence)
• any message I might have received from others while speaking to one of them

I guess it's important to permanently display the availability of those people I'm actually speaking with. That gives me a feeling of their 'physical' presence.

If they've written me something, I guess the first unread line is more important than their status message. The last line would be even more important, but it may be contextually connected to the first, so instead, the number of lines sent should be displayed.

I guess it's also important to use avatars in order to increase presence-feeling: the avatars represent the people more life-like than a simple buddy icon.

Of course, users may want to "fullscreen" the conversations, giving it to the main focus, so perhaps such an option should also be given.

Perhaps they'd like to detach it from the actual task at hand so they could switch to other tasks: popup is there in order to be able to switch between the conversation and another task not part of your application (eg. I started to chat with Bob on gmail, but I have to finish a word document, yet it has nothing to do with my mails).

So, this is it.

This is a really old dream of mine, so if you could, give me credits! :) (even a mention in the sourcecode is enough :)