search

USDA-FSA / fsa-design-system

Design System site for USDA Farm Production and Conservation products
https://usda-fsa.github.io/fsa-design-system
Other
14 stars 10 forks source link

Icon Finder Skeleton Pattern Consideration #457

Open bignamehere opened 3 years ago

bignamehere commented 3 years ago

Opening this issue to continue discussion related to issue #413 in regards to using a Skeleton Pattern vs a Progress indicator.

bignamehere commented 3 years ago

@francisrupert below is your previous suggestion.

@bignamehere,

Icon Pre-loading UI

Loading Painted
image image

Pull down my branch issue/413-shimmer for my proposed replacement of "Loading, please wait" text. View it at http://localhost:4000/fsa-design-system/components/icons/index-static-html.html

This implements the shimmer/skeleton/wireframe effect.

Implementing

Upon load...

  1. Remove the visually hidden (via .fsa-sr-only) "Loading icons..." <div>
  2. Remove aria-hidden="true" from...
    1. "Previewing..." containing block
    2. Search field's containing block (.fsa-field)
    3. From #ds-icon-find-results-id
  3. Remove each <span class="docs__shimmer">...</a>. Actually remove the element wrapper, not just the class and value.
  4. Remove docs__icons--loading from #ds-icon-find-results-id
  5. Paint results of #ds-icon-find-results-id

Let me know if you've any questions or reactions to this UI.

bignamehere commented 3 years ago

@francisrupert

I had to Google "Shimmer" to even know what I was looking into, because generally I have referred to this UX pattern as a Skeleton Screen or just Skeleton.

Here are my initial reactions...

  1. It introduces a pattern, not currently documented or available within the Design System
  2. Why aren't we using the existing and heavily documented Progress component?
  3. The overall philosophy of the Design System is to use the DS to build products, introducing patterns outside of the scope of the Design System goes against this philosophy. Why aren't we eating out own dog food?
  4. By introducing yet another way to indicate Progress or Loading, it adds confusion for Development teams as to which pattern should be used and when. The Progress component currently serves as a loading indicator in various program applications, so why isn't this pattern/component being used?
  5. The visual affect that indicates "progress" is very hard to notice, even for a someone with no visual impairment. It seems like a 508 issue if a system is trying to communicate something with such a subtle indicator. The "Shimmer" is not noticeable.
  6. A User must have pre-existing knowledge of the Skeleton Pattern to know that the page isn't broken.
  7. There is no Text-based indication ("Loading...") or message used within the pattern to help provide context... A text-based message could help solve the issues 5 and 6 above.
  8. If this pattern were to be added to the Design System, what systematic approach could we use to ensure the pattern is implemented correctly?
  9. We definitely wouldn't want to have Dev Teams come up with the Skeletons themselves (the anatomy of the Skeleton), so a CSS approach to the normal screen elements would be required, but with the nature of dynamically content, the page elements/layout/data will always be unknown until it has loaded.

Lastly, how is this new Skeleton approach better than the current implementation? How is this measured?