Qfiniti 3.0 Media Player Style Guide

May, 2005

Contents

Buttons 3

Media Player Bar 4

Marker Actions 5

Stopwatch Timer Actions 6

Audio Wave Form 7

Audio Wave Form cont’d 8

Screen Window Docked 9

Screen Window Undocked 10

Marker List 11

Play List 12

Recordings 13

Media Info Display 14

Player List Menu 15

Live Monitor 16

User-defined Dialogs 17-21

3

Notes

active = .up

rollover = .ov

selected = .dn

inactive = .na

Window Screen Button states:

Display a depressed button when it is selected.

Display a not active button when a user has appropriate permissions, and can typically access the functionality the button provides. But, because of the current state of the application or current user activity this functionality is unavailable.

Display a rollover button when the cursor is hovering over it. Display a rollover button to show focus as well.

Volume Button states:Player Button states:

Player List Button states:

Toggle Arrow Button states:

ex: Player Buttons with background during play mode

ex: Player Buttons with background ex: Player Buttons with background

Display an active button when a user has appropriate permissions to access the functionality the button provides.

mute increase volume max

Player ButtonsGeneral Information

Marker states:

not applicable

4

Notes

• Should dock at the bottom of View Selector, View List, and Sidebar.

• The default width for the Player Bar is the same as the width of the Qfiniti application.

• The dimensions will expand vertically or horizontally depending on the direction the user chooses to drag the workspace or the gripper bar. As the workspace is resized, the Player will accomodate for the text to either wrap, truncate, or unwrap.

• While moving the Playhead, a tool tip will display its location as HH:MM:SS.

92 pxdefault

size

Scan lines: white, 70% transparent,

1 pixel apartGradient Values:

185, 197, 214

237, 240, 244237, 240, 244

168, 176, 191

28 px

15 px4 px9 px13 px

17 px 17 px

12 px 12 px7 px

Screen Marker“up state” purple

Evaluation Marker“up state” blue

Audio Marker“up state” orange

Text Marker“up state” green:

Media Information Display button

continuous play button

playhead

Stopwatch Timer “selected” state

scroll bar

Marker list button player list button

Media Player BarGeneral Information

10 pixels between each tick,5 seconds between ticks,

12 ticks between each minute

120 pixels=1 minute

30 second tick

Selecting a Marker brings it in front of all other Markers. Only one Marker can be selected at a time. To deselect a Marker, select away from object or on another item or click on desktop.

The “over” state for each Marker and Stopwatch Timer is displayed while active: Active means the Marker or Stopwatch Timer is in front and has been selected once.

The Playhead is always displayed on top.

CTI, Linked Transaction Marker

5

Notes

• There are two types of Markers: System Event Markers; CTI and Linked Transaction and User-defined Markers; Audio, Evaluation, Screen, And Text .

• The Marker increments the current position while it is being moved.

Editing a Marker with no duration:If two or more Markers overlap, the user may bring a Marker to the front by hovering over it (cursor converts to the hand point-ing index finger) and selecting it. Hold down the shift key while selecting the Marker (Marker converts to “selected” state) to move the “closed” Marker laterally. The duration will not change. The location will update accordingly. A Marker cannot be moved or edited until it has been brought to the front.

Adding duration to a Marker:While a Marker is in front, the cursor will change to a right pointed arrow to indicate the user is over or selected on the end point of a Marker. This allows the user to click and drag to the the Marker to the right. Text will increment the location of the end point as HH:MM:SS. The duration and end point will update accordingly.

The cursor will change to a left pointed arrow to indicate the user is over or selected on the start point of a Marker. This will allow the user to click and drag the Marker to the left. Text will incre-ment the location of the start point as HH:MM:SS. The duration and start point will update accordingly.

Editing the duration of a Marker:On a Marker with a duration, the cursor will change to a double pointed arrow to indicate the user is over or selected on the start or end point of the Marker. The duration of the Marker can then be changed by dragging to the left or right. Text will increment the location of the start or end point as HH:MM:SS. The duration, start and end points will update accordingly.

Editing the location of a Marker with a duration:On a Marker with a duration, the cursor will change to a hand pointing index finger to indicate the user is over or selected on the base of the Marker. While selected, the Marker can be moved laterally to change its location. The duration will not change. The start and end points will update accordingly. A tool tip will display the duration, start and end points of the Stopwatch Timer as HH:MM:SS.

