web-dev-qa-db-fra.com

Les popups modaux mobiles devraient-ils être mobiles?

Comme je vois cela réponse de @ JDB indiquant

Je déteste quand une boîte de dialogue modale apparaît me demandant de confirmer une action et la seule façon de confirmer que, oui, c'est l'enregistrement que je veux supprimer, est de visualiser les informations sous la boîte de dialogue inamovible.

Je dois généralement annuler, revérifier, puis cliquer à nouveau.

Cela s'applique-t-il également aux applications mobiles?

Je n'ai vu aucune boîte modale mobile mobile, même directives iPhone et google-design n'ont aucune mention de la mobilité des boîtes modales.

Une raison précise pour laquelle les fenêtres pop-up modales mobiles ne sont pas censées être mobiles?

22
gurvinder372

Si une confirmation contextuelle est si peu informative qu'un utilisateur peut avoir besoin de la déplacer pour décider si elle doit continuer, alors le problème est une mauvaise fenêtre contextuelle, et le permettre d'être déplacé ne résout pas le problème principal.

En supposant que vous ayez vraiment besoin d'une fenêtre contextuelle qui précède l'action et remplit l'écran, pour obtenir une réponse informée de l'utilisateur avant d'effectuer l'action (sinon, le modèle "faites-le, puis autorisez 'Annuler'" dans la réponse de nuwa est très bon), assurez-vous que le popup lui-même contient les informations nécessaires pour prendre une décision éclairée:

Ne pas:

Êtes-vous sûr?

Vous ne pouvez pas annuler le tir de ce missile nucléaire!

OkayCancel

Une fenêtre contextuelle plein écran exigeant toute l'attention est clairement appropriée pour confirmer cette action non annulable - mais elle ne contient pas suffisamment d'informations pour qu'un utilisateur confirme qu'il ne fait aucune erreur.

Faire:

Nuke Bhoutan?

La procédure de tir du missile nucléaire GR-921 depuis le sous-marin 8QR sur la cible Thimphu, au Bhoutan, commencera immédiatement. Une fois lancée, cette procédure ne peut pas être arrêtée. Heure de lancement estimée: 18:06.

Show missile flightpath [button uncollapses map image]

Launch MissileCancel

Cela exige le niveau d'attention approprié pour la décision à prendre et permet de revoir les détails pertinents concernant la décision lorsque la décision finale est confirmée.

Un exemple un peu plus quotidien:

Acheter cet abonnement de 6 mois?

Votre carte de crédit se terminant 1292 sera facturée 92,60 $ et un abonnement de 6 mois au magazine Visitez le Bhoutan débutera le 3 février 2016.

[Maybe a collapsed box with legal/other info here - only if necessary]

SubscribeCancel


ne réponse récente détaillée détaillée sur les messages de confirmation


Un commentaire mentionnait la suppression des actions et, le cas échéant, une telle attention. Voici un bon exemple :

Supprimer le compte de gurvinder372?

le compte de gurvinder372 deviendra immédiatement inaccessible. Toutes leurs données personnelles seront définitivement supprimées et leurs 214 publications seront attribuées à "[utilisateur supprimé]". Un e-mail standard sera envoyé à leur adresse enregistrée.

Delete AccountEdit email messageCancel

C'est approprié car il y a des conséquences immédiates et irréversibles, et c'est une action que les utilisateurs ne feront pas à la légère.

Voici un mauvais exemple , où une fenêtre contextuelle de confirmation complète est excessive:

Supprimer l'e-mail de WarezCorp?

L'e-mail "Acheter une remise de qualité supérieure ..." de WarezCorp reçu il y a 12 minutes sera déplacé vers le dossier "Corbeille".

SHUT UP I do this action like 50 times a dayCancel

Ce n'est pas approprié car c'est une action de routine qui peut être annulée sans danger. Un simple bouton d'annulation dans un avis de toast est plus approprié - et comme l'explique nuwa, résout également le problème dans cette question car l'utilisateur n'est jamais emmené d'où il était.


