Successfully!

Error!

Large screen dashboard data visualization design guide

  • Last update:  2021-03-02
  • I. Demand research

    Module output
    Business demand researchBusiness Demand Research Report

    Hardware research

    big-screen dashboard hardware procurement list
    Data researchData Quality Research Report
    Key technology pre researchTechnical pre Research Report

    1. business demand research

    1) extract key indicators according to business scenarios

    Key indicators are some general words, which are the general name of a group or a series of data. Generally, an indicator occupies an area on the big-screen dashboard. Therefore, through the definition of key indicators, we can know what content will be displayed on the big-screen dashboard and how many blocks the dashboard will be divided into.

    After determining the key indicators, the priority of each indicator (primary, secondary and thirdary) is determined according to the business requirements.

    • primary: reflecting the core business content

    • secondary: used to further elaborate the main indicators

    • thirdary:supplementary information on Main Indicators

    Examples are as follows:

    1.png

    2) define the dimension of indicator analysis

    The data of the same index has different results from different dimensions.

    • Comparison: what are the differences between the data and what are the main aspects of the differences

    • Distribution category: what range and law are the data in the index mainly concentrated in

    • Proportion category: what are the components of the data in the indicator and what is the proportion of each component

    • Association class: correlation between data

    • also like Process, Map category, Interval class, Time class, Trends and etc.

    3) determine the type of visualization chart

    When a certain data relation type is determined, the corresponding charts and usage suggestions can be found according to the usage scenarios of the data, and the selection can be made among them.

    Take a shopping mall data as an example

    2.png


    2. hardware research

    Whether the big-screen dashboard has been purchased, the resolution of the big-screen dashboard, the resolution output supported by the big-screen dashboard graphics card, whether the graphics card supports the custom resolution, and the resolution supported by the HDMI line.

    Understand the resolution of physical big-screen dashboard and determine the size of design draft.


    3. data quality survey

    Data source (data entry or not), data update cycle

    Data
    Example
    Data sourcedata entry, database
    Data unitunit, decimal place
    Data update frequencyreal time, quasi real time


    II. Prototype design

    Output
    Index layout
    According to the layout of good content landing into a prototype (Demo)

    1. big-screen dashboard index layout

    Typesetting according to the business indicators set before:

    • Primary: the core business indicators are arranged in the middle, occupying a large area, and most of them are maps with rich dynamic effects

    • Secondary: secondary indicators are located on both sides of the screen, mostly for various charts

    • Thirdary: the content of auxiliary analysis can be displayed by drilling linkage and carousel

    Generally, the related indicators are adjacent or close to each other, and the indicators with similar chart types are put together, which can reduce the cognitive burden of the viewer and improve the efficiency of information transmission.

    3.png


    2. output big-screen dashboard prototype demo

    According to the layout landing into a prototype demo


    III. Visual design

    1. Define design style

    First of all, consider the report positioning, user groups, company brand, audience age and other aspects.

    According to the above report requirements, we can get keywords about report collocation. Then choose the appropriate color scheme according to the keywords.

    2. Make UI effect diagram according to demo

    According to the defined "design style" and "big-screen dashboard prototype demo", the reasonable visual design is carried out.

    3. Effect drawing landing

    Output cut.

    4. beautify demo

    Further beautify according to the renderings.


    IV. big-screen dashboard debugging

    1. Visual test

    Whether the key visual elements, font size, page dynamic effect, graphics and charts are displayed as expected, whether there is deformation, dislocation, etc.

    2. Performance and data testing

    Whether the graphics and charts animation is smooth, whether the data loading and refreshing are abnormal, whether the page display is collapsed and stuck for a long time, and whether the background control system can switch the front-end page display normally.


    V. Online operation

    Screen out problem

    Play cycle


    Attachment List


    Theme: Dashboard
    Already the First
    Already the Last
    • Helpful
    • Not helpful
    • Only read

    Doc Feedback