The “over” state for each Marker is displayed while active: Active means a Marker or Stopwatch Timer is in front and has been selected once.

Marker ActionsGeneral Information

Marker, no duration “over” state

“up” state

“over” state

Marker with duration end point “selected” state

base “selected” state

“over” state

A tool tip is displayed while “hovering” over a Marker. If the Marker is expanded, the duration, start and end points will be displayed.

Tahoma reg 7 pt , Black,

(white background)

6

Notes

• The Stopwatch Timer is a user-defined way to mark the duration of specific areas of interest in a recording.

Editing a Stopwatch Timer with no duration:If two or more Stopwatch Timers overlap, the user may bring a Stopwatch Timer to the front by hovering over it (cursor converts to the hand pointing index finger) and selecting it. Hold down the shift key while selecting the Stopwatch Timer (Stopwatch Timer converts to “selected” state) to move the “closed” Stopwatch Timer laterally. The duration will not change. The location will update accordingly. A Marker cannot be moved or edited until it has been brought to the front.

Adding duration to a Stopwatch Timer:While a Stopwatch Timer is in front, the cursor will change to a right pointed arrow to indicate the user is over or selected on the right side of the Stopwatch Timer. This allows the user to click and drag the end point to the right. Text will increment the location of the end point of the Stopwatch Timer as HH:MM:SS. The duration and end point will update accordingly.

The cursor will change to a left pointed arrow to indicate the user is over or selected on the left side of a Stopwatch Timer. This will allow the user to click and drag the start point to the left. Text will increment the location of the start point of the Stopwatch Timer as HH:MM:SS. The duration and start point will update accordingly.

Editing the duration of a Stopwatch Timer:While a Stopwatch Timer is in front, the cursor will change to a double pointed arrow to indi-cate the user is over or selected on the start or end point of the Stopwatch Timer. The duration of the Stopwatch Timer can then be adjusted by dragging to the left or right. The duration, start and end points will update accordingly. Text will increment the location of the end points of the Stopwatch Timer as HH:MM:SS.

Editing the location of a Stopwatch TImer:While a Stopwatch Timer is in front and opened, the cursor will change to a hand pointing in-dex finger to indicate the user is over or selected on the center of the Stopwatch Timer. While selected, the Stopwatch Timer can be moved laterally to change its location. The duration will not change. The start and end points will update accordingly. A tool tip will display the dura-tion, start and end points of a Stopwatch Timer respectively as HH:MM:SS.

The “over” state for each Stopwatch Timer is displayed while active: Active means a Marker or Stopwatch Timer is in front and has been selected once.

Stopwatch Timer ActionsGeneral Information

Stopwatch Timer with duration

“up” state

expanded Stopwatch Timer endpoint “over” and “selected” state

expanded Stopwatch Timer base “selected” state

Stopwatch Timer, no duration

“up” state

base “selected” state

base “over” state

yellow: 255, 220, 96 opacity: 30%end line: 255, 245, 213

ex: duration tool tip

7

Notes

• The dimensions will expand horizontally depending on the width of the workspace and vertically up to the half -way point of the application.

Splitter bar allowsPlayer to expand verticallybuttons are centered top

and bottom

Player splits between the content area and Marker area to reveal the audio wave. The maximum and default height is 68 px.

rewindaudio

stopaudio

fast forward audio

Stopwatch Timer button

Add Marker button

Classifications button

Evaluations button

Export button Delete button

Tahoma boldBlack, 11 pt

Tahoma regBlack, 11 pt

Tahoma regBlack, 11 pt

The “over” state for fast forward, rewind, and pause is displayed while active: Active means the control has been selected once and is performing its defined function. Selecting the FF or Rewind button while active does not toggle the rate of speed.

Selecting the Play button plays the recording at the normal rate of speed. The Play button converts to a Pause button when selected.

The Stop button stops the recording and moves the Playhead to the beginning of the recording.

Selected Evaluation Markerblue: 59, 78, 101 opacity: 30%

end line: 238, 245, 255

Audio Wave FormGeneral Information

Screen Window button

Dock/Undock button

Tahoma bold Black, 11 pt

Selected Text Markergreen: 0, 193, 123 opacity: 30%

end line: 218, 248, 227

