Die Komponente „Profilvervollständigung“ wird neuen Benutzern in Form einer Banner-Slide im Dashboard angezeigt und führt sie durch eine definierte Liste von Einrichtungsaufgaben. Ziel ist es, den Benutzer mit Gamification-Ansätzen schrittweise zur vollständigen Einrichtung seines Kontos und Profils zu motivieren.
Ein Slide besteht immer aus Dachzeile, Überschrift, Text und Call-to-Action. Chevron-Buttons führen zum nächsten offenen Schritt weiter, nach dem letzten Schritt zurück zur ersten Profil-Vervollständigung. Dachzeile und Chevron-Buttons bleiben stehen, nur Überschrift, Text und Buttons sind unterschiedlich. Neue Slides werden nur zusammen mit dem Design System konzipiert und können beim nächsten Release eingefügt werden.
Fortschrittsberechnung
Der Fortschritt wird bei jedem Laden der Komponente neu berechnet:
Fortschritt(%)= Erledigte Aufgaben / Alle Aufgaben für diesen Benutzer
Die Gesamtanzahl der Aufgaben ist benutzerspezifisch. Aufgaben, die für einen Benutzer nicht relevant sind, z. B. weil sie bereits von einem anderen Benutzer des Profils erledigt wurden, werden weder als erledigt noch als offen gezählt – sie fallen vollständig aus der Berechnung heraus.
Aufgabentypen
Es gibt zwei Typen von Aufgaben:
Typ
Beschreibung
Beispiel
Profilweit
Gilt für alle Benutzer eines Profils; wird sie von einem Benutzer erledigt, dann entfällt sie für alle anderen.
BSDD-Erfassungsantrag
Profilbild hinzufügen
Benutzerspezifisch
Betrifft nur den jeweiligen Benutzer; hat keine Auswirkung auf andere Benutzer desselben Profils
Dienstleistungen favorisieren
Interaktion mit einzelnen Aufgaben
Jede Aufgabe bietet dem Benutzer zwei Aktionen:
Primäraktion:
Navigiert den Benutzer zur entsprechenden Seite im Portal, auf der die Einstellung vorgenommen werden kann.
Sekundäraktion („Jetzt nicht"):
Die Aufgabe wird dauerhaft aus der Komponente ausgeblendet und nicht mehr angezeigt. Sie bleibt jedoch Teil der Gesamtanzahl der Aufgaben und wirkt sich weiterhin auf den Fortschritt aus. Erledigt der Benutzer die Aufgabe zu einem späteren Zeitpunkt auf anderem Wege, dann wird der Fortschritt entsprechend aktualisiert.
Daraus folgt die Anzahl der anzuzeigenden Aufgaben:
Zählt für alle Benutzer und wird immer als erledigt gewertet, da dies die zwingende Voraussetzung für den Zugang zum Portal ist. Benutzer sehen also nie eine 0%-Anzeige.
Profil anlegen
Zählt für alle Benutzer und wird immer als erledigt gewertet. Obwohl diese Aufgabe streng genommen nur für den Benutzer relevant ist, der das Profil registriert hat, wird sie aus Aufwandsgründen für alle Benutzer als erledigt gezählt, da abgeschlossene Aufgaben in der Anzeige ohnehin nicht sichtbar sind.
Zoll-Ident hinzufügen
Zählt für alle Benutzer, der Status ist abhängig von der Vollständigkeit in der Registrierung:
Zoll-Ident eingerichtet → erledigt
Einrichtung übersprungen → offen
Daten ergänzen (BSDD-Erfassungsantrag)
Zählt ausschließlich für Benutzer mit der Rolle „Hauptbenutzer“, da Benutzer ohne diese Rolle keine Berechtigung haben, den Erfassungsantrag zu stellen und gilt profilweit, da dies von jedem Hauptbenutzer des Profils erledigt werden kann.
Der Status ist abhängig vom Profilzustand:
Noch kein Erfassungsantrag für dieses Profil gestellt → offen, zählt zum Fortschritt
Erfassungsantrag wurde bereits von einem anderen Hauptbenutzer gestellt → Aufgabe entfällt vollständig aus der Berechnung des neuen Benutzers
Dienstleistung favorisieren
Zählt für alle Benutzer und gilt als erledigt, sobald mindestens eine Dienstleistung favorisiert wurde.
Profilbild hinzufügen
Zählt ausschließlich für Benutzer mit der Rolle „Hauptbenutzer“, da Benutzer ohne diese Rolle keine Berechtigung haben, das Profilbild zu ändern. Der Status gilt als erledigt, sobald ein eigenes Profilbild genutzt wird.
Positionierung
Das Banner nimmt die volle Breite des Viewports ein.
Die Inhalte des Banners und die Navigation liegen zwischen der ersten und letzten Gridspalte.
Ab dem Breakpoint MD (≥ 768px)
Die Fortschrittsanzeige ist links von den anderen Inhalten platziert.
Die Navigationsbuttons sind rechtsbündig neben der Dachzeile und Überschrift platziert.
Ab dem Breakpoint XL (≥ 1200px)
Das Banner erstreckt sich von der ersten bis zur letzten Gridspalte.
Die Buttons sind rechtsbündig neben dem Text platziert.
Design
Typografie
Ab dem Breakpoint XS (≥ 0px)
Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
Eine weitere Beispielseite zeigt, wie sich die Profil-Vervollständigung hinsichtlich ihrer Breite auf kleinen und großen Breakpoints verhält. Dies kann hier auf Grund des Layouts einer Komponenten-Seiten nicht veranschaulicht werden. Für das korrekte Verhalten befindet sich die Profil-Vervollständigung am besten außerhalb eines Containers.
HTML
Das Grundgerüst der Profil-Vervollständigung ist ein Karussell mit einer einfachen Vor- und Zurück-Navigation über zwei Chevron-Buttons, dessen Banner in der aktuellen Ausprägung jeweils eine runde Fortschrittsanzeige sowie anderen Content beinhalten. Aufgrund von Herausforderungen in der Barrierefreiheit und der unnötigen Komplexität verzichtet das Design System auf das in der HTML5-Spezifikation vorgesehene Element <progress> für die runde Fortschrittsanzeige.
WAI-ARIA
Das programmatisch zu setzende Attribut "aria-valuenow" dient zur Angabe des aktuellen Fortschritts, welcher sich innerhalb des durch "aria-valuemin" und "aria-valuemax" definierten Bereichs bewegt. Standardmäßig sind diese auf die Werte "0" und "100" gesetzt, repräsentieren also einen prozentualen Fortschritt, so dass sie hier nicht explizit gesetzt werden müssen. "aria-valuetext" beinhaltet den aussagekräftigen Kontext für Screenreadernutzende und wird vorrangig vor "aria-valuenow" ausgegeben.
CSS
Der Prozentwert für die Anzeige in Prozent und dem jeweils korrespondierenden farbigen Graph um den Rand des runden Progress-Displays wird der benutzerdefinierten CSS-Variable --percentage zugeordnet und über das Inline-Style-Attribut des Elements gerendert.
JavaScript
Für die Vor- und Zurück-Navigation muss die Datei stackslider.js oder die gesamte main.js eingebunden sein.
Profil Setup Panel bei 16%
%
Ich bin eine Dachüberschrift.
Beispiel-Überschrift
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse, deserunt sit corporis vitae delectus voluptate hic mollitia, optio aliquam quibusdam maxime voluptatibus nostrum, sint ex.
%
Auch ich bin eine Dachüberschrift.
Beispiel-Überschrift
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse.
%
Ich bin eine Dachüberschrift.
Ich bin eine längere Beispiel-Überschrift
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse, deserunt sit corporis vitae delectus voluptate hic mollitia, optio aliquam quibusdam maxime voluptatibus nostrum, sint ex.
<sectionid="ds-stackslider--1"class="ds-stackslider container-xl"data-desy-stackslideraria-label="Content-Wechsler"> <divclass="ds-stackslider__container container"> <divclass="ds-stackslider__controls"> <buttonclass="btn btn btn--tertiary btn--icon-only"type="button"data-desy-stackslider-prev-btntitle="zurück"> <spanclass="ds-icon-chevron-left"aria-hidden="true"></span> <spanclass="btn__text visually-hidden">zurück</span> </button> <buttonclass="btn btn btn--tertiary btn--icon-only"type="button"data-desy-stackslider-next-btntitle="weiter"> <spanclass="ds-icon-chevron-right"aria-hidden="true"></span> <spanclass="btn__text visually-hidden">weiter</span> </button> </div> <articleclass="ds-stackslider__sheet active"data-desy-stackslider-sheet> <divclass="d-flex flex-column flex-md-row ds-profile-setup"> <divclass="ds-profile-setup__progresscircle-sizing-container"> <divrole="progressbar"class="ds-progress-circle"aria-label="Fortschrittsanzeige"aria-valuenow="16"aria-valuetext="16 Prozent der Profileinrichtung sind abgeschlossen"style="--percentage: 16;"> <divclass="ds-progress-circle__inner"> <divaria-hidden="true"> <outputclass="ds-progress-circle__percentage-number">16</output> <spanclass="ds-progress-circle__percentage-symbol">%</span> </div> </div> </div> </div> <divclass="d-flex flex-column flex-xxl-row justify-content-xxl-between gap-xxl-9 align-items-xxl-end flex-xxl-grow-1"> <divclass="mt-6 mt-md-0"> <headerclass="fw-bold"> <pclass="mb-4">Ich bin eine Dachüberschrift.</p> <h3class="ds-profile-setup__headline mb-5 pt-0">Beispiel-Überschrift</h3> </header> <pclass="mb-xxl-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse, deserunt sit corporis vitae delectus voluptate hic mollitia, optio aliquam quibusdam maxime voluptatibus nostrum, sint ex. </p> </div> <divclass="d-flex flex-column gap-6 align-items-stretch align-items-sm-start flex-sm-row"> <buttonclass="btn btn btn--secondary"type="button"> <spanclass="btn__text">Jetzt nicht</span> </button> <buttonclass="btn btn btn--primary"type="button"> <spanclass="btn__text">Aktivieren</span> </button> </div> </div> </div> </article> <articleclass="ds-stackslider__sheet"data-desy-stackslider-sheet> <divclass="d-flex flex-column flex-md-row ds-profile-setup"> <divclass="ds-profile-setup__progresscircle-sizing-container"> <divrole="progressbar"class="ds-progress-circle"aria-label="Fortschrittsanzeige"aria-valuenow="16"aria-valuetext="16 Prozent der Profileinrichtung sind abgeschlossen"style="--percentage: 16;"> <divclass="ds-progress-circle__inner"> <divaria-hidden="true"> <outputclass="ds-progress-circle__percentage-number">16</output> <spanclass="ds-progress-circle__percentage-symbol">%</span> </div> </div> </div> </div> <divclass="d-flex flex-column flex-xxl-row justify-content-xxl-between gap-xxl-9 align-items-xxl-end flex-xxl-grow-1"> <divclass="mt-6 mt-md-0"> <headerclass="fw-bold"> <pclass="mb-4">Auch ich bin eine Dachüberschrift.</p> <h3class="ds-profile-setup__headline mb-5 pt-0">Beispiel-Überschrift</h3> </header> <pclass="mb-xxl-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse. </p> </div> <divclass="d-flex flex-column gap-6 align-items-stretch align-items-sm-start flex-sm-row"> <buttonclass="btn btn btn--secondary"type="button"> <spanclass="btn__text">Jetzt nicht</span> </button> <buttonclass="btn btn btn--primary"type="button"> <spanclass="btn__text">Aktivieren</span> </button> </div> </div> </div> </article> <articleclass="ds-stackslider__sheet"data-desy-stackslider-sheet> <divclass="d-flex flex-column flex-md-row ds-profile-setup"> <divclass="ds-profile-setup__progresscircle-sizing-container"> <divrole="progressbar"class="ds-progress-circle"aria-label="Fortschrittsanzeige"aria-valuenow="16"aria-valuetext="16 Prozent der Profileinrichtung sind abgeschlossen"style="--percentage: 16;"> <divclass="ds-progress-circle__inner"> <divaria-hidden="true"> <outputclass="ds-progress-circle__percentage-number">16</output> <spanclass="ds-progress-circle__percentage-symbol">%</span> </div> </div> </div> </div> <divclass="d-flex flex-column flex-xxl-row justify-content-xxl-between gap-xxl-9 align-items-xxl-end flex-xxl-grow-1"> <divclass="mt-6 mt-md-0"> <headerclass="fw-bold"> <pclass="mb-4">Ich bin eine Dachüberschrift.</p> <h3class="ds-profile-setup__headline mb-5 pt-0">Ich bin eine längere Beispiel-Überschrift</h3> </header> <pclass="mb-xxl-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse, deserunt sit corporis vitae delectus voluptate hic mollitia, optio aliquam quibusdam maxime voluptatibus nostrum, sint ex. </p> </div> <divclass="d-flex flex-column gap-6 align-items-stretch align-items-sm-start flex-sm-row"> <buttonclass="btn btn btn--secondary"type="button"> <spanclass="btn__text">Jetzt nicht</span> </button> <buttonclass="btn btn btn--primary"type="button"> <spanclass="btn__text">Ergänzen</span> </button> </div> </div> </div> </article> </div> </section>
Profil Setup Panel bei 92%
%
Ich bin eine Dachüberschrift.
Beispiel-Überschrift kurz
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse, deserunt sit corporis vitae delectus voluptate hic mollitia, optio aliquam quibusdam maxime voluptatibus nostrum, sint ex.
%
Auch ich bin eine Dachüberschrift.
Beispiel-Überschrift
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse.
%
Ich bin eine Dachüberschrift.
Ich bin eine längere Beispiel-Überschrift
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse, deserunt sit corporis vitae delectus voluptate hic mollitia, optio aliquam quibusdam maxime voluptatibus nostrum, sint ex.
<sectionid="ds-stackslider--2"class="ds-stackslider container-xl"data-desy-stackslideraria-label="Content-Wechsler"> <divclass="ds-stackslider__container container"> <divclass="ds-stackslider__controls"> <buttonclass="btn btn btn--tertiary btn--icon-only"type="button"data-desy-stackslider-prev-btntitle="zurück"> <spanclass="ds-icon-chevron-left"aria-hidden="true"></span> <spanclass="btn__text visually-hidden">zurück</span> </button> <buttonclass="btn btn btn--tertiary btn--icon-only"type="button"data-desy-stackslider-next-btntitle="weiter"> <spanclass="ds-icon-chevron-right"aria-hidden="true"></span> <spanclass="btn__text visually-hidden">weiter</span> </button> </div> <articleclass="ds-stackslider__sheet active"data-desy-stackslider-sheet> <divclass="d-flex flex-column flex-md-row ds-profile-setup"> <divclass="ds-profile-setup__progresscircle-sizing-container"> <divrole="progressbar"class="ds-progress-circle"aria-label="Fortschrittsanzeige"aria-valuenow="92"aria-valuetext="92 Prozent der Profileinrichtung sind abgeschlossen"style="--percentage: 92;"> <divclass="ds-progress-circle__inner"> <divaria-hidden="true"> <outputclass="ds-progress-circle__percentage-number">92</output> <spanclass="ds-progress-circle__percentage-symbol">%</span> </div> </div> </div> </div> <divclass="d-flex flex-column flex-xxl-row justify-content-xxl-between gap-xxl-9 align-items-xxl-end flex-xxl-grow-1"> <divclass="mt-6 mt-md-0"> <headerclass="fw-bold"> <pclass="mb-4">Ich bin eine Dachüberschrift.</p> <h3class="ds-profile-setup__headline mb-5 pt-0">Beispiel-Überschrift kurz</h3> </header> <pclass="mb-xxl-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse, deserunt sit corporis vitae delectus voluptate hic mollitia, optio aliquam quibusdam maxime voluptatibus nostrum, sint ex. </p> </div> <divclass="d-flex flex-column gap-6 align-items-stretch align-items-sm-start flex-sm-row"> <buttonclass="btn btn btn--secondary"type="button"> <spanclass="btn__text">Jetzt nicht</span> </button> <buttonclass="btn btn btn--primary"type="button"> <spanclass="btn__text">Aktivieren</span> </button> </div> </div> </div> </article> <articleclass="ds-stackslider__sheet"data-desy-stackslider-sheet> <divclass="d-flex flex-column flex-md-row ds-profile-setup"> <divclass="ds-profile-setup__progresscircle-sizing-container"> <divrole="progressbar"class="ds-progress-circle"aria-label="Fortschrittsanzeige"aria-valuenow="92"aria-valuetext="92 Prozent der Profileinrichtung sind abgeschlossen"style="--percentage: 92;"> <divclass="ds-progress-circle__inner"> <divaria-hidden="true"> <outputclass="ds-progress-circle__percentage-number">92</output> <spanclass="ds-progress-circle__percentage-symbol">%</span> </div> </div> </div> </div> <divclass="d-flex flex-column flex-xxl-row justify-content-xxl-between gap-xxl-9 align-items-xxl-end flex-xxl-grow-1"> <divclass="mt-6 mt-md-0"> <headerclass="fw-bold"> <pclass="mb-4">Auch ich bin eine Dachüberschrift.</p> <h3class="ds-profile-setup__headline mb-5 pt-0">Beispiel-Überschrift</h3> </header> <pclass="mb-xxl-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse. </p> </div> <divclass="d-flex flex-column gap-6 align-items-stretch align-items-sm-start flex-sm-row"> <buttonclass="btn btn btn--secondary"type="button"> <spanclass="btn__text">Jetzt nicht</span> </button> <buttonclass="btn btn btn--primary"type="button"> <spanclass="btn__text">Aktivieren</span> </button> </div> </div> </div> </article> <articleclass="ds-stackslider__sheet"data-desy-stackslider-sheet> <divclass="d-flex flex-column flex-md-row ds-profile-setup"> <divclass="ds-profile-setup__progresscircle-sizing-container"> <divrole="progressbar"class="ds-progress-circle"aria-label="Fortschrittsanzeige"aria-valuenow="92"aria-valuetext="92 Prozent der Profileinrichtung sind abgeschlossen"style="--percentage: 92;"> <divclass="ds-progress-circle__inner"> <divaria-hidden="true"> <outputclass="ds-progress-circle__percentage-number">92</output> <spanclass="ds-progress-circle__percentage-symbol">%</span> </div> </div> </div> </div> <divclass="d-flex flex-column flex-xxl-row justify-content-xxl-between gap-xxl-9 align-items-xxl-end flex-xxl-grow-1"> <divclass="mt-6 mt-md-0"> <headerclass="fw-bold"> <pclass="mb-4">Ich bin eine Dachüberschrift.</p> <h3class="ds-profile-setup__headline mb-5 pt-0">Ich bin eine längere Beispiel-Überschrift</h3> </header> <pclass="mb-xxl-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse, deserunt sit corporis vitae delectus voluptate hic mollitia, optio aliquam quibusdam maxime voluptatibus nostrum, sint ex. </p> </div> <divclass="d-flex flex-column gap-6 align-items-stretch align-items-sm-start flex-sm-row"> <buttonclass="btn btn btn--secondary"type="button"> <spanclass="btn__text">Jetzt nicht</span> </button> <buttonclass="btn btn btn--primary"type="button"> <spanclass="btn__text">Ergänzen</span> </button> </div> </div> </div> </article> </div> </section>
Barrierefreiheit
Relevante BITV-Anforderungen
Die Anforderungen an die Barrierefreiheit sowie die Testhinweise und Akzeptanzkriterien sind in den enthaltenen Komponenten und Regeln wie Banner, Button und Typografie definiert.