Was ist eine benutzerfreundliche Lösung zum Bearbeiten von E-Mail-Vorlagen mit Ersatzvariablen?

9

Ich arbeite an einem System, in dem viele "Administratoren / Manager" Benutzer aus der Datenbank per E-Mail benachrichtigen. Eine der Hauptfunktionen besteht darin, dass mehrere Personen gleichzeitig eine E-Mail mit spezifischen Informationen erhalten können, die für jede von ihnen relevant sind. Ein weiteres wichtiges Merkmal ist die Möglichkeit, E-Mails von Hand zu erstellen, da diese in der Regel jedes Mal geringfügig geändert werden müssen. Eine grundlegende Vorlage spart jedoch viel Zeit.

Dafür haben wir die typische "Vorlagen" -Lösung, bei der wir eine Vorlage haben, die ungefähr so ​​aussieht:

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

Das Problem, das wir haben, ist offensichtlich, dass Manager (wie erwartet) nicht die gesamte Idee der "Variablen" haben und sie beispielsweise überschreiben, sodass sie nicht mehr als eine Person gleichzeitig per E-Mail kontaktieren können, vorausgesetzt Diese werden nicht ersetzt und das System ist kaputt oder sogar unerklärliche Dinge wie "Hallo {{John}}".

Das große Problem ist, dass dies nicht wie üblich in einen "Admin" -Bereich verwiesen wird, in dem nur wenige Hauptbenutzer Zugriff auf die Bearbeitung der Vorlagen haben, die automatisch gesendet werden, und von denen erwartet wird, dass sie wissen, was sie tun. Jeder Benutzer des Systems ist diesem Problem ausgesetzt.

Die naheliegende Lösung wäre, die Variablen zu ersetzen, bevor diese Vorlage für den Benutzer zum Bearbeiten angezeigt wird. Dies funktioniert jedoch nicht, wenn mehrere Personen per E-Mail benachrichtigt werden.

Dies scheint ein ziemlich häufiges Problem zu sein, und wir hoffen, dass jemand es bereits gelöst hat.

Haben Sie irgendwo gesehen / geschaffen / können Sie sich gute Lösungen für dieses Problem vorstellen?

Aktualisieren

Basierend auf der Antwort von Daniel B habe ich anhand der Cursorposition und der Position von {{}} im Code festgestellt, ob sich der Benutzer derzeit "innerhalb einer Variablen" oder "außerhalb" befindet. Im Inneren zeige ich ein kleines Stück Text unter dem großen Textbereich, in dem erklärt wird, dass dies ersetzt wird und dass sie es vollständig entfernen können, wenn sie wollen, aber sie können es nicht bearbeiten.

Ich mache das onClick, onChange, onKeyDown, onKeyUp. Wenn wir uns für die "Schlüssel" -Ereignisse in einer Variablen befinden, gebe ich nur dann TRUE zurück, wenn der keyCode einer der wenigen "Navigationsschlüssel" ist. Andernfalls gebe ich FALSE zurück, wodurch die Ausgabe dieser Variablen effektiv verhindert wird.

Es ist nicht perfekt, aber es war sehr billig und scheint effektiv zu sein.

Daniel Magliola
quelle
Kommentar an Personen mit mehr Vertretern als ich: (Ich bin neu bei UX) Könnten Sie bitte diese Frage markieren? Alle Tags, an die ich denke, existieren hier noch nicht: Vorlagenvariablen Benutzeroberfläche benutzerfreundlich benutzerbearbeitbar
Wie werden diese Vorlagen dargestellt? Ist es nur einfacher Text in einem Editor?
ChrisF
Ja, wenn Sie eine Gruppe von Personen auswählen und auf "Nachricht" klicken, wird ein "Pop-In" -Dialog mit einem großen Textbereich angezeigt, in dem sich der Vorlageninhalt befindet. Es ist eigentlich markDown, obwohl unsere Benutzer offensichtlich nicht daran gewöhnt sind, sieht es aus wie einfacher Text. Wir haben keinen Wysiwyg-Editor, und wir sind offen dafür, einen zu verwenden, wenn es hilft, aber an sich nicht, werden die Leute die Variablen immer noch nicht verstehen
Das Hauptproblem hierbei ist, dass Ihre Manager die Variablen nicht verstehen. Wenn Sie dieses Problem nicht beheben, werfen Sie Lösungen auf die Symptome. Nicht alle Probleme benötigen eine Codierungslösung.
Darknight
Einverstanden. Ich würde gerne in der Lage sein, Menschen zu erziehen, aber wir können sie natürlich nicht bitten, Handbücher zu lesen, deshalb suche ich nach Ideen, wie ich es ihnen leicht verständlich machen kann. Ideen?
Daniel Magliola

