別の種類の「キャンセル」ボタン

別の種類の「キャンセル」ボタン
別のキャンセルボタン 123WORDPRESS.COM
「キャンセル」ボタンは必要な操作プロセスの一部ではなく、デザイン上の主要な要素として表示されません。しかし、実際のポップアップ ボックスや一部のオペレーティング アプリケーションでは、この小さなキャンセル ボタンがよく表示されます。この小さなキャンセル ボタンの謎は何でしょうか?
まず、キャンセルの概念を理解する必要があります。
キャンセル: 質問、選択肢、進行状況、または情報を送信するときに、確認アクションを要求する必要があります。このとき、多くの場合、「OK」と「キャンセル」の 2 つのボタンが表示されます。 「キャンセル」ボタンは、通常単独では表示されず、「OK」や「保存」などの操作と一緒に表示されます。
(このようなダイアログ ボックスはオペレーティング システムでは一般的で、[確認] と [キャンセル] の 2 つのボタンが含まれています)
2番目は、「キャンセル」キーを設計して使用します。ページ上の「キャンセル」ボタンの位置。「キャンセル」ボタン(または操作確認ページ)を設計する場合、「確認」ボタンと「保存」ボタンは左側に配置され、目立つ形式でマークされているか、デフォルトで項目が選択されていることがよくあります。 「キャンセル」ボタンは右側に配置されることが多いです。 「確認」と「キャンセル」は離れすぎないようにしてください。図 a の 2 つのボタン間の距離が長すぎるため、視覚的な移動距離が増加し、読み取りに負担がかかります。図 b の読み取り効率は図 a よりもはるかに高いです。
(ア)
(ロ)
「キャンセル」を他のボタンと区別して弱める方法は、製品の操作上の考慮のためです。ユーザーに実行を促すいくつかの操作が実装され、「キャンセル」操作が強調されなくなります。たとえば、次のソリューションでは、[OK] ボタンと [キャンセル] ボタンがさまざまな程度に区別されています。
これを行う利点は、二次的な操作の視覚的な目立ちを軽減し、誤った操作を最小限に抑え、ユーザーが目標を達成できるように導くことです。 2 つのボタンを明確に区別し、確認側を強調します。ユーザーが判断しやすくなります。
ボタンを設計するときに、表現される実際のコンテンツに基づいて、プライマリ関係とセカンダリ関係を強調できます。ユーザーを適切にガイドし、誤った操作を回避し、操作をより便利で明確にします。また、人間味のある説明語を使用してボタンを強調し、「キャンセル」の語を弱めることもできます。「キャンセル」の機能は、ユーザーが前の操作に戻れるようにすることです。しかし、インターフェースの主な意図に過度な影響を与えることはできません。人間味のある説明的な言葉は、ユーザーの注目を集め、思いやりと親しみを感じさせることができます。下の写真のDoubanの映画レビュー投稿ページでは、青灰色の小さなフォントが使用されており、形式も他のボタンと異なります。ページ全体では、「OK、コメントを追加」ボタンが1つだけ強調表示されています。
このページではユーザーがコンテンツを入力する必要があり、「キャンセル」操作を行うと否定的な結果が生成されます。特に、ユーザーが誤ってキャンセルをクリックした場合、入力されたコンテンツは存在しなくなります。このページのデザインでは、「キャンセル」ボタンをボタンではなくリンクにすることで弱め、「OK、コメントを追加」という確認ボタンを強調しています。非常に優れた視覚的な強調表示の役割を果たします。ただし、テキストは簡潔で、アイデアは明確である必要があることに注意してください。
ダイアログ ボックスで「OK」と「キャンセル」を使用します。
メインタイトルテキストが「...してもよろしいですか?」のような文章である質問ダイアログボックスの場合は、「OK」と「キャンセル」の組み合わせを使用できます。ただし、はい/いいえの質問に答える場合は、「OK」と「キャンセル」を使用しないでください。図aはエラーの例です。上記の状況に加えて、「OK」と「キャンセル」が組み合わされている場合、「OK」の意味は「送信」と同等になります。たとえば、図 b のオプションは、実際には「OK」が送信を意味します。
図 c: エラーや警告メッセージに過度に重い警告アイコンを使用しないでください。ユーザーが圧倒されてしまう可能性があります。エラーや警告のプロンプトを設計するときは、黄色の「!」を使用できます。
; ボタンは「OK」または「推奨アクションの支援」+「理解しました」になります
「…ですか?」と尋ねるときは、「はい」と「いいえ」の組み合わせを直接使用できます。図d
「キャンセル」をデフォルトのボタン オプションとして使用するかどうか。通常のダイアログ ボックスに複数のボタンがある場合、そのうちの 1 つのボタンがデフォルトのオプションとして設定されます。 「キャンセル」ボタンは、アクションを実行した直後に必ず表示されます。このとき、頭の中は前のアクションでいっぱいなので、当然何も考えずに「OK」を選択し(通常はデフォルトのオプション)、その後後悔することになります。そのため、ポップアップウィンドウの表示が速すぎるため、ユーザーは「操作を間違えたかもしれない」と気づかないことがよくあります。したがって、デフォルト オプションは、ユーザーに害を及ぼさないボタンに配置する必要があります。
たとえば、下の図では、保存されていないドキュメントを閉じるときに、このプロンプトのデフォルトの項目は「保存」ボタンにあります。保存すると他の 2 つのボタンよりもロスが少なくなるためです。
下の画像は、プレイヤーにゲームバージョンのアップグレードを促すプロンプトボックスです。ここでは、プレイヤーにゲームバージョンのアップデートを推奨する必要があるため、デフォルトの項目は「OK」ボタンにする必要があります。
プロンプト ボックス ボタンのデフォルト項目を設定する場合、それをデフォルトとして設定した後にユーザーが誤った操作を行った場合に、それがユーザーにとって有益か有害かを考慮する必要があります。また、ユーザー操作の推奨・奨励や、ユーザーへの適切なガイダンスの提供なども検討する必要があります。
3. ケース分析: 元の設計では、プレーヤーがゲーム アイテム バー内のアイテムをクリックすると、ダイアログ ボックスがポップアップ表示され、「購入」と「キャンセル」の 2 つのボタンが表示されます。
(ヒーローキラーアイテム購入ダイアログボックス)
問題:
ボタンには優先順位がないようです。操作の観点から、プレイヤーに購入を促す意図を強調することはできません。プレイヤーは購入したアイテムと購入していないアイテムを区別できません。ニーズに応じて、ボタンの優先順位を確立し、パフォーマンスで区別する必要があります。このとき、「キャンセル」ボタンを弱め、購入ボタンの注目度を高め、プレイヤーに購入を促す必要があります。
最適化後は「キャンセル」ボタンを削除し、購入ボタンと非購入ボタンの効果を差別化して差別化されたデザインを実現しました。下の写真は修正後のデザインです。以前の内容よりもわかりやすくなったと思いませんか?
まとめると、「キャンセル」キーを使った解決方法は、PC の「キャンセル」ボタンは右側に配置されていることが多いためです。しかし、iOS では強調されたボタンは右側に配置されます。
プライマリボタンとセカンダリボタンを明確に区別し、テーマを強調します。キャンセルボタンは、表現の内容に応じて適切に弱めることができます。
アクションの結果を説明する言葉を使用し、ユーザーにそれを読ませます。
はい/いいえの質問に答える場合は、「OK」と「キャンセル」を使用しないでください。
「キャンセル」をデフォルトのオプションとして使用したり、場合によっては害のないボタンを選択したりすることもできます。
まとめると、「キャンセル」は主要なボタン要素ではありませんが、そこに配置するのが正しいというわけではありません。実際の状況に応じて合理的に設計し、標準化する必要があります。目立たないからといって、このボタンを無視しないでください。インタラクション デザインでは、成功または失敗を決定する詳細が重要になることがよくあります。
出典: テンセント GDC

