1

Issue: We have an image upload form where the user needs to fill in several form fields related to each image, such as the author, description, expiration date, and comment. Some of these fields will be automatically populated, while others will not.

The user can upload a large number of images simultaneously. Often, there is a need to apply the metadata from one image to others. It's possible that they would like to apply all the metadata from a selected image to the metadata of chosen or all images. Additionally, they may want to select only specific metadata fields they wish to copy from any image to other images.

Questions:

  1. Have you encountered a similar solution elsewhere? (The only benchmark I have is mass metadata editing in Fotostation)
  2. How best to handle these scenarios? Do you have any ideas?

Below is a visual mockup of the form layout. Using checkboxes alongside fields may be problematic due to the appearance and functionality of the input elements.enter image description here

1 Answer 1

0

I don't know Fotostation, but I do know the most well-known tool for data copy-paste: Excel (or Sheets).

For example, in Sheets it's called "paint format" and it copies colors and fonts from one cell to another cell or multiple cells. It's not 100% the same, but I think you can use that approach for your image uploader.

My implementation suggestion would be:

  1. Create a special toolbar for placing the "copy" button and leave an empty space for displaying the metadata that is being copied.

  2. When the user clicks on that copy button, display a message asking the user to select the field to copy from. Also change the UI from "editing mode" to "copy-paste mode" by placing some special overlay boxes on top of each field.

  3. You can display a semitransparent overlay box in 2 ways:

    • visible only on hover
    • visible all the time (this also works for mobile)
  4. The semitransparent boxes should have a different design for copy and for paste. For example, copy can be a yellow glass with orange border, while paste can be a light-green glass with green border.

  5. You can also have bigger boxes that cover multiple fields so that the user can copy from multiple fields at the same time.

  6. After the user has selected the copy-from fields, the copied metadata would be displayed in the toolbar's empty space. You should also add a cancel button to exit the copy-paste mode.

  7. After copy is done, change into paste mode and display a message asking the user to select the paste-to fields (or group of fields).

  8. When the user selects the paste-to fields, update the selected fields with the copied metadata.

  9. You can even consider the whole image (with all its fields) as copy-from and paste-to boxes. You could have multiple toolbar buttons for choosing how many fields to copy-paste at once: 1 field, 2 fields, 4 fields, or all fields for an image.

  10. After the user is done with copy-paste, show a save button. I think it's better to have a save button, because the user might accidentally copy-paste the wrong metadata. You could also add an undo button that the user can simply click without interrupting the flow (and also add ctrl+z shortcut).

What I described is mostly the interaction design. I leave the overall look-n-feel for you to decide.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.