Qu'est-ce qu'une solution conviviale pour éditer des modèles d'e-mails avec des variables de remplacement?

9

Je travaille sur un système où nous comptons sur de nombreux "administrateurs / gestionnaires" pour envoyer des e-mails aux utilisateurs à partir de la base de données. L'une des principales caractéristiques est de pouvoir envoyer plusieurs courriers électroniques à la fois, avec des informations spécifiques pertinentes pour chacun d'eux. Une autre caractéristique clé est de pouvoir créer des e-mails à la main, car il est généralement nécessaire de les modifier légèrement à chaque fois, mais avoir un modèle de base fait gagner beaucoup de temps.

Pour cela, nous avons la solution "modèles" typique, où nous avons un modèle qui ressemble un peu à ceci:

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

Le problème que nous rencontrons est évidemment que (comme nous nous y attendions), les gestionnaires ne comprennent pas toute l'idée des "variables", et ils font des choses comme les écraser, ce qui ne leur permet pas d'envoyer plus d'une personne à la fois, en supposant ceux-ci ne vont pas être remplacés et que le système est cassé, ou même des choses inexplicables comme "Bonjour {{John}}".

Le gros problème est que cela n'est pas relégué, comme d'habitude, dans une section "admin" où seuls quelques utilisateurs expérimentés ont accès à la modification des modèles qui sont envoyés automatiquement, et ils sont censés savoir ce qu'ils font. Chaque utilisateur du système est exposé à ce problème.

La solution évidente serait de remplacer les variables avant d' afficher ce modèle pour que l'utilisateur le modifie, mais cela ne fonctionne pas lors de l'envoi de courriels à plusieurs personnes.

Cela semble être un problème assez courant, et nous espérons en quelque sorte que quelqu'un l'a déjà résolu.

Avez-vous vu quelque part / créé / pouvez-vous penser à de bonnes solutions à ce problème?

Mise à jour

Ce que j'ai fini par faire sur la base de la réponse de Daniel B était de détecter, en fonction de la position du curseur et de la position de {{}} dans le code, si l'utilisateur était actuellement "à l'intérieur d'une variable" ou "à l'extérieur". À l'intérieur, je montre un petit morceau de texte sous la grande zone de texte expliquant que cela va être remplacé, et qu'ils peuvent le supprimer complètement s'ils le souhaitent, mais ils ne peuvent pas le modifier.

Je fais cela onClick, onChange, onKeyDown, onKeyUp. Pour les événements "clé", si nous sommes à l'intérieur d'une variable, je ne renvoie VRAI que si le code clé est l'une des quelques clés "de navigation". Sinon, je retourne FALSE, ce qui empêche effectivement l'édition de cette variable.

Ce n'est pas parfait, mais c'était très bon marché et semble efficace.

Daniel Magliola
la source
Commentaire aux personnes ayant plus de représentants que moi: (Je suis nouveau sur UX) Pourriez-vous s'il vous plaît baliser cette question? Toutes les balises auxquelles je pense n'existent pas encore ici: variables de modèles interface utilisateur conviviale modifiable par l'utilisateur
Comment ces modèles sont-ils présentés? S'agit-il simplement de texte brut dans un éditeur?
ChrisF
En ce moment, oui, lorsque vous sélectionnez un groupe de personnes et cliquez sur "Message", vous obtenez une boîte de dialogue "pop-in" avec une grande zone de texte qui contient le contenu du modèle. Il s'agit en fait de markDown, bien que de toute évidence nos utilisateurs n'y soient pas habitués, cela ressemble à du texte brut. Nous n'avons pas d'éditeur wysiwyg, et nous sommes prêts à en utiliser un si cela peut aider, mais en soi ce n'est pas le cas, les gens ne comprendront toujours pas les variables
Le problème fondamental ici, c'est que vos gestionnaires ne comprennent pas les variables. À moins que vous ne résolviez ce problème, jetez vos solutions aux symptômes. Tous les problèmes n'ont pas besoin d'une solution de codage.
Darknight
D'accord. J'adorerais être en mesure d'éduquer les gens, mais nous ne pouvons pas leur demander de lire des manuels, évidemment, alors je cherche des idées sur la façon de le rendre facilement compréhensible pour eux. Des idées?
Daniel Magliola

