プライベートなメモ/メッセージではなく、パブリックなメモ/メッセージを書いていることをユーザーに認識させる
私たちは、社内スタッフがアクセスでき、クライアントもアクセスが制限されているカスタムビジネスアプリケーションを構築しています。
スタッフがお互いにコメント/メッセージを残すオプションがあります。また、スタッフがクライアントにメッセージを残すオプションもあります。
私が起こしたくないのは、スタッフがお互いにメッセージを残していると思っていることですが、実際にはクライアントへのメッセージです。
UIは現在、以下のようなテーブルです。緑色の四角をクリックすると、各アイテムにメッセージを残すことができるメモモーダルが開きます（各アイテムはテーブルの行です）。
内部メモではなくクライアントメモを残そうとしていることをスタッフのユーザーに警告する方法は何でしょうか？
私はクライアントのメモ、またはキャプチャに似た何かを確認することを考えていました（それほど複雑ではありませんが、簡単な数学の質問のようなものなので、止めて考える必要があります）。
最初に、テーブル/グリッドのノートに異なる（そして大きな）アイコンを使用します。
- 内部メモ用の南京錠が付いたメモのアイコン
- および外部メモのチャットシンボルのアイコン
次に、アイコンを近づけて、アイコンの違いをより目立たせるようにします（ユーザーが1つしか気付かないようにするため）。ただし、タッチスクリーンには近すぎないことを確認してください。
次に、メモの書き込みUIを変更して、タイトルにアイコンを追加し、その後に「書き込み内部メモ」または「書き込み顧客へのメモ」を続けます。
次に、タイトルの最後に表示される[change]ボタンをクリックしてユーザーが混乱した場合に、ノートタイプを変更できるようにします。
最後に、外部メモの確認ボックスを追加し、新しいユーザーまたは特定の統計情報を持つユーザー（たとえば、多くのメモを作成していないユーザー）にのみ確認ボックスを表示することを検討します。
ダイアログの例：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
違いがあることに注意してください：
- アイコン
- タイトル
- 「メモを追加」テキスト
- ボタンのテキスト
- ボタンの動詞（保存と送信）
- 間違ったダイアログを入力したユーザー用の別のリンク
編集：
送信ボタンの横に「このノートは公開の準備ができています」というチェックボックスを追加して、違いを見逃さないようにすることもできます。
あなたはそれらにそのように明示的にラベルを付けるべきだと私は言うでしょう：
These notes are visible to the client!と明示的に示されている緑色のクライアントノートアイコンにカーソルを合わせると、ブートストラップのようなポップオーバー通知が表示されることもあります。
更新
あなたのコメントを読んだ後、私はアラート、確認、キャプチャなどを追加することは、ユーザーが最終的にそれを顔から出すために必要な最小限の労力を費やすことを最終的に学ぶであろう単なる障害物であることを述べるために答えを更新したいと思います。
数学の質問またはキャプチャは必ずしもAre you sure you should be doing this?に変換されるわけではなく、We don't want spam so complete this mindless task please.に変換されます
保存のポイントまでユーザーを教育することは、私の考えでは、最後の1秒間に何かが発生するだけでなく、常に思考プロセスを呼び出す必要があるため、最良のルートです。
それで、These notes will be visible to the clientのような赤いテキスト行をテキストボックスの下に追加することをお勧めします。
まず第一に、neverユーザーが何かを読むことを期待します。ない。で。すべて。彼らはそうしません、そしてあなたが彼らにラベルがそうだったと説明している時までに正しい！そこに！オン！彼らの！スクリーン！、損傷はすでに行われています。
顧客向けのメモを作成するためのマイクロインタラクションを、内部メモを書く場合とは著しく異なり、少し難しいようにすることを検討してください。
たとえば、「デザインノート」列のアイコンの1つをクリックするだけで、ユーザーが内部ノートを作成できるようにすることができます。
[顧客メモ]列で、クリックアンドホールドして、[顧客メモの作成]（または適切な言語）を示すプルダウンメニューを表示するように要求できます。列のアイコンには、おなじみの「▾」記号を付けて、それが単なるボタンではなくメニューであることを知らせることができます。
「安全な」内部メモのインタラクションスタイルを潜在的に「危険な」顧客メモよりも簡単にすると、ユーザーは一時停止して、別の対象者向けに書いていることを思い出すことができます。
Request Tracker（トラブルチケットシステム）はこれを非常にうまく処理します。
コメント（内部メッセージ）と通信（エンドユーザーに送信される）の両方があります。
メッセージを作成するとき、textareaの背景はコメント用に白、通信用に薄い赤（#fcc）です。
赤い背景色は、あなたを一瞬停止させ、これを誰に送るかを考えさせます-これはうまくいきます。誤ってクライアントメッセージをスタッフに送信することは大したことではありませんが、クライアントメッセージをクライアントに送信することはできます。
少し検閲された、Request Trackerによる処理方法のスクリーンショットをいくつか示します。
コメント-内部コミュニケーション
Corespondence-クライアント通信
スクリーンショットからわかるように、テキスト領域の色が変わります。この画面からコメントと通信を切り替えたり、CCにユーザーを追加したりすることもできます。色の変更のおかげで、後戻りすることはほとんどなく、スタッフにコメントのみをお客様に送信しています。
最もシンプルで効果的な解決策は、両方のモーダルのラベルとインターフェースを変更することだと思います。したがって、2つの機能の間にコンテキストと視覚的な違いがあります。これで、2つの異なる関数のルックアンドフィールはほぼ同じになりました。そのため、人々はそれが同じように機能し、2つの異なる関数の出力を互いに混同すると考えるでしょう。
私は内部設計ノートに同じようにラベルを付けることをお勧めします：「設計ノート」とクライアントノート：「クライアントへのメッセージ」。 「デザインノート」を実際の（黄色の）付箋のように見せてください。 「クライアントへのメッセージ」のインターフェースを吹き出しに変更すると、メッセージのように見えます。
クライアントへのメモは他のスタッフにも社内で表示されますか？クライアントへのメモは、内部で使用されるメモと同じ構造と情報を持っていますか？
その場合は、メッセージの作成画面で、[投稿]ボタンの直前に次のようなシンプルなチェックボックスを使用することを検討してください。
[]このメモをクライアントが利用できるようにする
[投稿メモ]キャンセル
あなたが持っているテーブルで、デザインノートとクライアントノートを組み合わせてノートタイプのような単一の列にして、「デザイン（プライベート）」または「クライアント（パブリック）」を表示することを検討してください。色違いでいいです。
基本的な設計原則を使用して、要素を視覚的に区別します。
色、レイアウト、タイポグラフィ、スケールを使用して、2種類の異なるノートがあることを基本的なレベルでユーザーに示すことができます。
他のほとんどのコメンターは、これらの概念（レイアウト）の1つを強調しましたが、視覚的な区別を作成するために、他の設計の基本に取り組んでいません。最も効果的な設計ソリューションでは、これらの要素をすべて利用して、2種類のメモが作成されていることをユーザーに示す必要があります。私は@dlandに同意します。ユーザーが何かを読むことに依存してはいけません（これは二次的な視覚的な手がかりとなるはずです）。そのため、区別を視覚的に伝える必要があります。
これを実際に設計する時間はありませんが、この画像を見て、上記との違いに注意してください。
単純な変更を加えると、さまざまなものを見ていることが直感的にわかりやすくなります。列に色を追加すると、それらが異なるものであることを視覚的に示します。さらに、赤の色合いを使用することは、これが潜在的に危険である可能性があるものである可能性があることを示します。異なる図像を使用することも、これら2つのタイプのアイテムが異なることを示す追加の視覚的手掛かりです。
これらの視覚的な合図は、モーダルダイアログに繰り越されると、要素間の区別をさらに強化します。
これらはせいぜい初歩的なものですが、私が何を得ているかを見ることができます。最終的に、設計上の問題は、これらが2つの別個のアイテムであることを示すのに十分なコントラストがないことです。基本的な設計原則を利用して操作することで、より優れた設計ソリューションを作成できます。
別の見方をすれば、問題は情報アーキテクチャを改善することでもっと簡単に解決できると思います。クライアントへのメモはより潜在的に危険であるため、おそらくこれへのアクセスはアプリケーションの別の部分に配置されます。オブジェクト自体内のクライアントへのメモ機能にアクセスするのではなく、メッセージを作成するメッセージングシステムを使用できます。次に、そのコメントを適用するオブジェクトを選択します。
メッセージの関係構造を逆にすることで、異なるタイプのメッセージを作成することがより直感的になります。私の意見では、これが最善の総合的な解決策になるでしょう。
デザインノートを作成するには、まずobjectにアクセスしてから、それにノートを添付します
クライアントのメモを作成するを行うには、まずnoteにアクセスしてから、それにオブジェクトをアタッチします
さらに、理論的には同じクライアントノートを複数のオブジェクトに適用できるため、これにより、ユーザーは単一のノートを複数のオブジェクトに添付できます。そうしないと、同じメモを複数のクライアントオブジェクトに添付するために、再入力またはコピーアンドペーストする必要があります。もちろん、これはアプリケーションに関連する場合とそうでない場合がありますが、理論的な観点からは適用できます。
最終的には、基本的なデザインコンセプト（色、タイポグラフィ、スケール、レイアウト）の改善とともに情報アーキテクチャ（つまり、さまざまな領域のさまざまな種類のメモにアクセスする）を改善することにより、適切に設計されたアプリケーションを作成します。
私はそれらのファンではありませんが、これが過去にクライアントに送信された内部のディスカッションを持っているほど重要である場合は、古いアラートボックスが最も適している可能性があります。
過去に問題があった場合は、ワークフローに変更を加える可能性があります。つまり、クライアントのメモは、マネージャー/監督者が確認するまで非表示のままになります。
次のように、列をより明確に区別する必要があると思います（両方の列を1つの疑似列に移動しました）。
上の写真で：
- アイテムに添付されているコメントの数を示すために番号付きリンクを使用しました。同様のアイコンの代わりに番号を使用すると、認識が向上します。
- これらの列を作成するために異なる色を使用しました視覚的に異なる。
「新規メッセージ」ダイアログについて。同じトリックを実行すると思います。タイトルや「送信」ボタンに異なる色を使用して、視覚的に区別しやすくします。
ここでは、これまでに述べたまったく異なるアプローチを示します。送信するユーザーへのメモは常に同じであるという考えを考慮すると、送信先は問題になります。
これは人気のあるアジャイルプログラムJIRAの例です
送信ボタンの横にコメントを書くときは、アプリケーションによって設定される「対象読者」のドロップダウンです。そのため、ノートを見ることを想定していない人には表示されませんが、すべてのアクセス権を持つ人にはすべてのノートが表示されます。
だから私はあなたのモーダルを次のように修正します：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ここで、（1）はモーダルウィンドウの新しいドロップダウンで、各オーディエンスを選択すると（2）送信するメモのタイプで更新されます。プログラムで、処理するウィンドウが1つだけになり、AJAXを通じて、対象とするオーディエンスに応じて各ウィンドウを更新します。
さらに、オーディエンスを選択するまで送信できませんでした。追加したら、[メモを追加]ボタンが表示されます。
「保存」ボタンのテキストをそれぞれ「パブリックに保存」と「プライベートに保存」（または同様のもの）に変更するのはどうですか。さらにはっきりさせたい場合は、色を変えてください。しばらくすると、ユーザーは色をプライベート/パブリックメッセージに関連付けます。
いくつかのオプション
- 彼らが入っているテキストエリアに透かしを入れてください
- タブアウトでそれについて彼らに警告する
- テキストの入力を開始したら、テキスト領域の境界線を特定の方法で強調表示します
ここでの目的は、社内スタッフが注意を向けていることを確認することです。したがって、モーダルを変更しても意味がありません。内部とクライアントの両方に同じモーダルが使用されるようにします（もちろん、コンテンツの見出しは別々になります）。これによりコードも最適化され、冗長性を回避できます。
代わりに、テーブルのレンダリングを1回変更します。
- ノートの両方の列を1つの列にマージする
- この結合された列の上部に、選択ノート/内部ノート/クライアントノートとしてのオプションを含むドロップダウンを追加します
これがどのように役立つか：
- スタッフがドロップダウンに移動するたびに適切なオプションを選択すると、そのメモのみが表示されます。
- 一度に1種類のメモしか表示されないため、メモの送信中に混乱が生じることはありません。
これは、設計とコードの変更という点で最も安価な方法の1つです。必要なビジュアルを教えてくれますが、これは理解できるはずです。
クリックしてメモを作成するときにポップアップを表示し、メモが完成したら送信ボタンを押すと、「このメモはクライアント向けです。続行するには「はい」をクリックしてください」という警告が表示されます。 "または"これは設計チーム用です。続行するには[はい]をクリックしてください。[はい]をクリックすると、このページに戻り、ほぼフェイルセーフシステムになります。
表では、@ alexeypegovに従ってそれぞれのカテゴリで---（メモが存在するかどうか（およびいくつあるか）を示します）を示します。アイコンをクリックした後、顧客メモがないことがわかった場合は、貴重な時間とエネルギーを浪費しています。
ポップアップのデザインに関しては、顧客のメモをより複雑にするアプローチ（公開予定のチェックボックス、または-恐ろしいことに-本当に公開したい-このメモのダイアログ）は好きではありません。タスクはシンプルなので、インタラクションデザインもそうです。
そのために、私は異なるダイアログを明確に異なるように設計します：顧客のメモに「TO：」と顧客名（画像、住所など）を追加し、スタッフのメモには単に「<username>は言った：」。送信ボタンには別の用語を使用してください。 「保存」（短い）と「顧客に公開」（長い）の比較。遊び心に応じて、メモ用紙の背景と文字のレイアウトのようなビジュアルを使用します。
2つの部屋について考えてください。1つはスタッフと話す場所、もう1つはクライアントと話す場所です。通常、さまざまな家具があり、1つはコーヒーを用意していますが、ドアの機能は同じです。 ユーザーがすぐにクライアントの存在を感じるのに十分な違いがあるさまざまなダイアログを提示します。
赤字の大きなテキストを取り除くことをお勧めします。代わりに、テキスト領域の背景とクライアントノート列に特定の色（明るいオレンジなど）を使用します。また、「保存」の代わりに「クライアントと共有」を使用します。
モーダルタイトルを単に変更することの問題点：
（民間） デザインノート
そして..