Was ist ein Skeleton Screen? Ladeplatzhalter, die schneller wirken

In diesem Leitfaden erklären wir, Talha Aslan und Team, das Design eines Skeleton Screens von Anfang bis Ende. Zunächst klären wir den Unterschied zum Spinner. Danach zeigen wir, wo das Muster hilft und wie Sie Layoutverschiebungen vermeiden. Außerdem behandeln wir Animation, Barrierefreiheit und die schlechten Beispiele, die uns in Audits am häufigsten begegnen. Zum Schluss erhalten Sie eine Checkliste für Ihre eigenen Seiten.

Vorab ein wichtiger Hinweis: Ein Skeleton Screen macht Ihre Website nicht schneller. Die Seite braucht weiterhin genauso lange. Allerdings wirkt das Warten klarer und weniger frustrierend. Wenn Sie das von Anfang an wissen, gestalten Sie mit den richtigen Erwartungen.

Worin unterscheidet sich ein Skeleton Screen von einem Spinner?

Ein Spinner sagt nur: „Es passiert etwas, bitte warten.“ Was kommt, verrät er nicht. Ein Skeleton Screen sagt dagegen: „Inhalt mit dieser Struktur ist unterwegs.“ Das heißt, der Spinner meldet nur einen Zustand, das Skelett meldet Zustand und Struktur. Der Unterschied wirkt klein. Trotzdem verändert er das Bild, das Besucher sich beim Warten im Kopf machen.

Der Leitfaden der Nielsen Norman Group zu Skeleton Screens zieht diese Grenze klar. Laut diesem Leitfaden passen Skelette zu ganzen Seitenladevorgängen, Spinner dagegen zu einem einzelnen Modul wie einem Videoplayer oder einer Dashboardkarte. Für lange Vorgänge wie Dateiuploads empfiehlt der Leitfaden stattdessen einen Fortschrittsbalken.

Die letzte Zeile ist ein eigenes Thema. Wann ein Ladebildschirm über die ganze Seite schadet, beschreiben wir in unserem Beitrag darüber, ob ein Preloader auf der Website sinnvoll ist. Hier konzentrieren wir uns deshalb nur auf Skelette.

Warum ist die wahrgenommene Performance so wichtig?

Wahrgenommene Performance beschreibt, wie schnell sich eine Seite anfühlt, unabhängig von gemessenen Werten. Zum Beispiel können zwei Seiten gleich lange laden. Die eine lässt Sie auf einen leeren Bildschirm starren, die andere zeigt sofort eine Struktur. Die meisten Besucher empfinden die zweite als schneller, denn das Warten bleibt kein Rätsel.

Ungewisses Warten nervt, weil nichts es erklärt. Besucher wissen nicht, ob die Seite hängt oder die Verbindung abgerissen ist. Deshalb greifen sie zur Zurücktaste. Ein Skelett verringert diesen Zweifel. Folglich richten Besucher den Blick dorthin, wo der Inhalt gleich erscheint, und stellen sich aufs Lesen ein.

Andererseits ersetzt wahrgenommene Performance niemals echte Performance. Die Core Web Vitals von Google beruhen auf echten Nutzerdaten. Den größeren Rahmen finden Sie in unserem Beitrag zu den Core Web Vitals. Kurz gesagt: Ein Skelett lässt eine schnelle Seite flüssiger wirken. Eine langsame Seite rettet es nicht.

Wann lohnt sich ein Skeleton Screen?

Die Regel ist einfach. Hat der Inhalt ein klares Layout und braucht er spürbar Zeit, sollten Sie ein Skelett erwägen. Die Nielsen Norman Group hält fest, dass Wartezeiten unter etwa einer Sekunde gar keine Anzeige brauchen. Ein kurzes Aufblitzen kann sogar stören. Für sehr lange Prozesse empfiehlt derselbe Leitfaden einen Fortschrittsbalken mit Zeitangabe.

In der Praxis wirken Skelette an diesen Stellen am besten:

• Produktlisten und Kategorieseiten, weil das Kartenraster vorhersehbar ist.
• News und Blogfeeds, denn Titel, Teaser und Vorschaubild wiederholen sich.
• Profilseiten, da sich Avatarkreis, Namenszeile und Infoblöcke leicht nachbilden lassen.
• Dashboards und Kontobereiche, weil die Daten vom Server kommen und kurze Wartezeiten häufig sind.
• Suchergebnisse, denn Anzahl und Form der Zeilen stehen vorher fest.