Réponses:

3

À la demande des commentaires dans la réponse de ChrisF, voici une solution que j'ai utilisée dans le passé:

  • Utilisez un RichTextBox WinForms pour permettre à l'utilisateur de modifier le texte du modèle.
  • Autorisez le glisser / déposer (ou toute autre insertion) de variables ou d’espaces réservés dans la RichTextBox.
  • Interdisez l'édition des variables elles-mêmes en vérifiant autour de l'emplacement actuel du curseur les délimiteurs de vos variables (les symboles {{et}}, dans votre exemple).

Mon implémentation a fini par ressembler à ceci:

Exemple RichTextBox

Il a la surbrillance facultative de la variable pour la différencier du texte standard.
Les délimiteurs variables sont réellement là, ils ont juste les mêmes couleurs de premier plan et d'arrière-plan.

Évidemment, cela est très différent de votre implémentation, qui est basée sur HTML. J'examinerais probablement la façon dont l'éditeur de Gmail est implémenté; il semble être similaire à une zone de texte, mais est capable d'avoir des images en ligne (smileys, etc.), ce qui est similaire au comportement que vous recherchez.

Daniel B
la source
4

J'envisagerais de changer la façon dont le modèle est présenté à l'utilisateur afin que vous puissiez rendre les parties qui seront modifiées par le code non modifiables. Quelque chose comme ça:

maquette

Les bits que vous ne souhaitez pas que l'utilisateur modifie ne sont plus modifiables. Vous pouvez inclure un bouton de fermeture afin qu'ils puissent supprimer les éléments s'ils n'en ont pas besoin. Vous pouvez également inclure un texte explicatif et / ou des info-bulles pour expliquer ce que {{...}}signifient les bits et pourquoi ils doivent être laissés seuls.

L'utilisation de quelque chose comme un Silverlight / WPF WrapPanelpour chaque paragraphe peut vous donner quelque chose qui permet à chaque partie (modifiable et non modifiable) de circuler à mesure que le texte contrôlé par l'utilisateur grandit et se rétrécit.

ChrisF
la source
Le principal problème avec cela est que je ne peux pas rendre les zones de texte à la fois "en ligne" et "multi-lignes" ... Et donc la mise en page serait extrêmement bizarre ... Si vous pouviez éditer ce "Cher" et la variable se déplacerait à droite, et il y avait une autre zone de texte à droite, enveloppée comme par magie, ce serait IMPRESSIONNANT. Mais je ne vois pas comment je peux implémenter cela. L'alternative avec laquelle nous essayons de travailler est d'avoir des blocs "non modifiables" dans une grande zone de texte, de sorte que vous ne pouvez pas modifier leur contenu, mais vous pouvez les supprimer (avec un "X"). Nous n'avons pas pu faire fonctionner cela. L'avez-vous vu quelque part? Merci!!!
@DanielMagliola et quelque chose comme un Silverlight / WPF WrapPanelpour chaque paragraphe pourrait vous donner quelque chose comme vous le souhaitez.
ChrisF
@DanielMagliola dans le passé, j'ai pu y parvenir avec un RichTextBox WinForms. Les "variables" pourraient être glissées-déposées dans la richtextbox, et un style lui serait appliqué pour indiquer clairement qu'il s'agit d'un espace réservé. La partie délicate empêche les modifications des variables. Une solution consiste à vérifier l'emplacement du curseur actuel pour vos caractères de balise et à interdire la modification si c'est le cas.
Daniel B
J'ai oublié de le mentionner, c'est une application HTML, mais cette idée est toujours applicable. J'aime la "vérification de la position du curseur et interdiction de modifier l'idée", merci pour ça !!
Daniel Magliola
@DanielB: En fait, pouvez-vous s'il vous plaît en faire une réponse, je pense que vous avez le gagnant! Je vous remercie!!
Daniel Magliola