Comment afficher efficacement de nombreuses données de profil en un coup d'œil?
Nous sommes en train de créer un système d'annuaire international pour nos employés (qui fournirait des détails sur les employés - un résumé de leur éducation, de leur expérience, de leurs contacts et des informations sur les réseaux sociaux).
Nous avons environ 90 attributs, et ils ne sont pas tous obligatoires pour être affichés. Nous pouvons faire une divulgation progressive.
Le problème auquel nous sommes confrontés est - il existe un segment appelé carte de visite - et cela devrait héberger 18 attributs. Maintenant, pour afficher autant de données, quelle serait la meilleure approche?
- Nous le faisons en utilisant la disposition horizontale
- ou nous l'utilisons comme disposition verticale
Pour un utilisateur moyen, consommer les informations Le rendu en forme de "F" est le meilleur; cependant, dans ce scénario, quelle devrait être la meilleure façon de rendre les données pour ces 18 attributs?
Pour les attributs restants, nous utiliserons des onglets avec une catégorisation spécifique.
Ces informations ne peuvent pas toutes être également pertinentes pour les utilisateurs, en particulier en un coup d'œil.
Je le couperais à 4-5 éléments les plus importants (e-mail, mobile, emplacement, entreprise, département - compte tenu des spécificités de l'entreprise, peut-être que dans certaines entreprises, les gens préfèrent les appels de vidéo conférence au lieu d'appeler sur mobile) et trier le reste dans le seul élément accordéon extensible.
Ou, si les 18 éléments doivent être présents sur la surface sans clics supplémentaires, j'afficherais les 5 premiers dans une typographie plus grande en haut et séparerais les détails moins pertinents avec un espace blanc ci-dessous. Le tout en modèle F ou en colonnes par type d'information (numéros de téléphone, géographie, etc.).
Upd: après OP, ajout de la capture d'écran
Pour moi, cette structure fonctionne.
Le seul problème que je vois est que rien n'est visuellement mis en évidence concernant la hiérarchie des informations, donc l'œil est perdu au premier coup d'œil.
Je pense que la colonne la plus à gauche a besoin d'un arrière-plan en surbrillance (gris clair) ou d'un élément coloré. La hiérarchie d'entreprise à droite me semble un deuxième élément important (le troisième pour certaines personnes), mais à cause des photos, elle attirera immédiatement l'œil, avec le plus grand contraste de tous les éléments de la page.
Vraiment une bonne question. Le projet que vous entreprenez semble être très trivial et pourrait avoir un résultat qui amènerait vos utilisateurs à utiliser le système ou non, en fonction de l'expérience qu'ils rencontrent. D'après ce que j'ai lu dans votre post et les commentaires soulignés, je pense que vous devrez peut-être approfondir un peu plus ce que vous demandez. Je pense également que vous devrez peut-être vous conformer et vous débarrasser de certains ou de la majorité des 90 attributs, ou du moins diminuer ce qui est important et ce qui ne l'est pas. Je ne suis pas un expert de votre organisation, mais ce nombre semble assez élevé pour votre utilisateur final typique. Surtout pour un système interne. Bien que (ce que je pourrais dire beaucoup ici) jetez un œil à votre expérience typique de réseautage social. Vous pouvez voir la majorité des données cachées parmi les informations principales (les données que vous classifiez "obligatoires" des 90 attributs). Les données primaires sont affichées de la manière la plus élevée, étant les plus visibles.
- Numéro de téléphone
- Identifier les attributs (nom, sexe, photo d'identité)
- Département/Lieu
...etc. Ces informations sont essentielles si votre système concerne les employés. Ce n'est pas tout ce que vous pourriez inclure pour commencer, mais c'est un début. Assurez-vous de commencer petit et de vous diriger vers les plus grandes parties de votre système.
Les autres formes de données, par exemple; les projets sur lesquels un employé a travaillé ou peut-être une liste des hauts fonctionnaires dont il relève, peuvent être imbriqués. C'est une supposition, car je ne sais pas quel type de données vous représenterez.
En tant que mise en page, je soulignerais encore, en cachant ce qui n'est pas important. Masquez ces données dans le contenu à onglets ( http://getbootstrap.com/javascript/#tabs ). Assurez-vous de diviser votre système en une grille définie. Séparez les zones qui ont du sens. Par exemple, la pièce de profil étant un attribut clé. Faites-le afficher principalement en haut et dans une colonne sur le côté gauche de la page.
C'est des trucs comme ça que vous devez vraiment approfondir. Posez plus de questions et de systèmes de recherche qui ont réussi. D'après ce que j'ai décrit et conseillé, cela peut sembler élémentaire. Mais ce sont les bases qui font ou cassent de bonnes expériences. Les essais et erreurs ont permis à l'utilisateur de se retrouver là où il se trouve aujourd'hui. Faites ce que les utilisateurs ou même vous voudrez peut-être voir dans la représentation des données. Ne réfléchissez pas trop.
Voici comment nous décomposons nos attributs:
- Quick View - Les données les plus importantes/pertinentes, mises en évidence/dans un emplacement prédominant.
- Vue des détails groupés - Les détails du profil regroupés en panneaux ou onglets
- Réplication - ne vous inquiétez pas de répliquer les données de la vue rapide dans la vue détaillée groupée également
Nous avons la vue rapide en haut de la page, puis nous avons un tas de colonnes de panneaux qui fonctionne pour nous. Au lieu d'utiliser des colonnes, nous aurions pu utiliser des onglets, mais l'essentiel est de contrôler la LARGEUR de la page dans ce cas. Voyez comment Facebook fait sa page À PROPOS.
En termes de ce que vous avez fourni, vous êtes sur la bonne voie, je mettrais simplement le profil de l'utilisateur en haut, jouerais avec la réduction de la largeur et ferais de la colonne de droite une couleur plus foncée peut-être