The document discusses strategies for presenting data in tables online. It advocates designing tables that allow users to quickly access the data they need with minimal clicks or selections. The key ideas are to shorten the path to the data, ask less of users through default options and simplified displays, and ensure fast responsiveness when interacting with tables. Proper defaults and responsiveness are important to avoid confusing or frustrating users.

1. Putting Data in Cells
Xavier Badosa (@badosa)
Idescat
March 30, 2023
Statistics Norway, Oslo

4. We
put
data
in
cells

5. We
put
data
in
cells

10. Analytical Tool

11. Abbreviation

14. Websites
as buildings

15. Websites
as buildings

16. Transparent
buildings

20. Short visitors
Most
users
Non-returning
No context
Non-experts

21. data
providers

22. data

23. data
data

24. data
s
h
o
r
t
e
n
t
h
e
p
a
t
h
t
o
data

25. land on data
A
S A P
s
h
o
r
t
e
n
t
h
e
p
a
t
h
t
o

26. The Factory Metaphor
Tables as the result... ...of a process

29. land on data
A
S A P
s
h
o
r
t
e
n
t
h
e
p
a
t
h
t
o

30. Ask
less
s
h
o
r
t
e
n
t
h
e
p
a
t
h
t
o

31. not less options
default options
Ask
less

32. not less options
default options
clicks
selections
action
decissions
concept processing
cognitive

33. not less options
default options
action
cognitive
99/1

34. not less options
default options
%
of
data
99/1
%
of
users

35. automatic criteria
default options
general

36. expert criteria
default options
table-level

37. adaptive criteria
default options
flexible

38. default dangers
99/1
unexpected
default options

42. default dangers
unawareness
99/1
unexpected
default options

44. Ask
less
s
h
o
r
t
e
n
t
h
e
p
a
t
h
t
o

45. not less options
default options
clicks
selections
action
decissions
concept processing
cognitive

46. concept processing
cognitive
simplest

47. Spanish women by age. Norway. 2023

48. Spanish women by age. Norway. 2023

49. Spanish women by age. Norway. 2023

50. land on data
A
S A P
s
h
o
r
t
e
n
t
h
e
p
a
t
h
t
o

51. data
from data
to data
data data
data
s
h
o
r
t
e
n
t
h
e
p
a
t
h
t
o

52. data
from data
to data
s
h
o
r
t
e
n
t
h
e
p
a
t
h
t
o

53. Table Builder

56. Table Builder
Table Editor
edit

57. edit
responsiveness
complexity

58. 1-2 secs. is OK.

59. You don’t expect the keyboard to be this slow!
<0.1 sec.
The user feels the system is reacting instantaneously.
>1.0 sec.
User's flow of thought is interrupted.
Jakob Nielsen

60. responsiveness

61. responsiveness

62. responsiveness

63. responsiveness

64. (in memory)
Small dataset
responsiveness

66. 2. Fetch new info
3. Repaint the whole table
1. Remove the whole table

71. Big dataset

72. Big dataset

73. Big dataset

74. Big dataset

75. Big dataset

76. Big dataset

77. Big dataset

78. Big dataset
complexity

79. Midsize dataset
prototype

80. Midsize dataset
prototype

81. Midsize dataset
prototype

84. cognitive overflow

85. cognitive overflow

86. complexity is not mobile-friendly

87. complexity is not mobile-friendly
denial

88. complexity is not mobile-friendly
42%mobile
users

89. Form is meaning

91. mitigation
damage

93. interface
double

94. vertical row

95. vertical row

96. vertical row

98. row
vertical
CSS-only solution

99. CSS-only solution
Complex rows
support
Complex columns
support

104. Thank You!

105. Bill of Mortality for 1606 & Table of Casualties in John
Graunt’s Natural and Political Observations Made Upon the
Bills of Mortality Public Domain • Maximun security cell
CC-BY-NC donkeycart • A periodic table of visualization
methods © Ralph Lengler & Martin J. Eppler
(visual-literacy.org) • Map of Europe © Google •
Barcelona/Oslo weather © Apple Inc. • IBM building ©
Denny Müller • Lobby of IBM Japan's HQ offices © IBM •
The customer is always right © Baloo • Metal Movable Type
CC-BY-SA Willi Heidelbach • Silicon 0116 6336 CC-BY Ross
Elliott • Dart board CC-BY-ND torbakhoppe • Labyrinth
CC- BY-NC-ND MDUUC_PHOTO_TEST • Hand ©
clipartpanda.com • Human brain CC-BY-SA Gutenberg
Encyclopedia • Modern Times © Warner Bros • Landing
track CC0 Monica Volpin • Rubik’s Cube © PNG All
Credits