De quelle manière les flèches pointent-elles sur une page Web à onglets?
De quelle manière les flèches sont-elles censées pointer sur une page Web à onglets? Vers la sélection ou vers le corps de la sélection? Un scénario gênant semble se produire lorsqu'un utilisateur sélectionne un autre élément et que la flèche se déplace pour ne pointer sur rien en particulier lorsque la flèche pointe vers le corps. Existe-t-il une meilleure pratique?
Quelle relation voulez-vous souligner? Utilisez cela pour éclairer votre décision. La flèche vers le bas dans votre image indique une relation de "est le titre de" ou "est détaillée par" ou même "a un enfant", tandis que la flèche vers le haut indique une relation de "est le détail de" ou "a un titre" ou même "a" a parent".
Je soupçonne que la flèche vers le bas est plus courante et donc familière à plus d'utilisateurs. Dans les sélecteurs CSS, par exemple, l'opérateur ">" est pour la relation "a-enfant" (points du parent à l'enfant). Votre domaine utilisateur est-il consommateur? Ensuite, je considérerais la flèche vers le bas. Ce n'est que pour les domaines/utilisateurs informatiques ou mathématiques que j'ai fréquemment vu une flèche allant de l'enfant/la feuille au parent/propriétaire.
D'un autre côté, surtout si votre domaine est nouveau ou inhabituel, vous pouvez supprimer la question directionnelle avec une solution non directionnelle ou bidirectionnelle.
L'aide de Spotify a une surbrillance non directionnelle entre la sélection et le corps: https://support.spotify.com/us/
Essentiellement:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Ajout à réponse de Will , si vous recherchez un point culminant non directionnel, voici un excellent exemple de la conception matérielle de Google
Consignes de conception des matériaux sur l'utilisation des onglets
L'onglet correspondant au contenu visible est mis en évidence .
Les onglets sont regroupés et le groupe d'onglets est à son tour lié à son contenu .
Garder des onglets adjacents à leur contenu permet de maintenir la relation entre les deux, car une trop grande séparation peut introduire une ambiguïté
http://www.google.com/design/spec/components/tabs.html#
Ils ont tous les deux l'air faux et inutiles. Pour une interface à onglets, la couleur de l'onglet doit être la couleur de la page sélectionnée.
Ma recommandation serait pour l'option A car vous fournissez un indicateur visuel du texte de l'onglet au contenu ci-dessous indiquant qu'il s'agit de l'onglet en surbrillance et des éléments associés le contenu est ci-dessous comme indiqué dans la capture d'écran ci-dessous
Cela restera valable même si vous passez aux autres onglets car les utilisateurs numériseront le contenu de gauche à droite et avec la flèche étant l'indicateur visuel, ils numériseront ensuite vers le bas.
Cela dit, si la flèche de l'onglet ne pointe pas vers un autre contenu, vous pouvez consulter d'autres modèles d'onglets qui utilisent des couleurs pour mettre en surbrillance l'onglet sélectionné, ce qui permet à l'utilisateur d'établir facilement une connexion visuelle
Par conséquent, votre onglet devrait indiquer visuellement où vous vous trouvez à tout moment et, par conséquent, l'accent sur l'utilisation d'une flèche ou d'une couleur devrait être votre préoccupation secondaire et l'accent devrait être mis sur la facilité pour l'utilisateur de comprendre où il se trouve actuellement. Pour citer ceci article de uxbooth
Lors de la planification de la navigation, il est facile de se concentrer sur la partie "Où pouvez-vous aller" de l'équation et d'oublier totalement d'expliquer où se trouve actuellement l'utilisateur. Il est très important d'inclure la position actuelle ainsi que les destinations possibles. Il est beaucoup plus difficile de naviguer sans emplacement relatif.
Des onglets bien conçus indiquent clairement l'emplacement actuel avec des états actifs ou des apparences visuelles qui les distinguent des onglets inactifs. Les onglets actifs peuvent être surlignés entre autres par la couleur (ou leur absence), la taille et le poids de la police.
Pour citer également cet article de geek de l'utilisabilité
L'onglet actif doit apparaître connecté à la zone de contenu: afin de renforcer la métaphore de l'onglet réel, vous devez faire apparaître l'onglet actif comme étant connecté à la page contenant son contenu.
Par conséquent, l'accent devrait être mis sur l'établissement d'une connexion visuelle pour l'utilisateur
Si vous allez utiliser un skeuomorphe, vous devez éviter la décoration inutile et baroque
Voici quelques originaux de mon bureau actuel (celui en bois) pour nous aider à comprendre ce que nous essayons de représenter à l'utilisateur:
Les flèches n'ajoutent rien à cette métaphore visuelle, elles ne servent qu'à distraire et à confondre.
À titre d'exemple de cet effet délétère, je cite la confusion qui a motivé votre question.
La conception de l'interface, historiquement, était basée sur des choses physiques du monde réel afin d'augmenter la familiarité de l'utilisateur, et donc de communiquer trivialement comment l'interface devrait fonctionner par analogie. C'est pourquoi nous appelons des choses comme "dossier", "bureau", etc., par ces noms. Dans une interface à onglets, l'analogie concerne un dossier avec des onglets, où les onglets vous indiquent ce qu'il y a dans le dossier. Habituellement, les onglets sont collés sur le dossier de sorte que l'onglet dépasse dans le dossier comme ci-dessous:
Les applications qui utilisent des onglets reflètent généralement cette relation de "ce contenu appartient sous cet onglet" en rendant l'onglet actif plus visible et les autres onglets moins visibles (c'est-à-dire , "en arrière-plan"):
Dans votre cas, le premier exemple illustre le mieux l'analogie du "monde réel", les flèches doivent pointer vers le bas, tout comme l'onglet en plastique aurait un peu dépassé vers le bas dans le contenu. Et bien qu'il ne soit pas standard (et donc inattendu et pourrait peut-être créer de la confusion pour certains utilisateurs), le deuxième exemple est toujours correct, mais pas optimal. J'irais avec la première option, ou même une modification, un peu comme ceci:
Notez que la barre de soulignement de tous les onglets devient la couleur de l'onglet actif.
L'option B rompt la ligne horizontale entre les onglets et le contenu. # il se sent juste désagréable.
L'option A est un menu complet plus une flèche indiquant le sens du flux vous disant de lire le contenu, ça fait du bien.
Essayez peut-être une autre option C sans flèches, mais A est bon.
Je pense que le problème principal est la flèche ou le triangle.
Le plus important est que l'onglet se démarque de ses semblables en tant qu'onglet sélectionné.
Au-delà, c'est le principe de la connexion au contenu.
Une façon consiste à faire en sorte que la couleur d'arrière-plan du contenu coule de manière transparente sur l'onglet, comme le montrent les exemples de Mervin Johnsingh.
Si vous devez avoir une saillie de couleur différente au bas de l'onglet, je vous suggère d'utiliser un petit rectangle plutôt qu'un triangle. Il met toujours l'accent sur la connexion comme si un onglet était collé en haut de la page, mais s'éloigne de la confusion directionnelle de la flèche.
Une flèche "vers le bas" pointe vers le titre, qui dirige les yeux et l'attention d'un utilisateur pour le suivre vers le texte ci-dessous. Si votre objectif est de leur faire lire le texte, c'est un bon signal visuel.
La flèche "vers le haut" a l'effet inverse, ramenant l'œil du lecteur vers la barre de navigation. L'option 2 me fait constamment revenir pour lire "Article" au lieu du titre ou de la copie ci-dessous. Ce n'est probablement pas ce que vous voulez.
Quant à avoir la pointe de la flèche sur "rien de particulier", c'est un point valable. L'utilisation d'une flèche "vers le haut" à la place ne semble pas vraiment résoudre le problème, pour la raison décrite ci-dessus. Il pourrait être préférable de pointer vers le bas, sinon directement vers le titre, du moins vers le corps du texte.
Vous pouvez également utiliser la surbrillance ou le contraste/la couleur comme déjà suggéré pour simplement indiquer l'onglet "actif".
Une interprétation de la flèche vers le haut dans votre rendu (alternative B) est que le corps du texte est comme une bulle de dialogue. Cela donne l'impression que cela vient de l'en-tête, ce qui semble plus naturel qu'une flèche à mon avis. Mais comme beaucoup l'ont dit, il est probablement préférable de donner à l'onglet la même couleur que le contenu dans ce cas.
La flèche pointant vers le bas est la bonne façon.
Je suis sûr que l'accent était mis sur la direction de la flèche, je ne fais que couvrir les points connexes:
Il y a quelques utilisations incorrectes dans cet exemple. Les rectangles supérieurs sont comme des interrupteurs avec des ampoules intégrées à l'intérieur. Lorsque vous appuyez sur, ils devraient s'allumer. Ici, ils deviennent sombres. Les boutons intacts sont plus lumineux. Peut-être approprié pour une page sur les trous noirs en astronomie.
La taille de la police du titre de la page ne convient pas, entre le titre et le corps. Il n'y a pas de progressivité.
La raison de la direction de la flèche est, ils sont comme des pointeurs, pensez aux panneaux de signalisation dans les vieilles villes. Ils indiquent où se trouve la vraie chose.