Placez une grande table et un formulaire sur une seule disposition centrée
Je suis en train de développer un site Web assez complexe et en pleine croissance dont la mise en page est centrée. Voici quelques règles de mise en page:
- La largeur de la table est de 768 pixels par défaut, mais si cela n'est pas possible (débordement), la table doit être étirée sur toute sa largeur.
- Tous les autres éléments sont alignés au centre.
Et voici le problème:
Est-ce une bonne pratique de centrer les entrées du formulaire quelle que soit la position de la table? Aussi, où dois-je mettre le titre? Étant donné que le tableau fait également partie du formulaire. Cela peut sembler bien rangé, mais je ne veux pas que la mise en page change trop par rapport à l'apparence par défaut comme suit:
Ou toute autre idée pour embellir cette mise en page? Toute aide appréciée.
Edit: Je commence la prime à ce sujet, pour une raison quelconque, il n'apparaît nulle part à la maison. Je veux que la solution soit parfaite sur des formes complexes comme celle-ci:
Edit 2: Ceci est ma dernière tentative de centrer l'alignement du formulaire. Cela semble assez bien sur les formulaires simples non sectionnés, mais sur les formulaires sectionnés avec des numéros de colonne différents, cela semble très laid: 
Parce que je suis bloqué, je pense à aligner la mise en page à gauche uniquement pour les formulaires - car les formulaires peuvent être constitués de 1 à 3 colonnes et tableaux. Est-ce une bonne pratique?
Je n'ai pas d'autres idées pour résoudre ce problème, veuillez m'aider.
Ma pensée immédiate est que vous devez SIMPLIFIER, surtout parce que votre site Web va devenir plus grand et plus complexe. Lorsque vous verrouillez une solution complexe, cela crée des dépendances qui hériteront presque certainement de la complexité, donc la meilleure stratégie consiste à essayer et simplement où vous le pouvez.
En termes de positionnement du formulaire et du tableau, il existe deux stratégies de base:
A. Faites le tableau et formez deux éléments distincts (sur la même page) OU
B.Liez le tableau et le formulaire ensemble (par exemple, popup ou extension de l'élément d'interface utilisateur du tableau)
Quelques considérations pour prendre votre décision:
- Le formulaire sera-t-il volumineux et complexe? Si c'est le cas, il sera difficile de trouver un espace d'écran pour les deux (sans faire défiler).
- Ce site sera-t-il utilisé sur des appareils mobiles? Si tel est le cas, les fenêtres contextuelles ne sont pas faciles à mettre en œuvre et vous devrez recourir à des transitions désagréables lors de la saisie des données.
- La logique du tableau et l'entrée requise sont-elles claires et limitées à quelques éléments seulement? Sinon, les séparer rend le processus d'entrée plus compliqué
En ce qui concerne l'option A, il semble plus logique d'avoir le formulaire de saisie en haut du tableau si aucune référence préalable au tableau n'est normalement requise avant de saisir les informations. Cependant, si vous souhaitez vérifier les doublons ou certains détails avant d'ajouter une nouvelle entrée, il est plus logique de placer le formulaire après le tableau.
Avec l'option B, vous pouvez envisager le déclencheur normal pour ajouter de nouveaux éléments dans un tableau en créant un formulaire contextuel, ou vous pouvez envisager d'autoriser l'utilisateur à entrer des informations directement dans le tableau lui-même (c'est-à-dire basculer entre les modes d'affichage et d'édition).
En ce qui concerne l'alignement des champs de saisie dans les formulaires, vous pouvez peser votre décision en fonction de la complexité des formulaires (donc probablement pas un alignement intermédiaire si la plupart d'entre eux sont complexes), le nombre de formulaires complexes, la fréquence à laquelle les gens les utilisent et si ils sont utilisés pour des fonctions importantes. Il existe des règles générales sur la manière dont l'alignement des champs de saisie dans les formulaires peut affecter la façon dont les utilisateurs interagissent avec eux. La règle d'or doit d'abord être cohérente, puis enfreindre les règles si nécessaire.
Peut-être que si vous avez une bonne idée des types de formulaires (et suffisamment), vous pouvez intégrer les formulaires complexes à la page et avoir un type de mise en page, et les simples simplement des popups et avoir un type de mise en page différent afin que les utilisateurs sachent à quoi s'attendre lorsqu'ils déclenchent certaines fonctions.
Selon la complexité du formulaire, vous pourriez envisager d'ouvrir une fenêtre contextuelle/modale lors de l'ajout/modification d'un modèle de salaire. Cela permet à l'utilisateur de rester sur la même page tout en ajoutant ou modifiant rapidement des informations dans le modal. Cela peut être plus rapide pour l'utilisateur tout en gardant la page principale plus propre (pas besoin d'afficher/masquer un formulaire sur la page).
Si vous ouvrez un modal, vous pouvez laisser le titre, les étiquettes et les champs de formulaire alignés à gauche selon votre deuxième image.
Je trouve cette approche moins utile lorsque le formulaire devient plus complexe, car vous aurez peut-être besoin de plus d'espace d'écran pour travailler.