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
3) Display image window larger than device view-port with fixed width/height?
-user gets semi detailed img and must scroll around
Any additional suggestions ?
-
1What is the user's task/goal when displaying the image?– Alexey KolchenkoDec 25, 2015 at 15:52
-
1Goal 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).– IvanDec 25, 2015 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 HerrliDec 25, 2015 at 19:23
Add a comment
|
1 Answer
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)
B. Detailed view of a feature
The advantages:
- Easy interaction
- Highlighting the details (low cognitive load)
- Combining both overall product's image, and detailed views, too.
answered Dec 25, 2015 at 16:46
