Editor Page Guidelines

Message Editing

Use message editing to allow users to create any type of message sent through the Emarsys platform.

Structure

Message editing is a workflow with the following steps:

  1. Message type selection
  2. Message settings
  3. Content editing
    1. Message name
    2. Save button
    3. Additional actions
    4. Tool panel
    5. Preview panel
    6. Message editing progress
  4. Optional steps
  5. Distribution settings
    1. Message name
    2. Save button
    3. Message details
    4. Scheduling / activation settings
    5. Launch / Activate primary call to action
    6. Preview panel
    7. Message editing progress

Best practices

Message editing should:

  • Display the whole workflow: where the user came form, and what's nect. Use the Steps component for this.
  • Display a button that takes the user back to overview page, the list of messages the user is editing.
  • Allow the users to edit the page title that is the message name inline on any part of the process.
  • Group additional actions related to the document itself next to the Save button. Less important actions can be grouped under a drop-down menu.
  • Help the user understand what state the message currently is. Possible states include: draft, scheduled, launched/activated.

Try to avoid:

  • Displaying additional navigational elements, like tabs to the other parts of the service. This adds clutters and distracts the user from their current workflow.

Message settings

Message settings should:

  • Allow user to set up basic settings for the message for example name, template used, audience.
  • List all settings not specific to the message's contents or distribution.

Try to avoid:

  • Having settings that cannot be changed later.

Content editing

Content editing should:

  • Show the tools related to editing on left panel.
    • List tools to interact with the content in vertical tab. For example: settings, versioning, listing of links etc.
    • Be hidden in the right context - for example when the user needs to compare previews, or the preview also provides editing tools.
    • The width of the left panel should be fixed, but may be different sized based on the tools used.
    • Allow for drag and drop if the preview panel also allows for editing.
  • Show a live preview of the message on the right panel.
    • Provide a preview as the message would appear to the contacts.
    • Show the live preview - changes should be propagated immediately.
    • Provide options for multiple views depending on the message, for example different devices, personalisation review etc.
    • Provide live editing if possible: rewriting words, change images, rearrange content etc.

Try to avoid:

  • Mixing up content editing with other steps in the process.

Distribution settings

Distribution settings should

  • Provide a safe, checkout like experience showing a the potential impact of launching / activating the message e.g. potential number of contacts or audience affected.
  • Provide a clear way of scheduling message, i.e. when it will launnch or what is timeframe it will be active.
  • Show a live preview of the message to be sent, as a last check.