J'écris un WebApp interne-outils; L'une des pages centrales de cet outil a un tas de commandes associées que l'utilisateur peut exécuter en cliquant sur l'un des boutons de la page, comme celui-ci:
Barre d'outils http://img709.imageshack.us/img709/1928/Commands. png
Idéalement, tous les boutons correspondraient à une ligne. Ordinairement je le ferais en modifiant chaque widget d'un bouton avec une étiquette de texte (parfois longue) à une icône simple et compacte - E.g.
Bouton marqué "Enregistrer" http://img337.imageshack.us/img337/ 773 / Saver.png
pourrait être remplacé par une icône de disque familier:
Malheureusement, je ne pense pas que je puisse le faire pour chaque bouton de cette page particulière. Certains boutons de commande n'ont tout simplement pas de bons analogues visuels - "Liste des VDS". Ou, si j'avais besoin d'ajouter un autre bouton à l'avenir pour un autre type de liste, je aurais besoin de deux icônes qui communiquent "la liste-ness" et quelle liste . Donc, j'envisage toujours cette option, mais je n'aime pas ça.
C'est donc le temps de venir pour moi d'ajouter un autre bouton de cette section (vous n'aimez pas les outils internes?). Il n'y a pas assez de place sur cette ligne unique pour adapter le nouveau bouton. Outre la solution d'icône que j'ai déjà mentionnée, quelle serait une bonne * façon de simplifier / de diminuer / réduire ou d'améliorer sinon cette assurance-chômage?
* Selon l'article de Jakob Nielsen, j'aimerais penser que une liste déroulante Le menu n'est pas la solution .
12 Réponses :
Qu'en est-il d'un bouton Combobox et d'un bouton de confirmation? Ou un simple menu déroulant?
Avez-vous vu ma note sur les dépositions?
Et si vous utilisez des icônes et du texte?
pour les commandes couramment comprises - utilisez juste une icône (comme la sauvegarde) Pour les commandes peu communes, utilisez une icône + le texte.
Si vous mettez une bordure autour du bouton dans son ensemble, il convient de lier les icônes / le texte ensemble et montrer que c'est toujours un bouton. Vous pouvez également faire des effets survolés.
Ou mieux, icônes et texte survolée. Il existe des icônes plus couramment utilisées que vous pouvez utiliser ici - déconnecter, redémarrer, transfert de fichier, config, messagerie.
J'utiliserais certainement le texte survolez (le long des lignes de Tipsy ) avec des icônes.
Ajouter une barre de menu "Outils" ou "Actions" et collez les 4 commandes les plus à droite (ou plus) dans le menu.
Puisque vous ne pouvez pas effectuer de menu déroulant (ou des techniques similaires telles que cliquer sur un bouton pour générer un menu secondaire). Le meilleur que je puisse penser est ce que Prescott a fait ou montrant une zone de boutons regroupée de manière à faciliter la saisie de la section de quelle section de leur bouton.
serait-il possible d'implémenter un ensemble de boutons "le plus utilisé" ou "préféré" (de préférence pour l'utilisateur, mais globalement si nécessaire) et le bouton pour vous amener au reste des articles si vous en avez besoin d'une de ces?
C'est fondamentalement ce que Réponse de Sushil suggérées.
J'ajouterais un lien plus comme Google. Voir la barre supérieure de Google avec Web Images Carte Plus >>
Pour cela plus >> Drop Down Vous pouvez ajouter une logique à ajouter du bouton moins fréquemment utilisé par l'utilisateur ou quelque chose comme ça.
Cela me semble assez viable.
Fonctionne bien pour des mots simples, mais veillez à ce que vous gardiez assez d'espace entre des liens individuels (et ne les séparez pas avec seulement de l'espace blanc, selon WCAG [Screen Readers, ne faites pas de désordre d'entre eux]), surtout s'il y a plusieurs Liens de mots.
Si vous utilisez simplement des liens et non des boutons, je suis surtout utilisé | séparateur pour séparer mes liens. @Johannes d'accord avec vous sur plusieurs mots de mots
@Bears Je pensais que vous avez dit que les menus déroulants ne sont pas la solution?
@Johannes: Il s'agit d'un outil interne, donc je n'ai pas à vous soucier des lecteurs d'écran. @Patrick: Par "Menu Dropdown", je veux dire
@Bears qui a du sens. Malheureusement, les menus adaptatifs peuvent ne pas être la solution non plus. Humanized.com/weblog/2007/03/05/...
@patrick +1 pour publier humanized.com/. Cependant, je crois que si vous voyez le jeu de liens de Google, ils ne sont pas adaptatifs. Les liens ne chantent pas de l'utilisateur à l'utilisateur. Et sont basés sur ce qui existe le plus populaire (cliqué) des liens sont. Alors, que peut-on faire ici, il suffit d'identifier les liens comme «sauvegarder» qui seront utilisés plus souvent et les mettre dans la zone principale. Et identifiez des liens comme «config» et gardez-les dans plus de domaine.
Vous pouvez les regrouper (comme les deux boutons «VDS») derrière un seul bouton qui, lorsque vous avez cliqué sur POPS, un menu contextuel avec les icônes individuelles.
Si vous avez lu JEF (et AZA) Raskin, vous réaliserez probablement que les icônes ne sont pas une bonne solution - les deux étaient assez vocales dans leur aversion pour eux (avec très peu d'exceptions notables). Pour un début, ils sont encore plus difficiles à toucher que de minuscules boutons, leurs symboles peuvent être déroutants, dépendants de la culture et trompeurs. Nous sommes déjà bons en lecture du texte, l'analyse et l'interprétation des icônes est souvent plus lente.
Dans tous les cas, cette barre de boutons semble pouvoir accueillir à peu près n'importe qui et leur chien qui pourrait utiliser ce produit. Vous auriez peut-être eu des scénarios spécifiques à l'esprit lors de la création qui devrait être facile à faire et qui sont importants. Très probablement, tous les boutons ne sont pas nécessaires à la fois pour une telle tâche à compléter.
Une autre chose est que peut-être que tous les boutons ne sont même pas utiles à un seul état de l'application. Pouvez-vous peut-être une branche dans différents ensembles de boutons, en fonction de l'état. Ce n'est toutefois possible que si chaque État a clairement défini quelles actions peuvent être prises. Si tous les boutons sont également pressables, peu importe l'état, cela ne fera rien.
Les commandes de regroupement en fonction de la fonctionnalité connexe pourraient également être une option. Cela ne doit pas nécessairement être fait avec des idioms de menu, vous pouvez également les mettre dans des conteneurs avec une couleur d'arrière-plan différente ou même la couleur des boutons eux-mêmes (garder à l'esprit la cécité des couleurs, cependant). Selon la manière dont ces fonctions individuelles sont associées, cela peut être un bon moyen d'accélérer l'interaction. Il pourrait vous demander une formation à des utilisateurs de savoir quelles sont les couleurs, mais pour un outil interne utilisé uniquement par des personnes que vous connaissez (au lieu de celles arbitraires aléatoires [qui est un problème Microsoft faces tout en évidence]) Cela devrait poser non une grande partie d'un problème.
Comme je l'ai dit, je n'aime pas l'idée d'icônes. Je cherche Autres options .
+1 pour "Les commandes de regroupement en fonction de la fonctionnalité connexe" - une petite organisation va un long chemin
Quelque chose de ressemblant au ruban Msoffice? Cela suivrait réellement les tendances actuelles de l'interface utilisateur de Windows (je suppose que je suppose que votre base d'utilisateur est sous Windows).
Les icônes sont terribles à partir d'un point de vue d'expérience utilisateur. Une image d'une disquette ne signifie pas équivoque sauvegarder. Cela signifie quelque chose à voir avec une disquette. Une floppy Voici un Application qui a eu la même extrêmement utilisable Interface pendant 10 ans! Et à peine des images pour les boutons, et c'est l'une des applications les plus productives de sa catégorie.
Vous savez ce que icônes stand pour i ncompépéible C ryptique o bfused Aussi comment ingérez-vous une icône?
Ceci est un outil interne; L'internationalisation n'est pas une grande préoccupation en ce moment.
En fait, les icônes sont entrées en partie en partie parce qu'elles étaient plus faciles à internationaliser. Une icône de disque à enregistrer est la même dans de nombreuses langues, tandis que le texte devait être traduit pour chaque langue. Ces jours-ci, il est courant d'utiliser des fichiers de ressources partout et de meilleurs outils existent pour traduire des chaînes dans ces fichiers de ressources.
Rien d'une photo d'une disquette dans une application Web en 2010 dans n'importe quel pays signifie sauvegarder.
Je commencerais en modifiant certaines des étiquettes plus longues. Au minimum, "Chargement de l'application" pourrait être abrégé "Application de chargement". Quelle est une autre façon (plus courte) de dire "transfert de fichiers rapide"?
Vous pouvez également regrouper les boutons en onglets (c'est-à-dire en faire un ruban ). Cela pourrait fonctionner particulièrement bien si différentes classes d'utilisateurs ont tendance à utiliser différents ensembles de boutons non superposés.
Il semble vraiment que ce que vous développez est une console d'administration qui présente son UI via une page Web, plutôt que quelque chose que je quantifierais comme application Web. En tant que tel, compte tenu de votre déclaration selon laquelle il s'agit d'une application d'utilisation interne, les conseils de Jakob Nielson concernant
nombreuses options:
groupe et étiquetage . Chaque fois que vous avez plus de huit commandes, vous devriez diviser les éléments de menu en groupes sémantiques d'environ quatre pour aider à numériser l'utilisateur pour la commande souhaitée. L'étiquetage des groupes aide également la numérisation et peut rendre le menu plus compact. Par exemple, au lieu de la liste des VDS ping et de la VDS, ont un groupe étiqueté "VDS" avec des éléments de menu "ping" et "liste". Vous avez un mot de moins pour s'adapter (deux si vous mettez l'étiquette ci-dessus, il est associé aux éléments de menu associés lors de l'utilisation d'une orientation horizontale).
menus pulldown . Nielsen est correct sur l'évolution de l'utilisation d'un menu déroulant pour faire des commandes. Cependant, il est clairement en faveur des les menus pulldown qui aspectent et comportent comme une menubre dans une application client épaisse (Nielsen les appelle «Commande» et «Navigation»). Je pense que vous constaterez que plusieurs menus pulldown JavaScript sont là-bas, contrairement à votre retour en 2000 lorsque Nielsen a écrit son poste. Vous pouvez installer 100 commandes dans une menubre.
Menu de la barre latérale . Arraying des éléments de menu verticalement et vous devriez pouvoir s'adapter à 20 commandes ou plus et vous n'aurez pas à raccourcir les noms de commande à quelque chose que l'utilisateur pourrait ne pas comprendre. Si cela ne suffit pas, envisagez un " banque de menus " que de combine les avantages du menu de la barre latérale avec la capacité d'un menu déroulant.
ruban . Si vos commandes s'intègrent dans des tâches discrètes, où l'utilisateur a tendance à coller à une tâche pendant un certain temps, vous pouvez organiser les boutons d'une commande d'onglets, avec une feuille par tâche.
surcharge de la commande . Représentent vos objets de données en tant qu'entités sélectionnables dans votre fenêtre et modifiez vos commandes en des opérations plus générales, telles que forer, créer, copier, déplacer, supprimer et lien, qui peuvent être appliquées à diverses classes d'objets, réduisant ainsi votre total. Nombre de commandes. L'utilisateur peut sélectionner un ou plusieurs objets de données, puis sélectionnez la commande souhaitée à agir sur elles.
Attributs de la zone de travail . Certaines de vos commandes peuvent ne pas être des commandes par des paramètres ou des attributs. Retirez-les du menu et représentez-les sous forme d'objets de données dans la zone de travail de la page (ou d'une autre page, si elles sont rarement utilisées) à l'aide de contrôles tels que des boutons radio, des listes de liste déroulante et des cases à cocher. Cela dispose de l'avantage supplémentaire montrant clairement à l'utilisateur le paramètre actuel ainsi que de fournir un moyen de le modifier.
variantes . Pour une application interne, vous avez probablement des rôles et des responsabilités formels qui varient en fonction de la position de travail. Incluez la position de l'utilisateur dans votre modèle et masquer dynamiquement des commandes (et d'autres contrôles et pages) qui ne sont pas pertinents pour ce poste.
Cela pourrait être une meilleure question pour DOCTYPE.COM Comme c'est vraiment un problème de style.
Pourrait être remplacé par une icône de disque familier: ce qu'il est familier pour, représentant une disquette! Cela pourrait signifier quelque chose à voir avec une disquette! Charge, reformat, éjection, sauvegarder, renommer, vous le nommez, est également trop minuscule pour être utile. Il y a toute une génération qui ne sait même pas ce qu'est une disquette!
@Fuzzy: ça empire dans certains cas ... Open Office (au moins sur Ubuntu) utilise une icône de disque dur pour représenter "Enregistrer" - Combien de personnes (non techniques ou geek) savent à quoi ressemble un disque dur et peut faire la connexion logique? Et oui, mes frères et soeurs plus petits ont déjà demandé ce que l'icône du disque représente. Les métaphores se décomposent fréquemment :-)
Je déteste voir cela fermé, simplement parce que c'est un sujet de sujet devrait être éduqué sur . La plupart des programmeurs évitent les questions de conception et leur travail en souffre.
Je recommanderais de fermer cette question. C'est une question de convivialité légitime et, tandis que la solution n'impliquera pas de code, elle impliquera des techniques que les programmeurs devraient savoir.
Si vous ne cherchez pas une entrée sur «Icône Idée», ne le proposez pas comme solution. Les gens vont commenter à quel point une solution est médiocre. Et je ne vois pas comment cette icône d'une disquette enregistre un espace utilisable sur le bouton de manière très évidente de ce que signifie faire.
@Fuzzy Lollipop - En ce qui concerne vos problèmes avec la disquette représentant "Save", je viens de nous souvenir de Cette question .