Skeleton charts & empty states

carbon-design-system / carbon-charts

:bar_chart: :chart_with_upwards_trend:⠀Robust dataviz framework implemented using D3 & typescript

https://charts.carbondesignsystem.com

Apache License 2.0

913 stars 185 forks source link

Skeleton charts & empty states #407

Closed pcoccoli closed 4 years ago

pcoccoli commented 5 years ago

I am submitting a...

[x] Feature request
[ ] Design defect
[ ] Source code defect
[ ] Demo/documentation defect
[ ] Other

charts version:

0.16.24

Issue description

My project requires UI "skeletons" while data is loading.

theiliad commented 4 years ago

There have been explorations on empty states and skeletons.

Nothing that's been approved so far, I will bring up with design, thanks 🙂

theiliad commented 4 years ago

Minor explorations by Shixie

gvnmagni commented 4 years ago

Hello! We are working on the empty states for the different typologies of charts. Attached you can find a preview (sorry for the quite long image), we'd love to get a feedback on a detail.

As you can see for each chart we made two option and the difference is just in the color, second option include a light red for chart structure/grid.

This two states could become one, or they could be 2 option for 2 specific cases:

Grey option / When data is loading
Red option / When data are not available or there are issues

Using a light red could be interesting to point out errors or issues, what do you think @theiliad?

empty_states

theiliad commented 4 years ago

LGTM @gvnmagni. I like the red versions as well although I don't see a necessity for that, the lack of a chart being rendered should be alarming enough to the user/developer.

gvnmagni commented 4 years ago

Thanks Iliad, @mjabbink any preference on this? We are totally ok with both options, just wanted to understand if we like the idea of using a bit of red to give a little alarm when there are issues or if we prefer to just use the grey which might be more neutral

mjabbink commented 4 years ago

agree no red as I think that over emphasizes the issue. Belt and suspenders.

stegue88 commented 4 years ago

Hi all, please find attached the Sketch file with the design specs. Let me know if you prefer to receive directly svgs or something else instead. 200306_skeleton_emptystates.zip

theiliad commented 4 years ago

Hi all, please find attached the Sketch file with the design specs. Let me know if you prefer to receive directly svgs or something else instead. 200306_skeleton_emptystates.zip

LGTM 💯

ilariaventurini commented 4 years ago

Hello everyone! We did two simple tests with missing data (ie data = { datasets: [], labels: [] }) for scatterplot and stackedbar.

Attached you can find two gifs that show the animation between missing data and correct data (the idea is simulate the data loading).

scatterplot stackedbar

Do you think they can be fine?

theiliad commented 4 years ago

Do you think they can be fine?

looks great to me 💯

theiliad commented 4 years ago

One comment I have is that if the legend disappears then the chart should probably take the rest of the height of the container (I believe if legend renders nothing then the layout component would automatically do that)

gvnmagni commented 4 years ago

Russ, this image includes all the empty states from the design side. Development is almost done (we are evaluating what to do with skeleton, if it's worth to put some effort on it, but this is now a different issue)

empty states

anne-stevens commented 4 years ago

Here are some examples of empty state placeholders, loader states (the shimmer) and entry animation patterns from Cognos Analytics. (Note that the first couple of example take a long time to load b/c they are from a slow test environment.)

Cognos - empty state and shimmer 1.mov.zip Cognos - empty state and shimmer 2b.mov.zip Cognos - entry animation 3.mov.zip Cognos - empty state and entry animation 4.mov.zip

theiliad commented 4 years ago

Here are some examples of empty state placeholders, loader states (the shimmer) and entry animation patterns from Cognos Analytics. (Note that the first couple of example take a long time to load b/c they are from a slow test environment.)

Cognos - empty state and shimmer 1.mov.zip Cognos - empty state and shimmer 2b.mov.zip Cognos - entry animation 3.mov.zip Cognos - empty state and entry animation 4.mov.zip

@anne-stevens have you done user testing for any of these skeleton components?

They seem highly inconsistent with the real chart that's rendered afterwards.

Overall I think it's a bit loud on the screen

caesarsol commented 4 years ago

Just created https://github.com/carbon-design-system/carbon-charts/issues/568 to track the error states. They are considered external to this task.