Possibilité de redimensionner un panneau
La manière standard de sinaliser la possibilité de redimensionner est d'utiliser le propre pointeur de la souris du système d'exploitation, la flèche à deux pointes dans la direction dans laquelle vous devez redimensionner (horizontal, vertical ou diagonal). Cela se produit lorsque la souris survole l'Edge.
Mon application, une extension google chrome, consiste en un panneau droitier qui est inséré en tant que barre latérale dans une page Web donnée. Lorsque l'utilisateur survole son bord, une poignée apparaît pour le panneau, et dans cette poignée, il y a une icône pour verrouiller le panneau en place, et cliquer sur la poignée masque/affiche le panneau.
Ainsi, l'Edge est le seul et donc un chemin NÉCESSAIRE entre le contenu Web et mon application (qui est le panneau), car l'Edge sépare les deux. Donc, étant donné que l'utilisateur survolera cet Edge plusieurs fois, est-ce une bonne conception d'interaction pour masquer la poignée et ne l'afficher qu'en vol stationnaire? Cela masquerait la plupart du temps les éléments inutiles, mais masquerait également l'opportunité dans une situation statique.
En ce qui concerne le redimensionnement du panneau, la poignée dans son ensemble doit-elle permettre le redimensionnement lorsqu'elle est glissée, ou dois-je la limiter aux icônes ou aux zones visuelles dans la poignée? Quels indices visuels fonctionneraient le mieux dans cette situation?
Ces signaux visuels devraient-ils s'allumer en vol stationnaire?
Ces indices visuels devraient-ils changer d'état lorsque vous les avez "saisis"?
Est-ce également une bonne conception d'interaction d'utiliser un curseur à main (pour "saisir") au lieu du curseur fléché à deux têtes standard pour le redimensionnement?
Si je comprends bien votre description, vous devez utiliser une barre de séparation verticale ordinaire pour séparer votre application, la barre latérale, de la page Web.
Cette barre de fractionnement devrait être visible tout le temps, pas seulement en survol. Et toute la barre de fractionnement doit être mobile, non limitée à certaines icônes.
Vous devez pas utiliser un curseur manuel, mais vous en tenir au curseur fléché à deux têtes standard.
Je crois que l'utilisateur connaît le concept de redimensionnement de panneaux comme celui-ci (au moins tous les utilisateurs qui voudraient le redimensionner). Mais si la barre de séparation verticale est manquante, ils pourraient croire que la largeur de la barre latérale est fixe et non réglable.
Si vous êtes à la recherche de moyens, vous devrez afficher quelque chose à l'utilisateur avant qu'il ne commence à interagir avec lui. Si c'est juste que le curseur se transforme en une flèche à double en-tête lorsque vous survolez la bordure, ils ne sauront même pas que c'est une option jusqu'à ils survolent réellement la bordure.
Vous devriez montrer quelque chose sur la fenêtre pour tous les panneaux extensibles pour indiquer qu'ils peuvent être interagis de cette manière.
Des choses similaires sont faites dans diverses applications, j'en ai attrapé quelques-unes ici pour montrer quelques exemples.
Il y a beaucoup de contexte sur lequel vous pouvez compter dans des situations comme celle-ci. De mon point de vue, il y a une marge de manœuvre entre ce que vous devriez toujours faire en tant que meilleure pratique et ce sur quoi vous pouvez compter sur l'expérience de votre public.
Étant donné que les gens installent cela en tant qu'extension et que vous souhaitez donner l'impression que cela fait partie de l'application de navigateur, ne pas avoir d'icônes de saisie/déplacement visibles dans l'interface est probablement un objectif souhaité. Je dis seulement que dans l'hypothèse, il va avoir une largeur raisonnable (ne pas prendre le contrôle de la fenêtre) et être redimensionnable avec un changement de curseur comme renforcement visuel.
Un autre angle qui ouvre la marge de manœuvre consiste à comprendre à quel point il est problématique de ne pas afficher l'icône de saisie/déplacement. Si la plupart de votre public a des écrans plus larges et qu'il est peu probable qu'ils aient une expérience moindre de la navigation sur les sites Web, le fait de ne pas montrer les outils ne causera pas beaucoup de problèmes. Si les gens qui veulent le changer à des fins de vanité, ils peuvent travailler un peu plus dur sans avoir l'impression d'en tirer parti.
Evernote a une bonne solution pour quelque chose de similaire:
C'est juste une ligne grise contenant la colonne de gauche. Lorsque votre curseur survole une zone de 10 pixels à droite de la colonne, une boîte bleu vif apparaît et votre curseur se transforme en flèche gauche/droite avec une barre au milieu (je ne sais pas comment cette icône est appelée).
Si vous avez fait quelque chose de similaire, je m'inquiéterais de quelques choses:
- Placez la boîte qui redimensionne la colonne du côté votre. J'essaierais d'interférer le moins possible avec d'autres sites.
- Evernote ne fait pas cela, mais cela pourrait être encore plus clair si vous placez les icônes glisser/déplacer à l'intérieur de la boîte qui apparaît lors du survol.
- Testez le site Web réactif/adaptatif avec votre extension installée. Je serais extrêmement en colère si je passais beaucoup de temps à créer un site Web agréable pour s'adapter à la fenêtre et que l'extension de quelqu'un chevauchait mon design.
Je suppose que vous connaissez déjà cette dernière partie. Juste pour être sûr. :)