<<:  HTML で点線の境界線を設定する方法

>>:  CSS により、子コンテナが親要素を超えます (子コンテナは親コンテナ内で浮動します)

推薦する

我々は自らの力でIE6を絶滅に追い込んでいる

実際、IE6 が本当にいつ消滅するのか私たちは毎日疑問に思っていますが、2001 年のリリース以来、...

VMware ESXi 6.0 および仮想マシンのインストール チュートリアルの展開 (画像とテキスト)

社内には以前からアイドル状態だった、構成の整ったサーバーがあったので、EXSI 6.0 を使って複数...

VUE でタブページを切り替える 4 つの方法

目次1. 静的実装方法: 2. 第2のシミュレーション動的方法3. 3番目の動的データ方式4. 動的...

航空機戦争ゲームを実装するためのネイティブJS

この記事の例では、参考のために航空機戦争ゲームを実装するためのJSの具体的なコードを共有しています。...

フロントエンドページのポップアップマスクはページのスクロールを禁止します

フロントエンド開発者がよく遭遇する問題は、ユーザーに情報を提示するためのポップアップ ウィンドウを作...

シェルを使用して複数のサーバーでバッチ操作を実行する方法

目次SSHプロトコルパスワード接続プロセスsshツールssh公開鍵ログインバッチ操作複数サーバーファ...

HTML ul および li タグを使用して画像を表示するサンプル コード

以下のコードをDreamweaverのコードエリアにコピーすると、プレビュー時に以下の画像が表示され...

MySQLはinit-connectを使用してアクセス監査機能の実装を増やします

まず init-connect を通じて mysql 接続を初期化し、次にインスタンスに接続する必要...

携帯電話番号の歩数記録を取得するWeChatアプレット

序文最近、小さなプログラムを開発しているときに、このような問題に遭遇しました。ユーザーが認証をクリッ...

Nginx アクセス ログとエラー ログ パラメータの説明

例: nginx ログには、アクセス ログとエラー ログの 2 つの主な種類があります。アクセス ロ...

Linux 編集の開始、停止、再起動の Springboot jar パッケージ スクリプトの例

序文springboot設定ファイルでは、設定ファイルの名前には独自の意味と用途があります。 dev...

Kali に docker と portainer をインストールする方法

dockerの登場により、多くのサービスが徐々にハードウェアアーキテクチャへの依存から脱却しました。...

リクエスト IP の最後のセグメントに基づいてトラフィックを分割するように Nginx を構成する方法

これは主に、場所パラメータのif判断の設定ジャンプです。迂回により、サーバーの負荷と圧力を軽減できま...

IEではボタンが両側に伸びる

ボタン (input, button) を記述すると、IE では次のようになります。単語数が増えると...

モバイルデバイスで 1 ピクセルの境界線の問題を解決するいくつかの方法 (5 つの方法)

この記事では、モバイルデバイス上の 1 ピクセルの境界線の問題を解決する 5 つの方法を紹介します。...