More compact image widget display in Collect

Ideas
1

What high-level problem are you trying to solve?
Fit more form content on screen and reduce scrolling up & down. Currently the image fills the entire screen width, so an unanswered image question in landscape on a handset takes up the entire screen and once answered it takes up multiples of the screen height, and an answered image question in portrait on a handset takes up the entire screen or more. A portrait image on a landscape handset is the worst, with the question taking up >400% screen height.

On a larger screen tablet, the buttons in the unanswered state fit well, but once answered, again the question takes up from ~75% of the screen height (tablet in portrait, landscape image captured) to >300% of the screen height (tablet in landscape, portrait image captured), which leads to a lot of scrolling to get past the image preview, especially if there are multiple image questions in a field-list

As it is only a preview and it must be opened to annotate, there is no need for it to be shown so large, only large enough to recognise the content / confirm adequate sharpness. (without annotate appearance, tap to view only would allow a full screen preview)

Any ideas on how ODK could help you solve it?
Modified layout of buttons and image preview as per mockups below. Subject to required screen space for button translations and RtL / LtR languages!

Upload any helpful links, sketches, and videos.
Currently, portrait / landscape takes up the entire screen, even on larger tablets, requiring more scrolling up/down.

image
image782×1696 92.5 KB

image
image1630×776 114 KB

mockups of alternates;

Keep the image below the buttons but make it a fixed % of screen width or user set width or height parameter in % or pixels. This works well in portrait and has less of a benefit in landscape as the buttons take up much of the screen by themselves.

image
image782×1696 159 KB

Move the image inline with the buttons and let it take up as much of the available width / height as it can, aspect ratio depending. Again, a lesser benefit in landscape, but some is still achieved on a handset, and much moreso in larger & 'squarer' tablet screens (Can currently only fit 1x unanswered image question onscreen on a 6" handset in landscape but can currently fit 2x unanswered image questions, plus a few lines, on a 12" tablet in landscape)

image
image782×1696 138 KB

image
image1630×776 137 KB

Inline could allow 2-4x image questions visible at once, screen size and orientation dependent (~4x in portrait on a 12" tablet)

image
image782×1696 90.6 KB
image
image782×1696 107 KB

1 Like
2

Thanks for sharing these ideas, @ahblake! We’ve been thinking a lot about how we display images, in a way that doesn’t compromise the quality or impact usability.

I’m curious if this is something you’ve heard from users or is this more of a form design challenge? We are currently working on the image upload question for Web Forms and are making it compact and aim to incorporate learnings into Collect based on user feedback. Here is a sneak peek of some of what @JenniferQ is cooking up :eyes:

In the new designs, we’ve fixed the height to 300px and the width is flexible/responsive depending on the image. We are trying to find a balance between conserving space (so users don’t need to scroll) and usability. We don’t want to make images too small because we don’t currently have the ability for users to enlarge or zoom yet –– it could work nicely with the big-image. We aim to use a similar pattern for selects with images for Web Forms and Collect – we will share more soon.

We are thinking this might be possible in the next Collect release after edits :crossed_fingers:, as it’s related to other themes we are working on like displaying media in form filling and summary and improving selects. Although I don't think this solves you needs completely, I'm curious to get your thoughts.

1 Like
3

The specific complaint was around how much of the screen the image widget took up when used in a field list appearance, the mockups are my attempt at 'how could this be solved without causing too many unintended consequences'

I think 'image inline with buttons taking 50% width and image scaled to fit in the other 50%' is the most compact and still has good touch target size and a large enough image to be visible.

As mentioned above, if annotation is not enabled, you can (Collect) tap to view full screen and zoom-pan to see more detail - but when it is, you can't zoom-pan, you only get best fit to screen (which will be smaller that the current form view in some image orientation x device orientation combinations).

Zoom-pan with annotation would be great, zoom-pan with annotation and preserve captured resolution even better!

In the new webform example, how does 'markup image' display - 3 buttons in the space of the above 2?

be still my heart :heart_exclamation: