Microsoft.com Chat Ux Design

Microsoft Chat 2.xa – Enter Chat Overview user flow

I. Link to Chat Room (variable)

Link to offsite services

Exit Chat Passport Authenticated?

Y

Passport Sign-in/up web svc.*

N

* Referring v-root branding maintained

Signed-in

Terms & Conditions Entry Screen

UI Preloader

Chat UI

1.1

1.2

1.3

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)

Primary screen elements: - Status text (Svc connection/UI Code/Images) - Loader bar (% increase per loaded element) - Upcoming moderated chats list for current room (if applicable) – SC Chat svc. - Cancel control (Q Back to entry screen or referring previous referring link?)

Primary screen elements: - Chat title bar and global controls - Answers from the experts message pane (if moderated = true) - Guest chat message pane - 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: - Chat Room Name - Chat Options (Web page dialog – modal) - Help (New Window – modeless) - Exit Chat (Open issue – can we track referring page through passport?) - Sign Out (Microsoft HP or referring community page if poss.)

Brand-specific Masthead

1

Chat Room Name

Options | Help | Exit | Sign Out

Answers from the Experts

Exp/Col Control Stratus region

4

Message Display

2

Guest Chat

Exp/Col Control

Message Display

2. Message Display Panes Primary screen elements: - Pane Title - Expand/Collapse controls - Scrollable text regions - Right click options - Select All - Copy - Search Web/Microsoft.com for [first 30 chars of Selected Text]

3. Input Region

5

User list tree control

Primary screen elements: - Input and Feedback Controls - Insert/Remove Code Sample - Emoticons Cascading Menu - Feedback form layer hide/show - 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: - Status Image (online/away) - Username (Status) text - Right- or left- click on entire region invokes online/away status menu

Input and Feedback Controls

3

Msg Routing

Rich-text input

5. User List

Send

Primary screen elements: - Tree control grouped by role (Moderator/Expert/Guest) - Organizing node displayed only if role is currently present - Status image (online/away/ignored) -Right click options - Private message… - Ignore toggle (check)

Brand-specific Footer

Scrollable region

Resize/splitter 6. Chat Title Bar

Private Messaging

x

Conversation/recipient Status

6

Primary screen elements: - User List - Status/Hover Color indicator - User/Conversation Status Image (Disabled/Ignored/Online) - Right click option - Close (relative) conversation

7

7. Conversation/recipient status & close control

Message Display

8

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

Active Conversation List

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

Recipient has PM enabled?

Sender Prompted: Recipeint Declined/Disabled

N

End/Close

1.3

Y

Enters/Sends initial message

Recipient prompted / pending PM

1.4

1.5

Accept PM?

N

Prompt removed

1.6

Y 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 by Accept/Ignore/Assign controls and question

4c. Question Manager – clicked – input area populated by 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