NAI_visualspec

NAI 3.0
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUPDATE SUMMARY
1
08.10.11 Page 8: Add download link for the target icon of bubble hover state.
Plese use the target icon fot fixing visual Defect VD016.
08.10.11 Updated the Navigation pane: the selected state is only avaialbe at same level.
08.10.11 Added spec for Interactive legend and tool palette.
1
Hover State target icon (please download from here):
https://wwwin-svn/svn/cue-design/Projects/NAI 3.0/Visual Spec/icons/bubble-hover /bubble_hover.png

NAI 3.0 ITERATION 1
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4710 GLOBAL DASHBOARD - OVERALL STRUCTURE
2
1
2
3
BackgroundColor(See "Backgounds and Wallpaper"—Table 1):
http://wwwin-dev-new.cisco.com/CustAdv/ts/tso/servtech/sstg/ue-dev/standards/browser/design/backgrounds/#t=2
ContainerDropShadow(See”Color Guide” —Table 3. “Drop Shadows-Dark” )
http://wwwin-dev-new.cisco.com/CustAdv/ts/tso/servtech/sstg/ue-dev/standards/browser/design/colors/index.shtml
ContainerOutlines(See”Color Guide” —Table 4. “Content Dividers/Container Outlines” )
The following links will lead you to the AUESS Standards Site for further design specifications:
2
3
1
TA12316 for US4710: Global Dashboard
1

NAI 3.0 ITERATION 1
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4710 GLOBAL DASHBOARD - TOGGLE BUTTONS
3
8
7
8
9
10
Header (see “Header” - Fig 17 and Table 2)
http://wwwin-dev-new.cisco.com/CustAdv/ts/tso/servtech/sstg/ue-dev/standards/browser/aa/header/#t=1
AxisLegend(See “Chart-BasicElement” - Fig12 and Table 1 )
http://wwwin-dev-new.cisco.com/CustAdv/ts/tso/servtech/sstg/ue-dev/standards/browser/cc/charts/elements.shtml#t=2
XY Axis / X and Y ZTick Mark (See “Chart-BasicElement” - Fig12 and Table 1 )
Chart Legend (See “Chart-BasicElement” - Fig 13 & Fig 14 )
Bubble State (See “Chart-Bubble” - Table 1 )
http://wwwin-dev-new.cisco.com/CustAdv/ts/tso/servtech/sstg/ue-dev/standards/browser/cc/charts/bubble.shtml#t=0
1
1

NAI 3.0 ITERATION 1
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4710 GLOBAL DASHBOARD - HEADER & RICH TABS
4
8
9
1
2
3
Richtabs(see “Tabs” - Table 5)
http://wwwin-dev-new.cisco.com/CustAdv/ts/tso/servtech/sstg/ue-dev/standards/browser/cc/content_tabs/#t=2
* Color and gradient listed in the table refer to” Color Guide”
Header (see “Header” - Fig 17 and Table 2)
http://wwwin-dev-new.cisco.com/CustAdv/ts/tso/servtech/sstg/ue-dev/standards/browser/cc/content_tabs/#t=2
*If the score change is
zero, the score will display ”+0”
ELEMENT SAMPLE STYLE FONT
Tab Group title-purple
Gradient:
0%= #695399,
100%= #8c71c8
Outline stroke= 1px, #695399
Gradient:
0%= #4076be
100%= #669ae0
Outline stroke=1px, #4076be
Gradient:
0%= #51918f
100%= #69adab
Outline stroke=1px, 51918f
Arial Bold 8pt, #ffffff
Tab Group title-blue
Tab Group title-green
4 Arial Bold 9.5pt, #333333Tab Title
5 Arial Regular 22pt, #8e8e8eScore
6 Arial Regular 12pt, #98c944Score change (+)
7 Arial Regular 12pt, #db6852Score change (-)
1 2 3
4
5 6 78
9
1

NAI 3.0 ITERATION 1
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4710 GLOBAL DASHBOARD - GUTTER
5
1 Gutter(see “Navigation Pane” - Fig 5, Figure 6 and Table 1)
http://wwwin-dev-new.cisco.com/CustAdv/ts/tso/servtech/sstg/ue-dev/standards/browser/aa/navigation_pane/#t=2
1
The component widges are separated by a gutter. The gutter contains a small grip to indicate that it can be dragged to resize the widget.
1

