Quels sont les bons moyens de conserver une vue minimale (non encombrée) et un nombre minimal de clics en même temps?
EDIT: La question est spécifiquement pour DESKTOP. Pas de mobile/tablette.
Mon client veut un design pour une application web (chrome webstore). Le wireframe est définitif. Mais le problème est qu'il veut que les boutons/menu [dans la section inférieure] ne distraient pas l'utilisateur mais en même temps, il ne devrait pas avoir à cliquer 2 fois pour utiliser une option (en cliquant sur l'un des nombreux boutons dans la section inférieure) .
Une solution consiste à masquer toutes les options et à les afficher sur un bouton, comme l'icône de hamburger dans les téléphones. Mais il faudra 2 clics pour utiliser une option, donc non recommandé.
Une autre solution consiste à afficher les éléments en survol. Mais ici aussi, il devra survoler puis décider quelle option utiliser. C'est également une sélection en 2 étapes.
Si nous gardons toutes les options visibles avec une faible opacité, il affichera les options non nécessaires dont mon client ne veut pas.
Existe-t-il une autre solution pour répondre aux exigences du client?
Je crains que vous ne trouviez pas de solution parfaite ici - pour fournir une visibilité et une accessibilité (dans un monde visuel), vous devez garder un élément visible. Afficher plus en survol est une bonne idée à condition qu'il s'agisse d'une solution de bureau (vous avez mentionné Chrome Web Store).
Il y a des avantages et des inconvénients des deux solutions que vous avez mentionnées:
Le déclenchement sur clic incitera l'utilisateur à cliquer dessus pour découvrir/redécouvrir les fonctionnalités cachées (les utilisateurs peuvent éviter de cliquer dessus en oubliant "à quoi servait l'icône?" "et ne souhaitant pas déclencher une action inconnue. En d'autres termes, cette icône leur demandera de réfléchir. Ce n'est pas bon, à l'exception des outils utilisés quotidiennement, où l'utilisateur se souvient de ce qu'est un outil ou si une icône est très, très auto-définissable et compréhensible.
Le déclenchement en survol est différent. Ce qui est bien, c'est que l'utilisateur déclenchera parfois accidentellement les options étendues, ce qui lui rappellera ce qu'il y a dedans. Mais en même temps, il faut une approche appropriée car cela peut devenir trop ennuyeux, entraînant finalement la désinstallation de l'extension par l'utilisateur. Mais cela ne peut pas interférer avec ce que l'utilisateur d'un site Web visite, ce qui limite l'expérience utilisateur du site Web.
Ainsi, vous devez planifier correctement où le déclencheur initial sera placé, et vous pouvez également laisser l'utilisateur personnaliser cette position. Un de mes exemples préférés ici est Jing ( http://www.techsmith.com/jing.html ), où un petit point en vol stationnaire est collé sur le côté d'un écran, mais sa position peut être personnalisé (l'utilisateur peut le faire glisser, le coller à divers endroits de l'écran. À l'exception de Chrome, qui utilise le haut de l'interface sous Windows, le meilleur endroit pour cela est en haut de l'écran (il se trouve juste au-dessus du principal) contenu de la fenêtre de l'application, juste au-dessus de la barre de titre). Mais depuis que j'utilise Chrome, le bon endroit est maintenant le plus à gauche de l'écran. C'est parce que la plupart des pages ne sont pas pleine largeur et, en tant que telles, elles sont généralement centrées. Pour tout le reste, la fonction glisser-moi-ailleurs fait parfaitement l'affaire. Donc, comme votre solution sera utilisée dans un contexte de visite de sites Web, je voudrais en faire la position par défaut, informant l'utilisateur (lors de l'intégration juste après l'extension installation) qu'il peut le faire glisser ailleurs si nécessaire.
Deuxièmement, je me concentrerais sur:
- une grande icône, fournissant une reconnaissance correcte et rapide de ce à quoi sert le déclencheur et des trésors qu'il cache. Le menu hamburger est un très mauvais choix ici, comme si vous prenez un navigateur dans son ensemble, le menu hamburger est contextuel, spécifique pour un site visité et permet d'accéder à la navigation du site principal.
- rendre le point de survol suffisamment grand pour que l'utilisateur n'ait pas besoin de se concentrer sur le positionnement très précis de son curseur - un indice est que vous pouvez agrandir la zone de survol par rapport à son indicateur visuel. Mais ne vous découragez pas trop ici, occupant toute la bordure gauche de la fenêtre, car cela peut rendre certains sites Web inutilisables ci-dessous, même si vous fournissez la fonctionnalité de déplacement.
Une autre chose est que si votre solution est contextuelle, vous pouvez aller un peu différemment, en affichant un menu contextuel, par exemple après la sélection du texte (vous pouvez vérifier l'extension Diigo comme référence).
Votre client dit que le menu ne devrait pas vous distraire. Cela ne signifie pas nécessairement que le menu ne devrait pas être visible.
Vous pouvez vous assurer que le contenu est plus visuel que les boutons de menu. L'œil doit être immédiatement attiré par le contenu et non par les boutons. L'utilisateur ne les remarquera que lorsqu'il cherchera quelque chose qui ressemble à un menu.
La façon de procéder dépend de ce que le contenu est, et de la façon dont il "attirera l'attention". De nombreuses boutiques en ligne ont une barre de menu supérieure ou inférieure en texte gris/clair ( comme celle-ci ). Quelque chose comme ça pourrait servir.
Une suggestion serait quelque chose comme votre deuxième solution. Gardez le bas caché jusqu'à ce que l'utilisateur déplace son curseur vers la partie inférieure de l'écran. Vous pouvez expérimenter la hauteur à laquelle vous souhaitez déclencher la visibilité, par exemple lorsque le curseur atteint les 30% inférieurs de l'écran, ou les 20% inférieurs etc. De cette façon, le menu apparaît sans avoir à cliquer sur un menu hamburger, et sans planer sur un élément spécifique. Techniquement, c'est toujours un processus en 2 étapes, mais selon la hauteur que vous choisissez pour la zone de déclenchement, il s'agit plus d'un "processus en 1,5 étape". 
Le danger de rendre cette zone trop grande, bien sûr, est qu'elle pourrait irriter (et distraire!) L'utilisateur, c'est pourquoi je voudrais d'abord l'expérimenter.
En tant que filaire, il ressemble à votre conception pour mobiles. N'oubliez pas que l'état de vol stationnaire n'est pas (à l'heure actuelle) une fonctionnalité tactile normale.
Vous pouvez utiliser des boutons fantômes, cela ne distrait pas l'utilisateur comme des boutons normaux, et vous n'avez pas besoin d'un survol pour les afficher.
http://www.onextrapixel.com/2014/04/28/ghost-buttons-the-brand-new-design-trend/
