Imaginez que vous développez un système de recherche de données. Ou une application de gestion de l'énergie. Ou un tableau de bord pour les vendeurs de maïs. Peut-être que vous développez quelque chose de similaire en ce moment. Dans tous les cas mentionnés, les gens attendent des tables. Pas ceux à la mode des sites inspirants, mais des monstres à l'aspect Excel avec des centaines de cellules et des interactions complexes.
Dans ce cas, le concepteur est confronté à de nombreux problèmes. Par exemple, faire correspondre une conception avec des cadres frontaux existants ou lutter contre des données «incommodes» qui détruisent la disposition. Nous surmonterons ces problèmes avec les étapes suivantes: systématiser les besoins, devenir atomique et définir l'interaction.
Cet article a été traduit avec le soutien d'EDISON Software, une société qui développe des applications et des sites , et traite également des interfaces utilisateur .
1. Systématisation des besoins
Vous avez donc interviewé le public cible. Il est maintenant temps de rassembler leurs besoins et leurs désirs et de les transformer en quelque chose d'utile pour la conception. Par exemple, un utilisateur a déclaré: «J'ai besoin de voir comment mes données affectent d'autres parties de l'application.» Ou, après avoir vu comment une autre personne travaille avec un ancien logiciel, vous remarquez qu'elle utilise des raccourcis clavier et ne touche pas du tout la souris. Qu'est-ce que cela signifie? Les premières exigences des utilisateurs concernent la validation des entrées et les invites. Vous devrez ajouter des avertissements et des informations générales au tableau. Ou développez un système de couleurs significatives. Cela dépend du domaine et du modèle mental. En regardant le travail du deuxième utilisateur, vous commencez à comprendre que vous devez développer toutes les actions disponibles à partir du clavier. Et vous devez probablement penser à des raccourcis clavier plus spécialisés que «Cmd + C» et «Cmd + V».
En conséquence, vous aurez une liste des besoins et des désirs des gens. Les questions ouvertes sont utiles pour déterminer les besoins réels et filtrer les caprices. Par exemple: «Qu'est-ce qui vous aide à travailler plus rapidement? Comment cela augmente-t-il votre efficacité au travail? Qu'est-ce qui changera si vous ne pouvez pas faire X? "
Il est maintenant temps de créer un cadre logique pour votre table. Le schéma de ce qu'il contient et est capable de faire. Si vous passez directement à la création d'un filaire ou à la création d'un prototype, vous vous lancerez sur le difficile chemin du redessin sans fin. Vous trouverez ci-dessous un exemple de point de départ. Ceci est un arbre de fonctionnalités.
Le plus petit bloc de construction de n'importe quelle table est une cellule. Les cellules sont combinées en lignes et colonnes, qui peuvent avoir des caractéristiques spécifiques différentes des autres cellules. Et enfin, nous passons à des ajouts importants au tableau tels que le panneau supérieur, les commandes du clavier, la gestion des erreurs, etc.
Une arborescence de fonctions bien organisée est également utile pour l'équipe de développement. Ils peuvent mapper des fonctionnalités avec des capacités frontales et trouver la meilleure façon de transformer un projet en code. Dans l'un de mes projets, nous avons utilisé le framework Angular Material. Malheureusement, les tables d'Angular étaient très simples. Nous avons trouvé la bibliothèque Ag-Grid qui supportait nos fonctionnalités mais avait une limitation. Elle n'a pas eu l'occasion d'élargir la gamme et de mettre quelque chose à l'intérieur. Nous avons identifié ce problème et ajusté la conception à l'avance.
Sous-total
- Commencez à créer une table complexe en collectant et en hiérarchisant les besoins des utilisateurs.
- Dessinez un diagramme arborescent qui organise toutes les fonctions nécessaires. Utilisez-le comme un plan pour produire des effets visuels.
2. Introduire l'atomicité
Ainsi, la fonctionnalité est définie et vous connaissez les limites du développement. Il est temps de simuler votre table. Essentiellement, l'approche atomique consiste à développer d'abord de petits composants de l'interface utilisateur, puis à en assembler de plus grands. Nous passerons progressivement des parties élémentaires, telles que les polices et les couleurs, à de grands modules tels qu'un en-tête ou une colonne. J'ai délibérément choisi un style strict et brutal pour les mises en page, afin que nous puissions nous concentrer sur la fonctionnalité plutôt que sur l'apparence.
Polices, couleurs et icônes
Ces pièces peuvent déjà être définies dans votre système de conception ou dans le cadre de l'interface utilisateur. Si vous créez un tableau pour un produit existant, vérifiez que sa palette de couleurs, ses polices et ses icônes répondent aux exigences du tableau.
Cellules et accessoires
Lorsque les atomes de la table sont prêts, nous pouvons passer aux molécules - différents types de cellules. Tout d'abord, il est important de penser à l'avance aux états normaux, induits et actifs de chaque élément. Plus tard, le concepteur ajoute également les états activé, désactivé et autres.
Dans l'un de mes projets, nous avions huit types de cellules avec leur propre interaction. Les plus simples sont les cellules de texte et de nombre. Dans notre cas, il était permis de remplir les cellules numériques avec un contenu non numérique, tel que «N / A» (non applicable) et «N / C» (sans contrôle). C'était une caractéristique du domaine d'activité. Les listes déroulantes et les sélecteurs de dates sont plus complexes et ont des enfants. Enfin, nous avons eu les cellules du tableau, qui sont des boutons.
Les cellules peuvent avoir des accessoires tels que des info-bulles, des conseils d'entrée, des messages d'erreur, des espaces réservés, etc. À ce stade, ils sont statiques, mais plus tard, le développeur doit spécifier la logique pour les afficher.
Lignes et en-têtes
Lorsque les cellules sont conçues, vous pouvez faire des lignes et voir si les différentes combinaisons fonctionnent bien. Ci-dessous, j'ai montré un mélange de cellules en lecture seule et modifiables dans une rangée. Une fois, j'ai développé un tableau avec une logique d'édition complexe. Certaines propriétés ont été fournies par les utilisateurs, tandis que d'autres ont été automatiquement calculées ou remplies avec des valeurs par défaut.
Notez que lorsque vous survolez des cellules en lecture seule et modifiables, le curseur est différent. Et en cliquant dessus, vous pouvez soit sélectionner une ligne, soit passer en mode d'édition de cellule. Ci-dessous, vous pouvez voir que les gens peuvent sélectionner une ou plusieurs lignes.
Il est maintenant temps de penser aux en-têtes de table. D'après mon expérience, il est souvent impossible de contrôler la longueur d'un en-tête de colonne et de s'en tenir à une seule ligne. Même avec un bon écrivain dans l'équipe, vous ne couperez pas tous les textes. Certaines tables nécessitent des noms techniques longs ou une localisation. Les phrases qui étaient d'une seule ligne en anglais peuvent devenir deux ou trois lignes en grec, allemand ou hongrois. Par conséquent, j'ai montré différentes options ci-dessous.
Les utilisateurs de logiciels basés sur les données ont souvent besoin de tri et de filtrage. Cela les aide à trouver des informations précieuses dans de gros morceaux de données. La tâche de tri et de filtrage consiste à combiner les contrôles de tri et les champs de filtrage avec d'autres éléments d'en-tête - en-têtes, unités, etc.
Contrairement aux cellules de tableau, les champs de filtre ont généralement une icône de «réinitialisation» à droite afin que les utilisateurs puissent les désactiver explicitement et voir le contenu non filtré.
Dans mon exemple, il existe trois types de blocs de filtrage. Un filtre alphanumérique vous permet de rechercher par lettres et chiffres. Les caractères génériques sont pris en charge - un nombre inconnu de caractères inconnus. Par exemple, si j'entre «45 * A1», cela peut entraîner des lignes avec des valeurs telles que «45A1», «45982A1B», «45A109B» et «096445-A1».
Les caractères génériques sont une fonction complexe car ils dépendent des habitudes des gens. Lorsque j'ai développé les tableaux pour les techniciens, nous avons attribué un astérisque (*) à un nombre inconnu de caractères inconnus. Pour les analystes en assurance, j'ai choisi le symbole SQL traditionnel - le signe pourcentage (%) - parce qu'ils y sont habitués. Quant au filtre déroulant, il bascule entre un certain nombre d'options de texte, de nombres ou de plages numériques s'excluant mutuellement.
Le sélecteur de date a un calendrier et fonctionne comme son équivalent de cellule. C'est bien si les utilisateurs peuvent saisir la date manuellement et sélectionner dans le calendrier. S'ils savent ce qu'ils recherchent, il est beaucoup plus facile de taper une date que de cliquer. Une autre chose importante est de formater automatiquement toute entrée significative et de ne pas déranger les gens avec des erreurs de "format incorrect". Dans l'un de mes projets, nous avons autorisé la saisie de dates telles que «25 janvier 2017», «6 12 17» et «4 septembre 2016», et filtré uniquement par mois ou années sans jour.
Colonnes
Une caractéristique commune des tableaux complexes est les colonnes épinglées. En règle générale, les colonnes contenant des informations clés, telles que les noms ou les statuts des éléments, ne défilent pas.
Bien que les colonnes du tableau doivent être correctement ajustées à la taille du contenu, cela se produit lorsque le texte est tronqué. Dans ce cas, une colonne redimensionnable est utile. Les utilisateurs peuvent faire glisser le bord d'une colonne et voir le contenu long. Ils peuvent également avoir besoin de presser une colonne sans importance ou une colonne avec du texte court.
Une autre façon de gérer les longues chaînes de texte consiste à étirer la colonne jusqu'au contenu le plus long ou à placer plusieurs lignes. La première approche fonctionne mieux pour des chaînes de texte similaires. La deuxième option fonctionne mieux lorsque voir tout le contenu pour les personnes est plus important que de rendre le tableau verticalement compact.
Dans l'un de mes projets, nous avons défini la largeur de colonne minimale par défaut afin que les tables ne soient pas redimensionnées. Nous avons désactivé la compression des colonnes à une certaine largeur en fonction du type de contenu.
Panneau supérieur
Qu'est-ce qui compose la table? Cellules, colonnes, lignes. De plus, les tables complexes ont souvent une barre supérieure. Comme les autres composants, le panneau supérieur se compose d'éléments plus petits - la barre de titre et les boutons. Ci-dessous, j'ai compilé une liste de boutons avec toute la variété de conditions que nous avons utilisées dans l'un des produits. Nous avions des boutons d'icônes évidents, tels que «plus = ajouter ou créer», «corbeille = supprimer», «flèche = déplacer». Les boutons non universels (par exemple, assigner, archiver, équilibrer) avaient besoin d'un nom de texte explicite. De plus, certains boutons étaient accompagnés d'un menu déroulant.
Maintenant, nous pouvons essayer de combiner les différents éléments et voir si cela fonctionne. Voici quelques exemples.
Bien sûr, ce n'est pas une liste complète des fonctions et des éléments. Il diffère d'un projet à l'autre et peut inclure d'autres choses, par exemple:
- trier par plusieurs colonnes;
- ensemble de colonnes personnalisables (possibilité de les changer);
- lignes extensibles (la ligne parent peut avoir des lignes enfants);
- opérateurs logiques de filtrage et de recherche ("et", "ou", "plus", etc.).
En cas de doute sur les fonctionnalités à concevoir et celles qui ne le sont pas, voici un bon principe. C'est le rasoir d'Occam ou la loi de l'avarice. Le concepteur ne doit pas créer de nouvelles instances si celles existantes répondent aux besoins. Vous devez «supprimer» les fonctions geek dont les utilisateurs peuvent théoriquement avoir besoin dans un avenir indéfini. La même histoire avec des fonctionnalités parfaites pour une situation sur cent, mais inutiles dans les quatre-vingt-dix-neuf cas restants.
Table finie
Lorsque tous les blocs de construction sont prêts, vous pouvez assembler plusieurs tables à des fins diverses. C'est l'occasion de découvrir des incohérences et des décisions illogiques. Le plus souvent, j'ai traité des trois types suivants.
Le tableau est en lecture seule . Le type de table le plus simple à créer, car il affiche uniquement les données telles quelles. Il n'y a pas d'options de filtrage ou d'édition. Les hiérarchies de tri ou de ligne peuvent aider à analyser de gros morceaux de données. Un tel tableau est utilisé pour afficher des données, informer les gens sur quelque chose.
Tableau à rechercher. Les cellules ne sont pas modifiables, l'en-tête a des champs de filtre et des contrôles de tri, vous pouvez sélectionner des lignes. D'après ma pratique, ces tableaux aident à trouver, comparer et sélectionner un élément ou plusieurs éléments parmi un grand nombre de choses similaires. Par exemple, filtrez cinq des six mille outils indésirables du catalogue, puis sélectionnez celui dont vous avez besoin.
Table modifiable . Toutes ou certaines cellules sont modifiables, il n'y a généralement pas de filtrage, car l'ordre des lignes peut être modifié. Ces tableaux sont généralement accompagnés d'une barre d'outils et vous permettent d'effectuer des actions avec des lignes.
Sous-total
- Commencez avec les plus petits composants. Passez ensuite progressivement aux plus grands et enfin faites une maquette de tout cela.
- Pensez à l'avance à toutes les conditions possibles pour chaque composant.
- Utilisez le principe du rasoir d'Occam pour conserver le nombre minimum d'éléments, mais en couvrant tous les cas d'utilisation.
3. Définir l'interaction et l'environnement
Les blocs de construction ne suffisent pas pour créer un élément d'interface aussi complexe qu'une table. Le concepteur doit penser aux "règles du jeu" et développer les principes logiques et les conventions derrière la partie visuelle. Je décrirai certaines choses typiques que vous devriez considérer.
Données numériques
Combien de décimales un nombre doit-il avoir dans votre tableau? Un, deux, cinq? Quel est le niveau de précision optimal? Je prends une décision basée sur la précision dont les utilisateurs ont besoin pour prendre la bonne décision. Dans certaines professions, les fluctuations entre 10932.01 et 10932.23 sont importantes, tandis que dans d'autres domaines, les chiffres 14 et 15 ne sont vraiment pas importants. Ceci est un exemple des règles de données numériques utilisées par mon équipe dans un produit d'ingénierie complexe.
- Longueur : 2 décimales (57,53 m, 3,16 km), les espaces servent de milliers de séparateurs (403 456,56 m).
- Poids : 2 décimales (225,08 kg, 108,75 t), les espaces sont utilisés comme séparateur de milliers (12 032,17 kg).
- Argent : 2 décimales (9,45 $), les virgules sont utilisées comme séparateurs de milliers (16 408 989,00 $).
- Diamètre : 3 décimales (10,375 cm), aucun séparateur nécessaire.
- Latitude et longitude : 8 décimales (26,4321121), moins est utilisé pour la longitude ouest et la longitude sud (-78,05640132).
- Par défaut, pour les unités non listées ci-dessus: 2 décimales (32,05 g / m³, 86,13 C °).
Une autre chose que nous avons examinée était la différence entre les «vraies» données stockées sur les serveurs et les «grossières» données dans l'interface. Le système a utilisé des nombres extrêmement précis avec des dizaines de décimales dans tous les calculs, mais les gens n'avaient pas besoin de le voir tout le temps. Par conséquent, nous avons décidé d'afficher le nombre de décimales décrit ci-dessus et de définir le nombre total uniquement lorsque la cellule du tableau est active. Par exemple, un ingénieur peut saisir «134432.97662301», et après avoir appuyé sur «Entrée», «134 432,98» apparaîtra dans le tableau. En cliquant à nouveau, l'ingénieur verra à nouveau "134432.97662301".
Confirmation d'entrée
Contrairement au paragraphe précédent sur les nombres, la vérification n'est importante que pour les tableaux modifiables. Cela a deux aspects. Premièrement, les règles qui qualifient les données saisies comme valides ou invalides. Deuxièmement, soit des messages qui aident à corriger les données invalides, soit des mécanismes qui les corrigent automatiquement. Les règles de validation sont généralement trop complexes pour être simulées ou prototypées. Ainsi, les concepteurs peuvent les documenter sous forme de texte ou sous forme de diagramme.
Ceci est un exemple des modèles de message que j'ai déjà utilisés. Le texte entre crochets est dynamique et provient d'un moteur de calcul ou d'une base de données.
- Il devrait y avoir plus d'
measurement unit number . Optional explanation . - Doit être inférieur à l'
measurement unit number . Optional explanation . - Doit être entre la
value 1 et la value 2 measurement unit . Optional explanation . - La valeur minimale doit être inférieure à la valeur maximale.
- La valeur maximale doit être supérieure à la valeur minimale.
- Les valeurs minimale et maximale ne doivent pas être égales.
Équipes
Les tables de barre d'outils modifiables nécessitent généralement un ensemble de règles lorsque les boutons de la barre d'outils sont activés et désactivés. Ces conditions peuvent dépendre de la sélection de la ligne, du nombre de lignes sélectionnées, de la position ou du contenu de la ou des lignes sélectionnées et d'autres conditions. Ce qui suit est l'une des nombreuses façons de documenter ces règles logiques.
Donc, nous avons une table avec quelques produits chimiques. Il a des boutons tels que "Ajouter une ligne", "Déplacer vers le haut", "Déplacer vers le bas", "Supprimer", "Recalculer" et "Paramètres".
Et voici une description des états des boutons. Il s'avère que leur disponibilité dépend d'une ou plusieurs conditions.
L'étape suivante consiste à déterminer le résultat de chaque équipe. Par exemple, que se passe-t-il lorsque je sélectionne deux lignes qui ne sont pas côte à côte et que je clique sur Monter? Ou quel est le résultat du clic sur "Recalculer"? Toutes ces questions doivent être répondues, ou du moins envisagées à l'avance.
Conteneur et adaptabilité
Comment la table sera-t-elle placée dans l'interface? Par exemple, occupera-t-il de l'espace dans un conteneur existant ou s'agira-t-il d'un module distinct? Les réponses à ces questions dépendent entièrement du produit et il est préférable d’anticiper les problèmes potentiels et de définir soigneusement les principes.
Lorsque je développe des applications Web, je pense généralement à trois types de conteneurs pour les tables. Le cas le plus typique est lorsqu'une grande table est au centre de l'écran et occupe presque tout l'espace. Un tel tableau peut ne pas avoir son propre titre et peut avoir un nom de page. Les petites et moyennes tables peuvent devenir des modules de la barre d'outils, ainsi que d'autres contenus, tels que des graphiques, des diagrammes, des diagrammes. Dans ce cas, le panneau supérieur du tableau sert d'en-tête de module. Enfin, dans les grandes applications d'entreprise, les tableaux se trouvent souvent dans des boîtes de dialogue contextuelles. Il devrait y avoir des recommandations judicieuses pour que les dialogues ne se rompent pas en raison d'un contenu trop important.
Un autre aspect du placement d'une table dans un environnement d'interface utilisateur est la zone disponible de l'écran. La plupart des applications d'entreprise sont conçues principalement pour être utilisées sur des ordinateurs de bureau. L'adaptabilité de la table est limitée par un simple étirement et compression. En règle générale, les tables avec un grand nombre de lignes et plusieurs colonnes occupent 100% de la largeur disponible. Par conséquent, les cellules sont réparties uniformément sur l'écran et la plupart du texte peut être affiché sans recadrage ni habillage. En revanche, d'énormes écarts apparaissent entre les colonnes, ce qui contredit la loi de proximité. C'est pourquoi certaines applications utilisent des lignes ou des zèbres blancs et gris pour faciliter la lecture des informations.
La meilleure façon est de déterminer la largeur rationnelle par défaut et de permettre un redimensionnement manuel si nécessaire. Pour lire un tableau, il vaut mieux avoir de l'espace libre à droite que des espaces entre les colonnes. Mais si le tableau contient de nombreuses lignes et colonnes, le défilement horizontal et vertical est inévitable.
L'essence clé d'un tableau complexe est sa grande taille, qui donne une idée des données à vol d'oiseau. Malheureusement, je ne me souviens pas d'une très bonne méthode d'utilisation de grandes tables sur les écrans de smartphones. Les feuilles de calcul Excel et Google perdent leur puissance sur les petits écrans, mais il existe des moyens efficaces de gérer les petites feuilles de calcul. Par exemple, convertissez-les en une liste de cartes.
Accessibilité
Même une table exceptionnellement lisse et belle peut être un cauchemar pour les utilisateurs. Par conséquent, il est important de suivre les principes d'accessibilité. Le Guide d'
accessibilité du contenu Web (
WCAG 2.0 ) contient un chapitre sur les tableaux. La plupart du matériel concerne la programmation appropriée. Cependant, le designer a également quelque chose à penser. Voici les considérations de conception de base en termes d'accessibilité.
Donnez un titre au tableau et faites un bref résumé. Un utilisateur malvoyant devrait pouvoir se faire une idée de la table sans traitement vocal de toutes ses cellules.
Regardez la taille de la police. Bien qu'il n'y ait pas de taille minimale officielle pour le Web, 16 pixels (12 pt) sont considérés comme optimaux. De plus, l'utilisateur devrait pouvoir l'augmenter à 200% sans casser la mise en page entière.
Vérifiez les couleurs pour les personnes daltoniennes. Le texte et les commandes doivent présenter un contraste suffisant avec l'arrière-plan. Un rapport de couleur de 3: 1 est minimalement nécessaire (le plus sera le mieux). Et la couleur ne devrait pas être le seul moyen d'étiqueter les choses. Par exemple, les messages d'erreur ne doivent pas reposer uniquement sur du texte rouge; l'icône d'avertissement fournira un indice supplémentaire pour les daltoniens.
Évitez les commandes petites et ambiguës. Les composants qui répondent aux taps sont considérés comme bons s'ils ont une taille d'au moins 40 × 40 pixels. Les boutons représentés par des icônes doivent être marqués ou comporter des invites et un texte alternatif. Les concepteurs ne doivent pas abuser des icônes, car les utilisateurs peuvent mal comprendre les métaphores complexes.
Vous pouvez utiliser des outils d'accessibilité en ligne comme
Wave . Il trouve non seulement les problèmes et les opportunités d'accessibilité, mais les met également en évidence directement sur la page et explique comment les résoudre.
Sous-total
- L'unification et la mise en forme du contenu est également le travail d'un concepteur.
- Ne pensez pas seulement aux «choses», aux éléments de votre interface et considérez les cas d'utilisation, les règles et les modèles courants.
- Lorsque tous les éléments du tableau sont cohérents et compatibles, il est temps de réfléchir à la façon dont les tableaux correspondront au reste de l'interface.
Conclusion et matériel de lecture supplémentaire
Nous venons de passer par le processus de création d'une table complexe. Différents projets nécessitent des approches différentes, mais il existe un principe universel. Le concepteur doit faire fonctionner tous les éléments ensemble dans n'importe quelle combinaison. Par conséquent, il est bon de commencer par collecter d'abord les choses nécessaires et de faire de petits blocs. Et, bien sûr, tester avec les utilisateurs dès que vous obtenez quelque chose de cliquable et réaliste.
Ici, vous pouvez en savoir plus sur la conception des tables.
Publications plus intéressantes
Lisez aussi le blog
Société EDISON:
20 bibliothèques pour
application iOS spectaculaire