Overlay Positioning: Fixed or Absolute?

classic Classic list List threaded Threaded
17 messages Options
Steve McMahon Steve McMahon
Reply | Threaded
Open this post in threaded view
|

Overlay Positioning: Fixed or Absolute?

Let me recapitulate a debate that just occurred on #plone-framework, to gather wider opinion.

We're using popup overlays in various places as something like modal dialogs. The question is whether they should be positioned absolutely (in relation to the page) or fixed (in relation to the viewport). The question particularly hinges on the visual behavior of a form that's longer than the viewport.

Pros and cons:

Absolute positioning

Pro: If a form is long, it may be allowed to expand its vertical height as far as necessary to include everything, and the user may just scroll the page to get to the additional parts of the form.

Con:

1) It's entirely possible to lose the overlay if the page is scrolled, particularly for a shorter form.

2) Having the form overlay itself move when the page is scrolled may fail to cue the visitor into the fact that this is a modal dialog, not another page element.

Fixed positioning

Pro: The user can't lose the form (which is, after all, meant to be modal) before dealing with it or dismissing it.

Con: If a form overlay is going to be longer than the viewport, it's going to have to grow a scrollbar in order to avoid having the bottom of the form become unreachable. Then, you've got two scrollbars on browser window. Yuck.

A little background: We don't have that many long forms. Probably the longest at the moment is the "add user" form. If the viewport is under about 800 px, that form is either going to extend beyond the viewport or grow a scrollbar, depending on our choice.

Let me add: I see the merits of both approaches, and have gone back and forth on this. I'll really be happy doing it either way as long as we have some general agreement.

------------------------------------------------------------------------------


_______________________________________________
Plone-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-developers
Martin Aspeli Martin Aspeli
Reply | Threaded
Open this post in threaded view
|

Re: Overlay Positioning: Fixed or Absolute?



On 13 May 2010 05:36, Steve McMahon <[hidden email]> wrote:
Let me recapitulate a debate that just occurred on #plone-framework, to gather wider opinion.

We're using popup overlays in various places as something like modal dialogs. The question is whether they should be positioned absolutely (in relation to the page) or fixed (in relation to the viewport). The question particularly hinges on the visual behavior of a form that's longer than the viewport.

Pros and cons:

Absolute positioning

Pro: If a form is long, it may be allowed to expand its vertical height as far as necessary to include everything, and the user may just scroll the page to get to the additional parts of the form.

Con:

1) It's entirely possible to lose the overlay if the page is scrolled, particularly for a shorter form.

2) Having the form overlay itself move when the page is scrolled may fail to cue the visitor into the fact that this is a modal dialog, not another page element.


We've had overlay triggers (buttons opening dialogues) that are pretty far down the page, and require some scrolling to get to. The user then needs to scroll up to get the dialogue, which is pretty poor. In the worst case, they may not even see it!

That could be fixed by making the initial pop-up position relative to the original viewport, not the physical top of the page.
 
Fixed positioning

Pro: The user can't lose the form (which is, after all, meant to be modal) before dealing with it or dismissing it.

Con: If a form overlay is going to be longer than the viewport, it's going to have to grow a scrollbar in order to avoid having the bottom of the form become unreachable. Then, you've got two scrollbars on browser window. Yuck.

A little background: We don't have that many long forms. Probably the longest at the moment is the "add user" form. If the viewport is under about 800 px, that form is either going to extend beyond the viewport or grow a scrollbar, depending on our choice.

Let me add: I see the merits of both approaches, and have gone back and forth on this. I'll really be happy doing it either way as long as we have some general agreement.

I think the initial position issue above is more important, and probably less controversial. Beyond that, I'd prefer to avoid doubling of scrollbars. They really confuse people.

Martin

------------------------------------------------------------------------------


_______________________________________________
Plone-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-developers
Dylan Jay Dylan Jay
Reply | Threaded
Open this post in threaded view
|

Re: Overlay Positioning: Fixed or Absolute?


On 13/05/2010, at 10:30 AM, Martin Aspeli wrote:

> I think the initial position issue above is more important, and  
> probably less controversial. Beyond that, I'd prefer to avoid  
> doubling of scrollbars. They really confuse people.

+1 I can't see a downside in this approach of setting the initial  
position relative to the viewport but not making it fixed position but  
rather scroll with the page so if its long you use the normal page  
scroll bars.

