2

I'm working on a desktop software that is in its core a simple image editor (apply filter, draw on image etc.) but the catch is that the user should be able to open multiple images, edit, and compare them at the same time.

Drawings and filters are layers upon images that can be toggled (show/hide) and reorderd.

I'm looking for a comprehensible UX pattern to display multiple images and their corresponding layers. Should I aim for a design similar to wellknown image processing software like Photoshop and have a sidebar containing all layers (each in a subsection per image)? Or display each image in a seperate GUI element with its layers at the bottom? Or any other ideas?

I'd be thankful for ideas and inspirations.

  • What sort of application are we talking about? Native desktop, native mobile, responsive web? – Matt Obee Jun 19 '17 at 13:57
  • 1
    Sorry I forgot to specify that. It's a desktop application – Androidicus Jun 19 '17 at 13:59
  • Are we talking about a few layers (two or three) or studio level editing with 40-50 layers? And what screen size are you working to? – Andrew Martin Jul 19 '17 at 15:18
  • @AndrewMartin usually around 4 definitely less than 10. Should be used on a desktop machine, but responsiveness wouldn't hurt. Thanks in advance for your input – Androidicus Jul 19 '17 at 15:38
0

It does sound like something similar to Photoshop and Illustrator's handling of layers would be a good fit. Assuming there is no benefit to the user in being able to see the list of layers for all images at once (which sounds rather overwhelming), I'd display the layers for the selected image.

Like this, perhaps:

enter image description here

Obviously, the images would be larger than I've shown in this wireframe.

0

I'd suggest keeping the layers attatched to the image they belong to.

Removing them to a different part of the interface risks confusion.

Try something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Is takes up minimal room in the UI, is extensible (within limits), and would allow for a responsive layout.

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.