Plugin hints exploration (refinement)

Goal

Research and mockup the way plugins are triggered so we have a plan to work towards.

Requirements:

• plugins need to be triggered from the toolbar

• plugins need to be content/context aware (keywords, rdfa information)

Current state

Currently plugins can be triggered in three different ways:

• clicking the button ("voeg sjabloon in") in the toolbar

• appear automatically depending on the position in the template ("besluittype)

• triggered by text input ("decreet van ...")

Example of current plugin hints

Research

Editors looked at in this research

• Confluence

• Gitbook

• Notion

• Brick.do

• Wordpress

• Froala

• Grammarly

Examples

Examples of plugin hints documented on Figma

Conclusion

• Consistent use of + icon or / command to trigger list of available plugins when on new line

• Hovering over a block shows + icon to edit/delete existing block, or insert new plugin below

• + icon and / command also trigger toolbar with styling options, lists,...

• Search option to filter through plugins is available when the list of plugins is long

• Confluence offers a preview on what a page would look like before inserting page template

• Grammarly offers a "split-screen" style, which could be useful to look into in the context of modals (see citatenplugin modal)

Mockups

• Example 1 and 3 show mockup ideas for future in line triggering and hints [created before 13/04/21]

• Example 2 shows visual hinting in the document (similar to confluence page previews) [created before 13/04/21]

• Example 4 and 5 show plugin hinting & triggering based on the context/sections the users are in. [created after 13/04/21]

Use the arrows in the embedded version to navigate. To see full size prototype, click on the Figma icon.