web-dev-qa-db-fra.com

Forme à onglets - sections empilées horizontalement

J'ai un formulaire de modification de produit que j'ai divisé en onglets.

Informations générales sur l'écran:

  1. Il s'agit de l'écran de modification du produit; la création est gérée ailleurs. Sur cet écran, tous les produits auront, à coup sûr, au moins une section "Informations générales" déjà remplie. (Les sections des listes ne sont pas obligatoires)
  2. Je souhaite éviter le défilement vertical (la mise en page globale de l'application se fait de cette façon)
  3. Les gens modifieront très rarement les "informations générales". La plupart du temps, ils gèrent les choses dans l'un des onglets des listes.
  4. Les informations dans les onglets "listes" sont facultatives et non séquentielles.

J'en ai créé 2 variantes.

  1. Section d'informations générales toujours visible

enter image description here

Ce que j'aime dans cette version:

  • voir toujours où il est (sur quel écran de produit)
  • éditez toujours facilement les données générales

Ce que je n'aime potentiellement pas:

  • je ne sais pas si ce flux avec 3 sections empilées horizontalement introduit du frottement dans l'expérience utilisateur
  • l'idée était de reproduire l'empilement des sections verticales mais dans le but d'éviter le défilement vertical, je l'ai donc rendu horizontal
  1. Toutes les sections sont dans des onglets

enter image description here

Ce que j'aime dans cette version:

  • supprime ce frottement potentiel et n'a que 2 sections d'écran propres: onglets et formulaires dédiés basés sur l'onglet sélectionné

Questions :

  1. L'une des versions enfreint-elle des règles ux fortes et importantes? Si oui, veuillez préciser lequel?
  2. L'une des versions est-elle bien meilleure, basée sur certaines règles ux? Si oui, expliquez pourquoi.
  3. Aucune des versions ne montre le produit complet. L'un des onglets devrait-il être une vue globale du produit? Dans ce cas, est-ce qu'un onglet étant "en lecture seule" et d'autres "modifier" serait-il déroutant?
usabilityformsgui-designinteraction-designuser-expectation
2
dee zg

La version 2 est meilleure et voici pourquoi:

  1. Vous avez créé plus de cohérence et un flux plus simple. Désormais, chaque section de votre formulaire se ressemble.
  2. C'est plus vrai pour votre flux de travail. Les utilisateurs ne vont pas revenir en arrière pour modifier leurs informations personnelles en remplissant le reste du formulaire. Il est logique de ne pas le montrer tout le temps comme dans la version 1.
  3. L'écran est moins encombré et il y a plus d'espace blanc. Moins vous pouvez mettre sur une page, mieux c'est.
  4. La version 2 est plus facile à adapter aux écrans plus petits. Il n'y a que deux colonnes au lieu de trois.
1
invot