Posted by:Ranjani Rao April 22nd, 2016

Images add life to an app and make your narrative engaging and interesting. But it’s the development team which best understands the challenges that go into ensuring that images are well-managed and well-presented in the app! Let’s see a few tidbits of useful information that can help with handling images in apps.

images_in_mobile_apps

1. Avoid unnecessary images if you can. Not only do they take up memory, they slow down the app and you might at times need to create multiple images to cater to different screen sizes. So if you can handle the same UI with other widgets and don’t really need an image, don’t use one.

2. Keep in mind the various screen sizes you will be supporting when you design an image-rich app. Design considerations of this kind go a long way in avoiding problems at a later stage.

3. iOS has a few image scaling options or content modes that help decide how you will render an image. These are called Aspect Fit, Aspect Fill and Scale to Fill. Other platforms have their equivalents too. Some options might cause distortion but fit the image to the size of the image view while others may avoid distortion of the image but not present the image in the screen space you wish to assign to it. Depending on the app requirement, the right content mode must be chosen.

4. If you need to display a gallery of images, ensure that the thumbnails created are uniform and proportional to the original images.

5. If you need to save images onto the server, consider resizing them (depending on display requirements) and/or compressing (to reduce the file size) before sending them to the server.

6. If you need to load a series of images onto a single screen, it is best to load a few first and then load the rest in batches as the user scrolls on to ‘view more’. This way screen-loading time is minimized and it makes for a better user experience.

7. UI best practice: Always have a placeholder image for one that needs to get downloaded from the server or in cases when the user is yet to upload an image. Random blank spaces never made sense to anyone!

8. To save real estate on screen, a good option would be to first display a thumbnail of the image and have it blow up to screen size on tap. Allow users to zoom in and out on the image with the pinch-zoom user gesture. Also, have an easy way to dismiss the full-screen image and go back to the underlying screen. It also helps if this solo view of the image is presented against a dark background as that enhances the user’s experience of viewing the image.

9. If you wish to display text or captions with the image, add a semi-opaque dark layer to the bottom of the image and place the text in white bold, in this portion. That’s one of the easiest ways to get the user to see the image and read its accompanying text in the same view.

10. If your app allows users to upload images, give them as many options as possible to source the image – camera, phone gallery, Facebook etc. It also helps if they get to see a preview of how the image will be used in the app, before they actually decide to go ahead and use it.

These were a few quick tips with images in apps. Depending on the kind of app you are building, there could be several other ways to creatively handle and present images – just make sure you choose the most suitable ones. And the most suitable ones are those that ensure not just a great app user interface but also an optimum app performance.

What are the key ingredients of a succesful enterprise mobility strategy? To know download the infographic!

Leave a Reply

Your email address will not be published. Required fields are marked *