web-dev-qa-db-ja.com

モバイルモーダルポップアップは移動可能ですか?

これを見ると answer@ JDB から

モーダルダイアログが表示されてアクションを確認するように求められ、はい、これが削除したいレコードであることを確認できる唯一の方法は、不動のダイアログの下の情報を表示することです。

私は通常、キャンセルして再確認し、もう一度クリックする必要があります。

これはモバイルアプリにも適用されますか?

iPhoneガイドラインgoogle-design でさえ、モーダルボックスの可動性について言及していません。

モバイルモーダルポップアップが移動できないことになっている具体的な理由は何ですか?

22
gurvinder372

ポップアップの確認が非常に有益ではないため、ユーザーが続行するかどうかを判断するためにそれを移動する必要がある場合、問題は悪いポップアップであり、移動を許可してもコアの問題は解決しません。

アクションの前にポップアップを表示してneedすると、アクションを実行する前にユーザーから情報を得た応答が得られます(それ以外の場合は、 nuwaの答えで「それをやれば、「元に戻す」パターンを許可する」は非常に良いです)、ポップアップ自体に情報に基づいた決定を行うために必要な情報が含まれていることを確認してください:

してはいけないこと:

本気ですか?

この核ミサイルの発射を取り消すことはできません!

OkayCancel

完全な注意を要求するフルスクリーンポップアップは、この元に戻せないアクションを確認するために明らかに適切ですが、これには、ユーザーが間違いがないことを確認するための十分な情報が含まれていません。

行う:

核ブータン?

ブータンのターゲットティンプーで潜水艦8QRから核ミサイルGR-921を発射する手順はすぐに開始されます。いったん開始すると、この手順を停止することはできません。推定起動時間:18:06。

Show missile flightpath [button uncollapses map image]

Launch MissileCancel

これにより、決定に対して適切なレベルの注意が要求され、最終決定が確認されたときに、適切な決定関連の詳細を確認できます。

もう少し日常的な例:

この6か月のサブスクリプションを購入しますか?

1292で終わるクレジットカードに$ 92.60が請求され、Visit Bhutanマガジンの6か月定期購入が2016年2月3日に始まります。

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

SubscribeCancel


確認メッセージに関する詳細な最近の関連回答


コメントには削除アクションと、このような十分な注意を要求するのが適切な場合が含まれていました。これは良い例です

Gurvinder372のアカウントを削除しますか?

gurvinder372のアカウントはすぐにアクセスできなくなります。個人データはすべて完全に削除され、214件の投稿は「[削除されたユーザー]」に帰属します。標準のメールが登録されたアドレスに送信されます。

Delete AccountEdit email messageCancel

すぐに元に戻せない結果が生じるため適切であり、ユーザーが軽く行うことはないアクションです。

これは悪い例で、フルフォーカスの確認ポップアップが過剰です。

WarezCorpからメールを削除しますか?

12分前に受信したWarezCorpからの「最高品質の割引を購入...」というメールは、「ゴミ箱」フォルダに移動さ​​れます。

SHUT UP I do this action like 50 times a dayCancel

これは、無害に取り消すことができる日常的なアクションであるため、適切ではありません。 トースト通知 の単純な元に戻すボタンがより適切です-そして、nuwaが説明するように、ユーザーがどこにいたのかわからないため、この質問の問題も解決します。


別の考慮事項は、ユーザーがキャンセルを押した場合、この時点に戻るのがどれほど簡単かですか?

何らかの理由で、たとえば選択したオプションの代替案を再評価したい場合など、誰かが前のページ全体を再確認したいとします。

ポップアップを移動して、移動したポップアップの背後でこのタスクを実行しようとすると、ワンクリックでキャンセルしてポップアップを非表示にしてから、ワンクリックの繰り返しアクションでポップアップを再び表示するよりも、ユーザーフレンドリーではありません。特に、背景を灰色にしてクリックを防ぐ場合は。

彼らが知っている彼らがキャンセルを打つことができて、それらをここに持ってきたのと同じボタンを打つことができるなら、問題はありません。彼らは、自分がいる場所に戻るのがそれほど簡単であると信じられない場合にのみ、ポップアップを移動できることを望んでいるだけです。

これは、ユーザーがテストする必要があるかもしれません。ユーザーがその「キャンセル」ボタンの使用に消極的であると思われる場合は、この時点に到達するための手順が複雑であり、ユーザーが再度それを実行する必要がないことを示す手掛かりです。彼らが「キャンセル」(またはブラウザの戻るボタン?)を押すことをためらわない場合、それは彼らがあなたのUIが奇妙なことをしないことを信頼しており、彼らが彼らのポイントに戻るのは簡単であることを彼らが知っていることを示しています。彼らが「キャンセル」を押したときでした。

「戻る」、「リストに戻る」、「カートに戻る」などの「キャンセル」の代替ラベルは、状況によってはパフォーマンスが向上する場合があります。

モバイルに関しては

  1. モバイル画面には、ポップアップを移動して問題を解決するスペースがありません。モーダルウィンドウは移動できますが、スペースが限られているため、必要な情報は表示されません。

  2. ポップアップは通常、目立つように黒いオーバーレイで以下の情報を覆います。その場合、ポップアップを移動するだけでは十分ではありません。オーバーレイも削除する必要があります。

enter image description here

では、どのように問題を解決しますか?

  • それはあなたがあなたのポップアップに置く情報に依存します。ポップアップが特定のアイテムに対して実行する必要があるアクションに関連している場合、ポップアップはユーザーに決定を行うのに十分な情報を提供する必要があります。

例:「削除してもよろしいですか?」何を削除するかをユーザーに知らせます。名前、パス、削除するアイテムの数。彼らが決めるのに役立つものなら何でも。

  • ポップアップを排除できるところならどこでも、そうします。

例:押し続けて特定のアクションを実行します。アイテムを長押しすると、「削除」などの特定のアクションが使用可能になることに気づいたかもしれません。これ自体は、ユーザーからの確認の一種です。しかし、確信が持てません。このため、この種のことにより、ユーザーは何を行っても元に戻すことができます。

enter image description here

16
nuwa

モバイル画面が小さいため、画面の面積が大きくなり、操作が異なります。画面を適切に計画し、多くのデバイスでアプリをテストする場合、移動可能なモーダルを作成する必要はありません。画面上で、ユーザーがいる現在のステップに関連する情報。メッセージのポップアップを計画している場合は、次のいずれかになるように、メッセージが背景に収まることを確認してください。

  • あなたはまだそれらの背後にある関連情報を見ることができます
  • ポップアップには、ユーザーが次のステップに進むために必要なすべての情報が含まれています
1
Eran Bar