置換変数を使用してメールテンプレートを編集するためのユーザーフレンドリーなソリューションは何ですか?


9

私は、データベースからユーザーにメールを送信する多くの「管理者/マネージャー」に依存しているシステムに取り組んでいます。主な機能の1つは、同時に複数の人にメールを送信できることです。もう1つの重要な機能は、メールを手作業で作成できることです。これは、毎回わずかに変更する必要がある傾向があるためですが、基本的なテンプレートを使用すると、多くの時間を節約できます。

このため、典型的な「テンプレート」ソリューションがあり、次のようなテンプレートがあります。

Hello {{recipient.full_name}},

Your application to {{activity.title}} has been accepted. 
You have requested to participate on dates {{application.dates}}, in role {{application.role}}
Blah blah blah

私たちが抱えている問題は、(予想どおり)マネージャーが「変数」のアイデア全体を理解していないこと、そしてそれらを上書きするようなことをしていることです。それらは置き換えられず、システムが壊れているか、または「こんにちは{{ジョン}}」のような不可解なものですらある。

大きな問題は、これがいつものように、自動的に送信されるテンプレートの編集にアクセスできるパワーユーザーが数人しかいない "admin"セクションに追いやられておらず、何をしているのかを知っていることが期待されることです。システムのすべてのユーザーがこの問題にさらされます。

明白な解決策は、ユーザーが編集できるようにこのテンプレートを表示するに変数を置き換えることですが、複数の人にメールを送信する場合は機能しません。

これはかなり一般的な問題のようですが、誰かがすでに解決していることを期待しています。

この問題の適切な解決策をどこかで見た/作成した/思いつくことができますか?

更新

ダニエルBの答えに基づいて私が最終的に行ったのは、カーソル位置とコード内の{{}}の位置に基づいて、ユーザーが現在「変数内」か「外」かを検出することでした。内部では、大きなテキスト領域の下に小さなテキストを表示して、これが置き換えられること、および必要に応じて完全に削除できるが、編集できないことを説明しています。

私はこれをonClick、onChange、onKeyDown、onKeyUpで行います。「キー」イベントの場合、変数内にいる場合、keyCodeがいくつかの「ナビゲーション」キーの1つである場合にのみ、TRUEを返します。それ以外の場合は、FALSEを返します。これにより、その変数の編集が事実上防止されます。

完璧ではありませんが、とても安く、効果があるようです。


私よりも担当者が多い人へのコメント:(UXは初めてです)この質問にタグを付けていただけますか?私が考えているすべてのタグはまだここにはありません:テンプレート変数ユーザーインターフェイスユーザーフレンドリーユーザー編集可能

これらのテンプレートはどのように提示されますか?エディターのプレーンテキストですか?
ChrisF

今のところ、はい、たくさんの人を選択して[メッセージ]をクリックすると、テンプレートのコンテンツがすぐに表示される大きなテキストエリアのある[ポップイン]ダイアログが表示されます。これは実際にはmarkDownですが、明らかにユーザーは慣れていませんが、プレーンテキストのように見えます。wysiwygエディターはありません。役立つ場合はそれを使用できますが、それだけでは役に立たないため、人々は変数を理解できません

ここでの根本的な問題は、マネージャーが変数を理解していないことです。あなたがその問題を修正しない限り、あなたの症状であなたの解決策を投げます。すべての問題にコーディングソリューションが必要なわけではありません。
ダークナイト

同意した。人を教育できるようになりたいのですが、マニュアルを読むように頼むことはできないので、簡単に理解できるようにする方法についてのアイデアを探しています。アイデア?
Daniel Magliola

回答:


3

ChrisFの回答のコメントからのリクエストにより、これまでに使用した1つの解決策を以下に示します。

  • WinForms RichTextBoxを使用して、ユーザーがテンプレートのテキストを編集できるようにします。
  • 変数またはプレースホルダーのRichTextBoxへのドラッグ/ドロップ(または他の挿入)を許可します。
  • 変数の区切り文字(例では{{および}}記号)のカーソルの現在の場所をチェックして、変数自体の編集を禁止します。

私の実装は次のようなものになりました:

RichTextBoxの例

標準のテキストと区別するために、オプションで変数を強調表示できます。
変数デリミタは実際にありますが、偶然に前景色と背景色が同じです。

明らかに、これはHTMLベースの実装とはかなり異なります。私はおそらくGmailのエディターがどのように実装されているかを調べます。それはtextareaに似ているようですが、探している動作に似ているインライン画像(スマイリーなど)を持つことができます。


4

ユーザーがテンプレートを表示する方法を変更して、コードによって変更される部分を編集できないようにすることを検討します。このようなもの:

モックアップ

ユーザーに変更させたくないビットは編集できなくなります。閉じるボタンを含めて、不要なアイテムを削除できるようにすることもできます。また、説明のテキストやツールチップを含めて、{{...}}ビットの意味とそれらをそのままにする理由を説明することもできます。

WrapPanel各段落にSilverlight / WPFのようなものを使用すると、ユーザーが制御するテキストが拡大および縮小するときに、各部分(編集可能および編集不可)が流れるようになることがあります。


これの主な問題は、「インライン」と「マルチライン」の両方のテキストボックスを作成できないことです...したがって、レイアウトは非常に奇妙です...その「ディア」を編集して変数が移動するとそう、それに魔法のように包まれた別のテキストボックスがありました。これは素晴らしいでしょう。しかし、これを実装する方法がわかりません。私たちが取り組んでいる代替策は、大きなテキストエリア内に「編集不可能な」ブロックを置くことです。これにより、それらのコンテンツを変更することはできませんが、削除することができます(「X」を使用)。この作業を行うことができませんでした。どこかで見ましたか?ありがとう!!!

@DanielMagliolaよくWrapPanel各段落のSilverlight / WPFのようなものはあなたが望むようなものを与えるかもしれません。
ChrisF

@DanielMagliolaは以前、WinForms RichTextBoxでこれを実現できました。「変数」をrichtextboxにドラッグアンドドロップし、スタイルを適用してプレースホルダーであることを明確にします。トリッキーな部分は、変数の変更を防ぐことです。1つの解決策は、タグ文字の現在のカーソル配置を確認し、そうであれば編集を禁止することです。
ダニエルB

これについて言及するのを忘れていました。これはHTMLアプリですが、それでもその考えは当てはまります。「カーソルの位置をチェックして編集を禁止する」が好きです、ありがとうございました!!
Daniel Magliola

@DanielB:実際に、あなたはその応答をしていただけませんか、私はあなたが勝者を持っていると思います!ありがとうございました!!
Daniel Magliola
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.