Microsoft Chat 2.

xa – Enter Chat
Overview user flow

I. Link to Chat Room (variable)

Link to offsite services Exit Chat

Passport Passport Sign-in/up * Referring v-root

N
Authenticated? web svc.* branding maintained

Y Signed-in

Terms & Conditions Entry

UI Preloader Chat UI
Screen

1.1 1.2 1.3

Primary screen elements: Primary screen elements: Primary screen elements:

- Nickname (text-field – infocus onLoad)
- Accept Terms & Conditions (checkbox)
- Enter (enabled when checkbox=checked)
- Cancel (sends back to referring page)
Error Conditions:
- Unsupported user agent (supported browsers + link to downloads)
- Nickname in use (Field highlighted/inFocus)
- Nickname contains illegal chars (Field highlighted/inFocus)
- Status text (Svc connection/UI Code/Images) - Chat title bar and global controls
- Loader bar (% increase per loaded element) - Answers from the experts message pane (if moderated = true)
- Upcoming moderated chats list for current room (if applicable) – SC Chat svc. - Guest chat message pane
- Cancel control (Q Back to entry screen or referring previous referring link?) - Input region and associated controls
- Stats toggle/User list region
- See wireframe (p2) for additional info.

1
 Microsoft Chat 2.xa – UI Overview
Wireframe and Screen Regions

Moderated Chat
1. Chat Title Bar
Primary screen elements:
Brand-specific Masthead - Chat Room Name
- Chat Options (Web page dialog – modal)
- Help (New Window – modeless)
1 Chat Room Name Options | Help | Exit | Sign Out - Exit Chat (Open issue – can we track referring page through passport?)
- Sign Out (Microsoft HP or referring community page if poss.)
Answers from the Experts Exp/Col Control
Stratus region 2. Message Display Panes
4 Primary screen elements:
- Pane Title
- Expand/Collapse controls
Message Display - Scrollable text regions
- Right click options
- Select All
- Copy
- Search Web/Microsoft.com for [first 30 chars of Selected Text]
2
Guest Chat Exp/Col Control
3. Input Region
Primary screen elements:
- Input and Feedback Controls
- Insert/Remove Code Sample
- Emoticons Cascading Menu
- Feedback form layer hide/show
Message Display User list tree control 5 - Rich text area (Enter vs. ctrl/shft +enter for new line/submit?)
- Msg Routing (“Ask Experts” checkbox for question submission
- Send button

4. Status Region
Primary screen elements:
Input and Feedback Controls - Status Image (online/away)
- Username (Status) text
- Right- or left- click on entire region invokes online/away status menu
3 Msg Routing
Rich-text input
Send 5. User List
Primary screen elements:
- Tree control grouped by role (Moderator/Expert/Guest)
- Organizing node displayed only if role is currently present
Brand-specific Footer
- Status image (online/away/ignored)
-Right click options
- Private message…
- Ignore toggle (check)
Scrollable region Resize/splitter
6. Chat Title Bar
Primary screen elements:
- User List
Private Messaging Conversation/recipient Status x 7
- Status/Hover Color indicator
- User/Conversation Status Image (Disabled/Ignored/Online)
- Right click option
- Close (relative) conversation

6 7. Conversation/recipient status & close control

Message Display 8 Primary screen elements:
- No error conditions
Active - “Username [Date/Time conversation started]”
Conversation List - (X) to close conversation
- See (11) or functional specification for error conditions

8. Message display pane

Plain-text input Send 9
9. Input textarea and send control

2
 Microsoft Chat 2.xa – UI Overview
Chat Entry Screen

Neickname/Accept Terms chat entry screen (sample error condition shown)

3
 Microsoft Chat 2.xa – UI Overview
UI Pre-loader Comp

UI pre-loader comp. Element should be aligned center and horizontally aligned between the masthead and footer. (redlineImages/CFC_preloader.gif) **Should never overlap branding.
4
Microsoft Chat 2.xa – UI Overview
UI Pre-loader Comp

5
 Microsoft Chat 2.xa – UI Overview
UI Pre-loader Visual Specification

UI Preloader Visual Specification (redlineImages/CFC_preloaderSPX.gif

6
 Microsoft Chat 2.xa – UI Overview
Moderated Chat UI Comp

Moderated chat overview comp (redlineImages/CFC_moderated.gif)

7
 Microsoft Chat 2.xa – UI Overview
Unmoderated/Peer-to-Peer Chat UI Comp

Unmoderated chat overview comp (redlineImages/CFC_unmoderated.gif)

8
 Microsoft Chat 2.xa – Core Chat UI
Title Bar and Chat Pane Headings Visual Updates and Specification

22. Add Exit Chat link between Help and Passport scarab - see functional spec for details. (redlineImages/CFC_titlebar.gif)

Chat pane heading visual spec. (redlineImages/CFC_headerBars_SPX.gif)

9
 Microsoft Chat 2.xa – Core Chat UI
Input Region Toolbar Visual Specification

Input region controls – addition of Chat Feedback control - visual/hover/click styles remains unchanged from chat 2.0. (redlineImages/CFC_input_and_menus.gif)

10
 Microsoft Chat 2.xa – Private Messaging
Private Messaging User Fflow

User1 Sends PM

Roles:
1.1

Sender Recipient Shared Activity

PM Win Opens and/or

recipient added to open PM
Win

1.2

Sender Prompted: Recipeint

Recipient has PM Declined/Disabled
enabled? N End/Close
1.3

Recipient prompted /
Enters/Sends initial message Prompt removed
pending PM
Accept PM? N
1.4 1.5 1.6

PM Win Opens and/or

Sender added to open PM
Win

1.7

Private chat

1.8

Private message draft high-level user flow

11
 Microsoft Chat 2.xa – Private Messaging
Inline Private Message Notification Comp

Inline notification and right-click (on username, not entire region) sample (redlineImages/PM_inlineNotify.gif)

Username:
1. Click: Highlights username in userlist (same behavior as elsewhere in chat)
2. Right-click: Exposes PM prompt-specific right-click menu with Accept/Decline options

Accept:
1. Removes/hides PM prompt, no browser refresh
2. If user has PM window open, new username added to conversation list and highlighted (see 2.x) else new PM window is launched with
conversation in focus.

Decline:
1. Removes/hides PM prompt, no browser refresh

12
 Microsoft Chat 2.xa – Private Messaging
Inline Private Message Notification Visual Specification

Inline private message notification visual spec (redlineImages/PM_inlineNotofy_SPX.gif)

13
 Microsoft Chat 2.xa – Private Messaging
Multiple User Private Message Window

Multi-user private message window - Resizable, default size = W550px X H350px. (redlineImages/PM_window.gif)

- Window Title: Chat Private Messages (# Open conversations)

- New conversations are added to the top of the conversation list (in the example above the active (blue) conversation would be the most recent)
- User status for Away and Online user same images as Chat 2.0
- User status for Declined/Disabled uses status_declined.gif

14
 Microsoft Chat 2.xa – Private Messaging
Private Message Input Regions and Resize Behaviors

8. Input region visual details (redlineImages/pm_inputregion_spx.gif)

Resize splitter detail - visual gradient/style of splitter should follow existing Chat 2.0 style.
(redlineImages/PM_resizeDetail.gif)

15
 Microsoft Chat 2.xa – Private Messaging
Multiple User Private Message Window – Header and Prompt Bar

PM message are a header and prompts/close control states (redlineImages/PM_headerBars_SPX.gif)

Note: Close image in the messaging bar and the right click menu shown in 2.2/Figure 6 perform the same operation – 1) closing the active conversation removing that user from the userlist and 2) moving focus to
the user/conversation above.

16
 Microsoft Chat 2.xa – Private Messaging
Multiple User Private Message Window – User List Specification

PM window user list styles and behavior (redlineImages/PM_userlist_SPX.gif)

17
 Microsoft Chat 2.xa – Private Messaging
Multiple User Private Message Window – Header and Prompt Bar

PM message are a header and prompts/close control states (redlineImages/PM_headerBars_SPX.gif)

Note: Close image in the messaging bar and the right click menu shown in 2.2/Figure 6 perform the same operation – 1) closing the active conversation removing that user from the userlist and 2) moving focus to
the user/conversation above.