Eine statische Unternehmensseite, die ihren Text schon im ersten HTML ausliefert, braucht dagegen kein Skelett. Messen Sie daher zuerst, ob Inhalte wirklich verspätet ankommen.

Wie zeichnen Sie Skelette für Listen, Karten und Profile?

In der Praxis hat jeder Seitentyp sein eigenes Skelett. Das gemeinsame Prinzip lautet: Das Skelett ist ein schlichter Schatten des echten Inhalts. Nicht mehr und nicht weniger.

Auf einer Listenseite zeichnen Sie links in jeder Zeile eine quadratische Bildfläche und rechts zwei oder drei waagerechte Balken. Der erste Balken steht für den Titel und ist daher dicker. Die Balken darunter stehen für Teaserzeilen. Halten Sie den letzten etwas kürzer, denn echte Absätze enden selten mit einer vollen Zeile.

Im Kartenraster zeichnen Sie die ganze Karte. Oben sitzt ein Bildblock, darunter ein Titelbalken und ein kurzer Balken für Preis oder Datum. Nutzt das echte Kartenbild zum Beispiel das Format 4:3, sollte auch der Skelettblock 4:3 haben.

Auf einer Profilseite verwenden Sie einen Kreis für den Avatar und einen mittellangen Balken für den Namen. Darunter folgen Kästen für Kennzahlen. So verstehen Besucher den Aufbau, bevor die Details eintreffen.

Kann ein Skeleton Screen Layoutverschiebungen verursachen?

Richtig umgesetzt nicht, falsch umgesetzt durchaus, und zwar deutlich. CLS (Cumulative Layout Shift) misst, wie stark sich Seitenelemente unerwartet bewegen. Laut der Erklärung zu CLS auf web.dev gilt ein Wert von 0,1 oder weniger als gut.

Das Problem entsteht, wenn Sie das Skelett in einer Größe zeichnen und der echte Inhalt in einer anderen ankommt. Zum Beispiel ist die Skelettkarte 200 Pixel hoch, die echte Karte aber 320 Pixel. Alles darunter rutscht nach unten, und die Zeile, die der Besucher gerade liest, wandert weg. Somit verursacht das Skelett die Verschiebung, statt sie zu verhindern.

Die technische Seite und weitere Ursachen beschreiben wir im Beitrag Was ist Cumulative Layout Shift. Hier geht es also nur um den Teil, der Skelette betrifft: passende Größen.

Wie passen Sie die Skelettgröße an den echten Inhalt an?

Vor allem gilt: Das Skelett muss genau den Platz reservieren, den der echte Inhalt später einnimmt. Dafür nutzen wir einige praktische Methoden.

1. Geben Sie Bildflächen ein festes Seitenverhältnis. Dann wächst die Box nicht, wenn das Bild eintrifft.
2. Gleichen Sie die Balkenhöhe an die echte Zeilenhöhe an. Balken plus Abstand sollten Schriftgröße plus Zeilenabstand entsprechen.
3. Schätzen Sie die Listenlänge. Liefert der Server meist 12 Produkte, zeichnen Sie 12 Skelettkarten und nicht 4.
4. Legen Sie für variable Inhalte eine Mindesthöhe fest. Orientieren Sie sich dabei am Durchschnitt der echten Daten.
5. Bauen Sie das Skelett als Ladezustand der echten Komponente und nicht als eigene Komponente. So passt es sich jeder Designänderung an.

Der letzte Punkt geht am häufigsten unter. Getrennte Skelette entfernen sich mit der Zeit von der echten Komponente. Drei Monate später gestaltet jemand die Karte neu. Das Skelett behält die alte Größe, und dann beginnen die Verschiebungen.

Wie sollte die Animation eines Skeleton Screens aussehen?

Häufig sehen Sie einen sanften Schimmer, der von links nach rechts gleitet, oder ein langsames Pulsieren im Farbton. Diese Bewegung verstärkt die Botschaft „lädt noch, hängt nicht“. Allerdings rät die Nielsen Norman Group zu sparsamer Animation, weil sie ablenken und Probleme bei der Barrierefreiheit verursachen kann.

Wir empfehlen deshalb folgende Balance:

• Halten Sie den Schimmer langsam und kontrastarm, damit er die Augen nicht ermüdet.
• Lassen Sie alle Karten im gleichen Rhythmus schimmern, denn ein unruhiger Rhythmus wirkt nervös.
• Stoppen Sie die Animation und zeigen Sie statische graue Flächen, wenn Nutzer im System reduzierte Bewegung eingestellt haben.
• Animieren Sie nur GPU freundliche Eigenschaften wie Transformation und Deckkraft und meiden Sie Eigenschaften, die das Layout neu berechnen.