NAI 3.0 ITERATION 1
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsCONTAINER FOR: US4693 BREADCRUMBS / US4701 BUBBLE CHART / US4485 CONSISTENCY TIME SERIES / US4669 CONSISTENCY INDEX: MUTI-FAMILY/PLATFORM/BUBBLE SELECTION
6
6
7
8
9
10
1
2
3
Tree (see “Navigation Trees” - Fig 17)
http://wwwin-dev-new.cisco.com/CustAdv/ts/tso/servtech/sstg/ue-dev/standards/browser/aa/trees/index.shtml#t=2
AxisLegend(See “Chart-BasicElement” - Fig12 and Table 1 )
XY Axis / X and Y ZTick Mark (See “Chart-BasicElement” - Fig12 and Table 1 )
Chart Legend (See “Chart-BasicElement” - Fig 13 & Fig 14 )
Bubble State (See “Chart-Bubble” - Table 1 )
Hierachy Levels Arial Bold 15pt, #007fc5
Arial Bold 15pt, #333333
Arial Regular 12pt, #333333
Current Level
Device Count
4 Arial Regular 12pt, #333333Date Title
5 Arial Regular 12pt, #333333View / Range Selector
1 2 3
4 56 7
8
8
9
9
10
5
TA12330 for US4693 / TA12121 for US4701 / TA12343 for US4485 / TA12333 for US 4669
1

NAI 3.0 ITERATION 1
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4693 BREADCRUMBS
7
1 Breadcrumbnormal/hoverstate(see"Breadcrumbs"—Table1):
http://wwwin-dev-new.cisco.com/CustAdv/ts/tso/servtech/sstg/ue-dev/standards/browser/cc/breadcrumbs/#t=2
1
TA12330 for US4693
1

NAI 3.0 ITERATION 1
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4701 BUBBLE CHART
8
1
2
BubbleState(See “Chart-Bubble” - Table 1 )
Hover State target icon (please download from here):
https://wwwin-svn/svn/cue-design/Projects/NAI 3.0/Visual Spec/icons/bubble-hover /bubble_hover.png
Datattip:
General Usage:
http://wwwin-dev-new.cisco.com/CustAdv/ts/tso/servtech/sstg/ue-dev/standards/browser/cc/charts/contextual.shtml#t=0
Color of datatip (see table.7- Datatip):
http://wwwin-dev-new.cisco.com/CustAdv/ts/tso/servtech/sstg/ue-dev/standards/browser/cc/charts/contextual.shtml#t=2
Spec for padding and space around text:
http://wwwin-dev-new.cisco.com/CustAdv/ts/tso/servtech/sstg/ue-dev/standards/browser/tdf/tooltips/index.shtml#t=2
1
2
TA12121 for US4701
1

NAI 3.0 ITERATION 1
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4485 CONSISTENCY TIME SERIES
9
1
User will be able to collapse/expend the time series.
Collapse the time series: Hover on the arrow, the arrow turns blue. Click on the blue arrow to collapse the time series.
TA12343 for US4485
1
1

NAI 3.0 ITERATION 1
10
1
2
.
When time series is collapsed, the arrow turns a pointing-up gray arrow.
Bubble chart will automatically scale to take over the whole space.
TA12343 for US4485
1
2
1

NAI 3.0 ITERATION 1
11
1 User will be able to expend the time series again.
Expend the time series: Hover on the arrow, when the arrow turns blue, click on the blue arrow to expend the time series.
TA12343 for US4485
1
1

NAI 3.0 ITERATION 1
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4485 CONSISTENCY TIME SERIES VISUAL SPEC (WHEN TIME SERIES COLLAPSED)
12
TA12343 for US4485
1

NAI 3.0 ITERATION 1
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4669 CONSISTENCY INDEX: MUTI-FAMILY/PLATFORM/BUBBLE SELECTION
13
1
User will be able to collapse/expend/resize the left side navigation.
Drag to resize: Hover on the divider and the divider will turn blue. Drag the blue divider to resize the left side navigation pane.
TA12343 for US4485
1
1

NAI 3.0 ITERATION 1
14
1
1 Collapse the navigation pane: Hover on the arrow and the arrow will turn blue. Click on the blue arrow to collapse the left side navigation pane.
1

NAI 3.0 ITERATION 1
15
1
2
When the navigation pane is collapsed, the arrow turns into a pointing-right arrow.
Bubble chart and time series will scale automatically if the navigation pane is collapsed.
*This mock-up shows both the time series and the navigation pane are collapsed.
1
2
1

NAI 3.0 ITERATION 1
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4669 CONSISTENCY INDEX: MUTI-FAMILY/PLATFORM/BUBBLE SELECTION VISUAL SPEC (HOVER ON LEFT SIDE DIVIDER)
16
1

