6

Below you can see a screenshot of a web-based page layout editor.

It is basically a drag and drop WYSIWYG editor for interactive apps, and allows the user to use a page backdrop and add a "layer" of interactive elements to it, such as image galleries, videos, etc.

New objects can be created by dragging one of the small "objects" at the upper right into the layout. After dropping, the new object will appear and can be edited.

The user interface below has 3 parts:

  • The menu bar/toolbar which allows the user to navigate within the whole interface.
  • The page editor area on the left, which displays the preview of the page and allows placement of objects (blue boxes).
  • The properties-sidebar/palette.

This layout basically works, but I'm sure there are ways to improve the overall user experience.

Questions

  1. With the creation of new objects: Is there a better/more intuitive way than having the static list of object types at the upper right? Would it make sense to move this to the left side, possibly as a thin column?

  2. Most objects don't have very many properties, so a lot of space is usually wasted; although I'm not sure if that can be fixed without the use of modal dialogs (which I want to avoid, due to extra clicking). How could I avoid wasting space?

  3. I'd like to hear from experienced UI designers if there are best-practices for this kind of user interface? I'm quite biased by Adobe software.

Screenshot of 'Page Layout' Editor

Mockup

Improve this question
2
  • 1
    With your question 1) do you mean that right now you have a list of item types as shown at the top of the right column in screenshot 1, and those are items user click and drag to the stage? And concerning your second question, could you specify: Do you right now show all properties of all elements placed on a page in the sidebar?
    – kontur
    Dec 29, 2012 at 20:30
  • @kontur: 1) yes, 2) right now we just display the relevant properties; not the ones of all objects. if I got your question right.
    – BastiBen
    Dec 29, 2012 at 21:57

2 Answers 2

Reset to default
2

The panel that users use for editing the object is called a control panel (I took the name from Adobe Illustrator), and it is a horizontal panel located at the top.

And as for the toolbox, you are right, thin column is better and should be at left side.

enter image description here

enter image description here

So, the control panel at the top would be dynamic, it will change in content as the user focus between different objects. The default focus should be the web page itself, AKA nothing is being focused, in that case, you should let the users to modify properties of the web page as a whole, such as the size and alignment. If that's not a feature, then just have it empty.

Improve this answer
7
  • Adobe introduced this in the recent CS products as far as I can remember. I think the horizontal properties "control panel" might be a problem in this case, though. For instance, there is a photo gallery object which users can assign a list of photos/pictures to. This works better in a sidebar-like control panel as it can expand properly. Otherwise I'd have to implement some floating dialogs to do the same job.
    – BastiBen
    Dec 30, 2012 at 8:32
  • @badcat the decision to use horizontal or vertical really depend on the number of properties the user is allow to edit, and the nature of the way they edit them. If the photo gallery is the only object that requires more space, then you should make that an exception and go with a floating dialog for assigning photos.
    – Andy
    Dec 30, 2012 at 8:52
  • Are you sure about positioning the properties above the main content area / the canvas? IMHO it feels a bit strange if you go through a workflow of a user: 1. user adds a new item from the tool box to the canvas. 2. he can then change properties above the toolbox and the canvas. So the properties box comes before the toolbox and canvas. It feels a wee bit strange to me.
    – Oliver
    Dec 31, 2012 at 8:25
  • yes, that's an industry standard, e.g. Microsoft Office, Adobe CS
    – Andy
    Dec 31, 2012 at 8:29
  • Ah ok, the ribbon!!!! I actually like the ribbon in Office… There is quite a difference between the web user experience and desktop. Thanks for the reminder!
    – Oliver
    Dec 31, 2012 at 8:39
2

I would take this approach:

  1. Move the the static list to the left as a column - as you suggest. Give it a short headline. Keep it slim, make it drag & droppable and choose clear & short names for the item types. If items can not be used multiple times, gray them out in the left column. Make sure the user understands where she/he can drop the items!

  2. The properties of the items should not be set in the left column. this would bloat the column and make it very complicated just to get started. I would "open" or "expand" the item right after dropping it on the main canvas, let the user do the settings right there. This has additional advantages: If you let the settings/properties be set in the left column, the user might think this is a general setting, as she/he is setting it in the left column without a direct link to the canvas itself.

  3. One of the better examples for such an interface is the app creation in Podio. You can try it for free, create a new app and have a similar type of application, except that you don'T build a page but more a form and an viewer for entries. (I am in no way affiliated with Podio, I just like their approach to this specific detail.)

Less positive examples for similar applications can be found in the Salesforce page layout editor. It uses a floating horizontal block with the static list of items. This sticks to the top of the screen, used items are grayed out. It feels terrible.

Improve this answer
1
  • Plus: Show the user that this specific item he/she dropped onto the canvas is extended. a pure focus visualisation is not enough. maybe a triangular symbol rotated and used as an icon to indicate expand/implode the settings for this one icon.
    – Oliver
    Dec 30, 2012 at 12:27

Your Answer

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

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