Der letzte Punkt betrifft die Performance. Eine schwere Animation beschäftigt den Hauptthread und kann Reaktionen auf Eingaben verlangsamen. Anders gesagt: Was Sie gegen das Warten einbauen, darf die Interaktion nicht bremsen.

Welche Regeln zur Barrierefreiheit gelten für einen Skeleton Screen?

Eine blinde Person, die mit einem Screenreader surft, sieht keine grauen Flächen. Deshalb braucht das Skelett zusätzliche Informationen, damit es ihr etwas mitteilt. Sonst sagt der Screenreader entweder nichts oder liest leere Elemente einzeln vor.

Hier kommt der ARIA Zustand „busy“ ins Spiel. Die Referenz von MDN zu diesem Zustand erklärt, dass er assistiven Technologien meldet, dass sich ein Element noch verändert. Folglich warten diese Technologien mit Ansagen, bis das Laden endet. Sie markieren den Bereich also während des Ladens als beschäftigt und entfernen die Markierung, sobald der Inhalt da ist.

Zudem setzen wir diese Schritte um:

• Verbergen Sie dekorative Skelettflächen vor assistiven Technologien, damit niemand sie einzeln hört.
• Ergänzen Sie einen kurzen Hinweis „Inhalt lädt“, den nur Screenreader ansagen.
• Verschieben Sie den Fokus nicht gewaltsam, wenn der Inhalt eintrifft. Nutzer bleiben dort, wo sie waren.
• Halten Sie den Kontrast des Skeletts sanft, aber nicht so dunkel, dass man es mit echtem Inhalt verwechselt.

Die übergreifenden Standards finden Sie in unserem Beitrag zur barrierefreien Website nach WCAG.

Betrifft die WCAG Regel zu bewegten Inhalten auch Skelette?

Teilweise, denn der Geltungsbereich entscheidet. Das Erklärdokument des W3C zu Pausieren, Stoppen, Ausblenden betrifft bewegte Inhalte, die automatisch starten, länger als fünf Sekunden dauern und neben anderen Inhalten erscheinen. Nutzer brauchen dann eine Möglichkeit, sie anzuhalten. Dasselbe Dokument hält fest, dass eine Ladeanimation als einziger Inhalt der Seite außerhalb dieses Rahmens liegen kann.

Skelette decken allerdings meist nur einen Teil der Seite ab. Zum Beispiel sind Kopfbereich und Titel fertig, während die Produktliste darunter schimmert. In diesem Fall läuft die Animation neben anderen Inhalten. Daher ist es sicher, den Schimmer bei längerem Laden zu stoppen oder auf statische Flächen zu wechseln.

Unsere Faustregel lautet: Innerhalb weniger Sekunden endet die Animation oder sie friert ein. So ermüden Sie niemanden und bleiben nah am Standard.

Welche schlechten Skeleton Screen Beispiele gehen nach hinten los?

Bei Audits stoßen wir oft auf Skelette, die nicht funktionieren oder sogar schaden. Das sind die häufigsten Fehler:

1. Unpassendes Layout. Das Skelett zeigt ein dreispaltiges Kartenraster, die Seite erscheint dann als einspaltige Liste. Besucher sehen zwei Layouts und sind verwirrt.
2. Endloses Skelett. Die Anfrage scheitert, doch das Skelett bleibt. Besucher warten ewig und sehen nie eine Fehlermeldung.
3. Aufblitzen bei schnellem Laden. Der Inhalt kommt sehr schnell, also blinkt das Skelett nur einen Augenblick auf.
4. Alles zum Skelett machen. Auch fertige Elemente wie Menü, Logo und Footer werden grau. Die Seite wirkt grundlos leer.
5. Aggressiver Schimmer. Eine helle, schnelle Lichtwelle strengt die Augen an.
6. Falsche Anzahl. Die Seite zeichnet acht Skelettkarten, zwei Produkte kommen an, und die Seite schrumpft plötzlich.

Die meisten dieser Fehler zeigen sich erst nach der Entwicklung, nicht im Design. Deshalb sollten Sie Skelette immer mit gedrosselter Verbindung testen.

Warum ist ein Skelett nur mit Rahmen eine schwache Wahl?

