O que é uma solução fácil de usar para editar modelos de email com variáveis ​​de substituição?


9

Estou trabalhando em um sistema em que confiamos muitos "administradores / gerentes" enviando e-mails a usuários do banco de dados. Um dos principais recursos é poder enviar e-mail para várias pessoas ao mesmo tempo, com informações específicas relevantes para cada uma delas. Outro recurso importante é poder criar e-mails manualmente, porque é necessário modificá-los levemente a cada vez, mas ter um modelo básico economiza muito tempo.

Para isso, temos a solução típica de "modelos", onde temos um modelo mais ou menos assim:

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

O problema que estamos enfrentando é obviamente que (como esperávamos), os gerentes não entendem toda a idéia das "variáveis" e fazem coisas como substituí-las, o que não lhes permite enviar e-mails para mais de uma pessoa por vez, assumindo eles não serão substituídos e que o sistema está quebrado ou até coisas inexplicáveis ​​como "Olá {{John}}".

O grande problema é que isso não é relegado, como sempre, a uma seção "admin", na qual apenas alguns usuários avançados têm acesso à edição dos modelos que são enviados automaticamente, e espera-se que eles saibam o que estão fazendo. Todo usuário do sistema fica exposto a esse problema.

A solução óbvia seria substituir as variáveis antes de mostrar este modelo para o usuário editar, mas isso não funciona ao enviar e-mail para várias pessoas.

Parece um problema razoavelmente comum, e esperamos que alguém já o tenha resolvido.

Você já viu em algum lugar / criou / consegue pensar em boas soluções para esse problema?

Atualizar

O que acabei fazendo com base na resposta de Daniel B foi detectar, com base na posição do cursor e na posição de {{}} no código, se o usuário está atualmente "dentro de uma variável" ou "fora". Por dentro, mostro um pequeno pedaço de texto abaixo da grande área de texto, explicando que isso será substituído e que eles podem removê-lo completamente, se quiserem, mas não podem editá-lo.

Eu faço isso onClick, onChange, onKeyDown, onKeyUp. Para os eventos "key", se estivermos dentro de uma variável, retornarei TRUE apenas se o keyCode for uma das poucas chaves "de navegação". Caso contrário, retornarei FALSE, o que efetivamente impede a edição dessa variável.

Não é perfeito, mas era muito barato e parece eficaz.


Comente para pessoas com mais representantes que eu: (eu sou novo no UX) Você poderia marcar esta pergunta? Todas as marcas que eu estou pensando em fazer não existe aqui ainda: modelos variáveis de interface do usuário user-friendly user-editável

Como esses modelos são apresentados? É apenas texto sem formatação em um editor?
— ChrisF

Agora, sim, quando você seleciona um grupo de pessoas e clica em "Mensagem", você recebe uma caixa de diálogo "pop-in" com uma grande área de texto com o conteúdo do modelo ali. Na verdade, é markDown, embora obviamente nossos usuários não estejam acostumados a isso, parece texto simples. Não temos um editor WYSIWYG, e estamos abertos a usar um, se ele vai ajudar, mas por si só não, as pessoas vão ainda não compreender as variáveis

O principal problema aqui é que seus gerentes não entendem as variáveis. A menos que você corrija esse problema, suas soluções serão lançadas contra os sintomas. Nem todos os problemas precisam de uma solução de codificação.
— Darknight

Acordado. Eu adoraria ser capaz de educar as pessoas, mas não podemos pedir que elas leiam os manuais, obviamente, então estou procurando idéias sobre como torná-las facilmente compreensíveis para elas. Ideias?
— 18711 Daniel Magliola

Respostas:


3

Por solicitação dos comentários na resposta de ChrisF, aqui está uma solução que eu usei no passado:

  • Use um WinForms RichTextBox para permitir que o usuário edite o texto do modelo.
  • Permitir arrastar / soltar (ou outra inserção) de variáveis ​​ou espaços reservados no RichTextBox.
  • Não permita a edição das próprias variáveis ​​verificando ao redor do local atual do cursor os delimitadores de suas variáveis ​​(os símbolos {{e}}, no seu exemplo).

Minha implementação acabou parecendo algo assim:

Exemplo de RichTextBox

Possui destaque opcional da variável para diferenciá-la do texto padrão.
Os delimitadores de variáveis ​​estão realmente lá, eles têm as mesmas cores de primeiro e segundo plano.

Obviamente, isso é bem diferente da sua implementação, que é baseada em HTML. Eu provavelmente examinaria como o editor do Gmail é implementado; parece ser semelhante a uma área de texto, mas é capaz de ter imagens embutidas (smilies, etc), que é semelhante ao comportamento que você está procurando.


4

Eu consideraria alterar a forma como o modelo é apresentado ao usuário para que você possa tornar as partes que serão alteradas pelo código não editáveis. Algo assim:

brincar

Os bits que você não deseja que o usuário altere agora não são editáveis. Você pode incluir um botão Fechar para que eles possam remover os itens, caso não precisem deles. Você também pode incluir texto explicativo e / ou dicas de ferramentas para explicar o que os {{...}}bits significam e por que eles devem ser deixados em paz.

Usar algo como um Silverlight / WPF WrapPanelpara cada parágrafo pode fornecer algo que permita que cada parte (editável e não editável) flua à medida que o texto controlado pelo usuário aumenta e diminui.


O principal problema disso é que não consigo criar as caixas de texto "inline" e "multi-line" ... E, portanto, o layout seria extremamente estranho ... Se você pudesse editar "Dear" e a variável se moveria certo, e havia outra caixa de texto à direita, magicamente embrulhada, isso seria IMPRESSIONANTE. Mas não vejo como posso implementar isso. A alternativa com a qual estamos tentando trabalhar é ter blocos "não editáveis" dentro de uma grande área de texto, para que você não possa alterar o conteúdo deles, mas possa removê-los (com um "X"). Não conseguimos fazer isso funcionar. Você já viu isso em algum lugar? Obrigado!!!

@DanielMagliola bem, algo como um Silverlight / WPF WrapPanelpara cada parágrafo pode dar a você o que você deseja.
— ChrisF

@DanielMagliola no passado, consegui fazer isso com um WinForms RichTextBox. As "variáveis" podem ser arrastadas e soltas na caixa de richtext, e o estilo será aplicado a ela para deixar claro que é um espaço reservado. A parte complicada é impedir alterações nas variáveis. Uma solução é verificar o posicionamento atual do cursor quanto aos caracteres de sua tag e impedir a edição, se for o caso.
— Daniel B

Esqueci de mencionar isso, este é um aplicativo HTML, mas ainda assim essa ideia é aplicável. Gosto da "verificação da posição do cursor e da proibição da ideia de edição", obrigado por isso !!
— 18711 Daniel Magliola

@DanielB: Na verdade, você pode responder, acho que você tem o vencedor! Obrigado!!
— 18711 Daniel Magliola
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.