Antworten:

3

Auf Anfrage aus den Kommentaren in ChrisFs Antwort, hier ist eine Lösung, die ich in der Vergangenheit verwendet habe:

  • Verwenden Sie eine WinForms RichTextBox, damit der Benutzer den Text der Vorlage bearbeiten kann.
  • Ermöglichen Sie das Ziehen / Ablegen (oder andere Einfügen) von Variablen oder Platzhaltern in die RichTextBox.
  • Verbieten Sie die Bearbeitung der Variablen selbst, indem Sie an der aktuellen Stelle des Cursors nach den Trennzeichen Ihrer Variablen suchen (in Ihrem Beispiel die Symbole {{und}}).

Meine Implementierung sah ungefähr so ​​aus:

RichTextBox-Beispiel

Die Variable kann optional hervorgehoben werden, um sie vom Standardtext zu unterscheiden.
Die variablen Trennzeichen sind tatsächlich vorhanden, sie haben zufällig die gleichen Vordergrund- und Hintergrundfarben.

Dies unterscheidet sich natürlich erheblich von Ihrer Implementierung, die HTML-basiert ist. Ich würde wahrscheinlich untersuchen, wie der Editor von Google Mail implementiert ist. Es scheint einem Textbereich ähnlich zu sein, kann jedoch Inline-Bilder (Smilies usw.) enthalten, die dem gesuchten Verhalten ähneln.

Daniel B.
quelle
4

Ich würde in Betracht ziehen, die Darstellung der Vorlage für den Benutzer zu ändern, damit Sie die Teile, die durch den Code geändert werden, nicht mehr bearbeiten können. Etwas wie das:

Attrappe, Lehrmodell, Simulation

Die Bits, die der Benutzer nicht ändern soll, können jetzt nicht mehr bearbeitet werden. Sie können eine Schaltfläche zum Schließen einfügen, damit sie die Elemente entfernen können, wenn sie sie nicht benötigen. Sie können auch erläuternden Text und / oder QuickInfos hinzufügen, um zu erklären, was die {{...}}Bits bedeuten und warum sie in Ruhe gelassen werden sollten.

Wenn Sie WrapPanelfür jeden Absatz so etwas wie Silverlight / WPF verwenden , erhalten Sie möglicherweise etwas, das es jedem Teil (bearbeitbar und nicht bearbeitbar) ermöglicht, zu fließen, wenn der benutzergesteuerte Text wächst und schrumpft.

ChrisF
quelle
Das Hauptproblem dabei ist, dass ich die Textfelder nicht sowohl "inline" als auch "mehrzeilig" machen kann ... Und daher wäre das Layout extrem seltsam ... Wenn Sie dieses "Dear" bearbeiten könnten, würde sich die Variable verschieben Richtig, und es gab ein weiteres Textfeld rechts davon, das magisch verpackt war. Das wäre FANTASTISCH. Aber ich sehe nicht, wie ich das umsetzen kann. Die Alternative, mit der wir zu arbeiten versucht haben, besteht darin, "nicht bearbeitbare" Blöcke in einem großen Textbereich zu haben, sodass Sie deren Inhalt nicht ändern, sondern entfernen können (mit einem "X"). Wir haben es nicht geschafft, diese Arbeit zu machen. Hast du es irgendwo gesehen? Vielen Dank!!!
@ DanielMagliola Nun, so etwas wie ein Silverlight / WPF WrapPanelfür jeden Absatz könnte Ihnen etwas geben, was Sie wollen.
ChrisF
@ DanielMagliola In der Vergangenheit konnte ich dies mit einer WinForms RichTextBox erreichen. Die "Variablen" könnten per Drag & Drop in die Richtextbox gezogen und mit einem Styling versehen werden, um zu verdeutlichen, dass es sich um einen Platzhalter handelt. Der schwierige Teil besteht darin, Änderungen an den Variablen zu verhindern. Eine Lösung besteht darin, die aktuelle Cursorposition für Ihre Tag-Zeichen zu überprüfen und die Bearbeitung zu verbieten, wenn dies der Fall ist.
Daniel B
Ich habe vergessen, dies zu erwähnen, dies ist eine HTML-App, aber diese Idee ist immer noch anwendbar. Ich mag die "Cursorposition überprüfen und Bearbeitungsidee nicht zulassen", danke dafür !!
Daniel Magliola
@ DanielB: Kannst du das bitte als Antwort geben? Ich denke du hast den Gewinner! Vielen Dank!!
Daniel Magliola