Die Nielsen Norman Group beschreibt drei Arten von Skeletten. Zunächst gibt es die Variante, die statische Inhalte und Bilder nachbildet. Daneben existiert eine animierte Variante. Schließlich zeigt eine dritte Variante nur den Rahmen: Kopfbereich, Footer und Hintergrund, ohne jeden Hinweis auf die Inhaltsstruktur.

Diese dritte Art empfehlen wir daher nicht. Ihr fehlt genau die Strukturinformation, die Skelette wertvoll macht. Außerdem wirkt die Seite kaputt, wenn das Warten länger dauert. Besucher sehen eine Vorlage mit leerer Mitte und denken womöglich, die Website sei abgestürzt.

Zeigen Sie stattdessen im Inhaltsbereich zumindest einige realistische Entwurfszeilen. Dann wissen Besucher, was sie erwartet.

Worin unterscheidet sich ein Skeleton Screen von einem leeren Zustand?

Ein Skelett sagt: „Inhalt kommt gleich.“ Ein leerer Zustand sagt dagegen: „Hier gibt es noch keinen Inhalt.“ Beides zu verwechseln, ist ein häufiger Fehler. Ist zum Beispiel der Warenkorb leer, entfernen Sie das Skelett, sobald die Antwort eintrifft, und zeigen eine klare Meldung für den leeren Zustand.

Sonst starren Besucher weiter auf graue Flächen und glauben, sie müssten noch warten. Das ist eine Variante des endlosen Skeletts. Legen Sie deshalb für jedes Skelett drei Ausgänge fest:

• Inhalt da. Das Skelett macht dem echten Inhalt Platz, ohne Verschiebung.
• Kein Inhalt. In diesem Fall verschwindet das Skelett, und eine kurze Erklärung mit einem Button für den nächsten Schritt erscheint.
• Fehler. Auch hier verschwindet das Skelett, und eine schlichte Fehlermeldung mit der Option zum erneuten Versuch erscheint.

Wenn Sie diese drei Zustände von Beginn an im Designentwurf zeichnen, verschwinden die Szenarien, die Teams in der Entwicklung vergessen. Zudem beantwortet das für alle die Frage, wann das Skelett endet.

Wie lange sollte ein Skeleton Screen sichtbar bleiben?

Ein Skelett bleibt, bis der Inhalt eintrifft. Allerdings verlangen beide Extreme Aufmerksamkeit. Das erste sind sehr kurze Ladezeiten. Kommt der Inhalt innerhalb weniger hundert Millisekunden, verzichten Sie auf das Skelett oder zeigen es erst nach kurzer Verzögerung. Sonst blitzt es auf.

Das zweite sind lange Ladezeiten. Dauert eine Anfrage länger als erwartet, ergänzen Sie neben dem Skelett eine kleine Statusmeldung. Nach einer festgelegten Zeit wechseln Sie dann in einen Fehlerzustand. Die Seite könnte zum Beispiel „Inhalt konnte nicht laden, bitte erneut versuchen“ anzeigen.

Wir binden diese Schwellen bewusst an keine feste Zahl, denn Ihre eigenen Daten sollten entscheiden. Schauen Sie in Ihre echten Nutzermessungen und prüfen Sie, wie lange das Skelett tatsächlich sichtbar bleibt.

Wie arbeiten Skelette mit Bildern und Lazy Loading zusammen?

Bilder kommen oft zuletzt an, deshalb zählen sie am meisten. Die Bildfläche ist daher der wichtigste Teil jedes Skeletts. Eine Box mit festem Seitenverhältnis hält den Platz frei, bis das Bild eintrifft. Dann füllt sich die Box, und nichts bewegt sich.

Beim Lazy Loading laden Bilder außerhalb des sichtbaren Bereichs erst beim Scrollen. Auch hier gilt dieselbe Logik: Geben Sie Bildflächen vorab eine Größe. Die Auswirkungen auf SEO und Ladezeit beschreiben wir im Beitrag Was ist Lazy Loading.

Andererseits sollten Sie das größte Bild der Seite, meist das Heldenbild oben, nie verzögert laden. Kommt dieses Bild spät, bleibt das Skelett lange stehen, und auch der Largest Contentful Paint verzögert sich.

Beeinflusst ein Skeleton Screen die SEO?

Indirekt schon, deshalb verdient das Thema Aufmerksamkeit. Das Skelett selbst ist kein Rankingfaktor. Allerdings verschlechtert ein schlechter Aufbau den CLS, und CLS gehört zu den Messwerten der Seitenerfahrung.