NAI 3.0 ITERATION 1
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4669 CONSISTENCY INDEX: MUTI-FAMILY/PLATFORM/BUBBLE SELECTION VISUAL SPEC (NAVIGATION PANE COLLAPSED)
17
1

NAI 3.0 ITERATION 1
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS5136 KPI DROP DOWN (DEFAULT SPEC)
18
1

NAI 3.0 ITERATION 1
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS5136 KPI DROP DOWN
19
TA12343 for US4485
1
1
1 Drop Down Menu (see “Menu Overview—Figure 21 for padding, Figure 22 for space, Table 1 for Font and selected blue)
http://wwwin-dev-new.cisco.com/CustAdv/ts/tso/servtech/sstg/ue-dev/standards/browser/cc/menu_overview/#t=2

NAI 3.0 ITERATION 1
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4696 SOFTWARE RANGE KPI
20
1

NAI 3.0 ITERATION 1
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4695 SOFTWARE AGE KPI
21
TA12343 for US4485
1

NAI 3.0 ITERATION 1
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsREPORT KPI
22
1

NAI 3.0 ITERATION 2
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4342 CONSISTENCY: OUTLIER LIST BY DEVICE GROUP—BUBBLE CHART
24
1
2
1
When users turn on outliers at device group level, users should be able to see outlier percentage diaplayed in pie chart on the bubbles.
Legend shows Non-Outliers and Outliers
1
2

NAI 3.0 ITERATION 2
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4342 CONSISTENCY: OUTLIER LIST BY DEVICE GROUP—GRID VIEW
25
1
2
3
Details Pane: (seeTable.1)
http://wwwin.cisco.com/CustAdv/ts/tso/servtech/sstg/ue/standards/browser/ssue/ssue_modules/details_pane/#t=2
Tables: (see Table.3)
http://wwwin.cisco.com/CustAdv/ts/tso/servtech/sstg/ue/standards/browser/cc/tables/building_blocks.shtml#t=2
Table Sorting:
http://wwwin.cisco.com/CustAdv/ts/tso/servtech/sstg/ue/standards/browser/cc/tables/sorting.shtml#t=0
1
2
3
1

NAI 3.0 ITERATION 2
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4343 CONSISTENCY: OUTLIER IDENTIFICATION IN DEVICE VIEW—BUBBLE CHART
26
1
2
When users turn on outliers at device level, users should be able to see outlier devices are color coded.
Legend shows Non-Outliers and Outliers
1

NAI 3.0 ITERATION 1
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4343 CONSISTENCY: OUTLIER IDENTIFICATION IN DEVICE VIEW—GRID VIEW
27
TA12343 for US4485
1
2
3
Table Sorting:
1
2
3
1

NAI 3.0 ITERATION 2
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4668 CONSISTENCY INDEX—NETWORK LEVEL PEER COMPARISON
28
1
2
The bubble represent peer only appear at Network level.
When peer is turned on, the peer trend line will be displayed in time series.
1
2

NAI 3.0 ITERATION 1
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4670 CONSISTENCY MONITORING - GRID VIEW
23
1
2
3
1
2
3
Table Sorting:
1
Grid View is available at any level.
When users swtich to the grid view, users will see the grid view corresponds to what they were
looking at in the bubble chart view.
Ex: If users are looking at the bubble chart view like below, users will be able to switch to the grid
view and se the table as the left screen shot:

NAI 3.0 ITERATION 1
NAI 3.0 ITERATION 2
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4691 SOFTWARE PIE CHART
29
1 Color of Pie Chart (See “Chart Overview”—Table 1):
http://wwwin-dev-new.cisco.com/CustAdv/ts/tso/servtech/sstg/ue-dev/standards/browser/cc/charts/#t=2
1
*Follow the order of the color in the table above for color usage;
Ex: When there are three versions of software, then:
Software 1 color=color #1 Software 2 color=color #2 Software 3 color=color #3

NAI 3.0 ITERATION 2
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4669 DEVICE FLAGS
30
1 When user turns on flag, the devices with flags will be display as a bubble with a flag icon on it.
1
Flag Device Icons on SVN:
Green Flag icon: https://wwwin-svn/svn/cue-design/Projects/NAI 3.0/Visual Spec/icons/Flag/flag_device_green.png
Red Flag icon: https://wwwin-svn/svn/cue-design/Projects/NAI 3.0/Visual Spec/icons/Flag/flag_device_red.png
3
2
2&3 Users will see the the flagged devices have a flag icon on the Navigation tree and the legend.

