„Ihre Daten werden geladen. Bitte einen Moment Geduld…“
Diese Hinweismeldung kann einerseits nervig sein, weil als Nutzer gewartet werden muss, andererseits kann dies hilfreich sein, weil darauf hingewiesen wird, dass Daten geladen werden.
Auch wenn eine Ladeanzeige auf den ersten Blick als störend empfunden werden kann, erfüllt sie eine zentrale Funktion in der Nutzerführung: Sie signalisiert klar, dass ein Prozess im Hintergrund läuft und die Anwendung aktiv arbeitet. Ohne diesen Hinweis könnten Nutzer fälschlicherweise annehmen, dass die App nicht reagiert oder ein Fehler vorliegt.
Der Loading Spinner in Power Apps ist dabei ein essenzielles visuelles Element. Er vermittelt dem Nutzer, dass Inhalte aktuell geladen oder verarbeitet werden. Dies schafft Transparenz, reduziert Unsicherheit und beugt Frustration bei längeren Ladezeiten vor. Eine gut platzierte Ladeanzeige verbessert somit nicht nur die Benutzerfreundlichkeit, sondern stärkt auch das Vertrauen in die Anwendung.
Hilfreiche und wichtige Eigenschaften
Label Text
Ohne begleitenden Text könnte der Nutzer nicht wissen, was genau passiert. Ein Loading Spinner allein zeigt zwar Aktivität an, aber nicht, welcher Prozess gerade läuft.
Label Position
Der Text sollte so nah wie möglich am Spinner platziert sein, damit Nutzer sofort erkennen, dass beide Elemente zusammengehören.
Text über dem Spinner –> Der Nutzer liest zuerst die Information, bevor er die Animation sieht.
Text unter dem Spinner –> Die Animation zieht zuerst Aufmerksamkeit auf sich, der Text liefert dann die Erklärung.
Spinner Size
Ein zu kleiner Spinner kann für Menschen mit Sehbeeinträchtigungen schwer erkennbar sein.
Die Größe sollte so gewählt sein, dass sie auch bei hoher Zoomstufe oder auf mobilen Geräten gut sichtbar bleibt.
Groß –> Wichtiger, globaler Prozess (z. B. Datenbankabfrage)
Klein –> Lokaler, kurzer Prozess (z. B. Speichern eines Formulars)
Spinner Color & Track Color
Die Farbe muss sich deutlich vom Hintergrund abheben, damit der Spinner sofort erkennbar ist.
Ein zu schwacher Kontrast kann dazu führen, dass Nutzer den Ladeprozess gar nicht bemerken.
Schwarz: neutral –> kann immer verwendet werden, löst aber keine Aufmerksamkeit bei dem User aus
Grün: positiv –> ideal für Erfolgsprozesse
Rot: warnend –> geeignet für Fehlerprozesse
Blau: beruhigend –> gut für das Laden eines Prozessfortschrittes
Effiziente Nutzung des Loading Spinners
Nutzung von Steuerelement “Timer” mit “Loading Spinner”
Wie lange soll der Loading Spinner angezeigt werden? Nur eine bestimmte Zeit oder so lange bis alle Daten erfolgreich geladen sind?
Je nach dem welchen Zweck der Loading Spinner erfüllen sollen, soll er auch eine entsprechende Zeit lang eingeblendet sein.
Nehmen wir folgendes Szenario als Beispiel:
Der Nutzer wählt ein Element aus einer Liste (Beispiel: Kaffeemaschinen) aus. Beim Anwählen des Elementes wird der User darauf hingewiesen, dass das gewählte Element geöffnet und er automatisch weitergeleitet wird.
Als ergänzendes Beispiel (welches wird aber hier nicht einbauen): Währenddessen wird u.a. geprüft, ob der User berechtigt ist diesen Datensatz zu öffnen, der Datensatz aktiv ist und auf welchen Screen die Navigation erfolgen soll.
Wir gehen Folgendermaßen vor:
Schritt 1: Wir haben eine Gallery mit Kaffeemaschinen auf unserem leeren Screen erstellt.
Schritt 2: Setzen einer Variable auf „OnSelect“ der Gallery.Set(varBoolShowLoadingSpinner, true)
Wir möchten, dass die Gallery verdeckt wird, sobald ein Element aus der Liste gewählt wird, sodass die Überprüfung für das gewählte Element nicht unterbrochen wird und der User nicht vom Screen wegnavigieren kann.
Für das Anpassen der Hintergrundfarbe verweden wir einen Container.
Schritt 3: Einfügen eines Containers.
Schritt 4: Der Container besitzt folgende Eigenschaften:x-Wert: Gallery.X
y-Wert: Gallery.Y
Width: Gallery.Width
Height: Gallery.Height
Schritt 5: Fill-Farbe des Containers ändern aufRGBA(242, 242, 242, 0.5)
Schritt 6: Einfügen von Steuerelement „Spinner“ innerhalb des Containers.
Schritt 7: Der Spinner besitzt folgende Eigenschaften:x-Wert: Gallery.X
y-Wert: Gallery.Y
Width: Gallery.Width
Height: Gallery.Height
Schritt 8: Label-Text des Loading Spinners ändern aufDie Details zur Kaffeemaschine werden geöffnet...
Schritt 9: Setzen einer Variable auf Eigenschaft „Visible“ des Containers.
varBoolShowLoadingSpinner
Wir möchten, dass alle Überprüfungen erfolgen, sobald ein Gallery-Element gewählt wird. Je nach Menge der auszuführenden Aktionen, kann dies unterschiedlich kurz oder lang dauern. Deshalb verwenden wir hierfür einen Timer.
Schritt 10: Einfügen von Steuerelement „Timer“.
Schritt 11: Setzen einer Variable auf “OnSelect” der Gallery:Set(varBoolStartTimer, true)
Schritt 12: Setzen von Eigenschaft „Visible“ des Timers auffalse
Schritt 13: Setzen von Eigenschaft „AutoStart“ des Timers aufvarBoolStartTimer
Schritt 14: Setzen von Eigenschaft „Duration“ des Timers auf1500
Die Dauer des Timers kann variiert werden, da dies je nach Anzahl an auszuführenden Aktionen abhängt. Standardmäßig wird vorgeschlagen, die Dauer auf 1500 – 2000 Millisekunden zu setzen.
Nach Ende des Timers erfolgen die ausführenden Aktionen, wie z.B. die Navigation auf einen nächsten Screen. Aber die wichtigste und letzte Aktion muss sein, den Timer wieder auf 0 zu setzen und den LoadingSpinner auszublenden.
Schritt 15: Setzen von Eigenschaft „OnTimerEnd“ des Timers auf
Set(varBoolStartTimer, false);
Set(varBoolShowLoadingSpinner, false)
Fertig!
Durch diese Maßnahmen wird der Loading Spinner zu einem nützlichen Werkzeug, das die Benutzererfahrung in den Apps verbessert und dem Nutzer aktiv zeigt, dass seine Aktionen, die er ausführen möchten vom System verabeitet, überprüft und die Daten geladen werden.
Synchronisieren und Laden von Daten – wo und wann?
Mit das wichtigste in einer Power App – an welcher Stelle in der App und zu welchem Zeitpunkt sollen die Daten geladen werden?
Die wichtigste Erkenntnis, die wir gezogen haben ist:
Lade Daten NICHT auf App.OnStart und NICHT auf OnVisible des Screens SONDERN
Lade Daten über einen Timer, separaten “Sync”-Button oder Loadingscreen
Die beste und effizienteste Variante ist, die gesamten Daten erstmals über einen separaten Loadingscreen zu holen.
Der Screen kann zu jedem Zeitpunkt und von allen anderen Screens aufgerufen werden und dient demnach als zentrale Anlaufstelle für den erneuten Refresh.
Als zweite Anlaufstelle für das Laden von Daten zu einem bestimmten Screen kann auf pro Screen ein „Synchronisierungsbutton“ eingebaut werden, welcher angestoßen wird, sobald der Screen sichtbar ist. Die OnVisible-Eigenschaft des Screen stößt diesen Button an.
Warum reicht „OnVisible“ des Screens nicht aus?
Wird ein Screen aufgerufen, möchte der Nutzer auch sofort Daten sehen und Aktionen ausführen können. Werden Daten auf der „OnVisible“-Eigenschaft des Screens synchronisiert, kolliert das Laden mit den tatsächlichen Handlungen des Nutzers. Am Ende sind noch nicht alle Daten geladen, welche für die Navigation in der Anwendung benötigt werden.
Warum nicht „App.OnStart“?
Die Aktionen, die auf App.OnStart ausgeführten werden, werden auch noch ausgeführt, sobald nach Start der App ein erster Screen augerufen wird. Es kann sein, dass der Nutzer bereits Daten für diesen Screen benötigt, welche aber noch auf App.OnStart geladen werden. Eine kritische Situation.
Fazit
Ein Loading Spinner mit klarer Beschriftung ist kein bloßes Design-Element, sondern ein zentrales Kommunikationsmittel zwischen Anwendung und Nutzer.
Nutzer fühlen sich informiert und behalten das Gefühl, die Kontrolle über die Anwendung zu haben.
Ein gut gestalteter Spinner mit erklärendem Text macht Wartezeiten verständlich und erträglicher.
Der Loading Spinner sorgt für Verständnis, Vertrauen und eine reibungslosere Interaktion – besonders bei datenintensiven Anwendungen.