3

Here is situation:
Images are displayed in div boxes optimized for mobile delivery and large images are being preloaded. When user click box large image is displayed.
How to display single very detailed and large image on mobile from UX perspective?

1) Display image at 100% its width/height ?
-User gets most detailed img but must intensely scroll around
2) Display image at 100% device (detects best suited device orientation) view-port ?
-User gets low detailed image and must use zoom
enter image description here
3) Display image window larger than device view-port with fixed width/height?
-user gets semi detailed img and must scroll around
enter image description here
Any additional suggestions ?

  • 1
    What is the user's task/goal when displaying the image? – Alexey Kolchenko Dec 25 '15 at 15:52
  • 1
    Goal is to see product in fine details on mobile platforms (from use case diagram) and let interactivity be intuitive (user group is specified). For desktop we got solution , now mobile is problem because we need to preserve same amount of detail for product in question (client requirement). – Ivan Dec 25 '15 at 16:20
  • Does your average user have high or low bandwidth? Do the images show useful information when displayed fully within the screen or only when displayed at larger sizes? – Graham Herrli Dec 25 '15 at 19:23
5

Observing each pixel on the product's image on a mobile is both boring (emotional side of UX), and hard (extensive physical interaction due to small screen size), and has low sense for a user, too.

To provide better UX, you can use an image with embedded interactive "points of interest". In this way a user sees entire product's image, and can tap and switch to the detailed views which discover important features of the product.

A. Initial image with a set of cues (interactive POIs) enter image description here

B. Detailed view of a feature
enter image description here

The advantages:

  1. Easy interaction
  2. Highlighting the details (low cognitive load)
  3. Combining both overall product's image, and detailed views, too.

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.