Revision Sue Ann Harkey DASHBOARD WAVE 0 UX WIREFRAMES BEHAVIORS SPEC

Transcription

1 Revision.0.00 Sue Ann Harkey DASHBOARD WAVE 0 UX WIREFRAMES BEHAVIORS SPEC

2 performance Grid column headers: ) Mouse over states % normal state = grada<on display - Clicking on bucon area ac<vates that column as the sor<ng column 8, Sorted column indicators normal state 90, 0,, Button mouse hover dropdown mouse hover Normal Sorted states = flat grey background - Arrow at top poin<ng up = ascending - Arrow at top poin<ng down = descending - Only column header can maintain a sorted state at a <me - On Split bucons clicking on bucon area ac<vates that column as the sor<ng column normal Ascending sorted Descending sorted Split bugon mouse overs Default Performance gadget columns TBD: (Yossi recommends these 8) (with bar graph) - % Change: (with bar graph) - % Trends (Sparkline) Show value Avg. position Conversion rate CPA ) BuCon Mouse over state = blue with exposed arrow as dropdown ac<vator - Upon click of dropdown menu indicator arrow opens said dropdown - Columns with menu op<ons include: % Change: X X - Background displays under op<on on mouse- over - Op<ons display in alphabe<cal order - = default selec<on for column - Column headers text wraps onto lines - Yellow checkbox indicates current selec<on upon open

3 columns performance Column: Performance grid ) Click Column header - no dropdown op<ons 8, 90, 0, ) graph - numbers(#) are lev aligned include, on thousands. - Blue bar represents # s 6px default MIN length, 80px = MAX length - Grey bar represents total and is rela<onal to # s Vs. total - Total blue bar is same length as grey bar in rows, 6px default MIN length, 80px = MAX length - Total row text is bold performance Change columns, ) graph enlarged with expanded column width - Graph expands horizontally on column expansion to 6px default MIN length, 80px = MAX length 4) - When total number of columns exceed total gadget width, 600px, system adds horizontal scroll bar and pushing columns on the far right out of view. 8, ) Grid bar chart specs 6) Same bar graph is used for all numeric and currency fields TBD. 90, 0, $USD,000 etc. Performance: Lines = 4px MIN length = 6px (default) MAX length = 80 Grey = HEX #D9D9D9 Blue = HEX #8ED, Deple<on%: & Budget Lines = 4px MIN length = 6px (default) MAX length = 80 Grey = HEX #D9D9D9 Green = HEX # Performance: Lines = 4px MIN length = 6px (default) MAX length = 80 Grey = HEX #D9D9D9 Red = HEX #C Performance: Lines = 4px MIN length = 6px (default) MAX length = 80 Grey = HEX #D9D9D9 Green = HEX # ,00 8,80 6

4 % Change Column % Change Column: Performance performance 8, 90, 0,, performance Imprs. ) % Change Column header - Split bucon with dropdown (See menu op<ons below) - Selected variable op<on displays in column header nd line text aver :. Some op<ons will be abbreviated TBD ) % Change graph - numbers(#) are Right aligned include + and - and % as shown - Grey bar represents +&- 00% value, center line represents 0 between +&- - Red bar represents nega<ve values - green bar represents posi<ve values - Total bar = total % change (see Young s func<onal specifica<ons for details) ) % Change graph enlarged with expanded column width - Graph expands horizontally on column expansion to MIN default = 6px, MAX = 80 4) - When total number of columns exceed total gadget width 600px system adds horizontal scroll bar pushing columns on the far right out of view ) Tool Tips on % Change cells mouse over displays more details: date range, change%, Difference of amount. 8, % Change: (Oct 4 - Oct 0) Change of: Difference of:,000 clicks % Change: Show value Avg. position 90, 0,, 4 Conversion rate CPA CPM 6

5 Trends (Sparkline) Column Trends Column: Performance performance 8, 90, 0, % Change: Imprs. ) Trends Column header - Split bucon with dropdown (See menu op<ons below) - Fixed width column = px - Selected op<on displays in column header wrapped text aver :. Some op<ons will be abbreviated TBD ) Trends graph (see spec for details) - Displays area graph in cell See Notebook for HEX and style details ) Mouse- over detail of Trends graph displays more detailed enlarged view - column <tle - date range - Min / Max values of said metric See Notebook for HEX and style details 4) Trends graph enlarged with expanded column width - Graph expands horizontally only on column expansion to MIN default = px, MAX = 80, 4 performance Show value Avg. position 8, Trends on: (Oct 4 Oct 0) Min 4 - Max 9 Conversion rate 90, 0, CPA,

