La meilleure façon d'afficher de grandes quantités de données utilisateur sur une seule page?
J'ai cherché des articles connexes, mais je n'ai pas vraiment trouvé quelque chose qui m'a beaucoup aidé. J'ai trouvé quelques articles qui pourraient aider à générer des idées.
Voici avec quoi je travaille:
Il s'agit de la conception ancienne. Je repense cette section pour un portail intranet. Fondamentalement, toutes ces petites sections d'en-tête en bleu font partie du profil de l'utilisateur, il a rempli ou saisi des données. Lorsque vous cliquez sur l'en-tête, il se développe comme un style d'accordéon pour afficher les informations. Cette page peut devenir très longue. Pour vous donner une idée de tout ce qui est étendu, il fait plus de 8 000 pixels de long. Bien que tous les utilisateurs n'aient pas tout développé en même temps, certaines sections contiennent de grandes quantités de données qui deviennent très longues avec une seule section développée.
La question évidente est donc de savoir comment organiser une telle quantité de données sur une seule page? Existe-t-il une méthode de catégorisation qui pourrait mieux aider à afficher cela à l'utilisateur? Un de mes développeurs a suggéré des onglets, mais cela ne se produira pas à l'intérieur d'une interface utilisateur déjà tabulée (les onglets supérieurs restent là juste pour obtenir une actualisation de l'interface utilisateur - résumé, liste des écoles, liste des carrières, liste des bourses).
Ou les accordéons sont-ils probablement la meilleure méthode dans cette situation?
Il n'y a absolument aucune raison pour que tout de cette information soit sur un page . Un tel nombre d'options est écrasant pour l'utilisateur et rend incroyablement difficile de trouver ce qu'il recherche (en particulier avec l'espace négatif clairsemé et la police extra-gras que vous avez là). Vous faites déjà une divulgation progressive (accordéon), donc les déplacer dans un onglet dédié ne les rendra pas moins détectables.
L'onglet récapitulatif est censé donner un aperçu rapide des points clés. Dans votre cas, ces points clés seraient le nombre d'étapes franchies, le nombre de demandes d'inscription à des études collégiales et boursières, les informations manquantes, etc. La seule façon de déterminer ce qui est réellement nécessaire est de parler à vos utilisateurs (je suppose que c'est une sorte de conseillers) et de comprendre leur flux de travail. Consultez les questions de Quora sur les bons exemples de conception de tableau de bord: n et deux .
La deuxième partie de la refonte consiste à organiser toutes les sections en groupes pertinents à représenter avec des onglets en haut. Il me semble qu'ils peuvent être regroupés en au moins Academic, Personal et Financial avec Career list fusionné dans Personal et certaines sections existantes déplacées vers School list et Scholarship list. Cette tâche peut être accomplie avec exercices de tri des cartes avec vos utilisateurs.
Résumé
Votre onglet Summary actuel devrait devenir un aperçu du tableau de bord de chaque profil. Les informations qui s'y trouvent doivent maintenant être réorganisées en onglets supplémentaires et/ou fusionnées avec celles existantes. La réorganisation doit impliquer les utilisateurs dans des entretiens sur leur flux de travail et leurs exercices de tri des cartes pour comprendre comment ils regroupent les sections de profil.
Vous avez raison: c'est une tonne de données.
Vous pouvez conserver le concept d'agrandissement des sections, mais d'abord déterminez quelles sont les informations les plus importantes dans chaque section, puis réorganisez la façon dont vous les affichez.
Dans la section élargie Dates des jalons, qu'est-ce qui est le plus important: le jalon le plus récemment achevé, le fait que quelque chose a été récemment achevé ou les jalons qui ne l'ont pas été? Une fois que vous savez cela, vous pouvez réduire la section en une seule ligne concise:
Jalons (6 incomplets)
Si c'est vraiment important et a besoin d'attention, mettez-le en évidence. Mais le point ici est avec autant d'informations, vous voulez montrer le moins possible.
Deuxièmement, pensez à la structure de la page. Remplacez l'accordéon par un dessin à deux colonnes: les en-têtes minimisés et/ou mis en évidence à gauche et le contenu à droite.
Cette conception fonctionne mieux pour deux raisons:
- Les écrans sont plus larges que hauts, vous utilisez donc plus d'espace d'écran pour afficher plus d'informations avec beaucoup moins (ou idéalement pas) de défilement.
- Avec autant d'en-têtes à choisir, il devient plus difficile de trouver celui que vous recherchez lorsque le mouvement de l'accordéon et la longueur du contenu changent de position. Une liste sur la gauche qui ne bouge pas gardera chaque élément au même endroit. Au fur et à mesure que vos utilisateurs l'utiliseront, ils commenceront à savoir exactement où s'attendre à l'en-tête qu'ils recherchent.
Enfin, si vous mettez en surbrillance quelque chose dans les en-têtes (par exemple, un curriculum vitae qui n'a pas encore été soumis), c'est une bonne idée de mettre en évidence l'élément correspondant dans la page que vous ouvrez.
Vous devez savoir comment les gens utilisent actuellement l'application avant de pouvoir apporter des changements positifs majeurs.
- Définissez le type de tâches que vos utilisateurs doivent effectuer à l'aide de l'application.
- Découvrez le workflow associé à chaque tâche.
- Comprendre quelles données sont actuellement consultées le plus fréquemment
- Commencez à réfléchir aux façons dont l'interface peut être organisée pour améliorer l'efficacité en fonction de vos recherches.
condenser les groupes
pourquoi ne pas condenser certains des regroupements, les mettre sous un "curseur"? des exemples sont:
- je vois qu'il y en a au moins 5 pour les parents avec des données sur les frères et sœurs, fusionnez-les sous parents
- les sports, les clubs, les activités extérieures sont extrascolaires, donc appelés activités non académiques .
- la personnalité, les préférences et les priorités décrivent la psychologie d'une personne, elles doivent être regroupées en personnalité .
- les impôts, les actifs et les revenus sont la situation financière
résumer les données
chaque curseur aura désormais une tonne de données après la condensation. vous devriez maintenant obtenir un Gist de chaque section, comme une généralisation.
une analogie est si on va à une épicerie et achète des trucs, tout le monde se soucie d'une très longue réception d'articles correspond aux taxes, totaux nets et bruts - ils ne font pas défiler tous les articles, ni ne regardent les en-têtes et pieds de page du reçu. ils peuvent le faire plus tard lorsqu'ils ont le temps ou ont besoin de détails.
les espaces blancs sont vos amis
ne compactez pas tout en une seule page. les séparer les uns des autres. utilisez également des en-têtes courts. vous pouvez peut-être décrire ce que c'est plus tard dans une info-bulle.
aussi, les accordéons sont de la vieille école
ils auraient dû être morts comme ces menus imbriqués à plusieurs niveaux. utilisez une barre latérale à gauche. de cette façon, vous avez un grand espace de travail pour charger des trucs à droite.
Voici ce que j'ai fini par faire sur la base de certains commentaires. J'étais vraiment coincé sur certaines restrictions; l'un étant un délai de livraison de 2 semaines et la refonte de tout ce contenu n'allait pas se produire dans 2 semaines ... alors c'était vraiment la seule méthode pour faciliter la mise en œuvre. Le contenu des onglets devait rester le même. En d'autres termes, la seule chose que je pouvais faire (en ce moment) était de repenser la structure de navigation dans laquelle accéder au contenu.
Si vous pouvez raccourcir les noms de section, je mettrais une navigation sur le côté qui défile avec la fenêtre pour les aider à accéder à différentes sections sans faire défiler au-dessus et en dessous du contenu pour trouver l'en-tête sur lequel cliquer pour accéder aux données ils veulent (ça sonne déjà épuisant). De plus, s'il est possible de classer chaque section comme terminée/incomplète, peut-être un code couleur ou une icône pour afficher l'état des données dans cette section pour guider l'utilisateur vers les zones à problème.
Un accordéon aiderait à garder la longueur de la page petite, mais avec la taille des données que vous décrivez, j'ai l'impression que ce mécanisme tombe en panne. S'il est possible de diviser cela en plusieurs onglets, ou d'abandonner complètement l'idée de section et de mettre les informations sur des pages distinctes, ce serait bien.