vue mobile d'un assistant

Question

J'ai un assistant comme indiqué dans la maquette suivante.

^{télécharger la source bmml - Wireframes créés avec Balsamiq Mockups}

Quelle serait la meilleure façon de rendre cet assistant convivial pour les mobiles. Il y avait des assistants qui rétrécissaient juste quand ils étaient dans les vues mobiles avec juste un nombre pour représenter l'étape sans le texte. Quelle serait une meilleure façon d'aborder cela.

Answer 1

L'approche la plus directe consiste à les empiler les uns sur les autres, par exemple 4 étapes en haut, 3 étapes en bas. Si cela semble un peu encombré, vous voudrez peut-être explorer ces solutions.

Solution 1

Si l'affichage de toutes les étapes n'est pas important, vous pouvez condenser toutes les étapes et afficher simplement le titre de l'étape en cours.

^{télécharger la source bmml - Wireframes créés avec Balsamiq Mockups}

Solution 2

Désignez un conteneur déroulant pour la liste des étapes. L'étape en cours sera mise en surbrillance. L'utilisateur peut faire défiler de gauche à droite pour afficher les étapes à suivre.

^{télécharger la source bmml}

Answer 2

Si j'obtenais quelque chose comme ça à créer, j'aborderais:

Si processus cliquable-

Je donnerais à chaque étape une icône avec du texte sur la vue Web et pour la vue mobile, je supprimerais le texte, laissant les icônes derrière. Comme nous le savons tous, si chaque étape a une interaction, elle doit être facilement trouvée et facile à gérer. Si vous le faites très petit, il sera très difficile de le taper.

S'il n'est pas cliquable-

Nous pouvons laisser un petit cercle rempli pour les étapes terminées et un cercle non rempli pour l'étape incomplète et une couleur surlignée sombre pour l'étape sélectionnée.