Popovers with Input fields

[darcimm]

Hi there,

I'm working on the Marketing Campaigns email editor, specifically the 'add a link' feature to insert a URL where a word appears within the WYSIWYG editor. We currently open the link editor in a modal but have observed friction with this interaction.

We think a better interaction may be a contextual popover in closer proximity to the selected text where the link can be added/edited. Here is an example from Google docs:

Sendgrid DS does not have a popover component, and I see that Paste does but it does not include examples that include a text input within the popover. Is this an appropriate use of a popover?

We are still in ideation phase and trying to understand if there is anywhere in the Twilio experience that does something like this that we can mimic for consistency.

Thanks!

[TheSisb]

Hi @darcimm,

Chatted with the team and short answer is inputs are perfectly fine in non-modal dialogs / popovers. This is a common behavior in rich text editors. Just make sure the popover is opened from a button press and that should be fine.

Aside, we're curious to learn more about the friction you encountered with the modal version.

[SiTaggart]

Hi @darcimm

Just following up on this. Did you get the information you needed?

We're also keen to hear about any information relating to the enquiry:

we're curious to learn more about the friction you encountered with the modal version.

[darcimm]

Hi @SiTaggart, yes thank you!

Re the modal friction: There are two main actions a user may want to take after linking a text: 1. edit the color, 2. edit the URL. Currently, double clicking the hyperlinked word in the editor opens up the modal.

After observing a few user sessions, our hypothesis was that this was causing a lot of friction, as the mental model (in most text editors) is that double clicking the word would select it.

Upon observing ~20 more user sessions, it appears that users are actually largely dragging to select the text rather than double clicking. What is unknown is whether this is because they're familiar with SG editor interactions already.

We're launching discovery soon and have this on our radar to investigate more.

[SiTaggart]

I see, so not necessarily the Modal itself but how you get to launch the modal.

Out of curiosity how are you planning on resolving that friction with replacing Modals with Popovers, and couldn't the same resolution solve the friction with Modals themselves?

[darcimm]

Yeah you're right. There's the option of removing the double click interaction which would essentially force the user to click the link button to edit the link (which they clicked to add the link, so they know it's there).

Alternatively, we saw some competitors using an inline editor with actions in closer proximity to the text. We also saw some editors (like google docs) use a link popover on the word that is hyperlinked, so that was an idea we bounced around but were first curious how far we could take the existing popover component.