Gérer les boutons de titres longs
J'ai des boutons pour des actions très spécifiques. Cela se termine par des libellés de boutons tels que "Envoyer/recevoir toutes les données des sources" ou "Créer des canaux calculés prédéfinis".
Chaque bouton a également une icône qui va avec. Il en résulte de gros boutons laids qui sont surchargés d'informations. L'interface est également pour tactile donc une info-bulle n'est pas une option. Des alternatives/conseils pour le rendre plus utilisable/esthétique?
N'oubliez pas le contexte de l'utilisateur. Parfois, lorsque nous créons une interface, nous avons tendance à oublier que notre utilisateur navigue à travers un ensemble spécifique d'informations pour atteindre un bouton d'action. À ce stade, "Envoyer/Recevoir toutes les données des sources" pourrait également être réduit à "Synchroniser les données" et cela aurait la même signification pour l'utilisateur.
Tout doit être aussi simple que possible, mais pas plus simple - Albert Einstein.
Pouvez-vous simplement annoter le bouton avec une étiquette? L'étiquette explique l'action et les boutons indiquent une action claire et spécifique qui sera prise.
Dans certains cas, nous faisons quelque chose comme ceci:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Il existe au moins quelques stratégies que vous pouvez appliquer pour y faire face:
- Restez avec le mot d'action principal plus grand, puis le reste des mots dans un texte plus petit, mais cela ne résoudra pas nécessairement le problème lorsque le texte est trop long
- Créez une sous-section ou un sous-titre afin de mettre l'utilisateur dans le bon contexte, puis vous pouvez supprimer le texte supplémentaire utilisé pour fournir les informations supplémentaires
Je pense que si vous revenez à l'architecture du contenu et de l'information, vous pourriez peut-être trouver un ensemble de vocabulaire beaucoup plus simple pour l'utilisateur sans les confondre, et ce n'est pas une solution rapide mais une solution plus efficace.
Vous avez dit "des étiquettes de bouton comme ...". Alors pourquoi ne gardez-vous pas ce texte comme des étiquettes/description pour les boutons et gardez la valeur pour les boutons "Aller" ou "Soumettre" + icône spécifique?
Si vous voulez être un peu plus précis, vous pouvez utiliser "Créer" et "Envoyer" + icône spécifique.
À mon avis, il y a peu de possibilités
Utilisez des termes intelligents qui sont plus courts et ne semblent pas laids
Représentez-le avec des icônes et donnez le titre complet dans l'infobulle uniquement.
Faire un bouton comme la pièce jointe. Notez que c'est juste pour référence, vous pouvez les rendre plus petits et avec n'importe quelle couleur ou type.
Je suggérerais d'évaluer ce qui est une information inutile. Pour "Créer des canaux calculés prédéfinis", à moins qu'il n'y ait d'autres boutons pour créer des canaux d'une manière différente, alors "Créer des canaux" devrait être suffisant et d'autres détails peuvent être laissés à la documentation.
S'il existe plusieurs méthodes pour créer des canaux, vous pouvez utiliser une approche de bouton radio: créez une boîte avec une étiquette "Créer des canaux", ajoutez des boutons radio pour les différentes méthodes (par exemple "Prédéfini", "Calculé", "Estimé" puis un seul bouton "Créer").
Comme conseil général, je prendrais le temps de comprendre la terminologie. Les mots "prédéfinis calculés" ne sont probablement pas exacts, la combinaison n'a pas beaucoup de sens (prédéfinis et calculés sont presque opposés). Il est souvent demandé aux programmeurs d'automatiser des processus très anciens avec une terminologie désuète. Un aspect du travail consiste à en apprendre suffisamment pour simplifier et organiser d'une manière qui a du sens pour quelqu'un sans toute cette histoire.
En rapport avec Rat Dans la réponse de A Hat, mon choix serait d'avoir le bouton avec juste l'icône - peut-être avec une courte description si vous devez l'avoir - et une petite icône à côté qui peut être tapotée pour développer les informations pour le bouton . Appuyer sur la description devrait la faire disparaître à nouveau.
De cette façon, une fois qu'un utilisateur connaît tout, les informations supplémentaires restent cachées et n'encombrent pas les choses.
J'ai essayé d'illustrer cela dans l'image ci-jointe.
Edit: Étant donné que cela doit fonctionner sur une plate-forme tactile, vous pouvez peut-être ajouter une option distincte de "basculer la description" qui permettrait à l'utilisateur de voir les étiquettes des boutons, puis de la désactiver pour supprimer le encombrement pour un usage quotidien. Ce n'est pas aussi convivial que l'info-bulle, mais devrait toujours être réalisable.
Réponse originale: En supposant qu'il s'agit d'une application de bureau, une manière courante de gérer ce problème serait d'utiliser une info-bulle. Vous pouvez réduire le libellé du bouton à un seul mot, ou même une icône représentative, puis ajouter les informations plus détaillées dans l'info-bulle.
L'inconvénient est que l'utilisateur devra survoler pendant qu'il s'oriente dans le logiciel. Cependant, à long terme, il réduit l'encombrement et rationalise les flux de travail pour les utilisateurs expérimentés.
Je pourrais avoir un certain désaccord ici, mais je pense que l'utilisateur sera plus qu'heureux de survoler s'il a besoin de clarté, si cela signifie que les boutons ne seront pas trop gros pour être affichés face visible.
Le traitement de ce bouton dépend de son type et, par type, je veux dire, sont-ils primaires ou secondaires?.
1) Si les deux sont primaires, donnez une base, empilez-les selon les appels, trouvez les termes les plus courts et donnez une description ci-dessous
2) Si l'un d'eux est principal et l'autre secondaire, donnez la base et le reste des choses au primaire et laissez moins la base secondaire, faites-en plutôt un bouton de lien avec une sous-ligne en dessous. Assurez-vous que la même chose est placée sous le bouton principal.
Si possible, veuillez partager l'écran où ces boutons sont placés.