------------------------------------------------------------------------------

_______________________________________________
Plone-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-developers
Diego Municio Diego Municio
Reply | Threaded
Open this post in threaded view
|

Re: Overlay Positioning: Fixed or Absolute?

I would prefer absolute positioning. Here are some points to avoid the cons:

- I would not set the initial position relative to the viewport. I would rather position the modal dialog at the top of the page and if the page has scroll move the scroll to the top.
- To emphasize that it is a modal dialog maybe we can darken the background...

About accessibility I can say that we should avoid a scroll inside the modal dialog and don't forget that we should be able to access the same features of these modal dialogs if javascript is disabled also.

2010/5/13 Dylan Jay <[hidden email]>

On 13/05/2010, at 10:30 AM, Martin Aspeli wrote:

> I think the initial position issue above is more important, and
> probably less controversial. Beyond that, I'd prefer to avoid
> doubling of scrollbars. They really confuse people.

+1 I can't see a downside in this approach of setting the initial
position relative to the viewport but not making it fixed position but
rather scroll with the page so if its long you use the normal page
scroll bars.

------------------------------------------------------------------------------

_______________________________________________
Plone-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-developers


------------------------------------------------------------------------------


_______________________________________________
Plone-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-developers
Steve McMahon Steve McMahon
Reply | Threaded
Open this post in threaded view
|

Re: Overlay Positioning: Fixed or Absolute?

In reply to this post by Martin Aspeli
On Wed, May 12, 2010 at 5:30 PM, Martin Aspeli <[hidden email]> wrote:
...

We've had overlay triggers (buttons opening dialogues) that are pretty far down the page, and require some scrolling to get to. The user then needs to scroll up to get the dialogue, which is pretty poor. In the worst case, they may not even see it!

That could be fixed by making the initial pop-up position relative to the original viewport, not the physical top of the page.
 ...

The overlay code is supposed to be doing just that. If it isn't we've got to track it down and fix it. So, we need some bug tickets with specifics.

------------------------------------------------------------------------------


_______________________________________________
Plone-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-developers
Steve McMahon Steve McMahon
Reply | Threaded
Open this post in threaded view
|

Re: Overlay Positioning: Fixed or Absolute?

In reply to this post by Diego Municio
On Thu, May 13, 2010 at 1:20 AM, Diego Municio <[hidden email]> wrote:
I would prefer absolute positioning. Here are some points to avoid the cons:

- I would not set the initial position relative to the viewport. I would rather position the modal dialog at the top of the page and if the page has scroll move the scroll to the top.

The general point of using overlays is that we want to allow a user to consider an option without necessarily disrupting their use of the page. If you click outside the form overlay or hit the cancel button, your view of the page should be unchanged. So, I'm a big -1 on automatically scrolling the underlying page.
 
- To emphasize that it is a modal dialog maybe we can darken the background...

Already implemented, and will be in the next release.

About accessibility I can say that we should avoid a scroll inside the modal dialog and don't forget that we should be able to access the same features of these modal dialogs if javascript is disabled also.

We're using a progressive enhancement approach. If there's no javascript, the link will open a page (just as in Plone < 4).
 


------------------------------------------------------------------------------


_______________________________________________
Plone-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-developers
Martin Aspeli Martin Aspeli
Reply | Threaded
Open this post in threaded view
|

Re: Overlay Positioning: Fixed or Absolute?

In reply to this post by Steve McMahon


On 13 May 2010 23:46, Steve McMahon <[hidden email]> wrote:
On Wed, May 12, 2010 at 5:30 PM, Martin Aspeli <[hidden email]> wrote:
...

We've had overlay triggers (buttons opening dialogues) that are pretty far down the page, and require some scrolling to get to. The user then needs to scroll up to get the dialogue, which is pretty poor. In the worst case, they may not even see it!

That could be fixed by making the initial pop-up position relative to the original viewport, not the physical top of the page.
 ...

The overlay code is supposed to be doing just that. If it isn't we've got to track it down and fix it. So, we need some bug tickets with specifics.

Well, it doesn't. What happens, actually, is that it moves focus to the first control in the form, which means that you lose the top of the form (e.g. a title).

Martin

------------------------------------------------------------------------------


_______________________________________________
Plone-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-developers
Martin Aspeli Martin Aspeli
Reply | Threaded
Open this post in threaded view
|