6 4 performance performance Accessorie Men s shoe Women s sh shoes All campai -- MIN total 0 CH s MIN Content + px padding 8, 90, 0,, 8, 90, 0,, % % Avg. % Conversio MIN total 0 CH s MIN Content + MIN total 0 CH s Fixed at px px padding 6 Total width = 600px - column expands beyond margin adding to scroll range up to 0px OR content MAX + px padding L&R per column Add Columns / remove behavior columns: on Grids on Grids only (ala Windows Finder) ) Example of addi<onal column added to ) grid Default via the columns Add order / remove TBD. columns Edit Column Panel op<ons on previous and default splid widths ) listed System in adds alphabe<cal horizontal order: scroll bar when addi<onal - Account = column 0px exceeds max gadget width - of XXX = 60px. New columns are added as - the last visible = 0px column (mandatory) on the right. (Display - = order 0px TDB) ) - Columns that can = 7px not fit in max width XXX - TBD = 0px are accessible via the horizontal - CPM = 0px scroll bar - % = 0px - = 7px - = 60px - 60px - X = (fixed width) - % Change: X = 7px ) MIN column size = total 0 characters including + cell padding of px L&R. - Sort indicator centered in resized cell. - IF column content is less then total 0 characters the column width defaults to content + px padding L&R - MAX column width = 0pxs OR when content is greater then 0pxs width = s content px padding L&R - If column contains icon on LeV margin icon is retained in MIN CH width ) When columns are reduced in width all columns move LeV. Blank space displays on Right when columns are moved LeV. 4) Mouse over text displays full content of reduced cell ) Bar graphs enlarge when column is expanded. See and % Change specs 6) X column is fixed width at px. Area graphs does not expand with column, instead there is a mouse- over detail of graph. See Trend Column spec

7 Add / remove columns to chart on Grids Add / remove columns on Grids performance performance Add / remove columns 8, 90, 0,, ) Access Add / remove columns from Tool Bar bucon ) Upon click system displays Add / remove columns Edit Panel pushing the grid down the screen ) Column op<ons: all display in alphabe<cal order. The default column can not be removed so displays in non- editable state. Columns that were displaying in the grid have their checkbox selected. 4) Data: is updated live upon select or deselect of column checkboxes in the grid below the Edit Panel ) Submit bucons: Upon select of Apply system retains changes and closes Edit Panel. Updates to data are performed live upon selec<on or deselec<on of checkboxes. Upon submit of Cancel system closes Edit Panel without upda<ng data in grid rever<ng to same array upon opening of Edit Panel Account % Changes CPM Trends (Sparkline) 4 Apply Cancel 8, 90, 0,, Cont. on next slide

8 Cont. from previous slide: Add / remove columns to chart performance 0 0 8, 7 90, 90 Add / remove columns: on Grids only ) Example of addi<onal column added to grid via the Add / remove columns Edit Panel on previous slide ) System adds horizontal scroll bar when addi<onal column exceeds max gadget width of 600px. New columns are added in their default order posi<ons ala s tab behavior. (Display order TBD) ) Columns that can not fit in max width of 600px are accessible via the horizontal scroll bar 0,, 890 Note: We need to establish the column order for Performance gadget. To compare, the column order for s tab is listed below: - - Ad groups - Monthly budget % - Avg. posi<on - Conversion - - Avg. CPM - Nega<ve keywords Note: campaigns Select columns dropdown lists columns in their display order. To be consistent we would list the columns for Performance gadget in their display order TBD.