Quel est un bon choix de conception pour deux panneaux pliables à gauche?
Les normes d'interface utilisateur de notre société appliquent la conception globale suivante:
- Le côté gauche de la fenêtre contient un menu (ce qui aurait été des onglets de navigation autrement)
- Le côté droit est la zone de travail de l'application
- Le menu est extensible/pliable via une icône de hamburger placée dans le coin supérieur gauche de la zone de travail de l'application.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Le problème auquel je suis confronté est que, dans mon application, la zone de travail elle-même est divisée en 2 moitiés verticales:
- L'arborescence de dossiers étroite sur le côté gauche
- La zone de travail sur les données pour le nœud individuel de cet arbre sur le côté droit.
Une fois que vous avez choisi un nœud dans l'arborescence sur lequel travailler, l'arbre devient superflu pour le flux de travail, donc je voudrais fortement le réduire également.
La question est, quelle est l'approche de conception/interface utilisateur appropriée à cela?
Quelques choses que j'ai considérées:
Approche 1 : avoir une icône de hamburger identique à celle des onglets de navigation.
L'inconvénient est que nous avons maintenant DEUX icônes de hamburger, vous ne savez pas quoi faire avec eux lorsque les deux zones pliables sont fermées? Quand seul l'arbre est fermé?
Approche 2 : Avoir une ligne de séparation verticale qui peut être glissée
Les inconvénients:
Tout d'abord, l'arbre n'a aucun sens si vous n'en montrez que la moitié gauche - il a l'air horrible et n'est pas très utile. Donc, avoir un séparateur coulissant est pire qu'une interface utilisateur binaire "ouverte/fermée".
Deuxièmement, le séparateur vertical est un élément très étroit, donc le saisir et le faire glisser avec une souris est une tâche difficile.
Approche 3 : Avoir une ligne de séparation verticale, avec une icône de triangle orientée vers la gauche ou vers la droite au milieu. Cliquez sur l'icône pour agrandir/réduire la zone d'arbre.
Les inconvénients:
Premièrement, pour que l'icône soit cliquable sans effort majeur, elle doit être quelque peu large (10+ pixels). Et pour ce faire, la ligne de séparation doit également être large et cela semble UGGGGLY! (c'est la conception actuelle de l'application, et j'ai eu beaucoup de commentaires négatifs des utilisateurs avec lesquels je suis quelque peu d'accord).
Deuxièmement, nous avons maintenant deux éléments d'interface utilisateur largement distincts faisant le même travail. Pas élégant et pire encore, peut être très déroutant.
La façon dont j'aborderais cela est de tout repenser un peu. Par exemple, si je le concevais, avant qu'un nœud ne soit sélectionné, je demanderais au sélecteur de nœud de remplir toute la zone de travail. Ensuite, lorsqu'un nœud a été sélectionné, le sélecteur de nœud se réduisait à l'étroitesse et se fondait en arrière-plan comme dans l'application Web Spotify.
Dans cet exemple, je suis sur une page d'artiste.
Si je clique ensuite sur un album de cet artiste, la page de l'artiste se déplace vers la gauche et s'effondre
EDIT: Si vous deviez cliquer sur la page d'artiste réduite à ce stade, la page d'album disparaîtrait à nouveau et la page d'artiste prendrait le devant de la scène.
Si je devais ensuite invoquer la recherche, cela couvrirait la page d'artiste effondrée.
Maintenant, en traduisant cela dans votre application, l'arborescence serait la page de l'artiste, se repliant lorsqu'elle n'est plus nécessaire et réapparaissant lorsqu'elle l'est. Si le menu de hamburger gauche est activé, il couvre complètement l'arborescence. Il s'agit essentiellement d'une pile.
OK, ceci est ma première réponse à UX, alors restez avec moi, mais mon approche serait la suivante:
problème [~ # ~] [~ # ~] 1) Vous devez avoir ce menu de la barre latérale 2) Vous devez avoir une zone "contenu" ou "toile" qui sera subdivisée en 2 moitiés verticales. 3) Vous aimeriez avoir un peu d'espace dans cette "toile"
SOLUTION PROPOSÉE Dans cet esprit, je pense que votre meilleur pari serait de masquer/afficher les éléments "à la demande". Un simple jQuery vous permettra de faire quelque chose comme ça, où votre bouton "bascule" (requis comme vous l'avez dit) affichera le premier menu, puis en cliquant sur n'importe quel élément de ce menu ouvrira le deuxième menu (frère) et masquera le parent menu.
Maintenant, vous pouvez ouvrir ce deuxième menu avec un z-index plus élevé et simplement avoir un bouton de fermeture.
Mais une solution plus élégante serait de cacher le parent, d'agrandir le frère (avec une transition agréable), puis de cliquer à l'extérieur du frère pour revenir en arrière et ramener le parent.
Voir l'image pour comprendre ce que je veux dire:
note: le panneau rouge (frère ou deuxième menu) prendrait toute la hauteur, ou au moins la majeure partie, l'image montre une hauteur moindre juste pour montrer la barre latérale ci-dessous
Une combinaison des éléments suivants:
Pensez à déplacer l'arbre vers la droite de l'écran.
si l'utilisateur affiche et masque fréquemment l'arborescence, le contenu de la zone de travail se déplace toujours. Si l'arborescence est à droite, elle ne couvrira que la moitié droite de la zone de travail, mais les éléments "les plus importants" de la zone de contenu restent en place.
Faire de "Select Node" un élément de men
Seul inconvénient: pour accéder à l'arbre, il faudrait deux robinets au lieu d'un.
masquer l'arborescence automatiquement lorsqu'un nœud a été sélectionné.
Je suppose que lorsque l'utilisateur navigue dans l'arborescence, vous souhaitez utiliser la "zone de travail" comme aperçu du contenu du nœud, de sorte que vous ne pouvez pas masquer l'arborescence lorsqu'un nœud est sélectionné.
Mais vous pouvez masquer l'arborescence automatiquement lorsque le focus se déplace (ou que des entrées se produisent) dans la zone de travail.
Lorsque vous vous cachez automatiquement, je recommande fortement d'avoir l'arbre à droite.
Pressez-le dans un hamburger
par exemple. cliquez ou appuyez sur pour développer/réduire l'arborescence, cliquez avec le bouton droit ou maintenez pour le menu de navigation.
Devrait fonctionner assez bien pour les utilisateurs expérimentés, mais les utilisateurs peuvent ne pas trouver le menu de navigation.
Demandez au hamburger d'afficher à la fois l'arbre et le men
Cela sacrifie l'espace de travail pendant que l'utilisateur sélectionne un nœud.
Demandez au hamburger d'afficher à la fois l'arbre et le menu, masquez le menu lorsque l'utilisateur interagit avec l'arbre
Appuyez sur le hamburger pour afficher l'arbre et le menu. Si l'utilisateur sélectionne un autre nœud d'arbre, masquez le menu.
si l'utilisateur appuie sur le hambuger alors que l'arbre est visible mais que le menu est masqué, affichez à nouveau l'arbre et le menu.