Tuesday, September 29, 2015

UI Design for Viewing Data - Relate Table to Chart

User Interface Design is always an innovation art. It connects human behavior with icy cold machine code.

In the world of data analysis, charts and tables are gateways to human. Charts communicate size and quantities to human via human's natural perception of the world. However, when multiple facets of data are presented, relating size and quantities to facets becoming a burden to human. Tables, on the other hand, relate multiple faceted data in concise form to human sacrificing the advantage of human's natural perceptions for size and quantities.

The proposed user interface design is based on the above observations about tables and charts. The interface begin by presenting a data table to user with the associate charts: (Two flavor of charts are presented - vertical and horizontal bar)

Inst.MenWomenTotal
Univ14,05915,40729,466
NCTA97102199
UNK1,8762,4064,282
UNL8,0597,58815,647
UNMC7581,3872,145
UNO3,2693,9247,193
Stat Col.2,0202,7274,747
CSC6609411,601
PSC350446796
WSC1,0101,3402,350
Comm. Col.6,6197,09513,714
CCC8221,1711,993
MCC1,5941,9453,539



It is obvious that these charts are difficult to comprehend with the mixed facets of institutional and sectional totals. The idea behind the design, however, is to provide user with channel tools that can channel desired data to the the chart. Various ways can be used to select the desired data. For example, using drop-down list, checkboxes in context menu, or text/regular-expression based filtering to channel the desired data. Visual feedback can be provided to user by hiding or highlighting the data table. Possible filtering results are presented below: