How to make a switch between a form and a text editor?

Question

I'm making a platform where users can upload research results. They can upload these results in two different ways: with a form with multiple input fields and with a normal text editor.

The mode with the form allows the user to link the research results to a specific page of a document. The mode with the text editor gives the user the freedom to write the results without linking them to a document, when there is no document (needed).

Now I can't find the right way to make clear that they can choose between those modes.
Only a toggle button will not explain what the difference is between the two modes by labeling this with 'form' & 'text editor'.

Do you have some great ideas?

Answer 1

Speak the user’s language

“Form” and “text editor” are UI terms. They vaguely describe what the controls are but not what they do.

Step back from the problem and get into your user’s head. You’ve described one aspect that would drive the decision (document linking). Is that the only reason? If so, you need to find a concise way to present it as a question or choice. If not, find the core distinguishing concept and focus on that.

Two routes

Once you have that nailed, you can approach this in two distinct ways depending on the workflow.

Default with a switch

If you know that the bulk of your users will go with one option over the other (or you want them to), you’ll be best served by a default version with the option to change it. It seems like this might be the right direction for you.

Here’s one possible solution using a simple text link. Obviously, the language on the switch link would have two states: form or text entry.

Decide then proceed

If there’s likely to be an even split between using one or the other and it’s important that the user decides up front, you’ll want to handle the decision first. For sake of illustration, here’s an example using buttons.