youseedk / dna

CSS framework for yousee.dk
ISC License
6 stars 6 forks source link

UX Guideline suggestion to DNA #248

Closed Nicolai-Fogh closed 4 years ago

Nicolai-Fogh commented 4 years ago

Ideas to where a spinner can be used:

Best practices:

Unless the spinner is placed in a button then add a describtive text telling the user what is happening (See example Automatisk fejlsøgning) Try to always keep spinners in page and not in overlays If a spinner is triggered by a button, place the spinner in the button, and disable the button while the spinner is visible. If only a portion of a page is displaying new content or being updated, place the spinner in that part of the page. If you are unsure where to place the spinner, place it where you want the user's attention to be when loading is finished. Only show a spinner if the expected wait time is more than a second. Add a minimum of 100s of delay to mitigate lots of unnecessary spinners showing up at the same time.

Spinner with system information example: Image