Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Some sites effectively combine the concept of, for the lack of better term, "in-context editing" and lightbox to allow users to easily do page content update. For example, check out Schoola and try changing the title text. You'll be presented with an "edit panel," which sits nicely on top of and has almost the same dimension with the title area.

This model works well to a certain extent but might have a difficulty to scale gracefully e.g. when the "edit panel" needs to grow much larger than the area that you're editing. Imagine if the title edit panel is 3 times longer than what it is now. To say the least, visually it might look as good as it is right now.

I am looking for an alternative that somehow detaches the edit panel from the target area it's editing. In other words, an interaction model that allows the edit panel to be positioned not necessarily always on top of the edited area (e.g. maybe to the side of it, maybe as a page-centered lightbox). However, I am having difficulty in providing the linkage / clue for the users to know exactly which area they are editing.

share|improve this question
add comment

2 Answers 2

Have you considered the gTalk style simple but elegant and very functional Pop-out?

enter image description here

With this, the 'box'should be able to have a size and position identical to the field being edited, by default. The 'box' can conveniently Pop-out at the user's discretion for a more spacious editing.

share|improve this answer
    
(+1) for the good idea. –  moey Mar 13 '12 at 16:05
add comment

What about a edit panel that maybe floats, or takes up a slice of the viewport, but keep the live preview pane open and dim everything in the site except the box for the one item that is being edited.

So, in your example:

  1. The author clicks on the header.
  2. A new editing panel opens up somewhere else, perhaps docked to the bottom third of the viewport.
  3. The website gets dimmed with a dark translucent layer, but the header's box remains at full brightness.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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