Selected Audio Markerorange: 255, 144, 0 opacity: 30%

end line: 255, 219, 187

Selected Screen Markerpurple: 173, 45, 232 opacity: 30%

end line: 240, 231, 255

end line: 238, 245, 255

68 pxplayaudio (toggles to the pause button when selected)

8

Notes

• The user may click and drag to select a duration of an Audio Wave in order to create a new Marker or Stopwatch Timer.

• The mouse cursor should change to a “text” cursor to indicate the user is dragging an Audio Wave duration.

default/max. height 68 px

Selected duration area color is inverted

Once a duration area is selected a new Marker or Stopwatch Timer can be created by selecting the Marker or Stopwatch Timer button. The selected duration’s start and end points are converted to either the Marker’s or Stopwatch Timer’s start and end points.

Audio Wave Form cont’dGeneral Information

center line255, 0, 0

59, 78, 101

9

Notes

• Should dock at the top and right side of the Player bar.

• The default width for the screen window is 200 px and should maintain the aspect ratio of the screen recording loaded in the Player.

• The screen window can be dragged laterally by selecting anywhere on the window other than the gripper.

resizing maintains the screen’s aspect ratio

200 px

default size

use 4 pixel border

gradient background values:top- 239, 243, 247

bottom- 208, 217, 228

gripper resizes screen window

1 pixel black border

7 px frame border 247, 250, 255

screen playback window button toggles window screen up/down

Screen WindowDocked

10 px

1 pixel255, 255, 255

110, 133, 167

10 px

The screen playback window button will be “inactive” if Qfiniti Observe Screen is not licensed.

10

Notes

• Should un-dock in the center of the monitor window.

• The default width for the un-docked screen is 750 pixels. If the screen is resized, redocked, then undocked again, the application will remember the last screen size when it re-opens.

Media player un-docked default size

750 px

660 px

Dock/Undock button toggles the screen window

Media player un-docked, no screen window

Screen Window cont’dUndocked

Media player at 50% transparency

Transparency levels are: 25%, 50%, 75%, and 100% via a task bar menu.

11

Notes

• Should dock at the top of the Player Bar direclty over the Info Display.

• The default width for the Marker List is 12 pixels smaller than the width of the Player Bar.

• The dimensions will expand vertically or horizontally depending on the number of items in the list or the direction user chooses to drag the workspace.

• The multiple Marker indicator toggles Markers with the same location and duration to the top.

• The default height is 1/2 the height of the application window.

gradient backgroundtop: 248, 249, 250

gradient backgroundbottom: 218, 225, 236

12 px

20 px

20 px

12 px

Use View List specifications for font, spacing and sorting functionaity.

use Marker List button “over”

state while open

240, 242, 248

Marker ListGeneral Information

220, 227, 2341 pixel vertical line

Media Player Info Display Bar

224, 223, 227

245, 250, 254232, 236, 246

multiple Marker indicator

4 pixel border 106, 120, 140

12

Notes

• Should dock at the top of the Player Bar direclty over the Info Display. .

• The default width for the list is 8 pixels smaller than the width of the player bar.

• The dimensions will expand vertically or horizontally depending on the number of items in the list or the direction user chooses to drag the workspace.

• The default height is 1/2 the height of the application window.

12 px

20 px

Selected recording20 px51, 102, 204

12 px5 scan lines: 1 px, 232, 237, 2331 pixel apart

Use View List specifications for font, spacing and sorting functionality and imagery.

Playing recording20 px195, 204, 219

gradient backgroundtop: 248, 249, 250

gradient backgroundbottom: 218, 225, 236

Play List button while open

Play ListGeneral Information

Media Player Bar Info Display

240, 242, 248

13

Notes

• Drag a recording from the View List

• Hover over the Media Info Display bar (Note: The Info Display area will highlight “over” state)

• The Play List will open and the recording can then be dropped into place in any order in the Playlist.

Info Display highlights when dragging a recording “over” state

Click and drag from View List

Play List up and recording added

RecordingsAdd a Recording to the Playlist

14

Notes

Scroll Bar

Media Info Display button toggles information between the Agent Name, Date, and Time and ANI, DNIS and cannot be modifi ed.

Tahoma reg 7 pt , Black,

(white background)

Arial reg 6 pt59, 78, 101,

Tahoma reg8 pt, Black

Playhead “down” state

