Comment dessiner un ensemble de boutons de hiérarchie et paraître moins offensant qu'il ne l'est?

J'essaie de créer un ensemble de boutons qui peut être utilisé pour parcourir les données hiérarchiques et cela ressemble à une croix gammée. Je ne sais pas comment le corriger.

Dans l'image ci-dessus si "Panel" a été sélectionné et que vous appuyez sur le bouton du haut, il sélectionnerait "AnimatedPanel". Si vous avez cliqué sur le bouton gauche, il sélectionnerait "Script". Si vous avez cliqué sur le bouton droit, rien ne changerait puisque le panneau est le dernier élément de la liste. Si vous sélectionnez le bouton du bas, "EventHandler" serait sélectionné.

L'ensemble de boutons se trouvera à gauche de l'étiquette. L'étiquette et le bouton seront affichés lorsqu'un élément est sélectionné. Par exemple, dans une page Web, il peut y avoir une liste d'éléments de menu verticaux ou horizontaux. Le jeu de boutons et l'étiquette se situent au-dessus du menu sélectionné. Appuyez ensuite sur "in" pour sélectionner le premier élément du menu. Sélectionner "gauche" ou "droite" se déplacerait dans les éléments du menu. J'espère que cela à du sens.

Avez-vous des suggestions sur la façon de faire moins que ce soit?

Plus de détails pour @PremierBromanov:
La façon dont je l'ai maintenant, j'ai 3 étiquettes dans une rangée comme "Up" "L" "R" "Panel".

J'utilise les termes "haut", "gauche" et "droite" mais "haut" signifie vraiment "sortir de la ligne actuelle et revenir à la ligne précédente". Ces termes sont vaguement basés sur la façon dont il est affiché dans une disposition horizontale (bien que dans une verticale, cela n'a plus de sens).

En XML, ils utilisent des termes comme nœud de branche et nœuds de feuille. Une branche a ou peut avoir des nœuds feuilles. Les données hiérarchiques utilisent également les termes nœud parent et nœuds enfants. Dans ce cas, vous avez des ancêtres et des descendants. Vous avez également des frères et sœurs. Ce sont des nœuds enfants qui partagent le même parent.

Ainsi, dans le dernier cas, vous pourriez avoir le parent, le frère précédent, le frère suivant et les descendants du nœud enfant actuel. Vous pouvez également avoir la branche parentale, gauche précédente, feuille suivante. Dans ce cas, si une feuille a des feuilles, ce serait une branche. Donc branche parentale, feuille ou branche précédente, feuille ou branche suivante et feuilles de la branche courante.

icon interface-design critique

— 1,21 gigawatts
source

Essayez d'utiliser deux flèches diagonales.

— Paolo Gibellini

Fait amusant: une croix gammée tournée vers la gauche est en fait un symbole de paix dans l'hindouisme et est facilement utilisée sur des cartes pour représenter les lieux de culte. Une croix gammée orientée vers la droite est un symbole du mal, mais n'est toujours pas offensante dans l'hindouisme.

— John Dvorak

Les deux croix gammées ont été utilisées comme signes de bonne chance dans la culture occidentale depuis le début du 20e siècle sur ( wiki ). Jusqu'à ce que quelqu'un vienne et gâche quelque chose.

— Vincent

Avez-vous essayé de créer un simple système de flèche gauche droite haut en bas? Cela pourrait avoir plus de sens visuellement lorsque vous parcourez la structure du fichier et ce serait plus comme un "+" et non comme une croix gammée. De haut en bas se déplacerait de "Panel" vers "script" et gauche et droite sortiraient et entreraient respectivement.

— Premier ministre Bromanov,

Ce n'est pas une croix gammée, il manque deux jambes, je ne pense pas que vous devriez vous en soucier, seul un nazi va le remarquer, j'ai lu le titre de votre question puis j'ai jeté un œil à votre jeu de boutons et j'ai n'a pas eu "l'offensive" (je pensais que vous vouliez dire que c'était trop moche: P ce n'est pas le cas), j'ai dû lire votre question afin de savoir ce que vous vouliez dire par "offensive", par la façon dont j'ai étudié la Seconde Guerre mondiale depuis 10 ans maintenant, même ainsi, je ne pouvais pas repérer la croix gammée

— Kyle

Réponses:

Votre concept de flèche et ce pour quoi vous prévoyez de l'utiliser semblent appropriés. Et d'après ce que je peux voir, je suppose que vous n'avez pas beaucoup de place pour les icônes de toute façon.

Peut-être que ce qui pourrait vous aider est simplement d'utiliser des flèches plus épaisses et courbes pour masquer cet effet que vous n'aimez pas.

Voici un petit exemple:

Vous devrez peut-être ajuster les flèches selon vos préférences et votre clarté lorsque vous êtes de petite taille. C'est le même concept que le vôtre, mais des flèches différentes.

Les flèches peuvent également être de différentes couleurs:

— go-junta
source

Je pense que les flèches courbes fonctionnent bien même sans changer les couleurs. Belle idée +1

— Aistis

À de petites tailles, il pourrait même être préférable de rendre les flèches courbes de la même couleur que les droites.

— trente trente trois

Vous pouvez envisager une approche plus simple et "plate", en utilisant des boutons qui parcourent uniquement la liste de haut en bas, quelle que soit la profondeur de la hiérarchie, et en fournissant à l'utilisateur un moyen d'ajuster la vitesse de la traversée, par exemple, quatre boutons :

[plus vite]
[haut]
[vers le bas]
[descendre plus vite]

«haut» et «bas» parcourraient élément par élément, et les boutons «plus rapides» parcouraient dossier à dossier.

— Matt Smith
source

Pourquoi pas Up folderet Down folder. Et comment les dessiner comme demandé dans la question?

— Mensch

J'essaierais le dossier Up : double chevron pointant vers le haut. Up : chevron unique 'up'. Vers le bas : chevron unique pointant vers le bas. Dossier bas : Chevron double 'bas'.

— Matt Smith

Bonne idée. Dehors en dedans. Je suppose donc quelque chose comme, ^ << >> \ / où "^" et "\ /" sont centrés au-dessus et en dessous du "<< >>".

— 1,21 gigawatts

Oui, c'est comme le modèle de conception de pagination bien connu, uniquement vertical.

— Matt Smith