18
 Microsoft Chat 2.xa – Core Chat UI
Feedback Control and Form Comp

(redlineImages/CFC_feedbackControl.gif)

and close the control From the Thank You display after the form is submitted, clicking anywhere onscreen outside the control should close it as well. Core chat UI should not refresh.
(redlineImages/CFC_feedbackForms.gif) – no form validation necessary

19
 Microsoft Chat 2.xa – Core Chat UI
Feedback Form Specification

Feedback form control visual specification (redlineImages/CFC_feedback_SPX.gif)

20
 Microsoft Chat 2.xa – Core Chat UI
Chat Pane Username Hover and Click Behavior Updates

User name hover and click behavior (redlineImages/CFC_text_usernameClickHover.gif)

21
 Microsoft Chat 2.xa – Core Chat UI
User List and Status Area Updates

(redlineImages/CFC_userlist.gif)

Changes include: Radio indicator to replace check in status menu (online/away) addition of check mark on ignore toggle to indicate state (redlineImages/CFC_userlist_nodes.gif)

22
 Microsoft Chat 2.xa – Core Chat UI
User List and Status Area Visual Specification

(redlineImages/CFC_userlist_status3.0.gif)

User status area visual spec. No hover behavior necessary, entire region is clickable - see fig. 18. (redlineImages/CFC_userlistTOP_SPX.gif)

23
 Microsoft Chat 2.xa – Core Chat UI
Chat Pane Right-Click Menu

Right-click menu in chat pane and search behavior (redlineImages/CFC_searchRTCLICK.gif, CFC_searchRTclick_detail.gif)

24
 Microsoft Chat 2.xa – Core Chat UI
Chat Pane Search Right-Click Behavior (DRAFT)

Search behavior - only a sample - needs to be vetted by PM and development. (redlineImages/CFC_searchBehavior.gif)

25
 Microsoft Chat 2.xa – Core Chat UI
Text/Messaging Updates

Text/Message style changes for guest chat pane. (redlineImages/CFC_text_revs.gif)

26
 Microsoft Chat 2.xb [DRAFT]
Moderated Chat UI / Multi-user PM Window / Exit Prompt

2. Revised moderated chat exit prompt

3. Multi-user PM window (Bold+* = New message/

conversation)
1. Moderated Chat – Question List with item selected

27
 Microsoft Chat 2.xb – Chat Management Tool [DRAFT]
Question Manager

4a. Question Manager – No item selected 4b. Question Manager – Item selected – question area populated 4c. Question Manager – clicked – input area populated by
by Accept/Ignore/Assign controls and question Question ID# and A:. Cancel Answer is enabled and Expert/Guest
routing controls disabled with Expert Selected. Cancel answer
returns UI state shown in 4b.

4e. Editable Regions (Q/A signifiers not editable)

28