What is a good visual format for a “show” page?

Question

Let's say the user clicks on something that is an entity in the system. In my case, it's a template for a course that students take.

On this screen, I want to show various properties of the template and have them edit those properties, but I also want to allow for them to do various things, like drag/drop functionality or upload images that belong to this template.

What is the best way to present these different things to the user? Should I have multiple tabs - one for showing the properties, another for doing the drag-and-drop stuff and another for changing the image? Should I just the properties first, and then list the drag and drop stuff later?

Answer 1

Give them an option for each section of your template where you want them to be able to edit. You can also think about a way of customizing the permissions. As in some users may edit only the content other can edit the header/footer too.

Here is an example:

For example you could have a cog in the right hand side of each region that once hovered over opens into a menu like the one in each section above.

When you click the properties you will be shown a form for that region to update the properties.

When you click upload you will be presented with an image upload form.

When you click Drag and Drop highlight the surface where the drag and drop can occur maybe also put an over-layed semitransparent div (with a message like Drag and Drop a file to change xyz property of this container).

I think this way the user will like the fact that you are not taking him from one place to the other, showing him different stuff all the time.

If you would like you can also make that menu on a vertical axis to the right of each container.

Hope this helps.