Réduire la densité de saisie des données
Voici une situation courante: vous devez capturer les entrées de l'utilisateur sur une entité complexe, vous disposez donc d'un champ de saisie de données pour chaque attribut possible de l'entité:
Et les onglets ont chacun encore plus de zones de texte et de zones de liste déroulante.
Les utilisateurs veulent que toutes ces données soient visibles et modifiables, donc les entrées doivent être disponibles, mais elles rendent l'écran si encombré.
Existe-t-il un moyen de conserver la richesse de la saisie de données, mais de la rendre plus attrayante et plus facile à utiliser?
La réponse de Ryna suggère de se diviser en plusieurs pages plus simples, mais il semble que vos clients souhaitent accéder simultanément à tout cela. Voyons donc jusqu'où nous allons sans changer la disposition.
Le problème ici n'est pas tant la quantité de données, mais les visuels. Vous avez un fond dégradé, un contour, le même fond, un autre contour, puis un fond blanc. De plus, il y a un contraste de couleur assez fort entre tous ces éléments. Dans l'ensemble, beaucoup de complexité.
Vous pouvez soit avoir des données complexes, soit des visuels complexes.
Si vous avez les deux, cela devient trop occupé. (Si vous n'avez ni l'un ni l'autre, cela pourrait être ennuyeux, mais c'est moins mauvais)
Dans ce cas, vous avez des données assez complexes, donc votre présentation devrait être plutôt simple. Essayez de travailler davantage à partir de la théorie de la gestalt, du design plat et essayez de minimiser la quantité d'objets et d'arêtes visuelles:
La mise en page est presque identique, j'ai seulement aligné les zones de texte un peu plus en fonction d'une grille. Mais j'ai supprimé beaucoup de complexité visuelle:
- plus de contours sur les zones de texte et les boutons
- plus de dégradés
- unifié la palette de couleurs
- rendu les informations secondaires plus subtiles
- rendu les icônes plus symétriques et adouci l'ombrage
- liste déroulante légèrement modifiée
De loin, le changement important de tous ces éléments est la suppression des contours de la zone de texte:
Remarquez à quel point les champs de données sont plus unifiés après un seul ajustement? En effet, le contraste entre les contours bleu foncé et le fond blanc est presque aussi fort que le texte en noir sur blanc. Et les contours n'ont pas besoin d'être aussi visibles, ils sont juste censés être une légère bosse pour vous garder dans la bonne zone.
La hiérarchie visuelle doit correspondre à la hiérarchie des informations
Il existe deux types de hiérarchie de base; priorité et similitude. La priorité est de savoir quelles choses doivent être vues en premier, la similitude est de savoir quelles choses vont ensemble.
La priorité est plus une chose à petite échelle, tandis que la similitude concerne des blocs de contenu plus importants. Mais les deux utilisent le même ensemble d'outils de base tourné autour du contraste: contraste de couleur, texte contre image, animé ou statique, taille différente, etc.
Priorité
Le plus important ici est le contenu des champs de texte. Ce sont les données stockées dans la base de données, les informations sur votre client. C'est pour cela que vous venez sur cette page. Nous voulons le contraste le plus élevé pour cela. Le noir sur blanc est une bonne option ici.
Parfois, vous pouvez voir intuitivement ce qui est quoi; James van Borgenstein, 12-06-1921. Mais parfois, vous ne pouvez pas; 555-6449134 est-il un numéro de fax ou un numéro de téléphone? Heureusement, nous pouvons montrer des étiquettes. Ils devraient être visibles, mais pas tout à fait autant que les informations client. Heureusement, nous avons déjà un fond bleu clair, qui contraste bien avec le noir, mais pas aussi fortement qu'un fond blanc. Nous avons également des menus déroulants, sur fond blanc. Pour obtenir un contraste plus faible que le texte, ne les faites pas en noir, mais en bleu foncé.
On finit donc par avoir une lumière et un bleu foncé. Qui peut être utilisé ensemble pour créer une couche tertiaire d'importance. Je l'ai utilisé pour adoucir la note car elle était déjà entre crochets, mais vous pouvez également choisir de rendre les étiquettes bleu foncé et simplement "adresse principale" en noir.
Les icônes sont également un élément secondaire, mais pas aussi simple à expliquer. Ce sont des objets plus épais que le texte de l'étiquette, et ils ont aussi un contraste plus fort. (Peut-être que j'aurais dû les atténuer légèrement?) Mais ils sont regroupés, de la même manière que les champs de texte et les étiquettes sont regroupés, ce qui nous amène à ...
Similitude
Tous les champs de texte contiennent des informations sur le client, les étiquettes sont des explications de ce qu'est chaque champ et toutes les icônes mènent à des écrans différents (externes?). Nous devons styliser les choses afin de regrouper simultanément des choses similaires et de séparer chaque groupe d'un autre. Nous avons les mêmes outils de base pour cela, nous avons juste besoin d'envisager une plus grande échelle.
Le groupe le plus important est l'information client. Ils sont déjà ensemble dans votre mise en page, donc c'est bien. Lorsque nous en supprimons les contours (et vous plissez les yeux un peu), ils forment un bloc assez solide et très visible sur le fond bleu clair. Les couleurs claires semblent également plus proches que les sombres, tout comme les couleurs rouges et bleues, de sorte que l'ensemble du bloc de champ de texte semble sauter de la page.
Nos éléments secondaires, le texte et les icônes, sont noirs sur bleu clair. Le contraste local est donc plus faible, ce qui est un bon début. Mais en plus, ils partagent cette couleur d'arrière-plan avec tout l'écran, ce qui signifie qu'il y a aussi moins de contraste global. Juste quelques fines lignes noires au lieu de blocs de couleurs complets signifie que le contraste local est un peu dilué.
Ce qui laisse les icônes. Ils sont légèrement plus contrastés que les étiquettes, mais ils sont également plus petits. Et en raison de l'emplacement, ils ne seront pas considérés comme liés aux étiquettes; les icônes et les étiquettes sont divisées par de grandes plaines blanches.
Si nous devions regarder une étape plus grande que celle-ci, Adresse principale vs Informations supplémentaires, nous pourrions séparer les deux par des lignes comme vous le faites dans votre image d'origine. Mais si vous regardez la version floue, vous pouvez voir que le bloc de champ de texte clair est déjà en quelque sorte souligné par les étiquettes et les icônes plus sombres. Donc, si nous regardons une page complète de ceux-ci, vous pouvez très facilement parcourir les zones blanches, puis, si nécessaire, consulter les informations secondaires.
Nous voyons donc ici 3 échelles d'informations:
- quel type d'informations client (Contact, Facturation, Assurance, etc.)
- quel type de groupe (données client, étiquette explicative, options supplémentaires)
- les informations réelles (nom, numéro de téléphone, etc.)
Joshua
Tout d'abord, vous décidez si toutes les questions doivent apparaître sur une scène particulière. Par exemple - Stackexchange. Il y a 2 étapes ici:
- (Inscription) Demander à l'utilisateur le nom/e-mail et le mot de passe
- (Continuer l'inscription ou l'intégration) Demander à l'utilisateur l'avatar, l'adresse, etc.
Un autre exemple est le processus de maintien de la page:
C'est bien parce que montre aux utilisateurs leurs progrès actuels et concentre leur attention sur un type spécifique de domaines. Au final, un utilisateur a un sentiment d'achèvement.
Donc, s'il est impossible de diviser le formulaire en étapes ou de refuser certains champs, essayez de le faire:
Important. Répondez à la question: "Est-il nécessaire et utile pour un utilisateur d'afficher tous les champs simultanément?"
1. Define required fields and mark them with "*" or etc.
2. Group fields by kind. On your picture, it was shown.
3. Use short descriptions for your fields and placeholders to show correct and desirable variant. For example, Email (placeholder is
"[email protected]")
4. Think out of correct and different types of your form, not only text fields. For example, Pay Terms could be shown as date, single
button "Upload picture" to drag-drop clickable zone or etc. Refer to
MIT Lectures for detailed explanation
Exemple d'application de bureau de presque toutes les règles mentionnées:
Faites attention à ce que les utilisateurs trouvent difficile sur ces écrans. Évitez de changer des choses avec lesquelles ils n'ont pas de problème.
Je ne peux pas vous dire exactement ce que vous devez changer et ce qu'il ne faut pas faire. C'est à vous de tester avec vos utilisateurs et de découvrir ce qui leur convient le mieux. En général, ce type d'écrans devrait,
- Évitez de faire défiler l'utilisateur. Rendez l'ensemble du formulaire visible. Cela signifie que vous devez faire très attention à l'espacement.
- Évitez de faire basculer l'utilisateur entre différents supports pour saisir des données. Ex: Basculer entre le clavier et la souris. C'est plus rapide lorsque l'utilisateur peut "Tabuler" entre les champs et utiliser le clavier pour remplir le formulaire que d'utiliser le clavier ET la souris.
- Mettez en surbrillance le champ sélectionné pour identifier rapidement où ils se trouvent.
- Les champs doivent être très clairs. L'utilisateur doit être capable de mapper les données au champ correct en un coup d'œil.
- Évitez d'utiliser des couleurs vives qui pourraient fatiguer les yeux. Les utilisateurs ont tendance à regarder ce type d'écran plus longtemps.
Gardez simplement à l'esprit que la collecte de données précises et leur collecte rapide sont plus importantes qu'une belle interface dans ce cas. Alors ne cassez pas les bonnes choses en essayant de le rendre visuellement attrayant.