Re: Overlay Positioning: Fixed or Absolute?

In reply to this post by Steve McMahon


On 13 May 2010 23:54, Steve McMahon <[hidden email]> wrote:
On Thu, May 13, 2010 at 1:20 AM, Diego Municio <[hidden email]> wrote:
I would prefer absolute positioning. Here are some points to avoid the cons:

- I would not set the initial position relative to the viewport. I would rather position the modal dialog at the top of the page and if the page has scroll move the scroll to the top.

The general point of using overlays is that we want to allow a user to consider an option without necessarily disrupting their use of the page. If you click outside the form overlay or hit the cancel button, your view of the page should be unchanged. So, I'm a big -1 on automatically scrolling the underlying page.

You're absolutely right. Scrolling would be bad. This is not how modal dialogues work in desktop apps, for instance.

Martin

------------------------------------------------------------------------------


_______________________________________________
Plone-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-developers
Diego Municio Diego Municio
Reply | Threaded
Open this post in threaded view
|

Re: Overlay Positioning: Fixed or Absolute?



2010/5/13 Martin Aspeli <[hidden email]>


On 13 May 2010 23:54, Steve McMahon <[hidden email]> wrote:
On Thu, May 13, 2010 at 1:20 AM, Diego Municio <[hidden email]> wrote:
I would prefer absolute positioning. Here are some points to avoid the cons:

- I would not set the initial position relative to the viewport. I would rather position the modal dialog at the top of the page and if the page has scroll move the scroll to the top.

The general point of using overlays is that we want to allow a user to consider an option without necessarily disrupting their use of the page. If you click outside the form overlay or hit the cancel button, your view of the page should be unchanged. So, I'm a big -1 on automatically scrolling the underlying page.

You're absolutely right. Scrolling would be bad. This is not how modal dialogues work in desktop apps, for instance.

Ok... In that case I agree with you
 
Martin

------------------------------------------------------------------------------


_______________________________________________
Plone-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-developers



------------------------------------------------------------------------------


_______________________________________________
Plone-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-developers
Eric Steele (esteele) Eric Steele (esteele)
Reply | Threaded
Open this post in threaded view
|

Re: Overlay Positioning: Fixed or Absolute?

In reply to this post by Steve McMahon
On May 12, 2010, at 5:36 PM, Steve McMahon wrote:
> Let me recapitulate a debate that just occurred on #plone-framework, to gather wider opinion.
>
> We're using popup overlays in various places as something like modal dialogs. The question is whether they should be positioned absolutely (in relation to the page) or fixed (in relation to the viewport). The question particularly hinges on the visual behavior of a form that's longer than the viewport.
> ...*snip*

My two cents on this, after seeing it running: I love the dimmed page background, not the scrollbar in the dialog. The two actually feel like they're competing with overlay content somehow scrolling under the dimmed page that it's floating on top of. Makes my brain hurt.

Eric
------------------------------------------------------------------------------

_______________________________________________
Plone-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-developers
Steve McMahon Steve McMahon
Reply | Threaded
Open this post in threaded view
|

Re: Overlay Positioning: Fixed or Absolute?

Pain in the brain is undesirable. We're going with absolute positioning.

On Tue, May 18, 2010 at 12:17 PM, Eric Steele <[hidden email]> wrote:
On May 12, 2010, at 5:36 PM, Steve McMahon wrote:
> Let me recapitulate a debate that just occurred on #plone-framework, to gather wider opinion.
>
> We're using popup overlays in various places as something like modal dialogs. The question is whether they should be positioned absolutely (in relation to the page) or fixed (in relation to the viewport). The question particularly hinges on the visual behavior of a form that's longer than the viewport.
> ...*snip*

My two cents on this, after seeing it running: I love the dimmed page background, not the scrollbar in the dialog. The two actually feel like they're competing with overlay content somehow scrolling under the dimmed page that it's floating on top of. Makes my brain hurt.

Eric


------------------------------------------------------------------------------


_______________________________________________
Plone-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-developers
Alexander Limi Alexander Limi
Reply | Threaded
Open this post in threaded view
|

Re: Overlay Positioning: Fixed or Absolute?

On Tue, May 18, 2010 at 1:54 PM, Steve McMahon <[hidden email]> wrote:
Pain in the brain is undesirable. We're going with absolute positioning.

