Support/Live Chat/UI

This page offers ideas and suggestions for how UI could be designed to meet our requirements. This is a work in progress.

Live Chat dashboard

The dashboard is the hub for all things chat.

Required

• If the queue is closed
  • A short paragraph explaining what things can be done now.
• If the queue is open
  • List current chats in the queue.
    • Users in the Live Chat helpers group must be able to pick one of these to accept. (Defined in permissions section of requirements page)
  • If the helper doesn't have permission to accept chats yet, show a short paragraph explaining this.
• List active chats by all agents, including the question details.
  • Users with room monitoring permission are able to join and monitor any of these chats. (Defined in permissions section of requirements page)
• Show the usernames of all active agents

Optional

• Show how many chats we've answered today
• Chart showing which issues/tags are common today
• Karma/per-helper data (leaderboard)
• Satisfied user counter (based on exit polling)

Activity bar

The activity bar is the main UI element of live chat. It is the selector for current chats and the main status indicator for chat agents. Features it will implement:

• Button for showing/hiding notifications
• Button to return to chat dashboard
• Tab for each open chat
• Color changes to indicate status
  • Notification button turns red when there are unseen notifications
  • Dashboard button turns yellow when new chats enter queue, red if chats are about ready to time out of the queue
  • Individual chat tabs given a "selected" look when selected
  • Individual chat tabs turn yellow when there's activity
  • Individual chat tabs turn red when there's "urgent" activity. (We need to define what's urgent)
  • The entire bar should change color when chat is open vs. closed vs. full.

Example of an activity bar overlaying a SUMO page, with notification and chat dialogs pinned to it:

Chat window/overlay/tab

This is a simple chat interface for communicating in a multi-user chatroom. Features it will implement:

• Question details, with long and less important fields collapsed
  • Question title
  • System details (OS and Firefox version)
  • Time waiting in queue
  • Other Questions fields (when did it start, how often does it happen, etc)
• Canned responses
• An ability to type messages to the user
• An ability to either type or choose commands
  • /invite username (invites the username to this chat)
  • /kick username (boots the user out of the room, room monitors only)
  • /tag tag1,tag2 (P2 requirement) (see separate chat tag PRD at Support/Live Chat)
• Handles for resizing, dragging, and pinning/unpinning (if used as overlay)
• Text formatting buttons like bold and italic (optional - not part of our PRD)
• A button to view extended question info, such as the full list of plugins
• Button somewhere in the chat or on the tab for ending the chat session
  • A warning dialog is needed before an active chat is ended
• Button for following up and/or transferring to forum (P3 requirement)
• Button/link for viewing previous chats by this user (P3 requirement)
  • Should be positioned alongside collapsed question details if implemented
• Display optional chat features if they are implemented (Channel topic, away/available status, avatar for helpers)

Notifications

A simple notification dialog to alert the agent on:

• A chat joins the queue requesting this specific agent
• A helper's username is mentioned in a chat, indicating that attention is needed
• Kudos from a chat survey (Optional)
• Chat invitations (if they exist - they're not part of our PRD)
• Private messages (if they exist - they aren't part of our PRD)

When loaded in an app tab, the app tab should change colors upon receiving a notification.

Optional features:

• Scroll through previous N notifications
• Click a notification to do a related action. (Accept the invitation, switch to the chat tab referenced, jump to the relevant part of the dashboard, etc)

Integration with kitsune questions

TBD. It might be good if a user could seamlessly post his/her chat session into the forum to get more eyeballs.

Showing live chat on specific articles

TBD

Layout possibilities

• Bar across bottom
  • Only on chat dashboard (safest option for initial implementation)
  • On all SUMO pages, but only in one tab
  • On all SUMO pages in all tabs. (best user experience)
• Sidebar
• Chats in one popup window, everything else on the chat dashboard in a separate tab
• A new tab for each chat