web-dev-qa-db-fra.com

Steppers Material Design - Répertorie les étapes internes

J'ai un peu de mal à propos d'un processus en plusieurs étapes pour créer un élément dans lequel l'utilisateur doit remplir différentes données dans un mobile Android .

  1. Données de base (par exemple, un lieu, une date)
  2. Sélectionnez plusieurs données dans une liste donnée
  3. Une image pour l'élément créé

J'ai donc recherché l'approche/spécification de la conception des matériaux pour les steppers ( Material Design Steppers ).

En ce qui concerne la spécification, j'ai 2 possibilités qui conviennent aux cas d'utilisation mobile pour autant que je vois.

  1. Les steppers présentés dans la section "Types de Steppers/Mobile Steppers": enter image description hereenter image description here

  2. Le stepper vertical sous la section "Types de Steppers/Vertical Steppers": enter image description here

Passons maintenant au problème réel:
Comme mentionné ci-dessus, à l'étape 2, l'utilisateur doit sélectionner plusieurs éléments dans une liste d'éléments qui peuvent varier et augmenter au fil du temps et devenir potentiellement grand jusqu'à une taille non définie .

De ce point de vue, je pense que les steppers 1 seraient mieux adaptés, car les éléments pourraient être présentés dans un propre écran avec éventuellement des possibilités de filtrage/tri supplémentaires.

D'un point de vue "Design", je pense que le stepper vertical est juste plus joli, mais je ne peux pas imaginer une solution pour inclure une telle liste à l'intérieur (et en quelque sorte une liste à l'intérieur a une légère "odeur" de ne pas être la méthode exacte ).

Selon vous, qu'est-ce qui serait le mieux adapté d'un point de vue UX?

Merci déjà!

material-designwizardmulti-step
5
JDC

Au-delà de la recherche de Nice, il existe d'autres raisons pour lesquelles "steppers 2" peut être bon:

  • Facile à suivre les progrès
  • Les titres des étapes vous indiquent les informations requises
  • Plus grand sens du progrès lorsque vous vous déplacez physiquement vers le bas du formulaire
  • Vous pouvez accéder à d'autres étapes hors séquence (par exemple, passez de l'étape 3 à l'étape 1 immédiatement)

Cependant , comme vous l'avez dit, l'étape 2 a une liste de tailles variables. La zone visible à gauche après avoir essayé d'incorporer la liste avec les boutons Continuer et Annuler rendra la tâche plus difficile pour les utilisateurs, alors parcourez la liste. Et s'il existe des outils de filtrage/tri utiles, vous aurez plus de mal à les inclure à l'écran (ou à ne pas les y mettre du tout).

Par conséquent, je recommanderais "steppers 1", en particulier la conception qui a "Step X of Y" en haut. Si vous incluez le titre de l'étape (par exemple, "Étape 1 sur 3: Données de base"), cette conception bénéficie toujours de:

  • Facile à suivre les progrès
  • Les titres des étapes vous indiquent les informations requises

J'ai tendance à éviter les points de page car un plus grand nombre d'utilisateurs devraient immédiatement comprendre "l'étape X de Y". Si vous préférez utiliser la version pas à pas avec des points de page, vous devez toujours nommer vos étapes. Le Nielsen Norman Group a également écrit certaines choses à garder à l'esprit ( https://www.nngroup.com/articles/4-ios-rules-break/ (oui, l'article est pour iOS mais même les principes doivent s'appliquer pour Android)).

3
Gerald F.

Vous pouvez aller avec le design 2, mais déléguer la sélection de la liste à un dialogue . Une fois la boîte de dialogue terminée, le moteur affiche uniquement les éléments sélectionnés.

C'est un compromis, mais qui ne devrait pas avoir d'impact significatif sur la convivialité de l'assistant (sauf s'il est effectué très souvent, auquel cas les deux clics supplémentaires pour ouvrir et fermer la liste seront ennuyeux pour vos utilisateurs).

0
Chris