Communiquer la fonctionnalité de pression longue dans une interface Web
Donc, à l'exception de Google Drive et de certaines autres applications, il semble être principalement considéré comme un non-non pour remplacer le menu contextuel par défaut du clic droit du navigateur. Le modèle qui semble avoir émergé à la place de cela est de présenter un bouton "plus" sur lequel l'utilisateur clique avec son bouton principal de la souris, qui fait apparaître une interface secondaire (menu contextuel, barre latérale, feuille inférieure, etc.).
Cependant, je n'aime pas ce modèle, car il prend de l'immobilier et détourne l'attention de l'utilisateur du contenu principal. Personnellement, je trouve le modèle plutôt désorientant, surtout lorsque vous avez affaire à une grille d'éléments plutôt qu'à une liste verticale.
Je pense qu'une bonne alternative aux boutons "plus" est de fournir des options "appui long". Cette fonctionnalité peut être prise en charge sur pratiquement tous les navigateurs sur tous les appareils, car son implémentation technique est simplement un appel setTimeout.
Malheureusement, parce que les boutons "plus" sont si omniprésents et la fonctionnalité de pression longue est si omniprésente (sur le World Wide Web au moins). J'ai du mal à trouver le meilleur moyen d'éduquer nos utilisateurs sur cette fonctionnalité.
Voici ce que j'ai trouvé jusqu'à présent:
L'idée est que dans toute l'application, lorsque vous voyez l'icône tactile sur un élément à l'intérieur d'une liste, cela indique que les éléments peuvent tous être appuyés longuement. Cela prend moins de place que d'avoir des boutons "plus" sur chaque élément, car seuls les premiers éléments des listes ont un indice. Si vous êtes sur un appareil avec une souris, le survol des icônes "tactiles" fournit une info-bulle avec un certain contexte.
Dans cet exemple spécifique, cliquer/taper sur les cartes vous amène à la page de visualisation dédiée aux articles, mais un appui long sur les cartes vous maintient sur la même page et affiche une barre latérale/feuille inférieure (selon la largeur de l'écran)
Pouvez-vous énumérer certaines lacunes du modèle que j'ai élaboré? Comment améliorer le schéma ci-dessus?
En plus d'autres réponses:
Défaut majeur: la presse longue est déjà utilisée.
Où? Les appareils Windows avec écran tactile utilisent une pression longue du doigt pour lancer un clic droit à un emplacement donné. Partout, y compris les navigateurs Web. ( Exemple sur Youtube ).
L'effet de l'exécution d'une action personnalisée sur une pression longue peut donc être imprévisible et cela peut dépendre du système d'exploitation et/ou du navigateur. Par exemple, certains navigateurs peuvent lancer les deux actions en même temps, c'est-à-dire ouvrir le menu contextuel du clic droit et effectuer votre action sur la même pression longue.
Au lieu:
- mettre l'action dans le menu contextuel ou
- ajouter des boutons à l'écran pour changer de mode de fonctionnement (pour la prochaine action ou de façon permanente). Il s'agit essentiellement de la fonctionnalité de la palette d'outils que les utilisateurs connaissent déjà de Photoshop, GIMP, (Paint - bien sûr ...) etc.
Un appui long (alias "appuyez et maintenez") sur l'écran tactile pour ouvrir le menu contextuel est un concept très ancien, si quelqu'un se souvient par exemple de Windows Mobile 5 (2006) qui utilisait l'écran tactile avec un stylet. Un appui long était indiqué par un indicateur de progression - construction d'un cercle en pointillés autour de l'emplacement de l'appui long. ( Exemple sur Youtube. )
Sauf si vous disposez d'une solution de contournement solide à ce problème, vous ne devez pas ignorer cette lacune, en particulier lors de la conception de l'interface utilisateur Web, qui devrait être indépendante de la plate-forme. Sans solution de contournement solide disponible, je catégoriserais la gravité de ce problème comme un bouchon.
ÉDITER:
Une autre suggestion que vous pouvez faire à propos de votre interface utilisateur provient du jeu The Incredible Machine (1993). ( Exemple sur Youtube. ) Il se concentre sur la résolution exacte de votre type de problème et le fait de manière très élégante et intuitive, en utilisant uniquement le clic gauche et le glisser gauche. Outre les options de base disponibles pour chaque type d'élément, il couvre également le déplacement des liens entre les objets ou l'indication d'une action non autorisée. (Il utilise des icônes, mais rien ne vous limite à utiliser des étiquettes de texte ou une disposition différente des options de menu.) Les options pour un élément sont affichées après que l'élément est activé (cliqué).
- En option, vous pouvez également répondre au pointeur en survol, soit en mettant en surbrillance l'élément (en indiquant que "cet élément permet l'interaction") soit directement en affichant ses options de menu. Cela peut être un bon bonus pour les utilisateurs de souris, mais les écrans tactiles ne prennent généralement pas en charge le vol stationnaire.
Les utilisateurs intensifs apprécieront s'ils peuvent activer les options de menu au clavier (après avoir sélectionné l'élément). Saviez-vous que cela fonctionne même sur cette page que vous lisez (après avoir activé dans votre page de profil: onglet Modifier le profil et les paramètres > menu préférences > cocher Activer les raccourcis clavier ) . Ici, sur StackExchange, je modifie toujours mes messages en appuyant sur E au lieu de localiser le lien d'édition visuellement (puis de le trouver avec le pointeur de la souris). Donc, si vous pouvez ajouter E pour éditer, R pour renommer etc., cela pourrait ajouter de la valeur à votre interface utilisateur, car pour certains utilisateurs intensifs, il est souvent plus confortable d'appuyer aveuglément sur une touche du clavier que de pointer sur une petite icône/étiquette rectangulaire à l'aide de la souris.
Le principal inconvénient que je vois avec votre approche est que vous introduisez un paradigme d'interaction plutôt rare. Cela rendra votre application unique, probablement au détriment des utilisateurs, au moins au début.
Cependant, je n'aime pas ce modèle, car il prend de l'immobilier et détourne l'attention de l'utilisateur du contenu principal.
Comme l'icône tactile que vous utilisez occupe à peu près la même quantité de biens immobiliers, je dirais que vous êtes mieux avec l'indicateur de menu le plus courant ⋮ à cliquer.
Autre inconvénient: un appui long prend plus de temps qu'un simple clic/tapotement. Et cela pourrait interférer avec l'interaction glisser/déposer.
Il est difficile de surcharger une action courante comme le clic (toucher)
J'ai pu demander à quelques personnes ce qu'elles pensent du dernier Mac Book Pro avec un pavé tactile plus grand et un toucher forcé et tous ont désactivé l'option force touch .
Pensez au frottement que cela ajoute à l'utilisateur lorsqu'il doit maintenant faire la distinction entre cliquer et vraiment cliquer quelque chose.
Cela ne veut pas dire qu'une option de tap-hold ne peut pas fonctionner pour vos utilisateurs particuliers, mais en général, il y a forcément des gens qui se contentent de cliquer lentement et ne peuvent désormais accéder qu'aux fonctionnalités derrière l'un de vos deux types de clics.
Voici quelques éléments à garder à l'esprit lors de la long-press route ...
Essayez de ne pas placer de fonctionnalité vitale derrière l'action
Il est difficile pour les utilisateurs de découvrir de nouvelles interactions, donc si la seule façon d'accomplir une tâche critique est de taper plus longtemps sur les choses, certains d'entre eux seront empêchés de faire leur travail. Si la long-press l'action n'est que "la cerise sur le gâteau", alors elle peut améliorer l'expérience des utilisateurs fréquents. Comme pour tout le reste, vous devez tester cela avec vos clients, car une foule plus technophile connaît mieux long-press utilisé à la place d'un right-click
Les utilisateurs devront être formés
Ce n'est pas une interaction assez courante pour que la plupart des gens comprennent, donc un pop-up animé qui demande à l'utilisateur de faire quelque chose suivi d'un "vous l'avez!" Un message sera nécessaire pour les nouveaux utilisateurs. Cela ne doit être fait qu'une fois bien sûr et l'utilisateur peut extrapoler l'action à d'autres contrôles avec l'icône une fois qu'il a réussi l'action.
Informez l'utilisateur lorsqu'il effectue une long-press
Il est difficile d'obtenir la durée juste car trop longue et elle semble lente alors qu'elle est trop courte et je ne peux plus cliquer. Sur la souris vers le bas, j'essayais de fondre dans un anneau sur environ 400 ms, donc rien ne s'affiche pour les clics réguliers, puis faire en sorte que l'anneau dessine autour du point de prise sur 1200 ms. Vous devrez ajuster les nombres lors des tests avec les utilisateurs, mais cela doit être plus long que 1 seconde car c'est la coupure où un spinner doit être affiché .
Il y a probablement d'autres choses à considérer, mais une fois que vous commencez vraiment à peser tous les facteurs, une liste d'options contextuelles ne semble pas si mauvaise :)
Bonne chance et merci pour votre contribution!
Je dirais n'inventez pas ou ne réinventez pas une interaction fondamentale à moins d'avoir une très bonne raison.
J'ajouterais également que l'ajout d'un indice à une ou à certaines cartes ne suffit pas pour communiquer le "cela fonctionne pour tous" ou "cela fonctionne pour toutes choses" qui se ressemblent ".
Les utilisateurs aiment les indicateurs et les indices explicites.
La reconnaissance visuelle et familiarité est importante , plutôt que d'avoir à penser à quoi que ce soit. Il ne semble pas beaucoup devoir y penser, mais même de légères hésitations s'accumulent pour devenir une gêne - surtout si la pression longue s'avère ne pas être quelque chose pour une carte particulière.
Vous ne voulez pas ajouter d'icônes à tout ce qui ne le fait pas avoir une pression longue, et la pression longue ne sera pas pertinente partout sur votre site , donc vous devriez être explicite là où il est pertinent, pour éviter les surprises .
Il semble que vous envisagiez déjà d'utiliser un style de carte et le contexte `` plus '' est généralement proposé via une icône discrète dans le coin supérieur droit de la carte - même icône, même endroit, partout où il peut être utilisé.
En dehors de toute autre chose, un appui long prend un temps relativement long par rapport à un clic.
Les exemples ci-dessous montrent des indicateurs de menu populaires et n'ajoutent pas vraiment beaucoup à l'immobilier. Ils ont certainement ajouter plus de valeur dans leur accès aux fonctionnalités et dans leur accessibilité qu'ils n'en retirent dans l'immobilier - d'autant plus que l'immobilier est souvent un vide de toute façon.
Trello
Strava
Vous pouvez utiliser des indicateurs de progression
Dans votre cas, cela pourrait être réalisé avec un indicateur de progression linéaire:
L'indicateur est superposé à l'élément sur lequel vous souhaitez appuyer longuement. Lorsque l'utilisateur détient l'élément, l'indicateur de progression avance proportionnellement et l'utilisateur arrête l'indicateur de progression arrête le chargement.
Je n'ai pas essayé cela dans le monde réel, mais cela semble être un signifiant de Nice pour une longue pression.
Android avait récemment ajouté cette fonctionnalité d'appuyer longuement sur les applications Google sur les appareils à écran tactile. Je recommanderais donc également de comprendre qui est l'utilisateur au niveau de l'appareil. 
.
Et testez-le, le menu Kabab fonctionne parfois en fonction de l'utilisateur et s'il est curieux. Mais comme il n'y a pas de contexte dans ces menus, ce sera le problème à résoudre.
Qu'est-ce qui fait que ces certaines cartes de votre concept ont besoin d'une interface secondaire? C'est là que je poserais encore la question. Si cela est plus courant d'avoir cette fonctionnalité, il se peut que la question de l'interface utilisateur du système doive être ajustée pour faire remonter ces fonctionnalités à la surface en tant que besoin d'interface utilisateur principal.