UIのマイクロコピーの専門家であり、 Microcopy：The CompleteGuideの著者であるMiroのブログKinneretIfraからの画像は、確認ダイアログを短く、明確で、煩わしくなく、したがってユーザーにとってより便利にする方法に関するアドバイスを提供します。 ..。記事の翻訳に注目し、その後、私たち自身の経験からいくつかのアイデアを追加します。



***

記事の翻訳「これを実行してもよろしいですか？」確認ダイアログのマイクロテキスト "

通常、ユーザーが重要なアクションを実行しようとすると、確認ダイアログボックスが表示されます。このメッセージは、ユーザーが本当にアクションを実行したいかどうかをもう一度考え、その結果を認識していることをユーザーに促します。



つまり、確認ダイアログはユーザーを選択した瞬間に戻し、アクションを再度実行するように強制します。私たちは意図的にこの干渉を作成します-最終的にはユーザーの利益になります。

アクションの確認またはキャンセル

ユーザーが何をしているかを知っていると仮定して、ユーザーにフリーハンドを提供できる場合があります。このような場合、確認ダイアログの代わりに、アクションの完了後数秒以内にアクションをキャンセルする機会をユーザーに与えることをお勧めします。



ユーザーは、画面の上部または下部に表示されるポップアップメッセージでアクションをキャンセルできます。ユーザーがアクションをキャンセルしない場合は、何もする必要はありません。メッセージは数秒後に自動的に消えます。



これは、Googleカレンダーでのポップアップメッセージの表示です。他の参加者が招待されていないイベントを削除すると表示されます。









ユーザーが画像をゴミ箱に移動すると、Googleフォトに次のメッセージが表示されます。









Dropboxのポップアップメッセージは次のとおりです。









その他の例は、アンインストールインターフェイスの他のオプションに関するKerenRijenskyの記事にあります。

いつ確認ダイアログを使用し、いつキャンセルしますか？

私はWE-WomenExperience Facebookグループでこの質問をし、素晴らしい回答を得ました（女の子に感謝します！）。これらの回答に基づいて、考慮すべき4つの重要な要素を特定しました。

1. . , , , . , , . , , , , .
2. . / , . , . , , , .
3. . , , , . , . , , .
4. 頻度。たとえば、メールを操作するときなど、ユーザーが定期的に同じアクションを実行すると、すべてのステップで確認を求めることにすぐに飽きてしまいます。さらに、ユーザーが誤って毎日作業するアクションを実行する可能性はほとんどありません。逆もまた同様です。ユーザーがアクションを実行することがめったになく、その機能を忘れた可能性がある場合は、キャンセルメッセージよりも確認ダイアログを使用することをお勧めします（これも見逃しがちです）。

さらに、一部の製品では、完全なキャンセルに加えて、アクションの追加オプションがユーザーに提供されます（Efri Eltanのヒントに感謝します）。以下にいくつかの例を示します。

確認ダイアログの構造

確認ダイアログには、2つまたは3つの要素が含まれています。

1. 題名。
2. 1行または2行の説明（オプション）。
3. ボタン。

要素1.ヘッダー

タイトルでは、確認する必要がある1つの重要なアクションについてユーザーに尋ねるか、ユーザーに伝える必要があります。



見出しはできるだけシンプルにする必要があります。最も重要なのは、明確で明確なことです。



ほとんどの場合、タイトルは、「はい/いいえ」、「滞在/終了」、「続行/戻る」の2つの相互に排他的な回答オプションを使用して、簡単に区別して選択できる質問にする必要があります。



すでにこの段階で、ボタンについて考える価値があります。見出しに質問を作成して、2つの明確で簡単に区別できる回答オプションを提供できるようにします。これらのオプションは後でボタンに使用します。



「警告」や「よろしいですか」などの一般的な見出しは使用しないでください。



現在のアクションに名前を付けます-具体的であるほど良いです。







セマンティックな負荷を伴わない導入フレーズは避けてください。たとえば、「Do you want ...」、「このアクションは...につながります」、そしてまったく同じ悪名高い「Youreally ...」などです。



最初から主なことを伝えます。





















これがTwitterの素晴らしい例です-シンプルで明確な投稿：









メッセージから冗長な紹介を削除する必要があるのはなぜですか？

1. メッセージは簡潔で、言語はシンプルで理解しやすいものになります。私たちはすでにユーザーに追加の行動に時間を費やすことを強制しています。「あなたは本当に...」というフレーズは、感情的なレベルを含め、メッセージに不必要な複雑さを追加します。
2. . , . – , – .
3. . .
4. «» – .

