ウェブサイトのインタラクションデザイン: 異なる種類の「キャンセル」ボタン

ウェブサイトのインタラクションデザイン: 異なる種類の「キャンセル」ボタン

「キャンセル」ボタンは必要な操作プロセスの一部ではなく、デザイン上の主要な要素として表示されません。しかし、実際のポップアップ ボックスや一部のオペレーティング アプリケーションでは、この小さなキャンセル ボタンがよく表示されます。この小さなキャンセル ボタンの謎は何でしょうか?

まず、キャンセルの概念を理解する必要があります。

キャンセル: 質問、選択肢、進行状況、または情報を送信するときに、確認アクションを要求する必要があります。このとき、多くの場合、「OK」と「キャンセル」の 2 つのボタンが表示されます。 「キャンセル」ボタンは、通常単独では表示されず、「OK」や「保存」などの操作と一緒に表示されます。

(このようなダイアログ ボックスはオペレーティング システムでは一般的で、[確認] と [キャンセル] の 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を明記してください)

元のタイトル: ウェブサイトのインタラクションデザイン: 普通ではない「キャンセル」ボタン

キーワード: ウェブサイト、インタラクション、一般、キャンセル、ボタン、これ、所属しない、操作、ウェブマスター、ウェブサイトのプロモーション、収益化

<<:  このBaidu Kステーションの苦情に関するいくつかの小さな経験

>>:  外部リンクを集めるブログがセカンダリディレクトリを使用するべき理由

推薦する

SEOのヒント: メタタグは過剰よりも空のままの方が良い

タグは SEO で最も人気のある最適化方法です。SEO が人々に知られるようになった初期の頃、この設...

知性で先導し、未来を見据える |テンセントクラウドTVPデジタルナビゲーターサミットが間もなく始まります

活動背景:企業がデジタル変革を遂げている現在、クラウド コンピューティング、ビッグ データ、モノのイ...

virtono 3周年記念、すべてのVPSサービスが永久に30%オフ、オプションのデータセンター4つ

virtono.com が 2000 年に初めて設立されたとき、私は Hostcat で広告スペース...

GoogleのPRアップデートが私の意に反して行われた後の私の考え

2012年の元宵節の日に、ホリデーパーティーの最中にGoogle PRが更新され、私たちの自動車改造...

prometeus-アジアとインドでのVPS補充/XEN/SSD

良いニュースです。Prometeus のインド データ センターの VPS が再入荷しました。最初の...

クラウドサービス市場は本当に暗い冬を迎えているのでしょうか?

まだ初秋ですが、クラウドサービス市場はすでに寒い冬に突入しています。すべての兆候は、この発言が根拠の...

クラウド コンピューティングの未来: 2022 年に主流となるトレンド

クラウド コンピューティング テクノロジーは現在、市場で最も価値のあるテクノロジーの 1 つとしての...

モバイルインターネットの時代、ウェブマスターは反撃する必要がある

文/馬暁道周知のとおり、従来のインターネット時代では、ウェブマスターはかつて非常に成功し、富を含む大...

spinserver: 開始まで 15 分/米国の超ハイエンド サーバー、月額 89 ドルから、10G 帯域幅、40 コア/80 スレッド/768G メモリ/8T SSD

spinserver は、米国西海岸のサンノゼと中央データセンターであるダラスで独立サーバー事業に注...

インターネットマーケティングは万能薬ではなく、すべての業界に適しているわけではない

インターネットをやらなければ、遅れをとることになります。オンラインマーケティングをやらなければ、脱落...

コンテンツこそが王様であるという原則を守り、優れたコンテンツを開発する

コンテンツこそが王様という考え方は業界でますます受け入れられ、SEO の典型的な例とみなされるように...

racknerd: 年間 15.88 ドル、ロサンゼルスの高トラフィック VPS、KVM/1G メモリ/20g ハード ドライブ/5T トラフィック、オプションの「60Gbps 高防御」

Racknerd は 6 月に新しいプロモーションを実施します。今回は、トラフィック量が多く、年間 ...

Fenfuは「Huabei」のWeChatバージョンではありません!

ショートビデオ、セルフメディア、インフルエンサーのためのワンストップサービス3月26日、ネット上の一...

個人ウェブサイトの包囲網を突破するための4つの提案

多くのウェブマスターは、個人ウェブサイトが包囲網を突破して発展することがいかに難しいかを語っています...

AWSテクノロジーサミット2018北京駅でAuroraサービスの正式開始が開催

8月9日、北京国際会議センターにてAWSテクノロジーサミット2018(北京)が開催されました。 AW...