Что такое удобное решение для редактирования шаблонов электронной почты с заменой переменных?

9

Я работаю над системой, в которой мы полагаемся на множество администраторов / менеджеров, отправляющих электронные письма пользователям из базы данных. Одной из ключевых функций является возможность отправки по электронной почте нескольким людям одновременно, с конкретной информацией, относящейся к каждому из них. Еще одна ключевая особенность - возможность создавать электронные письма вручную, поскольку, как правило, необходимо каждый раз слегка их модифицировать, но наличие базового шаблона экономит много времени.

Для этого у нас есть типичное решение «шаблоны», где у нас есть шаблон, который выглядит примерно так:

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

Проблема, с которой мы сталкиваемся, состоит в том, что (как мы и ожидали) менеджеры не понимают идею «переменных» целиком, а делают такие вещи, как их перезапись, что не позволяет им отправлять по электронной почте более одного человека одновременно, предполагая, что они не собираются заменяться и что система сломана, или даже необъяснимые вещи, такие как "Hello {{John}}".

Большая проблема в том, что это не относится, как обычно, к разделу «администратор», где только несколько опытных пользователей имеют доступ к редактированию автоматически отправляемых шаблонов, и они должны знать, что они делают. Каждый пользователь системы сталкивается с этой проблемой.

Очевидным решением будет заменить переменные перед тем, как показывать этот шаблон для редактирования пользователем, но это не работает при отправке электронной почты нескольким людям.

Это кажется довольно распространенной проблемой, и мы надеемся, что кто-то уже решил ее.

Вы видели где-нибудь / создали / можете придумать хорошие решения этой проблемы?

Обновить

То, что я в итоге сделал, основываясь на ответе Дэниела Б., это обнаружение, основанное на позиции курсора и позиции {{}} в коде, находится ли пользователь в данный момент «внутри переменной» или «снаружи». Внутри я показываю небольшой фрагмент текста под большой текстовой областью, объясняющий, что он будет заменен, и что они могут полностью удалить его, если захотят, но не могут его редактировать.

Я делаю это onClick, onChange, onKeyDown, onKeyUp. Для событий «ключ», если мы находимся внутри переменной, я возвращаю значение ИСТИНА только в том случае, если код клавиши является одним из немногих «навигационных» клавиш. В противном случае я возвращаю FALSE, что эффективно предотвращает редактирование этой переменной.

Это не идеально, но это было очень дешево и кажется эффективным.

Даниэль Маглиола
источник
Комментарий для людей с большим количеством представителей, чем у меня: (Я новичок в UX) Не могли бы вы отметить этот вопрос? Все теги, о которых я думаю, здесь еще не существуют: шаблоны переменных, пользовательский интерфейс, удобный для пользователя, редактируемый
Как представлены эти шаблоны? Это просто текст в редакторе?
ChrisF
Прямо сейчас, да, когда вы выбираете группу людей и нажимаете «Сообщение», вы получаете «всплывающее» диалоговое окно с большой текстовой областью, в которой есть содержимое шаблона. Это на самом деле markDown, хотя, очевидно, наши пользователи к этому не привыкли, это выглядит как обычный текст. У нас нет редактора wysiwyg, и мы открыты для его использования, если он поможет, но сам по себе это не так, люди все равно не поймут переменные
Основная проблема здесь в том, что ваши менеджеры не понимают переменные. Если вы не решите эту проблему, ваши решения бросаются на симптомы. Не все проблемы нуждаются в решении кодирования.
Темная ночь
Согласовано. Я бы хотел научить людей, но мы не можем просить их читать руководства, поэтому я ищу идеи о том, как сделать их понятными для них. Идеи?
Даниэль Маглиола

Ответы:

3

По запросу из комментариев в ответе ChrisF, вот одно решение, которое я использовал в прошлом:

  • Используйте WinForms RichTextBox, чтобы позволить пользователю редактировать текст шаблона.
  • Разрешить перетаскивание (или другую вставку) переменных или заполнителей в RichTextBox.
  • Запретите редактирование самих переменных, проверив в текущем месте курсора разделители ваших переменных (символы {{и}}, в вашем примере).

Моя реализация в итоге выглядела примерно так:

Пример RichTextBox

Он имеет необязательное выделение переменной, чтобы отличать ее от стандартного текста.
Переменные разделители на самом деле есть, они просто имеют одинаковые цвета переднего плана и фона.

Очевидно, это сильно отличается от вашей реализации, основанной на HTML. Я бы, наверное, посмотрел, как реализован редактор Gmail; кажется, что он похож на текстовое поле, но может иметь встроенные изображения (смайлики и т. д.), что похоже на поведение, которое вы ищете.

Даниэль Б
источник
4

Я бы подумал об изменении способа представления шаблона пользователю, чтобы вы могли сделать части, которые будут изменены кодом, недоступными для редактирования. Что-то вроде этого:

макет

Биты, которые вы не хотите, чтобы пользователь изменил, теперь недоступны для редактирования. Вы можете включить кнопку закрытия, чтобы они могли удалять элементы, если они им не нужны. Вы также можете включить пояснительный текст и / или всплывающие подсказки, чтобы объяснить, что {{...}}означают эти биты и почему их следует оставить в покое.

Использование чего-то вроде Silverlight / WPF WrapPanelдля каждого абзаца может дать вам то, что позволяет каждой части (редактируемой и не редактируемой) течь по мере того, как контролируемый пользователем текст увеличивается и уменьшается.

ChrisF
источник
Основная проблема в том, что я не могу сделать текстовые поля одновременно «встроенными» и «многострочными» ... И, таким образом, макет был бы очень странным ... Если бы вы могли отредактировать это «Уважаемый», и переменная переместилась бы правильно, и было еще одно текстовое поле справа от него, волшебным образом завернутое, это было бы УДИВИТЕЛЬНО. Но я не понимаю, как я могу это реализовать. Альтернативой, с которой мы пытались работать, является наличие «нередактируемых» блоков внутри большой текстовой области, чтобы вы не могли изменить их содержимое, но вы можете удалить их (с помощью «X»). Мы не смогли сделать эту работу. Вы видели это где-нибудь? Спасибо!!!
@DanielMagliola что-то вроде Silverlight / WPF WrapPanelдля каждого абзаца может дать вам что-то, что вы хотите.
ChrisF
@DanielMagliola в прошлом, я смог добиться этого с помощью WinForms RichTextBox. «Переменные» можно перетащить в richtextbox, и к нему будет применен стиль, чтобы было ясно, что это заполнитель. Хитрая часть предотвращает изменения переменных. Одним из решений является проверка текущего расположения курсора на наличие символов тега и запрет на редактирование в этом случае.
Даниэль Б
Я забыл упомянуть об этом, это приложение HTML, но все же эта идея применима. Мне нравится "проверка позиции курсора и запрет на редактирование", спасибо за это !!
Даниэль Маглиола
@DanielB: На самом деле, не могли бы вы дать ответ, я думаю, у вас есть победитель! Спасибо!!
Даниэль Маглиола