0

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

enter image description here

bye world

If the user writes this:

hello world

bye world

IMAGE

It will turn into this:

hello world

bye world

enter image description here

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.

  1. 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?

  • - Why exactly does the user need to type the entire word? On a mobile device, typing is a bit of a hassle anyway, and more prone to typos. And does the user need to activate caps lock first before being able to type the word? - What happens if you insert more than one image? How will the user tell them apart? - If the user wants to change the position of the image, can they? By erasing/cutting-and-pasting the image text? - Is there no way the user can place the image visually? – Gino van de Staaij Jul 1 '16 at 18:58
  • @GinovandeStaaij Yeah I know it's weird. Due to technical difficulties, I cannot find a way to add an image straight into the editor. I can only show the image in the Preview tab. And users cannot add more than one image. I think the users can realize this when they see the buttons text "Set Image" instead of "Add Image". Adding two "IMAGE" in the editor will just cause the result to have two identical images at the appropriate positions. I have also considered using an emoji as the placeholder. Like this one: 🖼 Do you think this is a better idea? – Sweeper Jul 1 '16 at 23:49
  • I like the idea of using a graphical representation, such as the emoji 🖼 you showed. Going further with that, can this emoji actually be moved around (long press and drag, or cut and paste for example)? Or does it offer too small a target on mobile? – Gino van de Staaij Jul 2 '16 at 19:45
2

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).

  • That's method 2 as I said in the question. I can place placeholder for the user. But I need to tell the user about the effects of moving/deleting it. How and when should I do this? – Sweeper Jul 1 '16 at 23:34
  • 1
    no, this answer is different from "method 2". while writing, the cursor is positioned somewhere - where the next letter would appear. so by pressing a single button, the word IMAGE (or a placeholder icon) could appear at this position. it should be possible to delete and cut&paste as normal text... you were suggesting something like 2 buttons "at the start" "at the end"... – Aprillion Jul 2 '16 at 8:20
  • It is different as @Aprillion explained. Placing the IMAGE placeholder for the user helps make that interaction more intuitive so that the need to tell them how to move it or delete it is less likely. They would be more likely to treat it as any other text in the editor – adriennetacke Jul 6 '16 at 22:28
0

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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.