« »

「キャンセル」という言葉は、削除に関連するアクションに関してはさまざまな方法で解釈される可能性があることに注意してください。



これは、「元に戻す」と「削除」という単語が絡み合っているメッセージで特に顕著です。二重否定は、アクションが提案されているのかキャンセルされているのかを理解するのを難しくします。[戻る]、[滞在]、[いいえ]、[終了]、またはコンテキストで直感的なその他のアクションなど、別の表現を選択することをお勧めします。







「続行」という言葉は、一般的で抽象的すぎる場合もあります。正確さを追求し、特定のアクションを示します。

項目2（オプション）。説明

タイトルですでに述べられていることに追加するものがない場合は、説明を追加する必要はありません。













残念ながら、多くのシステムでは、3つの要素すべてを含む確認ダイアログに単一のテンプレートを使用しています。このような場合、必須ではない場合でも、説明を追加する必要があります。説明付きと説明なしの2つのテンプレートを作成し、メッセージに適したものを使用します。システムを変更できない場合は、少なくとも自分自身を繰り返さないようにしてください。例えば：

説明が必要な場合

ユーザーが他のアクションをトリガーするアクションを実行しようとすると、ユーザーに通知する必要があります。例えば：

• 関連アイテムの削除-ユーザーはアイテムを削除しようとしています。これにより、関連アイテムが削除されます。
  
  
  
  
  
  
  
  
  
  
• — , .
  
  
  
  
  
  
  
  
  
  
• — , , . ( , , . True story.)
  
  
  
  
  
  
  
  
  
  
• — , .
  
  
  
  
  
  
  
  
  
  

もう1つの一般的な例は、変更を保存せずにウィンドウを終了または閉じることです。ユーザーが不完全に入力されたフォームまたは要素作成ウィンドウを閉じた場合、実行されたすべての作業が無駄になり、最初からやり直す必要があることをユーザーに警告する必要があります。



たとえば、ニュースアプリケーションを操作するには、ユーザーは少なくとも5つのトピックを選択する必要があります。彼が5つ未満を選択してアプリケーションを終了しようとすると、すでに選択されているテーマは保存されません。この場合、これについてユーザーに警告する必要があります。









アクションが重要であり、元に戻すのが難しいほど、説明を慎重に検討する必要があります。重要な情報にユーザーの注意を引くのに役立つデザイン要素（色やパディングなど）を忘れないでください。



Typeformの良い例を次に示します。









一般に、説明は確認ダイアログのオプションの要素です。ユーザーが実行したいアクションの結果が彼にとって明白でない場合は、それを追加します。

タイトルと説明を組み合わせる

ユーザーがタイトルとボタンのラベルのみを読むと仮定します。アクションが深刻な結果をもたらし、ユーザーが説明を読めないことが心配な場合は、タイトルテキストにそれを含めてください。別のオプションは、それらを交換して、すぐに説明から始めることです。例えば：

• フォルダとそのすべての内容を削除しますか？
• データは保存されません。とにかく出て行け？
• これらの写真は、デバイスのギャラリーを含む、同期されたすべてのボールトから削除されます。写真を完全に削除しますか？

いつまでも、永遠に

アクションが元に戻せない場合は、報告してください。ユーザーは、急いで決定した結果からユーザーを保護するショッピングカートやその他の同様の機能に慣れています。そのような機会が提供されない場合は、アクションが元に戻せないことを直接通知し、それを元に戻したり、戻ったり、削除したアクションを復元したりすることはできません。これは、「回復の可能性がない」などの明確な表現の助けを借りて、タイトルですでに述べられているはずです。



Typeformの上記の例は、この原則を完全に示しています。



YouTubeでは、動画を削除するために追加の確認が必要です。ユーザーが特別なボックスをオンにするまで、削除ボタンにはアクセスできません。

より良いオプションはありますか？彼について話す時が来ました

ユーザーが不必要に何かを削除しようとしている、または問題を解決する可能性が低い別のアクションを実行しようとしていると思われる場合、確認ダイアログはこれについてユーザーに警告するのに最適な場所です。



Facebookの例を次に示します。

要素3。ボタン

確認ダイアログのボタンで作業するときは、次のガイドラインに従ってください。

1. ボタンを区別しやすく、できるだけ理解しやすいものにする
   
   
   
   ボタンは、混同しないように、明確で区別しやすい2つのオプションにする必要があります。各オプションは非常に自明である必要があります。タイトルが適切に表現されている場合、ボタンを求められた質問に対する2つの反対の答えを見つけるのははるかに簡単です。
   
   
   
   このアイデアを完全に示すAVGの例を次に示します。
   
   
   
   
   
   
   
   
   
   
