Bill Fernandez Design
Home Services Testimonials Portfolio About Contacts Notices Hobbies Login

Live Chat Module
White Pajama, Inc. -- 2001

Bill designed web-based user interfaces for the White Pajama callcenter system through which a single agent could engage in live chats with up to three simultaneous customers. The variation shown here is a single-channel chat UI.

Chat Window

The chat UI can be displayed as a subpanel of a larger window (e.g. the agent console), or in a separate window as shown here.

Since each chat has at most four well-defined participants (customer, agent, a supervisor or second agent, and status messages from the system) it is unnecessary to clutter the transcript with the names of each participant, but instead we can use different fonts and colors to represent each "voice". This makes the transcript very clean and easy to read. A legend at the top of the window shows the color and font for each participant.

Displaying your messages in light italics makes them recede into the background a bit, which is OK since you typed them and should know what they say.

Displaying the remote participant's messages in bold makes them stand out more, which is good because these are the message you want to read.

Displaying system messages in red and all capitals makes them jump out and shows them as "mechanical" events that occur within the flow of conversation.

Using a different typeface for each participant makes it easy for colorblind users to differentiate between each "voice".

In comparison to competing live chat user interfaces this approach yielded greater ease of use and more efficient use of screen space.

An Example Chat Transcript

Here's an example of a complete chat session. Notice how easy it is to follow the flow of conversation and to review the comments of any one participant. Also note how the status messages make it clear when your state changes (e.g. "on hold") and when key events occur (e.g. "doctor Hansen has joined").

 

 


Go to Top Services  •  Testimonials  •  Portfolio  •  About  •  Contact