Professional Documents
Culture Documents
xa – Enter Chat
Overview user flow
Y Signed-in
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
2
Microsoft Chat 2.xa – UI Overview
Chat Entry Screen
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
6
Microsoft Chat 2.xa – UI Overview
Moderated Chat UI Comp
22. Add Exit Chat link between Help and Passport scarab - see functional spec for details. (redlineImages/CFC_titlebar.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
1.2
Recipient prompted /
Enters/Sends initial message Prompt removed
pending PM
Accept PM? N
1.4 1.5 1.6
1.7
Private chat
1.8
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
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)
14
Microsoft Chat 2.xa – Private Messaging
Private Message Input Regions and Resize Behaviors
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
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
17
Microsoft Chat 2.xa – Private Messaging
Multiple User Private Message Window – Header and Prompt Bar
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
20
Microsoft Chat 2.xa – Core Chat UI
Chat Pane Username Hover and Click Behavior Updates
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
24
Microsoft Chat 2.xa – Core Chat UI
Chat Pane Search Right-Click Behavior (DRAFT)
25
Microsoft Chat 2.xa – Core Chat UI
Text/Messaging Updates
26
Microsoft Chat 2.xb [DRAFT]
Moderated Chat UI / Multi-user PM Window / Exit Prompt
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.
28