2. 
   
   
   
   «» «» «» «», , / , , , . , ( – ), .
   
   
   
   , , : «, »; « »; «, »; « »; «, » .
   
   
   
   , «» «», «» («, ») « » (« »). , («»).
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   Forest, Chrome. : , , , , .
   
   
   
   , , , . , ? , – , .
   
   
   
   
   
   
   
   
   
   , . , .
   
   
   
   , Galaxy. , , :
   
   
   
   
   
   
   
   
   
   
   
   , , «/» «/», «» , . , . «» «», , .
3. タイトルとボタンに同じ動詞を使用して、ユーザーがボタン間の接続を簡単に追跡できるようにします。
   
   
   
   
   
   
   
   

次のGooglePhotosの例は、確認ダイアログのテキストを設計するための2つの原則を示しています。

1. 一貫性を保つ-ボタンをクリックすると確認ダイアログがポップアップするボタンのラベルに注意し、同じ表現を使用してください。この例では、ユーザーが[ゴミ箱を空にする]ボタンをクリックするため、確認ダイアログでも[ゴミ箱]という単語が使用されます。
2. 主なことを報告してください-このアクションでは、主なことはバスケットが空になることではなく、その中身が永久に削除されることです。したがって、ボタンのテキストでは、ゴミ箱を空にするのではなく、データを削除することにユーザーの注意を引くことが重要です。さらに洗練された解決策が可能です。文言を組み合わせて、「空のゴミ箱」ではなく「ゴミ箱の内容を削除」ボタンと呼ぶことができます。

まとめましょう

以下は、確認ダイアログの3つの要素すべてを改良する最後の例です。



新しい見出しでは、特定のアクションについて直接質問します。



新しい説明では、このアクションの結果についてユーザーに通知します。



新しいボタンでは、コンテキスト付きの読みやすいオプションを提供します。







***

実際のアプリケーション

では、この記事から確認ダイアログのテキストにどのようなライフハックを入れることができますか？要約しましょう：



ヘッダー：

• 見出しは短くシンプルに保ち、理想的には2つの相互に排他的な回答の選択肢で質問をします。
• 「あなたは本当に...」のような導入フレーズを削除します不要な「水」。
• あいまいさを避け、特定のアクションに名前を付けます。「キャンセル」および「続行」という言葉は、特に注意深い取り扱いが必要です。

説明：

• 見出しの質問に追加するものがない場合は、説明を追加しないでください。
• 他のアクションをトリガーするアクションと元に戻せないアクションの説明を追加します。
• アクションが不適切と思われる場合は、別のオプションを提案してください。
• 重要な情報に注意を引くために色とパディングを使用してください。
• 説明はタイトルと組み合わせることができます。とにかく多くの人はそれらを読みません。

ボタン：

• ボタンのテキストでは、タイトルの質問に対する回答を使用してください。
• メインボタンにアクション名を追加します（例：「はい、終了します」）。見出しの動詞と一致する方が良いです。

そしてさらに：

• 重要でないアクションおよびキャンセルできるアクションの場合は、確認ダイアログを元に戻すポップアップウィンドウに置き換えることをお勧めします。

これらのヒントは、当社製品のUIの開発で使用される原則を反映しています。たとえば、Directum RXでは、リンクを削除するために、確認ダイアログを「ポップアップ」に置き換えました。









そして、バージョンの1つでは、ダイアログの面倒な定式化を取り除きました。

ボーナス：個人的な経験からのアイデア

自分たちで使用している記事の推奨事項に、さらに2、3のライフハックを追加できます。はい、どうぞ：

• , . RX 3.5. . .
  
  
  
  
  
  
  
  
  
  
  
  , : , «». .
• – , , .
  
  
  
  
  
  
  
  
  
  
  
  , – , .
• , . : «» «», «» – «». «».
• :
  
  
  • «», «» «», «» ;
  • abort, kill, terminate – end;
  • failed, unable – cannot;
  • bad – incorrect;
  • invalid – is not valid.
  
  
  , : « …» – , . , ?

もちろん、私たちは望んでいません-そして、私たち自身と他の人の経験を採用した後、私たちは再び理想的なUIへの無限の道を歩み始めました。



次の原則のどれを使用しますか？たぶんあなたはこのリストに追加するものがありますか？コメントを書いて、質問をしてください-私たちは経験を交換させていただきます。