Ein größeres Risiko betrifft die Sichtbarkeit von Inhalten. Manche Seiten holen sämtliche Inhalte erst im Browser per JavaScript, sodass das erste HTML nur das Skelett enthält. Bei diesem Aufbau haben Suchmaschinen beim Verarbeiten der Seite womöglich Mühe, an den Inhalt zu gelangen. Daher ist es solider, wichtige Texte auf dem Server zu erzeugen und Skelette nur für wirklich verspätete Teile einzusetzen.

Zusammengefasst ist ein Skeleton Screen ein Werkzeug für die Nutzererfahrung. Bei der SEO achten Sie darauf, dass es keine Inhalte verdeckt und das Layout nicht verschiebt.

Wie sollten Textbalken die echte Textdichte abbilden?

Zudem ist die Balkenlänge ein kleines, aber wirkungsvolles Detail. Haben alle Zeilen dieselbe Länge, wirkt das Skelett künstlich. Echter Text endet an unterschiedlichen Stellen, also wirkt eine kurze letzte Zeile natürlicher.

Gestalten Sie Titelbalken dann dicker und kürzer als Textbalken. Ein Kartentitel braucht zum Beispiel meist eine oder zwei Zeilen, ein Teaser zwei oder drei. Bildet das Skelett dieses Verhältnis ab, lesen Besucher die Hierarchie, bevor der Inhalt da ist.

Vermeiden Sie gleichzeitig zu viele Details. Für jedes Icon, jedes Abzeichen und jedes kleine Label eine eigene graue Fläche zu zeichnen, überfrachtet das Skelett. Zeigen Sie die Hauptblöcke und lassen Sie kleine Verzierungen weg. Kurz gesagt: Ein Skelett ist eine Skizze, keine Kopie.

Dieselbe Schlichtheit gilt für die Farbe. Ein neutrales Grau und ein etwas hellerer Ton genügen für die meisten Designs. Bei dunklen Themes wählen Sie einen Ton, der etwas heller als der Hintergrund ist. Somit bleibt das Skelett in beiden Themes gut erkennbar.

Wie sollten sich Skelette bei Seitenwechseln verhalten?

Auf Websites, die wie Single Page Apps aufgebaut sind, lädt ein Klick auf einen Link nicht die ganze Seite neu. Nur der Inhaltsbereich wechselt. Hier helfen Skelette sehr, denn Nutzer sehen sofort, dass ihr Klick angekommen ist.

Auch der CLS Artikel auf web.dev geht darauf ein. Erwartete Änderungen direkt nach einer Nutzerinteraktion gelten nicht als Problem. Es ist sogar besser, sofort eine Ladeanzeige zu zeigen, als Inhalte zu verschieben, wenn eine Anfrage endet. Ein Skelett direkt nach dem Klick ist also ein sicherer Schritt für ein stabiles Layout.

Trotzdem ist es nicht immer richtig, alten Inhalt zu löschen und zum Skelett zurückzukehren. Ändert sich zum Beispiel ein Filter, wirkt es ruhiger, die aktuellen Produkte abzublenden und eine kleine Anzeige darüberzulegen, als die ganze Seite grau zu färben. Treffen Sie diese Entscheidung danach, wie Menschen die Seite nutzen.

Wie dokumentieren Sie das Skelett im Designsystem?

Auf Websites mit vielen Seitentypen führt es zu Inkonsistenz, wenn jedes Teammitglied Skelette nach eigenem Ermessen baut. Deshalb empfehlen wir, das Skelett im Designsystem als eigenen Zustand festzuhalten. Jede Komponente sollte zudem ihren Ladezustand definieren.

Nehmen Sie folgende Punkte in die Dokumentation auf:

• Skelettfarbe mit eigenen Werten für helles und dunkles Theme.
• Eckenradius, identisch mit der echten Komponente.
• Höhe der Textbalken und Zeilenabstand.
• Tempo und Richtung der Animation sowie ihr Stopp bei reduzierter Bewegung.
• Anzahl der Skelettelemente und woher diese Zahl stammt.
• Was im leeren Zustand und im Fehlerzustand erscheint.

So erfinden Entwickler Skelette nicht für jede neue Seite neu, sondern folgen der bestehenden Regel. Beispielszenario: Ein Blog gestaltet seine Beitragskarte neu, und dank der Dokumentation wechselt die Skelettkarte noch am selben Tag auf die neue Größe. Somit verschwindet das Risiko von Verschiebungen, bevor es entsteht.

