Skeleton

Skeleton används när innehåll håller på att laddas i tjänster eller på webben. Användaren behöver då få en indikation om att någonting pågår. Skeleton är visuella platshållare som presenteras i väntan på att det faktiska innehållet laddas.

Visuella exempel

Ui-kittet

Skeleton

Riktlinjer

  • Riktigt innehåll ska ersätta skeleton så snart data är tillgängligt.
  • Innehåll ska gradvis fyllas på i placeholders vartefter det är möjligt.
  • Faktiskt innehåll bör ersätta placeholders i exakt position och storlek när det laddas in.
  • Skeleton ska ha en rörelse (shimmer) som förflyttar sig från vänster till höger, vilket stödjer upplevelsen av kortare väntetid.
  • Skeleton ska ha en kort förklarande text (tex "laddar") i anslutning till sig, för att förtydliga för användaren att vi väntar på svar.

Bra att tänka på

  • Rörelsen i skeleton från vänster till höger ger bäst resultat i upplevelse av förkortad väntetid om den inte är för snabb. Tänk på att rörelsen ska vara lugn och stadig.
  • I vissa fall är det lämpligare att använda en Spinner, till exempel när ett resultat för en vanlig innehållssida laddas.

Tillgänglig komponent