web-dev-qa-db-ja.com

ポップアップでの主ボタンの配置

ポップアップにプライマリボタンとセカンダリボタンを表示するための適切な位置は何ですか?

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

参照記事: http://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/

6
NB4

あなたの例では、プライマリアクションとセカンダリアクションはありません。 どちらも主要なアクションですが、肯定的で却下的です材料設計ガイドライン に従う場合は、右側に肯定的、左側に非難的を配置します。

アクション

ダイアログは集中的で限定的な一連のアクションを提示しますが、これらは一般に肯定的または否定的です。

  • 肯定的なアクションが右側に配置され、プロセスを続行します。肯定的なアクションは、「削除」や「削除」などの破壊的なものになる場合があります。
  • 否定的なアクションは、肯定的なアクションのすぐ左に配置され、ユーザーを元の画面またはプロセスのステップに戻します。
  • 否定的で肯定的なアクションテキストは、「キャンセル」/「OK」、または決定の結果を示す特定のアクティブな動詞または動詞句です。

enter image description here

3
Alvaro

このポップアップを使用する場合は、最初のアプローチが推奨され、Webまたはデスクトップベースのアプリケーションを使用する場合は、右側にある2番目のアプローチを使用します。その理由は、モバイルユーザーは通常、右側の指または親指で画面をタップするため、すぐに選択しやすいからです。人々は右から最初にクリックすることを好むので、常に肯定的なアクションまたはユーザーからの確認を求めるアプリでは、右側にある[送信]ボタンを使用します。

Webまたはデスクトップベースのアプリケーションでは、中心点が考慮されます。したがって、観察した場合、ポップアップ、通知、またはアラートが表示されると、画面の左側に「はい」、「OK」、または「確認」という名前のボタンが常に配置されます。

0
Jasmin Javia

これは、「OK」/「キャンセル」ボタンのあるアラート/モーダルと同じ状況だと思います。

「OK」/「送信」ボタンを右側に配置する必要がある理由を説明する詳細な記事は次のとおりです。 ダイアログボックスの[OK]ボタンが右側に最適な理由

マテリアルデザインでも同じアプローチを見ることができます: Dialogsenter image description here

0
Madalina Taina

私の理解では、ボタンの配置はアクションの重要性に基づいている必要があります。

たとえば、銀行の牽引力や機密情報へのアクセスをユーザーの最大の注意を払う必要があるようなアクションの場合、肯定ボタンは左側にある必要があります。ボタンはすぐにアクセスできるため、ユーザーは右側のボタンを使用する傾向があります。モバイルとウェブの両方で、右利きである世界の人々の90%が右側に簡単にアクセスできます。右側のボタンを誤って押した場合、それは却下アクションボタンであるため、アクションはユーザーに影響を与えません。プロセスを再開できます。

情報の機密性が低い限り、確認ボタンはアクセスしやすいので右側に配置できます。

0