Wer sollte Ihren Skeleton Screen umsetzen?

Ein Skelett ist eine Komponente, über die Design und Entwicklung gemeinsam entscheiden sollten. Das Design legt Layout und Tonalität fest. Die Entwicklung kümmert sich dann um Größen, Zustände und Markierungen für Barrierefreiheit. Arbeiten beide getrennt, entstehen die oben genannten Abweichungen.

Beispielszenario: Ein Onlineshop möchte Skelette auf seiner Kategorieseite. Die Designerin entwirft in Figma einen eleganten Schimmer. Der Entwickler programmiert das Skelett jedoch als eigene Komponente mit fester Anzahl von vier Karten. Folglich erscheinen zuerst vier Karten, danach kommen zwölf und strecken die Seite. Ein gemeinsamer Plan hätte das von Anfang an verhindert.

Wenn Sie diesen Teil von Beginn an richtig aufsetzen möchten, planen wir im Rahmen unseres Webdesign Angebots Ladezustände, Fehlerbildschirme und das Größensystem gemeinsam.

Wie testen Sie einen Skeleton Screen?

Zunächst ist der einfachste Weg, das Netzwerk in den Entwicklertools Ihres Browsers zu drosseln. Dann sehen Sie das Skelett mehrere Sekunden lang und beobachten den Wechsel zum echten Inhalt. Bewegt sich dabei etwas, passen die Größen nicht.

Außerdem empfehlen wir diese Tests:

1. Prüfen Sie mobile und Desktopbreiten getrennt, denn das Skelett muss an jedem Umbruchpunkt stimmen.
2. Lassen Sie die Anfrage absichtlich scheitern und prüfen Sie den Fehlerzustand.
3. Öffnen Sie die Seite mit einem Screenreader und hören Sie, was er ansagt.
4. Aktivieren Sie im Betriebssystem reduzierte Bewegung und bestätigen Sie, dass die Animation stoppt.
5. Vergleichen Sie den CLS in echten Nutzerdaten vor und nach dem Launch.

Überlassen Sie das Testen nicht einer einzigen Person. Das Design prüft das Layout, die Entwicklung Größen und Zustände, die Redaktion realistische Textlängen. Echte Produktnamen sind zum Beispiel oft länger als der Beispielname im Entwurf. Daher liefert ein Test mit echten Daten immer verlässlichere Ergebnisse als ein Test mit Beispieldaten.

Diese Tests dauern einige Stunden. Trotzdem kosten sie weit weniger als eine unbemerkte Verschiebung im Livebetrieb, die Nutzer wochenlang stört.

Passt ein Skeleton Screen zu jeder Website?

Nein, und das ist auch in Ordnung. Konkret ist ein Skelett auf Seiten mit wenig Inhalt, die der Server schnell ausliefert, eine überflüssige Schicht. Auf einer einseitigen Imageseite kommen Text und Bilder zum Beispiel ohnehin mit dem ersten Laden. Ein Skelett bringt dort nur zusätzlichen Code und Pflegeaufwand.

Auf datenlastigen Seiten, die sich oft aktualisieren oder je nach Nutzer unterscheiden, sind Skelette dagegen wertvoll. Dashboards, Produktlisten, Postfächer und Suchergebnisse gehören in diese Gruppe.

Stellen Sie sich also eine Frage: Wartet der Besucher gerade auf etwas, und hat dieses Etwas ein Layout? Lauten beide Antworten ja, lohnt sich ein Skelett. Weitere typische Fehler in Oberflächen finden Sie in unserem Beitrag über UX Fehler, die Umsatz kosten.

Sollen wir Skelettladezustände gemeinsam in Ihre Website einbauen?

Auf den ersten Blick wirkt ein Skeleton Screen wie ein kleines Detail, deshalb lassen Teams ihn oft weg. Gut umgesetzt beruhigt er den Moment des Wartens. Schlecht umgesetzt verschiebt er die Seite und kostet Vertrauen. Größen, Fehlerzustände, Animationsbalance und Barrierefreiheit gehören daher in einen gemeinsamen Plan.

Wir, Talha Aslan und Team, behandeln Ladezustände bei neuen Websites und bei Relaunches von Anfang an als Teil des Designs. Wenn wir diesen Teil für Ihre Listen, Karten oder Dashboards umsetzen sollen, fordern Sie ein Angebot über unsere Seite zum Webdesign an. Wir sehen uns Ihre Seitentypen an und erstellen ein Angebot mit passendem Umfang und Zeitrahmen.