Qual è una soluzione intuitiva per la modifica dei modelli di e-mail con variabili di sostituzione?


9

Sto lavorando a un sistema in cui contiamo molti "amministratori / gestori" che inviano e-mail agli utenti dal database. Una delle funzionalità principali è la possibilità di inviare e-mail a più persone contemporaneamente, con informazioni specifiche pertinenti a ciascuna di esse. Un'altra caratteristica chiave è quella di essere in grado di creare e-mail a mano, perché tende ad essere necessario modificarle leggermente ogni volta, ma avere un modello base consente di risparmiare molto tempo.

Per questo, abbiamo la tipica soluzione "modelli", in cui abbiamo un modello che assomiglia a questo:

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

Il problema che stiamo riscontrando è ovviamente che (come ci aspettavamo), i manager non ottengono l'intera idea delle "variabili" e fanno cose come sovrascriverle, il che non consente loro di inviare più di una persona alla volta, supponendo quelli non verranno sostituiti e che il sistema è rotto, o anche cose inspiegabili come "Ciao {{John}}".

Il grosso problema è che questo non è relegato, come al solito, in una sezione "admin" in cui solo pochi utenti esperti hanno accesso alla modifica dei modelli che vengono inviati automaticamente e si aspettano che sappiano cosa stanno facendo. Ogni utente del sistema viene esposto a questo problema.

La soluzione ovvia sarebbe quella di sostituire le variabili prima di mostrare questo modello per la modifica da parte dell'utente, ma ciò non funziona quando si inviano email a più persone.

Sembra un problema ragionevolmente comune e speriamo che qualcuno l'abbia già risolto.

Hai visto da qualche parte / creato / puoi pensare a buone soluzioni a questo problema?

Aggiornare

Ciò che ho finito per fare in base alla risposta di Daniel B è stato rilevare, in base alla posizione del cursore e alla posizione di {{}} nel codice se l'utente si trova attualmente "all'interno di una variabile" o "esterno". All'interno, mostro un piccolo pezzo di testo sotto la grande area di testo che spiega che questo verrà sostituito e che possono rimuoverlo completamente se lo desiderano, ma non possono modificarlo.

Faccio questo onClick, onChange, onKeyDown, onKeyUp. Per gli eventi "chiave", se siamo all'interno di una variabile, restituisco VERO solo se keyCode è una delle poche chiavi "di navigazione". Altrimenti, ritorno FALSO, che impedisce efficacemente l'edizione di quella variabile.

Non è perfetto, ma era molto economico e sembra efficace.


Commenta le persone con più rappresentanti di me: (Sono nuovo di UX) Potresti per favore taggare questa domanda? Tutti i tag che sto pensando non esistono ancora qui: variabili variabili interfaccia utente user-friendly modificabile dall'utente

Come vengono presentati questi modelli? È solo testo in un editor?
ChrisF

In questo momento, sì, quando selezioni un gruppo di persone e fai clic su "Messaggio", ottieni una finestra di dialogo "pop-in" con una grande area di testo che ha il contenuto del modello proprio lì. In realtà è markDown, anche se ovviamente i nostri utenti non ci sono abituati, sembra un semplice testo. Non abbiamo un editor wysiwyg, e siamo pronti a usarne uno se ci sarà di aiuto, ma di per sé non lo fa, la gente non capirà ancora le variabili

Il problema alla radice qui è che i tuoi manager non capiscono le variabili. A meno che tu non risolva il problema, le tue soluzioni di lancio ai sintomi. Non tutti i problemi richiedono una soluzione di codifica.
Darknight,

Concordato. Mi piacerebbe essere in grado di educare le persone, ma non possiamo chiedere loro di leggere manuali, ovviamente, quindi sto cercando idee su come renderle facilmente comprensibili. Idee?
Daniel Magliola,

Risposte:


3

Su richiesta dai commenti nella risposta di ChrisF, ecco una soluzione che ho usato in passato:

  • Utilizzare un RichTextBox WinForms per consentire all'utente di modificare il testo del modello.
  • Consenti il ​​trascinamento della selezione (o altri inserimenti) di variabili o segnaposto in RichTextBox.
  • Non consentire la modifica delle variabili stesse controllando la posizione corrente del cursore per i delimitatori delle variabili (i simboli {{e}}, nel tuo esempio).

La mia implementazione è risultata simile a questa:

Esempio RichTextBox

Ha l'evidenziazione facoltativa della variabile per differenziarla dal testo standard.
I delimitatori di variabili sono effettivamente lì, hanno semplicemente gli stessi colori di primo piano e sfondo.

Ovviamente, questo è abbastanza diverso dalla tua implementazione, che è basata su HTML. Vorrei probabilmente esaminare come viene implementato l'editor di Gmail; sembra essere simile a un'area di testo, ma è in grado di avere immagini in linea (faccine, ecc.), che è simile al comportamento che stai cercando.


4

Prenderei in considerazione la possibilità di modificare il modo in cui il modello viene presentato all'utente in modo da poter rendere le parti che verranno modificate dal codice non modificabili. Qualcosa come questo:

modello

I bit che non si desidera che l'utente cambi ora non sono modificabili. È possibile includere un pulsante di chiusura in modo che possano rimuovere gli elementi se non ne hanno bisogno. Puoi anche includere testo esplicativo e / o suggerimenti per spiegare cosa {{...}}significano i bit e perché dovrebbero essere lasciati soli.

L'utilizzo di qualcosa come Silverlight / WPF WrapPanelper ogni paragrafo può dare qualcosa che consente a ciascuna parte (modificabile e non modificabile) di fluire man mano che il testo controllato dall'utente cresce e si restringe.


Il problema principale con questo è che non posso rendere le caselle di testo sia "in linea" che "multi-linea" ... E quindi il layout sarebbe estremamente strano ... Se potessi modificare quel "Caro" e la variabile si sposterebbe giusto, e c'era un'altra casella di testo a destra che magicamente racchiusa, questo sarebbe FANTASTICO. Ma non vedo come posso implementarlo. L'alternativa con cui stiamo provando a lavorare è avere blocchi "non modificabili" all'interno di una grande area di testo, in modo che non sia possibile modificarne il contenuto, ma è possibile rimuoverli (con una "X"). Non siamo riusciti a farlo funzionare. L'hai visto da qualche parte? Grazie!!!

@DanielMagliola bene qualcosa come un Silverlight / WPF WrapPanelper ogni paragrafo potrebbe darti qualcosa come vuoi.
ChrisF

@DanielMagliola in passato, sono stato in grado di raggiungere questo obiettivo con un RichTextBox WinForms. Le "variabili" potrebbero essere trascinate nella casella richtext e lo stile verrebbe applicato ad esso per chiarire che si tratta di un segnaposto. La parte difficile è impedire le modifiche alle variabili. Una soluzione è quella di controllare l'attuale posizione del cursore per i caratteri del tag e di impedire la modifica in questo caso.
Daniel B,

Ho dimenticato di menzionarlo, questa è un'app HTML, ma quell'idea è comunque applicabile. Mi piace la "verifica della posizione del cursore e non consente di modificare l'idea", grazie per quello !!
Daniel Magliola,

@DanielB: In realtà, puoi per favore dare una risposta, penso che tu abbia il vincitore! Grazie!!
Daniel Magliola,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.