Une autre considération est, si l'utilisateur appuie sur annuler, comment est-il facile de revenir à ce point ?

Supposons que, pour une raison quelconque, quelqu'un veuille revérifier l'ensemble des pages précédentes, par exemple s'il souhaite réévaluer les alternatives à l'option qu'il a choisie.

Déplacer la fenêtre contextuelle et essayer de faire cette tâche derrière une fenêtre contextuelle déplacée est clairement moins convivial que l'annulation en un clic pour masquer la fenêtre contextuelle, puis une action de répétition en un clic pour la récupérer à nouveau. Surtout si vous grisez l'arrière-plan et évitez les clics.

S'ils savent ils peuvent simplement appuyer sur annuler, puis sur le même bouton qui les a amenés ici, il n'y a pas de problème. Ils souhaiteraient seulement pouvoir déplacer le pop-up s'ils ne croient pas que ce soit aussi simple de revenir là où ils sont.

Cela pourrait être quelque chose à tester par l'utilisateur. Si l'utilisateur semble réticent à utiliser ce bouton "Annuler", c'est un indice que la procédure pour arriver à ce point est compliquée au point qu'il hésite à devoir recommencer. S'ils n'hésitent pas à appuyer sur "Annuler" (ou sur le bouton de retour du navigateur?), C'est un signe qu'ils font confiance à votre interface utilisateur pour ne rien faire de bizarre et qu'ils savent qu'il va être facile de revenir au point qu'ils étaient quand ils ont frappé "annuler".

Une étiquette alternative à "Annuler", comme "Retour" ou "Retour à la liste" ou "Retour au panier", pourrait mieux fonctionner, selon le contexte.

35

En termes de mobile,

  1. Un écran mobile n'a pas l'espace pour résoudre votre problème en déplaçant la fenêtre contextuelle. Vous pouvez déplacer la fenêtre modale et toujours ne pas voir les informations souhaitées car elle dispose d'un espace limité.

  2. Une fenêtre contextuelle couvre généralement les informations ci-dessous par une superposition noire afin qu'elles ressortent. Il ne suffira alors pas de déplacer la fenêtre contextuelle. Vous devrez également vous débarrasser de la superposition.

enter image description here

Alors, comment résolvez-vous votre problème?

  • Cela dépend des informations que vous mettez sur votre popup. Si la fenêtre contextuelle est liée à une action qui doit être effectuée sur un élément spécifique, elle doit fournir suffisamment d'informations à l'utilisateur pour prendre une décision.

Ex: Au lieu de dire "Êtes-vous sûr de vouloir supprimer?" faites savoir à l'utilisateur ce qu'il supprime. Un nom, un chemin d'accès, le nombre d'éléments qu'ils suppriment. Tout ce qui leur sera utile pour décider.

  • Partout où vous pouvez éliminer une fenêtre contextuelle, faites-le.

Ex: Tapez et maintenez pour effectuer certaines actions. Vous avez peut-être remarqué que certaines actions telles que "Supprimer" sont disponibles une fois que vous appuyez longuement sur un élément. Il s'agit en soi d'un type de confirmation de l'utilisateur. Mais vous ne pouvez pas être trop sûr. C'est pourquoi ce type de chose devrait permettre à votre utilisateur d'annuler tout ce qu'il a fait.

enter image description here

16
nuwa

étant donné que les écrans mobiles sont plus petits, l'immobilier d'écran est plus cher et l'interaction est différente.Si vous planifiez l'écran correctement et testez votre application sur de nombreux appareils, vous n'aurez pas besoin de créer un modal mobile, l'idée est d'avoir tous les informations pertinentes pour l'étape en cours dans laquelle l'utilisateur se trouve, à l'écran. si vous prévoyez de faire apparaître des messages, assurez-vous qu'ils correspondent à l'arrière-plan afin que:

  • vous pouvez toujours voir les informations pertinentes derrière eux ou
  • la fenêtre contextuelle contient toutes les informations dont l'utilisateur a besoin pour passer à l'étape suivante
1
Eran Bar