J'ai besoin de créer un assistant assez complexe qui montre la progression de 3 étapes principales, puis de 4 à 10 sous-étapes dans chacune des étapes principales. Il semblerait logique d'avoir les sous-étapes verticalement sur le côté gauche, mais j'ai une exigence qu'il doit fonctionner horizontalement en haut sous les étapes principales. Aucune des étapes n'est sélectionnable, vous ne pouvez donc pas avancer ou revenir en arrière. Les étapes encadrent une fonction distincte où plusieurs autres fonctions plus petites peuvent se produire, par ex. télécharger plusieurs photos à plusieurs reprises dans une galerie.
Comment résoudriez-vous cela visuellement? Y a-t-il des exemples de travail auxquels je peux me référer?
Merci d'avance d'un concepteur d'interface utilisateur jeté dans un désordre UX!
Jetez un oeil à Material Design - Steppers . Ce n'est pas une bonne idée de combiner un stepper à l'intérieur d'un autre stepper car cela devient déroutant.
N'intégrez pas de steppers dans des steppers et n'utilisez pas plusieurs steppers sur une seule page.
Comme vous n'avez pas la possibilité de changer cela, je suggère:
Combinez toutes les étapes dans le même stepper . Cela peut être plus facile à comprendre mais peut finir par être long. Material Design recommande d'utiliser une barre de progression sur Mobile lorsque le nombre d'étapes est trop long.
Utilisez un type différent d'étapes dans chaque niveau . Vous pouvez utiliser la barre de progression pour le processus global ou l'inverse.
Ce cas a été résolu en utilisant des miettes de pain Référence Dribble Et Google Photos sur mobile avait un curseur sur la chapelure. Mais il n'est pas préférable de l'utiliser de cette manière. Le meilleur exemple serait Android settings> menu continue d'aller plus loin dans Android en affichant l'état actuel).
Quelques suggestions:
Je ne vois pas la valeur de montrer toutes les sous-étapes à moins qu'elles ne soient étiquetées au-delà (1-N). Est-ce une exigence? Vous voudrez peut-être revenir sur ce point.
La numérotation imbriquée est source de confusion. Puisqu'il n'y a que 3 étapes principales, celles-ci peuvent-elles être étiquetées au lieu d'être numérotées?
Déplacez l'indicateur de sous-étape à l'intérieur de votre volet de contenu pour afficher une relation "plus proche" avec celui-ci, contrastant avec les étapes principales qui ne sont pas le point de focalisation.