Collage Designer App - Edit a single image

Question

I'm currently developing a responsive web app that allows the user to create an image collage. The user has a pool of uploaded images that can be arranged in a predefined grid. The upcoming image shows a mockup of the mobile version of the collage designer (I'm not allowed to post more than two images).

The image pool is on the top and contains the uploaded images; the selected images are highlighted in green (one image is not displayed, Figma throw it out). The user can upload an image by clicking the blue button. In the menu below the collage, the user can pick between different aspect ratios ("Formate"), different grid layouts ("Layout") and themes ("Vorlagen").

To transform a single image, the user needs to tap on it. The problem me and my colleagues are facing is how to display the edit options of the selected image.

We have two different version:

First version

When the user taps on an image, a static dialog is displayed in front of the collage on the bottom. It is transparent but could overlay the selected image (here it is the image with the green border).

Second version

When in editing mode, the menu items switch from the overall collage options to the specific edit options. No overlay or popup distracts the user from viewing the collage while editing.

Which version would you prefer or is there another options we should consider?
Thank you!

Answer 1

The problem with the second version is that the "overall options" disappear. The user might not know that he has to unselect the image in order to make them appear again. In order to avoid this problem, additional hints in the user interface would be necessary.

The first version is in my opinion not bad. It is consistent with the principle Closeness of actions and objects:

Summary: Users overlook features if the GUI elements (such as buttons and checkboxes) are too far away from the objects they act on.