1

I have an app where users swipe through images, kind of a like a Tinder ui. The problem is that the images I use vary wildly in resolutions and aspect ratios. Is it better to have a set box that will always display the images at the same size regardless of qualities and just try to fit it like this:

enter image description here

Or to allow the images to be in different places to better suit the resolution of each like this:

enter image description here

1
  • I developed an App with the same UI. After having same problem and discussing a lot, we concluded the first option is a lot better from user's perspective. You can show a smaller image inside but keep all the cards same size with an outline and clear border
    – saurabh
    Apr 6 '17 at 12:36
0

The second example could create some legibility issues, because the limits of the image are not strongly marked. I believe by doing this you will probably also find some unexpected issues with cropping which will harm your final product.

If you want to have the images on top of each other - so they can have their "natural" ratios,- you could some visual effect on the ones that are underneath to clearly separate them from the active image. For example, you could use some transparency, or desaturate or blur them.

An alternative would be to always have the same frame around the images, and let the image resize to fit this frame. One way to do this would be to define a maximum width and height (say, 300px) and fill everything else in with white. A sort of frame/placeholder:

enter image description here

2
  • 1
    @sasquatch as well. So something like this? Apr 6 '17 at 12:48
  • With a clear border around container view/ card
    – saurabh
    Apr 6 '17 at 13:04
0

I developed an App with the same UI. After having same problem and discussing a lot, we concluded the first option is a lot better from user's perspective. You can show a smaller image inside but keep all the cards same size with an outline and clear border.

An example:

ux

You can also add the text (Sarah, Adult) at the bottom of the card and let image fit inside ImageView with an aspect fit.

2
  • This doesn't look good though !
    – Leths
    Apr 6 '17 at 15:08
  • It will if we add background color and padding.
    – saurabh
    Apr 6 '17 at 15:09

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.