search

gliff-ai / audit

gliff.ai AUDIT – a user-friendly browser interface for exploring a fully documented audit trail of dataset development from the gliff.ai platform for machine learning regulation
https://gliff.ai
GNU Affero General Public License v3.0
1 stars 0 forks source link

Skeleton Loading Screens #110

Open joshuajames-smith opened 2 years ago

joshuajames-smith commented 2 years ago

Problem

There is certain areas of our platform which users have to wait while content is loaded. We currently use spinners however these do not feedback to the user about what is going on (reason for loading, loading progress, or what content is being loaded). Users need to be more engaged with the loading process.

Solution

Skeleton Screens are a common UX feature used in other platforms like LinkedIn, Youtube etc. These screens give the user feedback on what content is loading (used on for front-end loading, not back-end e.g. image upload) where rough grey shapes are replaced by the loaded data (text or images). These do not offer a reason for loading or the loading progress but do inform the user what is being loaded.

The Skeleton Screens for AUDIT handle text on a white background. Text is generally represented by a box, in this case use a thin, rectangle with rounded edges which uses the colours #F2F2F2 (light grey, background colour of platform) and #D8D8D8 (grey) for the animation. Ideally, the skeleton screens should demonstrate the actually amount of content but has no interaction functionality (ie. clicking to open).

AUDIT: Overview

during loading > AUDIT-overview

after loading > Skeleton Screen – AUDIT Overview – 3

AUDIT: Details

during loading > AUDIT-details

after loading > Skeleton Screen – AUDIT Details – 3

Considered Alternatives

I considered both the pulsate and wave skeleton screen animations. They are both widely used and have a very similar perception to loading speed. Visually, pulsate is less distracting?

As skeleton screens do not offer a reason for loading or loading progress, this could be introduced via a snackbar message after a certain amount of time has lapsed. This is all dependent on loading context.

Additional Context (delete if not applicable)

MaterialUI supports skeleton screens, check out their documentation. To support some of my reading around UX and skeleton screens, we want a slower motion for the skeleton screen animation. The MaterialUI documentation doesn't seem to cover speed, but this stackoverflow thread does.

joshuajames-smith commented 2 years ago

relates to https://github.com/gliff-ai/manage/issues/244 relates to https://github.com/gliff-ai/curate/issues/313