2

How can I discourage the user from uploading a header image with text in it? It's explicitly mentioned in the preceding description (in red, as displayed below) and in the tips panel to the right, but people keep on uploading images with text in it (example image shown below). What would be a better way of telling the user not to upload images with text?

The reason for disallowing text, is that the image will be used as a background image, so a title will be centered on top of the image.

enter image description here

Displayed above is a user who uploaded a header image with text.

Improve this question
5
  • 1
    How elegant of a solution are you wanting? One step you could look into adding (which would actually probably be pretty fun!) would be a processor that analyzes the uploaded image and prompts the user if it detects text (there are a number of popular free, open-source libraries out there that can detect if an image likely contains text). If this processing detects text, you can return a prompt, something like "We've detected that this image may contain text. We recommend using images that don't contain text so that your page title remains legible." and still provide the option to continue.
    – maxathousand
    Sep 7, 2018 at 20:26
  • @maxathousand I've been looking into that solution, but given the relative complexity of that route, there may be an easier UX solution to further reduce the number of images with text.
    – bart
    Sep 7, 2018 at 20:33
  • Is there a way that you can show a preview with, perhaps, an example title on the image so the user can see immediately that this might not be the best image for their background?
    – maxathousand
    Sep 7, 2018 at 20:34
  • @maxathousand Yes, that is an option. The above screenshot shows the uploaded image. I could overlay it with text with something like: "Title goes here".
    – bart
    Sep 7, 2018 at 20:46
  • You could also leverage animation so they see their image immediately, with a title that appears after a short delay. This would illustrate that this preview contains a title layer, and is not a part of the actual image the selected. Perhaps something like this?
    – maxathousand
    Sep 7, 2018 at 21:53

3 Answers 3

Reset to default
4

You mentioned that there should not be any text in the image for a specific reason in your question, so that specific reason could be reflected during the upload process to your users. Stating something like

Uploading images with existing text will make the title text difficult to read

prominent with your existing description is a simple first step.

Additionally, showing a small example could get the point across. Show two identical images where one has existing text, and then a mock-up title placed on top. Such an example would demonstrate that the final result for the image without text is more desirable.

Improve this answer
1

Have you recently updated the process?

This could be a reason users are not aware of the fact that it's possible to manually add text to an image afterwards. Another reason could be that users have already designed their header images beforehand or that the instruction is not conveyed clearly enough.

You could, for example, use a stepper that indicates the upload process. This way, it's clear which steps takes to upload a header image and that text is no longer required.

Here is an example of what it could look like:

Material stepper UI

Improve this answer
1

Will the image be shown to everyone or just the person uploading it? You could display a live example of the uploaded image after the upload and let users validate their upload by "Saving", or choosing a different picture right there.

That way the users will see live why their option might not be ideal.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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