The main window shows the users' contacts, along with some information on them such as status, username, email and picture. The user is able to filter the listing by availablility or by performing a search. He can also invite a user to chat, add a user and finally remove a user.
The tool is opened in a popup window. The main assets of it (background color, border size and color, shadows, title, help and close button) are covered in detail by the Generic Popup tool Graphical Guidelines so we they are not mentioned here in detail.
In order to implement the above design, we will need buttons, tabs, list boxes and scrollbars. However all these, are taken care of by the the shared space's css (from a design aspect of course) . So the actual assets that we need for this gui are summarized in the following table.
|Selected/Rollover Contact Background|
The conversation window shows the actual conversation between two users. The user arrives at this screen when he clicks on one of his contacts (or presses the invite button). A new tab is opened and at the same time it becomes selected, indicating the user that he is having a conversation with another person.
Many assets are the same as the tool's main window (buttons, tabs, list boxes and scrollbars, availability icons). The actual assets that we will need for this gui are summarized in the following table.
This screen is shown up when the user clicks on the “Add” button on the main screen. A list of available users is presented to him and he can select which user(s) he wants to add as contacts.
Many assets are again the same as previous screens (buttons, list boxes, scrollbars) and the data grid where the available users are displayed can be rendered properly by the shared space's css. So the actual assets that we will need for this gui are summarized in the following table.
This screen is shown up when the user clicks on the “Remove” button on the main screen. A list of the user's contacts is presented to him and he can select which user(s) he wants to remove from his contacts.
The GUI for this screen is identical to that of the “Add Contacts” screen, so there is not much to say about this. The only thing that changes is the title of the window.
The fla application where you can find the graphical assets of this tool is located on plone, at http://www.kp-lab.org/intranet/work-packages/wp6/gui-guidelines/chat/Chat.zip