Thanks for doing the right thing while I was absent for a while. :)

There's a new aspect of the overlay that was introduced at the same time that needs some refinement, though: the dimmed background.

Dimming the background on non-modal dialogs isn't something we should do, as it indicates that you *have to* make a decision in the pop-up to continue. Most of the dialogs we have are actually not modal; you can skip out of them by clicking outside them without any harm.

I'm OK with having this treatment for things that *are* modal (say; a sign-up process that you have to go through steps 1, 2 & 3 to complete it), but not for the default dialogs that are pretty much all non-modal.

For a full explanation of this rationale, the iPad/iPhone Human Interface Guidelines have a more detailed explanation of the exact same thing; they have the same separation where they make non-modal overlays have the normal background, while modal dialogs dim the background.

I don't think we have anything that qualifies as a modal dialog in Plone right now that I can think of, but we might get some in the future, and there are probably cases like this in add-ons like PloneFormGen.

(there's also the aspect that dimming the entire screen when clicking a link on a 24-30" monitor is very jarring :)

--
Alexander Limi · http://limi.net

------------------------------------------------------------------------------
ThinkGeek and WIRED's GeekDad team up for the Ultimate
GeekDad Father's Day Giveaway. ONE MASSIVE PRIZE to the
lucky parental unit.  See the prize list and enter to win:
http://p.sf.net/sfu/thinkgeek-promo
_______________________________________________
Plone-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-developers
Alexander Limi · http://limi.net

Alexander Limi Alexander Limi
Reply | Threaded
Open this post in threaded view
|

Re: Overlay Positioning: Fixed or Absolute?

On Sat, Jun 5, 2010 at 2:18 AM, Alexander Limi <[hidden email]> wrote:
For a full explanation of this rationale, the iPad/iPhone Human Interface Guidelines have a more detailed explanation of the exact same thing; they have the same separation where they make non-modal overlays have the normal background, while modal dialogs dim the background.

This is only available to registered Apple developers, for some reason — here's the relevant section quoted:

Popovers and modal views are similar, in the sense that people typically can’t interact with the main view while a popover or modal view is open. But a modal view is always modal, whereas a popover can be used in two different ways:

  • Modal, in which case the popover dims the screen area around it and requires an explicit dismissal. This behavior is very similar to that of a modal view, but a popover’s appearance tends to give the experience a lighter weight.

  • Non-modal, in which case the popover does not dim the screen area around it and people can tap outside its bounds to dismiss it. This behavior makes a non-modal popover seem like another view in the application, not a separate state.




--
Alexander Limi · http://limi.net

------------------------------------------------------------------------------
ThinkGeek and WIRED's GeekDad team up for the Ultimate
GeekDad Father's Day Giveaway. ONE MASSIVE PRIZE to the
lucky parental unit.  See the prize list and enter to win:
http://p.sf.net/sfu/thinkgeek-promo
_______________________________________________
Plone-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-developers
Alexander Limi · http://limi.net

Laurence Rowe Laurence Rowe
Reply | Threaded
Open this post in threaded view
|

Re: Overlay Positioning: Fixed or Absolute?

In reply to this post by Steve McMahon
Re: Scrolling overlays

Could we avoid any scrolling in overlays by using fieldsets / tabs for a wizard like interface? This seems to work fairly well in the Amazon EC2 control panel (when starting a new instance).

Laurence
Steve McMahon Steve McMahon
Reply | Threaded
Open this post in threaded view
|

Re: Overlay Positioning: Fixed or Absolute?

In reply to this post by Alexander Limi
I'd say that the new generation of popup forms in Plone 4 is largely modal in character:

1) Nearly every one of these (login form, contact form, add user, advanced state, choosing default item) was a separate page in Plone 3.x. They're a separate page in P4 if js is turned off (or if you're using IE6). They are not, largely, different views of the current page, but something we're showing in a popup so that that the user doesn't lose the page context while performing an action.

Only the new history popup is really just an auxiliary view rather than an action.

2) Not a single one allows you to interact with other parts of the page (other than to dismiss the form by clicking outside it).

In my mind, masking the background serves as a visual cue that the form is modal: i.e., it is of the "use it or dismiss it" variety. I think that Facebook and Netflix have got web users well-schooled in this visual cue. This cue alerts the user to the fact that clicking outside the form will dismiss it.

