User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
Have you seen how automation recipes on can be created? They have exactly this kind of implementation and I think the design/interaction would work great for your case. – Erion Aug 29 '13 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 Aug 29 '13 at 9:55
up vote 0 down vote accepted

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.

share|improve this answer

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

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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