web-dev-qa-db-fra.com

Masquage partiel des étapes non actives dans un assistant à étapes multiples

Travailler sur une version mobile d'une navigation en plusieurs étapes qui doit aller pas à pas sous la forme d'un assistant.

cependant, les traductions locales de certaines étapes sont assez longues.

raccourcir les noms d'étape n'est pas une option, c'est pourquoi j'ai trouvé la solution suivante. similaire au modèle de navigation horizontale Android Android.

comme ce n'est pas courant, cela aurait-il du sens pour l'utilisateur

enter image description here

4
Ameen Akbar

Ce que vous avez présenté est très bien à une petite exception près:

Étant donné que l'utilisateur ne peut pas voir l'intégralité de la dernière étape, il suppose probablement que le processus est plus long que les étapes visibles. Donnez-leur une sorte d'indication du nombre d'étapes qu'il y a ainsi que de leur progression à travers les étapes en ajoutant quelque chose comme "Étape 5 sur 12" quelque part près de votre guide d'étape visuel. Quelque chose comme ça:

enter image description here

2
Andrew Martin

Pensez à utiliser des icônes (si possible) pour chaque page. Et si nécessaire, la page actuelle pourrait avoir le titre.

enter image description here

1
SimonTeo

Il peut être mis en page correctement mais je supprimerais les points et centrer verticalement le texte . Utilisez des points de suspension sur la deuxième ligne si le texte ne tient pas sur deux lignes.

enter image description here

0
Alvaro

enter image description here

Si l'utilisateur n'a pas besoin de connaître le nom d'une étape jusqu'à ce qu'elle soit active, vous pouvez simplement afficher "Étape 1", "Étape 2", etc. en haut. Ensuite, lorsque l'utilisateur est sur l'étape, utilisez le nom de l'étape comme titre. Ex. Étape 5 sur 5: Nom du processus Super Crazy Long

0
Janet

Je pense que cela pourrait avoir un sens en attendant l'exécution, et j'ai quelques réflexions à faire pour l'aider -

  1. Taper sur "Option 1" ou "Option 2" vous amène-t-il à l'étape suivante? L'utilisation du chevron semble un peu étrange si c'est le cas. En règle générale, cela signifie que vous entrez dans un sous-écran, sans passer à l'étape suivante. Pourrait envisager une interface utilisateur simple ou multi-sélection (boutons radio, etc.) avec un bouton "Suivant".
  2. À quelle plate-forme est-ce destiné (Web, iOS, Android ou tous)? Il ne semble pas y avoir de moyen de quitter cet assistant d'étape ou de reculer.
  3. D'après vos commentaires, il me semble que les noms de pas sont importants. Cela étant le cas, je ne suis pas sûr que le remplissage des noms dans un stepper horizontal dans l'en-tête soit le bon appel. Deux suggestions -
    • Utilisez des icônes ou des chiffres dans le stepper horizontal et affichez le titre de l'étape en ligne au-dessus des options.
    • Utilisez plutôt un stepper vertical. J'ai joint une maquette de ce à quoi cela pourrait ressembler. Il a l'avantage d'avoir toujours suffisamment de place pour la marche indépendamment de la largeur de l'écran, de s'adapter facilement à l'interface utilisateur pour avancer/reculer/sortir du flux, et de pouvoir accueillir un nombre illimité de marches sans les masquer.

enter image description here

0
Josh Olsen