Perhaps the current mask (much like Netflix's) is too jarring (though it's the page being dimmed, not the screen). Facebook uses a bleaching effect rather than dimming, and that might be a better alternative. Arguably, also one that's more familiar to most users given Facebook's current dominance. I've definitely no objection to alternative masking.

Whatever we do, let's remember to test on IE 7 and 8. They have no box-shadow, so that visual cue is missing on that platform. Our early beta versions of the popups just blended into the page on IE.

Steve






On Sat, Jun 5, 2010 at 2:21 AM, Alexander Limi <[hidden email]> wrote:
On Sat, Jun 5, 2010 at 2:18 AM, Alexander Limi <[hidden email]> wrote:
For a full explanation of this rationale, the iPad/iPhone Human Interface Guidelines have a more detailed explanation of the exact same thing; they have the same separation where they make non-modal overlays have the normal background, while modal dialogs dim the background.

This is only available to registered Apple developers, for some reason — here's the relevant section quoted:

Popovers and modal views are similar, in the sense that people typically can’t interact with the main view while a popover or modal view is open. But a modal view is always modal, whereas a popover can be used in two different ways:

  • Modal, in which case the popover dims the screen area around it and requires an explicit dismissal. This behavior is very similar to that of a modal view, but a popover’s appearance tends to give the experience a lighter weight.

  • Non-modal, in which case the popover does not dim the screen area around it and people can tap outside its bounds to dismiss it. This behavior makes a non-modal popover seem like another view in the application, not a separate state.




--
Alexander Limi · http://limi.net


------------------------------------------------------------------------------
ThinkGeek and WIRED's GeekDad team up for the Ultimate
GeekDad Father's Day Giveaway. ONE MASSIVE PRIZE to the
lucky parental unit.  See the prize list and enter to win:
http://p.sf.net/sfu/thinkgeek-promo
_______________________________________________
Plone-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-developers
Wichert Akkerman Wichert Akkerman
Reply | Threaded
Open this post in threaded view
|

Re: Overlay Positioning: Fixed or Absolute?

On 6/8/10 17:17 , Steve McMahon wrote:
> Perhaps the current mask (much like Netflix's) is too jarring (though
> it's the page being dimmed, not the screen). Facebook uses a bleaching
> effect rather than dimming, and that might be a better alternative.
> Arguably, also one that's more familiar to most users given Facebook's
> current dominance. I've definitely no objection to alternative masking.

Keep in mind that Facebook not dominant everywhere. In The Netherlands
Hyves is dominant, and in China Facebook is only used by a small
minority. In other words: what is familiar for you as facebook user may
not be familiar with others. Personally I can't remember ever seeing a
bleaching effect while I see dimming very often.

Wichert.

------------------------------------------------------------------------------
ThinkGeek and WIRED's GeekDad team up for the Ultimate
GeekDad Father's Day Giveaway. ONE MASSIVE PRIZE to the
lucky parental unit.  See the prize list and enter to win:
http://p.sf.net/sfu/thinkgeek-promo
_______________________________________________
Plone-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-developers
Laurence Rowe Laurence Rowe
Reply | Threaded
Open this post in threaded view
|

Re: Overlay Positioning: Fixed or Absolute?

Wichert Akkerman wrote
On 6/8/10 17:17 , Steve McMahon wrote:
> Perhaps the current mask (much like Netflix's) is too jarring (though
> it's the page being dimmed, not the screen). Facebook uses a bleaching
> effect rather than dimming, and that might be a better alternative.
> Arguably, also one that's more familiar to most users given Facebook's
> current dominance. I've definitely no objection to alternative masking.

Keep in mind that Facebook not dominant everywhere. In The Netherlands
Hyves is dominant, and in China Facebook is only used by a small
minority. In other words: what is familiar for you as facebook user may
not be familiar with others. Personally I can't remember ever seeing a
bleaching effect while I see dimming very often.
It took me a while to find a dialogue box in facebook, but clicking "New message" did bring one up. That seems to use a rounded border in combination with a background a semi-transparent dark background and padding on the wrapper div to give the effect of a 10px wide rounded semi transparent dark border. There is no bleaching effect. It looks quite good to me.

Clicking on a link in the page works and dismisses the dialogue box, but clicking outside of it does not.

Laurence