+- Forums (https://bdn.bdb.ai)
+-- Forum: BDB Knowledge Base (https://bdn.bdb.ai/forumdisplay.php?fid=13)
+--- Forum: BDB Dashboards Designer (https://bdn.bdb.ai/forumdisplay.php?fid=43)
+---- Forum: BDB - Designer (https://bdn.bdb.ai/forumdisplay.php?fid=29)
+---- Thread: Definition of DONE (/showthread.php?tid=480)
Definition of DONE - ArghaPratim - 12-23-2022
This document states the requirements and criteria that must be completed for a dashboard to be considered as done. It is essentially the checklist of criteria to make a product releasable.
Dashboard UI/UX
Do’s
1. Width: Standard dimension to be followed is 1300. (if no specific requirement is given)
2. Height of all the tabs should be controlled so that there shouldn’t be unnecessary scroll/empty space for the page.
3. Global fonts: If the use case requirements are to have only one single font type use global fonts.
4. The layout and the charts should serve the purpose of use case. Use appropriate charts for the KPI.
5. Follow a defined theme and palette of colors for the entire dashboard.
6. Every tab of a dashboard should follow the same theme.
7. Readability of the data is very much important.
Font size specifications:
· Dashboard Title: 22px
· Tab headers: 16 px
· Chart Title: 16 px
· Chart subtitle: 14 px
· X-Y axis description /legends :12px
8. Proper padding from left top and bottom should be maintained consistently throughout the dashboard for every component.
Ideal case keeps above 10px gap between any two components.
9. The bar size of the charts should be controlled respect to the data points.
10. All charts should have tooltips, which should be named and formatted correctly.
11. All charts should have legends associated to it if it’s having more than one series.
12. Proper axis units should be enabled.
13. Axis setup should be done such that if the values are quite high keep base zero unchecked.
14. Keep proper precision in tooltip, chart labels and tile values.
15. If there are multiple filters it’s good to display the filters applied in report.
16. If the series fields are of two different units plot them in different axis
17. The KPI card values should be formatted correctly, giving comma separation or currency/percentage depending on the value we are displaying.
18. Title / X-Y axis description should be given for every charts.
19. Slider should be enables if the data points are more, readability of the chart is important.
20. If the filter list is having more items enable search bar for combo filters.
21. In data grids, keep dimension fields to left alignment and measure fields center aligned.
22. Scroll View should be enabled when the data points are quite huge, so that we can reduce the rendering time.
23. Indicators in data grid should be placed to the right position.
24. Every toggle in dashboard should have proper styling including hover style/cursor style.
Once the user do selection the toggle cursor pointer shouldn’t prompt the user to click; Also once selected it shouldn’t be hover able.
25. Chart bar width should be controlled as per number of data points, keep standard size preferred between 40-60 px width;
26.
Don’ts
1. Don’t use high contrast/too light colors / eye hurting colors. Colors should be picked considering the audience of the dashboard.
2. Don’t use two high contrast colors in combination, it may affect the readability and user experience of the dashboard.
3. No overlapping of components.
4. If the series count is more than 5-6 don’t go for pie chart representation
5. If Data labels are enabled for charts it shouldn’t overlap with the other or we can avoid labelling insignificant figures.
6. Do not load the connections unnecessarily.
7. Once a connection is loaded unless any filter is applied the connection shouldn’t load for the next time on any interaction.
8. Don’t load all the connections at preview, say the connections should be loaded on the click of respective tabs.
Export
1. Enable PDF export for the dashboard.
2. Remove any unwanted filter variables from the excel export.
3. PDF shouldn’t be stretched or skewed, give proper orientation while exporting( p or l).
4. Give proper naming for the excel sheets and filename.
QA
1. Number of connection load; Make sure there is no unnecessary load.
2. Validate if the filter variables are passed correctly with respect to the filter selection.
3. Dashboard loading time shouldn’t take more than 8 sec.
4. None of the connections should take more than 1 sec.
5. There shouldn’t be any overlapping of components.
6. No unnecessary scrolls.
Special Note:
1. Render Callback script should be in dashboard script area.
2. Set value script will redraw the component which will set back the default styling properties, so make sure styling is done after set value also.
3.Keep Notify GV enabled either in component or updateglobalvariable script, enabling at both places will lead to multiple connection load.
4. Auto Manipulator: if applied it will set back to the chart default properties: ie for Timeline chart default is bar chart. So, we need to set the chart property in the dashboard area.
5. Use same label with different key value pair in update global variable scripts to reduce the component other than dragging different components .