2

I'm not a fan of allowing any outside logos into an app but it is a Client requirement. The requirement is that a user can upload their logo and it will replace the app logo in a space that is 120px - 160px width. There are several problems to try to prevent when allowing the user to upload a logo:

  1. poor quality image that is pixelated when uploaded
  2. wrong size image that will be distorted when displayed
  3. unvectored text in logo font images ( which can't be prevented )
  4. wrong aspect ratio logos

I'd like to know what the best parameters to set for an uploaded logo. We can do a check with the code for the px width and height. But the code can not check if the text has been vectorized. Any insights would be nice in this problem. Thanks in advance.

Improve this question
5
  • Code can check file's extension so that it can check if the text has been vectorized. But besides that's not a UX problem, I'm not into answering the concerns you mentioned with 4 elements. I'm not sure but you may get better results on Graphic Design I suppose.
    – Erhan Yaşar
    Dec 5, 2019 at 21:11
  • Thanks @ErhanYaşar, what extensions will indicate the text in the image has been vectorized? .png?
    – jeancode
    Dec 5, 2019 at 21:36
  • I don't know of all but .ai, .svg, and .eps are vectorized. .png is rasterized, even there's a source about it, check for its correctness.
    – Erhan Yaşar
    Dec 5, 2019 at 21:44
  • Thanks @ErhanYaşar, this information is helping to gather a more thorough knowledge about what types of image files can be used. The .ai and eps can't be loaded into app code since it needs Adobe product, however .svgcan.
    – jeancode
    Dec 5, 2019 at 22:32
  • Glad it helped.
    – Erhan Yaşar
    Dec 5, 2019 at 22:38

1 Answer 1

Reset to default
4

It's hard to say for certain what will work for users without testing the interaction directly, however, here are a few principles which may help...

1. Show the image in context

Context is Key which is why this suggestion is number 1.

Before a user even tries uploading an image show them a placeholder with dimensions right where it will go.

placeholder with dimensions

After an image is selected allow the user to see it instead of the placeholder before asking them to confirm it as their final choice.

2. Inform the user what works best

Remember that every user input is a barrier so avoid stopping the user from uploading a bad image and instead offer suggestions on what they could do better.

Instead of blocking the user with an error message...

Error: your image was 171x144. Please upload an image with the dimensions 160 x 120.

| OK |

Gently informing the user reduces friction...

This image may appear distorted since it is the wrong size.

| Upload new image | Use current image |

3. Offer a premium service

This may be out of scope for your particular project but is included for completeness. If your users are pretty technical then this option could be too much but if not then some of them may prefer an easy way to pay someone else to do it for them.

Improve this answer
2
  • Thanks @DaveAlger this is helpful from a User Experience pov for sure!
    – jeancode
    Dec 5, 2019 at 22:35
  • 1
    You're welcome. My motto is: The best UI is no UI so I don't like asking for user input unless there is no other way to proceed. At that point users are happy to give input as long as you don't punish them for giving you something. Guide instead of Dictate
    – DaveAlger
    Dec 6, 2019 at 15:43

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.