I'm working on a web application where users (of an organization) can edit email templates. For example, one template would be used to confirm an appointment (that a client has made with the organization).

The user should place tags (like {appointmentDate} and {appointmentTime}) in the template. When the message is sent, the tags are replaced by the actual content.

How can the editor be designed to be as simple as possible, even for non-technical users?

  • Have you seen how automation recipes on ifttt.com can be created? They have exactly this kind of implementation and I think the design/interaction would work great for your case.
    – Erion
    Commented Aug 29, 2013 at 9:09
  • @Erion Thanks. I took a look at the email action (which send a message) and they have a pretty nice editor indeed.
    – Jonathan
    Commented Aug 29, 2013 at 9:55

2 Answers 2


One of the solutions would be to style the tags as soon as they're typed.

This issue has some details on how to do that.

As for initial explanations; try buttons like the bold/italic/link/image input buttons above the text field.

It's either that, or use a legend.


keep it simple. Provide drag and drop or insert functionality to the user. you can use simple words like insert Appointment date or time or provide a place/template where user would be able to drag and drop time and date icons on the canvas. I am attaching a sample wire-frame for reference:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.