Exemples de GUI "Light table" pour éditer et comparer des images, du texte ou d'autres données
Je cherche des exemples de solutions existantes du problème d'interface suivant. L'interface doit avoir un tableau, une liste, une vue miniature ou tels éléments qui, selon l'exemple, peuvent être des fichiers, des images, du son, des tweets, des rendez-vous de calendrier, des tâches ... tout type de données vraiment.
L'utilisateur peut ensuite "ouvrir" n'importe quel nombre d'éléments pour afficher les détails, comparer et/ou modifier les données. La vue détaillée ne doit pas couvrir ni chevaucher le reste des données, car l'utilisateur voudra ouvrir plusieurs vues détaillées en même temps.
Cela pourrait bien sûr être implémenté comme un système de fenêtrage standard, avec une nouvelle fenêtre pour chaque élément ouvert, mais je cherche quelque chose qui offre une disposition plus élégante pour ce problème particulier. Idées pour naviguer dans une telle interface, idées de mises en page, comment montrer la connexion entre les éléments du tableau et les éléments "ouverts".
Aucune application existante ne me vient à l'esprit pour le moment, mais j'explorerais ce type de mise en page.
Vous avez un volet principal et un volet de détails. Le volet principal contient une liste d'éléments, de miniatures, etc. Les éléments sélectionnés apparaissent tous dans le volet d'informations. Ils peuvent être réorganisés (glisser-déposer, flèches en survol, etc.) pour faciliter la comparaison entre les paires d'éléments pertinentes. Les volets peuvent être redimensionnés, affectant la taille des miniatures et de la vue détaillée. Naturellement, de cette façon, vous ne pourrez pas comparer côte à côte de très gros articles, mais vous ne pourrez pas non plus le faire autrement sur un seul moniteur. Vous pouvez avoir des barres d'outils pour modifier les éléments mis au point, etc.
Vous pouvez envisager d'utiliser une disposition de grille dans laquelle les boîtes peuvent glisser pour se développer et peuvent également être déplacées afin que l'utilisateur puisse organiser la disposition afin que les éléments intéressants puissent être positionnés côte à côte.
Pour un exemple de ce type de mise en page, suivez ce lien et consultez "Grille 16" sous "Mise en page" dans la navigation: http://themeforest.net/item/adminica-the-professional-admin-template/ full_screen_preview/160638
La première qui se produit est d'essayer de refuser la table, dans une sorte de types de données très différents. Il m'est facile de trouver un EP par une photo de couverture dans mon sac de disque, que par un artiste/autocollant de titre ou à travers le catalogue avec les noms de fichiers mp3.
En conséquence, il est nécessaire de rechercher la décision d'interface en interaction avec des objets, plutôt qu'avec des enregistrements. À propos de la visualisation simultanée de plusieurs objets - à l'exception de la comparaison des mêmes objets, elle n'est guère applicable, car le lieu d'attention reste tout de même sur n'importe quel objet concret.
Lors de la comparaison entre des groupes de types, par exemple l'écoute simultanée d'une chanson (audio) et la visualisation des paroles de la chanson (txt), votre locus d'attention reste sur le document texte. Dans ce cas, vous n'avez pas besoin de voir un marqueur supplémentaire pour la lecture audio en cours.
Voici un bon exemple d'interaction objective Raskin. Beyond desktop
Ceci est similaire à ce que font les outils de diff/fusion existants.
La plupart de ces outils organisent différents documents horizontalement pour faciliter la comparaison de documents multi-pages/écran (ils défilent ensemble) et la plupart de ces outils limitent la comparaison à 2-3 documents à la fois pour deux raisons:
Immobilier de bureau.
Perception cognitive - si les documents sont longs ou compliqués à comparer,
montrant plus de 2-3, il est difficile pour l'utilisateur de se rappeler qui est lequel lors de la comparaison.
Les exceptions courantes à la règle des 2-3 documents sont la comparaison de listes peu profondes (étroites), par ex. spécifications des produits dans les sites Web des fabricants ou des revues (par exemple, appareil photo numérique, écrans).
Si vous affichez plus de 2 documents, vous devriez envisager de geler les noms/vignettes au-dessus de la zone de défilement, donc lorsque vous faites défiler vers le bas, vous appelez facilement identifiez quelle colonne se réfère à quel document. Si les documents ont des noms similaires, mettez l'accent sur la différence entre les noms (par exemple, chemin d'accès différent, extension différente, date différente, modifié par un utilisateur différent).
Exemples:
Les éléments à comparer peuvent être sélectionnés avant la comparaison ou dans la barre de titre en cliquant sur une icône d'ajout/suppression/modification sur le titre de l'une des colonnes.