One to many or one to one, an example of a Drupal UX design decision

02 Jan 2018

Short recap of an interesting discussion during today’s UX meeting.

About inserting media items from within the WYSIWYG editor. These could be different types of media files, like images, video and audio. You could even have different flavours for the same file type. For example with images, you might want to store different information and metadata on product images than on images used in press releases or for the company blog posts.

The question was how to provide the starting point(s) for this. Of course the goal would be to make this as transparent as possible, reducing the amount of administrative busy work to the required minimum. But, structured content does not yet create itself automatically, we do have to provide forms that present the required fields to fill out when adding a media item.

We discussed two basic approaches

There are likely more and there’s room for subtle variations inside these two as well.

Option 1: start with a single button to add media

Click 1 generic “add media” button in the WYSIWYG editor that launches a media upload form
Upload the media (image, video, audio, …) you want and save
Figure out the media file type and present the corresponding form with the required (meta)data fields in a second step
Save and return to the editor

Option 2: choose from multiple buttons to add a specific media item

Find and click the add button for the media you want to create. There would be separate buttons for inserting an image, a video, an audio item
Because the type is known we can directly show the form for the required (meta)data.
Save and return to the editor.

(Although this list only goes to 3 instead of 4, there is a bit more work for the user to do in step 1: finding the right media button to click)

After a bit of back and forth we chose option 2, because:

A one-on-one relationship between WYSIWYG button and media type to create is easier to understand
The upload process can be contained within 1 step because the system knows upfront which form to show for the required info.
With this one-to-one relationship, per media type permissions can be handled more elegantly (you either have a audio upload button or you don’t)

The trade-offs are:

it’s not super elegant to require the user to do the upfront work of explicitly choosing the type of media to create.
With multiple types of media available we’ll have to see how to expose all those different options in the WYSIWYG editor toolbar.