How can I tell users to put the word "IMAGE" where they want to insert an image?

Question

In my iOS app, there is a text editor thingy. In the editor tab, the user can write stuff in Markdown and he/she can see the rendered Markdown in the preview tab.

Now I want to add a feature that allows the user to select an image to add to the document. I know there is already a feature like that in Markdown, but that supports URLs only. Obviously, my users won't know the URL for an image saved in their phones. So that's why I want to add this feature.

With a tap of a button, an image picker shows up and the user selects an image from the Photo Library. After that, I want to tell the user that he/she can type the word "IMAGE" where he/she wants to place the image.

If you don't understand the above paragraph, here is what I meant.

If the user writes something like this in the editor:

hello world

IMAGE

bye world

The rendered Markdown will be like this:

hello world

bye world

If the user writes this:

hello world

bye world

IMAGE

It will turn into this:

hello world

bye world

How can I tell the user to put the word IMAGE where he/she wants the image to be?

1. Of course, I could show a dialog:

The image has been set successfully. Please type "IMAGE" wherever you want to put the image.

But I feel like no one is going to read through all that and will just dismiss the dialog right away.

2. I also thought of letting the user choose where they want to put the image. If they choose "At the start", I can put the word "IMAGE" at the start for him/her. If they choose "At the end", I can append the word "IMAGE" to the end of the document.

I fear that users might not know what that is and might accidentally delete it (and become frustrated since the image is suddenly gone) if I didn't tell the user anything about it.

So if method 2 is better, when and how should I tell the user about it, that the word "IMAGE" can be moved if he/she wants to change the position of the image?

Answer 1

Is it possible for the app to add the IMAGE placeholder automatically at the point the user selected to add an image?

In other words, whenever I wanted to add an image, I would expect the app to add the IMAGE placeholder for me at the current location of my cursor (and most likely, the desired location for my image).

Answer 2

You will need to put instructions because this is not known interaction. The instructions do not need to persist for all time in your UI - you can use on-boarding techniques to provide a very short tutorial the first time someone uses the app (and you would also need to provide a way to re-run the tutorial, just in case someone needs a refresher).