Play mode with recording loaded

Inactive mode, no recordings loaded

Media Information DisplayGeneral Information

• The Display area provides the user with information about the currently loaded recording.

• The Playhead increments the current position while it is being moved.

Follow on TransferTahoma reg

8 pt, Black, (centered)

8 px 8 px 8 px8 px 8 px 8 px 3 px8 px

disabled

disabled

no Scroll Bar

15

Notes

Right-clicking on the Player bar displays the Menu and a submenu list.

Tahoma reg 8 pt , 35, 54, 86

Player List MenuGeneral Information

• The menu list should have a checkmark icon displayed to toggle which markers are visible and/or hidden.

• The minimum width of the menu lists are 115 pixels. The maximum width is padded by 16 pixels on each side.

16 px 16 px

16 px

10 px

115 px minimum/default

1 px border 32, 64, 128

16

Notes

Live MonitorGeneral Information

• Click on the Live Monitor button to display a Live Monitor Player session.

• An indeterminate progress bar indicates when a Live Monitor session is in progress.

Indeterminate Progress Bar

Tahaoma 8pt. reg. 35, 54, 86

disabled disabled

no Scroll Bar

17

User-Defined Marker DialogScreen Dialog Notes

• User-defined dialog is modal and provides a means to view, edit, and delete annotations.

4 px

20 px

20 px 20 px7 px

15 px

20 px

14 px

Tahoma reg. 8 pt35, 54, 86

Tahoma bld. 8 pt35, 54, 86

10 px

Only available for recording with Screens and Qfiniti Observe License.

7 px

3 px

143 px

360 px

24 px

49 px

Tahoma reg. 8 pt67, 94, 143

Tahoma reg. 8 pt35, 54, 86

Start & End positions Disabled

255, 255, 255

1 px border214, 217, 221

18

Notes

• User-defined dialog is modal and provides a means to view, edit, and delete markers.

• The following controls are displayed: Record, Play, Pause, Stop, Fast Forward, Rewind

User-Defined Marker Dialog cont’dAudio Dialog

center center

center center

Only available for recording with Qfiniti Observe Voice License.

4 px

20 px

20 px 20 px7 px

15 px

20 px

14 px7 px

Tahoma bld. 8 ptBlack

143 px

360 px

49 px

Tahoma reg. 8 pt67, 94, 143

Tahoma reg. 8 pt35, 54, 86

255, 255, 255

1 px border214, 217, 221

19

User-Defined Marker Dialog cont’dText Dialog Notes

• User-defined dialog is modal and provides a means to view, edit, and delete markers.

• This is where the user is allowed to add textual comments to a Marker.

4 px

20 px

20 px 20 px7 px

15 px

20 px

14 px

Tahoma reg. 8 pt35, 54, 86

Tahoma bld. 8 pt35, 54, 86

14 px

7 px

143 px

360 px

14 px

14 px

14 px

49 px

Tahoma reg. 8 pt67, 94, 143

Tahoma reg. 8 pt35, 54, 86

255, 255, 255

1 px border214, 217, 221

20

User-Defined Marker Dialog cont’dEvaluation Dialog Notes

• User-defined dialog is modal and provides a means to view, edit, and delete markers.

• Provides a means for the user to associate a question or performance area to a recording.

49 px

Tahoma reg. 8 pt67, 94, 143

4 px

20 px

20 px 20 px7 px

15 px

20 px

14 px

Tahoma reg. 8 pt35, 54, 86

7 px

143 px

360 px

center center

10 px

center

center

Tahoma reg. 8 pt35, 54, 86

Tahoma reg. 8 pt67, 94, 143

255, 255, 255

1 px border214, 217, 221

21

User-Defined Stopwatch Timer DialogGeneral Information

• User-defined dialog is modal and provides a means to view, edit, and delete Stopwatch Timers.

• This is where the user is allowed to add textual comments to a Stopwatch Timer.

4 px

20 px

15 px

20 px

14 px

255, 255, 255

Tahoma reg. 8 pt35, 54, 86

Tahoma bld. 8 pt35, 54, 86

14 px

7 px

143 px

360 px

14 px

14 px

14 px

49 px

Tahoma reg. 8 pt67, 94, 143

Tahoma reg. 8 pt35, 54, 86

20 px 20 px7 px

1 px border214, 217, 221

Notes