Meilleure pratique pour tronquer des titres similaires dans la grille de données?
J'ai le tableau suivant, où les noms sont tronqués jusqu'à 14 caractères, car il n'y a pas assez de place pour le tableau lui-même (dans le monde réel, il y a d'autres colonnes).
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Mais ... il y a un cas où cette liste peut se composer de noms très similaires (et peut être très longue), et comme vous pouvez le voir, les utilisateurs ne savent pas quel est le nom réel derrière chaque entrée.
Je pensais aux modèles UX suivants:
- Ajouter des info-bulles - ce n'est pas une bonne idée car les listes peuvent être très longues
- Fixation de la position de la première colonne et ajout d'un défilement horizontal pour les autres colonnes?
Veuillez noter que les colonnes sont illustratives, mais je ne peux exclure aucune colonne pour obtenir de l'espace.
Tronquez les titres afin que le sens puisse être dérivé des deux extrémités.
Cas d'utilisation:
- Chocolat
- Pain de marque
- Thé de marque
Divisez-le 8: 6 (la longueur totale est toujours de 14)
Tronqué devient:
- SomeBran ... colate
- SomeBran ... Pain
- SomeBran ... me Tea
Divisez-le 8: 5 avec une logique supplémentaire
La logique:
- la partie 1 est les 8 premiers caractères
- Si plus de 8 caractères ajouter la partie 2
- la partie 2 est les 5 premiers caractères comptés à partir du dernier index d'un espace (ou tiret)
Tronqué devient:
- SomeBran ... Chocol ...
- SomeBran ... Pain
- SomeBran ... Thé
Mise à jour
Il serait préférable que le Brandname puisse être séparé, mais même dans ce cas, des informations importantes peuvent manquer. Exemple:
- Feuilles de thé vert bio
- Sachets de thé à la camomille biologique
Avec une logique côté serveur compliquée, les titres peuvent être tronqués pour enregistrer un peu des pièces uniques. Si nous gardons une limite de 16 caractères, l'exemple pourrait devenir quelque chose comme:
- Org.Gre.Tea Leav
- Sacs à thé Org.Cha.
Mais même alors: Le deuxième thé est-il "Chai" ou "Camomille"?
La trancation entraîne une perte d'informations
Questions à se poser:
- Combien de pertes d'informations est acceptable?
- Quel est l'impact causé par toute perte d'informations?
- Lors de la création des données, peut-il être structuré de sorte que le système puisse facilement les tronquer de telle manière que la perte d'informations soit réduite au minimum?
En regardant les exemples ci-dessus, il est clair que la troncature peut entraîner de la confusion. Néanmoins, dans un esprit de troncature, voici 3 prototypes https://jsfiddle.net/phaze_phusion/vwdb72f3/
Certaines approches pour tronquer un long texte pourraient être:
- Utilisez deux lignes , si nécessaire.
- Utilisez les points de suspension au milieu du nom , ou dans la partie la moins significative.
- Utilisez deux points de suspension, un au début et un à la fin .
- Réduisez la taille de la police . Tout en gardant le texte lisible, vous pouvez réduire la taille de la police afin que quelques caractères supplémentaires puissent tenir.
Je découragerais l'utilisation d'une barre de défilement horizontale à l'intérieur des champs ou des colonnes.
Pour afficher le texte intégral, vous pouvez utiliser une info-bulle qui s'affiche en survol sur les appareils de bureau ou sur les appareils tactiles. Vous pouvez également utiliser une icône ou similaire pour interagir en cliquant/tapant. ( Cette autre question pourrait être pertinente)
Est-il possible de changer la conception de votre table? Voici une idée approximative de ce que je suggère, les couleurs, les titres et les arrière-plans nécessitent plus de réflexion s'ils sont mis en œuvre.
personnellement, je n'aime pas la table tronquée, ni en tant que chef de produit ni en tant qu'utilisateur car cela contredit le sens de la table. Un tableau doit présenter des données complètes et ne pas en faire partie. Je n'ai pas besoin de survoler chaque champ pour voir l'intégralité du contenu. De plus, je ne peux pas copier-coller de texte depuis l'infobulle.
voici ce que je ferais: 
Combinez le nom de la marque et l'adresse dans une colonne. vous pouvez jouer avec les couleurs, les tailles de police, l'espacement des lignes, etc. cela ajoutera beaucoup d'espace au tableau car ces colonnes sont les plus longues. de plus, je pense qu'il vaut mieux combiner ces informations pour un meilleur flux de lecture et de numérisation.
deuxièmement, toutes les colonnes avec case à cocher - c'est booléen, donc j'utiliserais l'icône avec deux couleurs différentes - une si vraie et une si fausse (comme dans l'icône de stationnement
Quant à l'emplacement, j'ai deviné qu'il est relatif, donc ici, vous pouvez spécifier la distance ou le texte avec/sans couleur spécifique à chaque état. une autre option consiste à avoir uniquement l'icône avec une info-bulle pour comprendre à quoi sert la couleur.
quant aux titres - ils peuvent être divisés en deux lignes ou jouer avec la taille de la police
Option 1: Autoriser l'utilisateur à sélectionner les colonnes qu'il souhaite voir, afin que nous créons de l'espace pour Nom
Option 2: colonnes redimensionnables
La troncature des mots dégrade l'expérience utilisateur - elle oblige l'utilisateur à travailler plus dur pour comprendre ce que cela signifie vraiment.
Alors pourquoi ne pas utiliser un tableau tabulaire?
Par exemple, vous pouvez utiliser une conception basée sur une carte à la place, mais cela dépendra du nombre d'enregistrements que vous affichez dans le tableau.
https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/
Les cartes organisent les informations en morceaux de contenu, et les utilisateurs apprécient le contenu en morceaux car cela facilite la numérisation: cela aide à éviter les murs de texte, qui peuvent sembler intimidants ou longs et permettent aux utilisateurs de plonger plus rapidement dans leurs intérêts. Les fiches divisent le contenu en sections significatives, de la même manière que les paragraphes de texte regroupent les phrases en sections distinctes. Ils peuvent rassembler diverses informations pour former un contenu cohérent.
L'avantage d'une carte est qu'il y a beaucoup plus d'espace pour le nom et le contenu, ce qui signifie que vous n'avez probablement pas besoin de la tronquer. Il vous permet d'organiser le contenu un peu mieux que dans un tableau tabulaire.
Vous pouvez même ajouter une photo pour la rendre beaucoup plus riche (si vous le souhaitez), et elle se portera sur le mobile beaucoup plus facilement à l'avenir (en supposant que vous souhaitiez le faire).
Si vous avez beaucoup d'enregistrements, vous pouvez toujours utiliser une conception basée sur une carte, mais vous devrez fournir des mécanismes de recherche et de navigation supplémentaires pour permettre à l'utilisateur de trouver facilement la ou les cartes qui l'intéressent, par exemple Navigation à facettes.
http://alistapart.com/article/design-patterns-faceted-navigation
Également appelé navigation guidée et recherche à facettes, le modèle de navigation à facettes exploite les champs et les valeurs de métadonnées pour fournir aux utilisateurs des options visibles pour clarifier et affiner les requêtes. La navigation à facettes est sans doute l'innovation de recherche la plus importante de la dernière décennie. Il propose une expérience de recherche et de navigation incrémentielle intégrée qui permet aux utilisateurs de commencer par une recherche par mot-clé classique, puis de parcourir une liste de résultats. Il propose également une carte personnalisée (généralement à gauche des résultats) qui donne un aperçu du contenu et de son organisation et propose une variété de prochaines étapes utiles. C’est là que la navigation à facettes prouve sa puissance. Conformément aux principes de divulgation progressive et de construction incrémentielle, les utilisateurs peuvent formuler l'équivalent d'une requête booléenne sophistiquée en prenant une série de petites étapes simples. La navigation à facettes répond au besoin universel de se resserrer. Par conséquent, ce modèle est devenu presque omniprésent dans le commerce électronique, compte tenu de la disponibilité de métadonnées structurées et de la valeur commerciale évidente de l'amélioration de la recherche de produits. La navigation à facettes se déploie rapidement sur une grande variété de contextes et de plateformes. Dans le monde de la recherche, la navigation à facettes est partout.
Certaines des colonnes de votre tableau deviennent les facettes qui vous permettent de filtrer les cartes dans un ensemble plus facile à gérer, par exemple Parking, Wi-Fi, salle familiale, emplacements et rabais.
Je ferais ce qui suit:
- Laisser comme table tubulaire car cela permet de comparer les données verticalement et horizontalement entre chaque entrée, au lieu d'utiliser des cartes.
- Combinez Parking + Salle familiale + Wifi sur une colonne appelée "Extras" et utilisez une icône pour chacun de ces extra au lieu de la coche. Une info-bulle apparaîtrait sur chacune de ces icônes pour expliquer quelle est la signification. De cette façon, vous obtenez plus d'espace pour les colonnes qui nécessitent plus de longueur.
Une autre approche consiste à utiliser un algorithme de séquence commune la plus longue entre les éléments adjacents. Ensuite, si le texte est trop long, supprimez une partie de la sous-séquence (si vous le pouvez).
Par exemple
SomeBrandWidget -> S...Widget
SomeBrandGizmo -> S...Gizmo
ACMEWidget -> ACMEWi...
À mon humble avis, votre question est plus large; ce que vous demandez vraiment, c'est "Comment puis-je amener l'utilisateur à trouver facilement les informations qu'il veut"? Voici mes suggestions.
L'utilisateur doit pouvoir redimensionner la largeur des colonnes. Si une chaîne n'est pas entièrement visible lorsque la largeur des colonnes est trop petite, la chaîne doit être ellipsée au milieu, comme déjà suggéré.
En outre, vous devez également ajouter un champ de texte de filtre où l'utilisateur peut saisir des termes de recherche; toutes les lignes ne correspondant pas au filtre sont masquées de la vue de l'utilisateur.
Vous pouvez faire du filtre de champ de texte uniquement la première colonne, ou la totalité d'entre elles. Vous pouvez également choisir d'avoir un filtre de champ de texte différent pour chaque colonne, si les colonnes contiennent des données similaires; cela dépend vraiment de votre application.
Une autre bonne idée serait d'avoir le tableau triable par colonne.
Gardez-le sous forme de tableau, mais vous pouvez combiner le nom de la marque, l'adresse et les heures d'ouverture car cela vous donnera plus d'espace pour développer horizontalement et vous pouvez afficher les données sans tronquer. il suffit de différencier le nom de la marque, l'adresse et les heures d'ouverture par le style de police. au lieu d'écrire une icône d'utilisation excellente ou mauvaise qui économisera plus d'espace.
Je vous remercie!
Ma réponse est très similaire à celle de noadavi - Voici une maquette, que je suivrai en expliquant les différences.
Notes
Je n'ai appliqué aucune couleur, car je ne veux pas transmettre d'informations avec elle pour des raisons d'accessibilité. La couleur pourrait facilement être ajoutée, mais elle devrait être purement d'intérêt visuel, pas dans le cadre du message véhiculé.
J'ai inclus le nom de marque et l'adresse sur deux lignes dans la même cellule, tout comme noadavi. Cela fournit plus de largeur et ce sont en fait deux parties des mêmes informations du point de vue de l'utilisateur - si un être humain recherchait un lieu, il traiterait probablement le nom du lieu comme la première ligne de l'adresse! (Une hypothèse, bien sûr, mérite donc d'être vérifiée par des recherches)
Variations de l'approche de noadavi:
- J'ai modifié la présentation des coûts pour en faire une colonne plus étroite
- J'ai gardé les colonnes pour le stationnement, le wifi, la salle familiale, mais plutôt que d'utiliser des cases à cocher, j'utilise une icône pour afficher la présence de ces propriétés. Les icônes sont alignées en colonnes, et avec un bon texte alternatif, elles pourraient transmettre une signification similaire - je les utilise simplement à la place de la version cochée de vos cases à cocher, avec un espace vide au lieu des versions non cochées.
- J'ai créé l'en-tête de colonne pour ces colonnes d'icônes sur ces colonnes. Les icônes transmettent chacune assez bien le sens de leur colonne.
- J'ai déplacé "bon emplacement" dans les détails ... mais je ne suis pas sûr à 100% de ce que cela veut vraiment dire. Personne ne voudra annoncer un "mauvais emplacement", donc je réfléchirais sérieusement à qui bénéficierait de ce petit renseignement, et si cela devait être une raison pour laquelle les gens s'opposent à la présence de leurs données!
Donc, toutes les données sont là (sauf "rabais" - je l'ai oublié et je n'ai pas le temps de l'ajouter. Ce serait un autre "détail") et il est dans les mêmes colonnes, mais présenté de manière beaucoup plus condensée façon.
Noadavi a également ajouté une distance à la colonne d'emplacement, qui, si c'est ce que signifie "emplacement", être bon ou mauvais (par opposition à "c'est près d'un endroit bruyant" ou "c'est dans un cadre incroyable") pourrait être reproduit ici si le la colonne d'emplacement est placée comme la dernière de ces colonnes d'icônes. Si c'est l'autre type de chose, ceux-ci pourraient également être décomposés en icônes pour "endroit calme" ou "joli endroit" - essentiellement une colonne visuelle de "balises".
Ajouté le 17/02/2017, suite aux commentaires
Invité par les commentaires de Joao Carvalho ci-dessous, je devrais clarifier mes raisons de déplacer "par nuit" hors de l'en-tête de la colonne des coûts et dans les cellules de données elles-mêmes. J'ai deux de ces raisons pour faire cela.
- Largeur de colonne - "par nuit" dans l'en-tête force la colonne à être beaucoup plus large, et réduire la largeur était l'objectif initial de la question
- Il ajoute de la flexibilité à la conception, en ce qu'il s'adresse à un hébergement qui est disponible sur une base autre que par nuit. Par exemple, les multipropriétés et les locations de vacances ne sont souvent disponibles que sur une base hebdomadaire et sur une échelle de prix - offrir un tarif journalier pour de telles choses est contre-intuitif pour quelqu'un qui essaie de réserver un court séjour sur la base d'un tarif journalier.
Mais il y a un compromis. Il y a des raisons très fortes pas de le faire.
- Il ajoute une étape supplémentaire d'interprétation et de traduction que l'utilisateur doit parcourir pour pouvoir faire une comparaison entre les lignes.
- Si ajoute de la flexibilité à la conception, cela signifie qu'il est plus facile de mal lire, d'interpréter ou de simplement confondre.
Dans l'ensemble, je suis d'accord avec Joao sur le fait que l'unité de temps commune est meilleure dans la plupart des cas ... mais cela n'aide pas autant à compresser la largeur de la table et cela risque de frustrer l'utilisateur si un prix par nuit est proposé lorsque l'hébergement par nuit n'est pas une option disponible pour cet endroit.
Si des places sont proposées à différentes échelles de temps, je m'attendrais à voir plus d'efforts pour rendre ces échelles de temps visuellement distinctes les unes des autres que je n'ai montré ici, mais cette distinction serait nécessaire.