22
NAI 3.0 ITERATION 2
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4698 POLICY DISPLAY (PLATFORM LEVEL)
31
1 When user turns on policy at platform level, user should be able to see the the platform which has a policy (either there is a policy device or a policy
configuration file) with a starburst icon on the platform bubble.
2&3 Users will see the the platform with a policy has a starburst icon on the Navigation tree and the legend.
1
3
2
Policy icon on SVN:
https://wwwin-svn/svn/cue-design/Projects/NAI 3.0/Visual Spec/icons/policy/policy.png
Policy Legend icon on SVN:
https://wwwin-svn/svn/cue-design/Projects/NAI 3.0/Visual Spec/icons/policy/policy_legend.png

30
22
1 When user turns on policy at device level, if there is a policy device in the platform, user should be able to see the the device bubble surrounded by
a starburst policy icon.
2&3 Users will see the the policy device has a starburst icon on the Navigation tree and the legend.
Policy icon on SVN:
https://wwwin-svn/svn/cue-design/Projects/NAI 3.0/Visual Spec/icons/policy/policy.png
NAI 3.0 ITERATION 2
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4698 POLICY DISPLAY (DEVICE LEVEL—POLICY DEVICE)
32
1
3
2

When user turns on policy at device level, if there is no policy device in the platform but there is a policy configuration file appled to the platform,
users should be able to see a hollow starburst icon represent the policy configuration file.
Users will see the the policy icon displayd in the legend.
Policy config file icon on SVN:
https://wwwin-svn/svn/cue-design/Projects/NAI 3.0/Visual Spec/icons/policy/policy_config.png
NAI 3.0 ITERATION 2
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4698 POLICY DISPLAY (DEVICE LEVEL—POLICY CONFIGURATION FILE)
33
1
2
1
2

Policy and Flags can be displayed at the same time.
There is a situation that the policy device may have a flag note too. If users turn on policy and flags at the same time, the policy device which has
a flag will be display with both flag icon and starburst outer ring.
Users will see the the policy icon and flag icons displayed side by side at the navigation pane.
NAI 3.0 ITERATION 3
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4698 POLICY DISPLAY (DISPLAY WITH FLAGS)
34
1
2
1
2

30
22
NAI 3.0 ITERATION 2
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS5169 TOOL PALETTE
35
1
2
3
4
4
5
6
Compact Menus (Figs. 24, 29 Table 1)
http://wwwin-dev-new.cisco.com/CustAdv/ts/tso/servtech/sstg/ue-dev/standards/browser/cc/menu_overview
Toolbar Buttons (For gradients see Table 3, for size see redline below)
http://wwwin-dev-new.cisco.com/CustAdv/ts/tso/servtech/sstg/ue-dev/standards/browser/cc/toolbar
For spacing and container see table above and redline below
Tooltips
http://wwwin-dev-new.cisco.com/CustAdv/ts/tso/servtech/sstg/ue-dev/standards/browser/tdf/tooltips
1
2
3
Header Bar Background Gradient:
#b9bcc1 - #9199a7
Background: White
Drop Shadow: Drop Shadow Medium
1 px Interface 30
Toolbar Container
Divider
5
6

30
22
NAI 3.0 ITERATION 2
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS5169 TOOL PALETTE
36
3
4
Drawers (For gradients see Table 1, for size see redline below)
http://wwwin-dev-new.cisco.com/CustAdv/ts/tso/servtech/sstg/ue-dev/standards/browser/aa/drawers
For Spacing and size see redline below
Scroll Bars - if needed (Skinny - Figs. 3,5, Table 2)
http://wwwin-dev-new.cisco.com/CustAdv/ts/tso/servtech/sstg/ue-dev/standards/browser/cc/scrollbar
1
2
Header Bar Background Gradient:
#b9bcc1 - #9199a7
Small Text - White, Bold
Container
1
2
4
Background: White
Drop Shadow: Drop Shadow Medium
3

30
22
NAI 3.0 ITERATION 3
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4694 INTERACTIVE LEGEND
37
1
1 See visual spec p.36 for details.
Users can turn on interactive legend to color code the groups.

22
NAI 3.0 ITERATION 3
JULY 05, 2011AUESS + DESIGN TEAM: Ingrid Lu, Mocha Wu, Jeremiah Johnson, Asli OrsUS4694 INTERACTIVE LEGEND
38
1
1 See visual spec p.36 for details.
Users will be able to change colors.

NAI_visualspec

Recommended

Recommended

More Related Content

Similar to NAI_visualspec

Similar to NAI_visualspec (20)

NAI_visualspec