Rendre l'objet déplaçable
J'ai un objet de sélection (avec le texte SELECTED dessus) qui flotte sur un fond. L'objet de sélection est déplaçable et est utilisé pour le faire glisser sur un meuble pour effectuer une sélection. L'utilisateur est censé pouvoir faire glisser l'objet vers, par exemple, le canapé pour le sélectionner. Dans l'image maquette, la table ronde est sélectionnée.
Jusqu'à présent, j'ai:
- Ajout d'une ombre derrière pour la faire flotter au-dessus de l'arrière-plan
- Ajout de 6 points à gauche et à droite pour le rendre saisissable
- Changement du curseur en main lors du survol de l'objet de sélection
La manière évidente de simplement cliquer sur le canapé pour le sélectionner n'est pas une option dans ce cas, car cliquer sur des objets a une autre fonction!
Le problème principal est que c'est un objet flottant au-dessus d'objets du monde réel, donc ma pensée était de faire en sorte que l'objet de sélection ressemble à un objet flottant (comme un ballon) en utilisant une animation pour le rendre mobile. Cela peut cependant provoquer une irritation si l'objet se déplace constamment.
Comment puis-je augmenter la conscience de la possibilité de faire glisser l'objet de sélection, par ex. il flotte et n'est pas coincé en arrière-plan.
Si vous souhaitez faire glisser un signe, vous pouvez peut-être ajouter une autre sorte d'indication que l'objet se déplace, c'est-à-dire.
Cependant, je pense qu'il peut sembler anormal pour l'utilisateur de faire glisser un signe. Cliquer sur l'objet et faire passer le signe au nouvel objet serait un comportement plus naturel pour l'utilisateur.
Les utilisateurs supposent toujours que les objets sont ceux qui peuvent être déplacés.
Puisque vous souhaitez mettre en surbrillance l'objet sélectionné. Avez-vous pris en compte les suggestions ci-dessous?
écrans lorsqu'un objet est sélectionné le reste obtient une opacité de 50% de noir par exemple
contours en pointillés
briller autour des objets
Pour des problèmes comme celui-ci, je trouve préférable de voir comment les autres interfaces le gèrent. De cette façon, une partie de la formation des utilisateurs a déjà été effectuée - vous n'avez pas besoin de réinventer la roue.
Dans ce cas, la première chose qui m'est venue à l'esprit est Pegman pour Google Maps Streetview.
Google gère ce problème en plaçant l'indicateur déplaçable dans une barre d'outils distincte "hors carte" pour commencer. Les barres d'outils sont déjà dans la conscience de l'utilisateur avec lesquelles elles peuvent interagir pour affecter le contenu associé à cette barre:
Pegman a également un état de survol - lorsqu'il survole le Pegman et le curseur se transforme en une main saisissante - encore plus de rétroaction avec laquelle il peut interagir.
À partir de là, ils modifient ensuite l'état de la carte lorsque vous prenez Pegman pour indiquer ce que vous pouvez faire avec lui une fois que vous l'avez attrapé.
Ce changement visuel de la carte mettant en évidence où il peut être déposé est un retour supplémentaire à l'utilisateur qui, après avoir saisi l'indicateur, peut le déposer dans l'une des zones indiquées. Il s'agit pour eux de précieux commentaires.
Ainsi, Google gère ce problème de trois manières:
- Ajoutez le compte-gouttes à une barre d'outils distincte
- Fournir un état de survol avec changement de curseur de souris associé
- Fournissez des commentaires sur la carte elle-même une fois que vous avez commencé à utiliser cet outil pour savoir ce que vous pouvez en faire.
Essayez donc d'utiliser ces techniques avec votre interface. Google a déjà partiellement formé les utilisateurs à la manière dont de telles interfaces peuvent interagir, alors utilisez ces connaissances pour vos propres besoins.
L'objet SELECTED ressemble à une info-bulle ou à une étiquette. Je pense qu'un pointeur devrait ressembler davantage à un objet, car il sert de contrôle. Je pense que le pointeur pourrait être utilisé sans notion SÉLECTIONNÉE excessive. Vous pouvez toujours utiliser l'infobulle.
Pour montrer les capacités d'interaction ("vivacité") du pointeur, vous pouvez utiliser une animation discrète avec un état "stable" assez long, voir l'image ci-dessous.
Même si vous transmettez la capacité de glisser de la sélection, les utilisateurs seront probablement confus et penseront que cela fait glisser l'élément sélectionné plutôt que la sélection. Par exemple, ils penseront qu'il fait glisser l'assiette sur le canapé au lieu de le sélectionner.
Je sais que vous avez actuellement une autre fonction de prise, mais à moins que la sélection des éléments ne soit extrêmement prioritaire par rapport à votre fonction personnalisée, je vous exhorte fortement à accepter la sélection via une touche, car vous avez même dit que c'était la solution évidente si votre autre fonction n'avait pas été de la manière. Il serait utile de savoir quelle est votre fonction, mais voici 3 façons possibles de le faire:
- Au robinet, sélectionnez l'objet et effectuez votre action. Tant que vous n'avez pas besoin que votre action de toucher personnalisée soit effectuée sur un élément qui n'est pas sélectionné, cela peut fonctionner, bien que ce soit peu probable.
- Ajoutez un moyen de basculer le mode tactile de la page entre la sélection et votre action. Cela a du sens si votre action personnalisée est effectuée très souvent sans modifier votre sélection entre les deux, car cela permet à l'utilisateur de répéter l'action en un clic. Si votre action personnalisée est suffisamment courante, vous pouvez même revenir à votre mode d'action personnalisée juste après que l'utilisateur a sélectionné un élément.
- Sélectionnez l'objet sur le robinet et donnez-leur la possibilité d'effectuer votre action. Cela a du sens si votre action personnalisée n'est pas utilisée très souvent.
Enfin, après avoir décidé de votre processus de sélection, vous pouvez simplement désigner votre sélection avec votre bordure, ce qui donne un visuel beaucoup plus propre.
Ce que vous implémentez est un paradigme d'interface utilisateur inutilement non conventionnel.
Faites-le comme presque toutes les applications GUI bien conçues depuis le Macintosh 1984.
Pour sélectionner des éléments, demandez à l'utilisateur de choisir un outil de sélection dans une barre d'outils (si nécessaire: ce n'est peut-être pas le cas: les programmes simples n'ont pas besoin de barres d'outils. Si chaque action doit être sélectionnée, vous pouvez juste avoir un paradigme de type de commande select object + dispatch.)
Changez la souris curseur pour refléter cet outil de sélection. Le curseur devient alors l'objet de sélection; il n'y a pas besoin d'un objet supplémentaire comme ce que vous avez. Il n'y a pas non plus besoin d'un morceau de texte encombrant sur le cusor; le texte explicatif de l'outil peut être une info-bulle affichée lorsque vous survolez la barre d'outils.
Lorsque l'outil de sélection est activé, cliquer sur les éléments les sélectionne.
Ctrl + clic sélectionne plusieurs éléments.
Cliquer + Maintenir + Glisser permet à l'utilisateur de faire un geste d'une forme telle qu'un rectangle qui, une fois terminé, sélectionne les choses dans ses limites ou les choses qu'il intersecte plus celles dans ses limites.
Ctrl + clic + glisser permet à l'utilisateur d'utiliser ce qui précède pour étendre la sélection.
Citation:
La manière évidente de simplement cliquer sur le canapé pour le sélectionner n'est pas une option dans ce cas, car cliquer sur des objets a une autre fonction!
Si le moyen évident n'est pas une option, vous avez un problème évident d'utilisation.
Tout d'abord, cliquer sur des objets sélectionne toujours des objets, même implicitement. Dans votre interface graphique, cette autre fonction lancée en cliquant sur un objet opère presque certainement sur cet objet d'une manière ou d'une autre, et cela signifie que l'objet est sélectionné pour cette fonction. Il n'est tout simplement pas dans un état sélectionné.
Dans les applications qui n'ont pas de barre d'outils pour différents modes d'action, la façon dont cela est traditionnellement géré est qu'un simple clic effectue une sélection avec état (avec des touches de modification pour en sélectionner plusieurs), et un double clic effectue "choisissez cet objet, ou tout objets sélectionnés, comme argument pour une opération par défaut et envoyer cette opération ". Ou, différents boutons de souris peuvent être utilisés. Le clic gauche sélectionne l'objet, le clic droit fait apparaître un menu contextuel à partir duquel d'autres actions sont effectuées.
À mon avis, la case avec le texte "Sélectionné" est inutile. Et les points dessus ressemblent à de la décoration. J'aime bien l'idée de l'ombre. Avez-vous envisagé de mettre en valeur l'objet entier avec un effet d'éclat sur ses bords? Vous pouvez également changer le pointeur de la souris tout en survolant un objet déplaçable en une main agrippante, animant le mouvement de préhension.
Donnez aux objets des ombres et des contours nets au survol de la souris.
Une autre option consiste à le faire "flotter" - c'est-à-dire à le faire monter et descendre très doucement. Cela, pour moi, serait un indice très clair que l'objet n'est pas fixe mais peut être déplacé, et le glisser est le moyen évident de le faire.
- Mettez l'objet en surbrillance lorsque vous le survolez (c'est votre choix comment faire)
- Utilisez un simple curseur manuel animé lorsque vous survolez l'objet (voir l'exemple, il devrait suffire de montrer que l'élément est déplaçable)
Réglage cursor:move à la flèche à quatre directions en survol est l'indication la plus évidente que quelque chose est déplaçable/déplaçable. À peu près l'indicateur standard sur tous les systèmes d'exploitation.