Question de mise en page concernant le modèle "Sélectionner un enregistrement existant ou en créer un"
Je veux créer un assistant pour créer de nouvelles données.
Dans l'une des étapes, l'utilisateur est censé sélectionner un enregistrement existant ou en créer un nouveau.
Il existe bien sûr différentes façons de résoudre ce problème.
Je penche vers cette solution.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Sur le côté gauche, vous pouvez voir les enregistrements sous forme de cartes avec du texte supplémentaire. (En général, l'utilisateur n'a pas trop d'enregistrements à choisir, c'est pourquoi j'utilise des cartes au lieu d'une grille de données/liste) À droite se trouve un formulaire simple. Parce que c'est si simple, je ne veux pas que l'utilisateur change de contexte, il devrait donc être possible de remplir le couple d'entrées de formulaire en ligne.
La mise en page doit fonctionner dans différentes résolutions d'écran. Je suppose que la partie droite aura une largeur fixe et je peux utiliser un design fluide pour la partie gauche. Pour un moniteur à écran large/des appareils haute résolution, cela semble convenir. Cependant, pour des résolutions plus petites, cette disposition peut être un problème.
Une autre solution/disposition serait d'avoir un panneau à onglets et d'afficher uniquement le formulaire "Sélectionner l'enregistrement existant" ou le formulaire Formulaire "Créer un nouvel enregistrement" . Cependant, sur un moniteur à écran large, j'aurais beaucoup d'espace.
Votre suggestion d'utiliser un panneau à onglets est bonne. Le fait de tout montrer à l'utilisateur à la fois risque de les confondre/de les submerger. Afficher uniquement la quantité minimale de données requises est appelé divulgation progressive et est souhaitable:
http://en.wikipedia.org/wiki/Progressive_disclosure
En ce qui concerne l'espace vide, je fixerais votre mise en page quelque part autour de 980px. Avoir une disposition liquide qui s'étend en plein écran n'est pas utile et créera des espaces maladroits et des problèmes de lisibilité avec de très longues lignes de texte.
Liquid est beaucoup plus utile lorsque le contenu est réduit. Jetez un coup d'œil aux sites ci-dessous et regardez comment ils évoluent jusqu'au mobile (réactif conception), mais ils s'arrêtent à l'échelle autour de la marque 980 (certains peuvent être plus de 980, mais aucun ne passe en plein écran.
http://thenextweb.com/
http://www.time.com/time/
http://5dinstitute.org/
La seule exception à la règle est lorsque les sites ont des images en plein écran pour un impact maximal, mais même dans ce cas, tout texte s'arrêtera à une largeur fixe comme ci-dessous:
Je pense que votre solution est bonne. Ma seule préoccupation à ce sujet est de savoir s'il est suffisamment clair ou non qu'il y a un choix majeur à faire (c'est-à-dire entre le choix d'un enregistrement existant ou la création d'un nouveau).
Deux façons de rendre le choix plus évident comprennent:
- appliquer un léger ombrage à la section supérieure, pour relier visuellement les deux choix clés et pour les séparer également de leurs sous-questions; ou mieux encore
- faites ce que Richard Tan suggère et posez une question pour déterminer dans quelle direction ils veulent aller, puis montrez les sous-questions pertinentes.
L'avantage de la deuxième option est qu'elle concentre l'utilisateur sur une tâche à la fois (faites le choix, puis complétez les détails), réduisant ainsi la charge cognitive. Comme il le dit, cela rend également l'interface moins intimidante et confuse, et fonctionne avec une variété de largeurs de fenêtre. L'inconvénient potentiel est que l'utilisateur ne peut pas voir les enregistrements à choisir lorsqu'il décide si un enregistrement existant convient ou non. Je ne sais pas si c'est quelque chose dont ils auront probablement besoin dans ce cas.
Je ne recommanderais pas les onglets parce que les onglets sont conventionnellement pour les choses qui n'ont pas d'interdépendances. Mais dans votre cas, un onglet ne s'applique que si l'autre onglet ne fonctionne pas, si vous voyez ce que je veux dire.
J'espère que cela t'aides,
Jessica