Tag Info

Hot answers tagged

18

I’ve no data other than some personal observations, but analytically modal lightboxes have such major usability problems compared the alternative that I can’t imagine what they’d be good for. People have compared lightboxes to modal dialog boxes, which force the user to complete or cancel an act before proceeding, while still allowing users to see the ...


11

Darkening the parent window is essentially a visual indicator to the user that the window is inactive. If the parent window does not change visually when the modal is shown, the user will think that the screen behind is still active. If the user clicks on something on the they will become frustrated that for no apparent reason it does not work. Think about ...


10

I'd probably try the combination background colour/opacity for the overlay and image border for the part where the ???-labeled arrow points. My main reason is that I suspect that quite a few users will confuse image background with the background inside the photo (the black parts in your example). You can test this quite easily. Find a few random people, ...


9

I wrote about some deliberations that were made over design and usability of responsive lightboxes. The main things to keep in mind are: Be aware that lightboxes are intrusive! Only use a lightbox if there's no other way to showcase a piece of content. If you must use one, make it as easy as possible for the user to understand that they're still on the ...


9

May I suggest that when the viewport gets too small you'll simply remove the margins around the lightbox, remove the close button and switch over to what Apple refers to a "full screen modal view"? Pretty much like this:


7

I think the darkened screen behind the modal window convention came from movie theaters. When the movie starts, the light is dimmed so you naturally pay more attention to the bright screen. If the function in the modal is a key component (sign up, warning etc) then I think it's OK. I'd only reserve this treatment for important features and not over-do it. ...


7

Instead of opening the terms and conditions in a new window, you could display them in an area with a scrollbar. This way, the terms are immediately visible and there is no need to open them in a new window / tab.


6

It largely depends on what the dialog is doing, but generally yes, leave as many exit vectors for a modal dialog as possible. As long as other modal dialogs close with the Escape key and clicking outside the window, people will assume yours will too. Clicking away is a common reaction to "Oh, I didn't mean to do that". Forcing the user to interact with the ...


6

Browser Screen can get refreshed in at least three of the given scenarios: User is not sure how to close the popup which has taken full screen and he refreshes the browser to try to get back at where he was before the popup User thinks that image in the popup hasn't loaded properly enough and he might refresh the browser to load the popup again Browser ...


4

It's a mechanism halfway between an informational popup window and the sudden shift of showing a completely different screen. Without darkening the screen you are saying 'this is a transient dialog within your workflow and you can get back to the main window any time'. This would be the norm. By darkening the screen you are providing almost a separate ...


4

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: The author clicks on the header. A new editing panel opens up somewhere else, perhaps docked to the bottom third of the viewport. ...


4

We recently had the same discussion: Our old websites uses the darkened background, we wanted to get rid of it to achieve a friendlier, cleaner look but one problem popped up immediately: The button on the dialog was competing for attention with the buttons of the page. And that's why we got back to using a darkened background again.


4

It is faster for the user to close the popup dialog by clicking outside. Outside area has a bigger clicking area than a close button and smaller distance to the cursor/finger (Fitt's law). Since some users may not know that closing outside also dismisses the popup so having a Close button is good as well. I don't really see how ability to easily exit adds ...


4

Is popup content context-independent? That's the question you should find an answer to and then you will be able to choose the correct behaviour: Popup content is independent of the context. For example, a gallery popup with a photo at a photo hosting. User traverses through the photos one by one and should be able to share a link to the certain photo ...


3

that effect will feel more like an "obstacle". If at all, the modal dialog is the obstacle, not the effect. I don't even agree it's an obstacle. For the average geek, choice is good. For the average user, guidance is more important. The dark background gives a clear signal: I want your attention here. A big friendly cancel button is the only thing ...


3

if that effect will feel more like an "obstacle". Darkening the screen behind modal windows/popups/alerts (whatever you want to call them!) is almost ubiquitous on websites in my experience. Ask yourself - have you ever found it an "obstacle"? Personally, I haven't. There are larger discussions around the usability of "lightbox"-type features, and ...


3

Call it the picture frame. It's analagous to an everyday object.


3

You could offset the area the lightbox covers by a certain number of pixels from the top so that the entire upper header is still fully visible and responds to interaction. You could change the z-index of the header when you activate the lightbox so that it pops up over the lightbox You could copy the Help button into the lightbox (which you indicated you ...


3

I agree with Vitaly - but am just starting on this site so I can't vote him up. I think most users would appreciate the 4 arrows approach because it signify's full screen/larger representation pretty universally. I don't know if there is a benefit to trying to find an icon to let them know it is specifically a LightBox vs. a full/larger screen ...


3

Do these help? http://www.iconfinder.com/search/?q=expand http://www.iconfinder.com/search/?q=full+screen


3

I find the popularity of these implementations quite disconcerting and a step back from trying to have the user feel in control. They also often have lengthy animations that gets in the way of a workflow. Image galleries with lightbox style blow-ups tend to keep the user waiting for the bigger image to load and while waiting - the user is unable to continue ...


3

I would call the image background image background. I would also rename the area you currently call background to something like page mask, so you'd have page mask color and page mask opacity. Edit After seeing some of the other answers (Marielle's in particular), maybe call the image background image surround or image frame.


3

To my knowledge, there is no study that indicates why one situation would be preferable to the other from a perceptual/cognitive point of view. However, after conversation with a colleague, it intuitively feels that: It would be good to darken the screen behind the modal window if your modal window directly affects data that is displayed in the parent ...


3

I have several suggestions for this: Make sure that the 'create a new record', 'edit record' (and preferably 'view record') are visualy and functionaly as close to each other as possible. This sort of consistancy makes it very easy on the user as they only need to see one of these forms to be familiar with all of them. When showing the search results I ...


3

There are a few options you can use - which work. The first, most obvious one is adding the regular sharing images in the same lightbox - like this: But that is not really quite aesthetic, since they get too much focus. Another more modest way is to show the URL to the object along with the grayed share-icon. Of course users would have to copy thje URL to ...


3

There are several reasons for decisions like this: Mobile apps tend to favor simplicity over efficiency. The quick view is a convenience feature that can potentially make the app more confusing/cluttered without helping deliver on the core functionality. Features like the quick view make it faster to use the app, but end up being more confusing for users. ...


2

What about a legend, perhaps interactive so that it shows a preview of the settings? Even when you think you've found the perfect metaphorical terms, or even blatantly explicit descriptions, users will still confound you.



Only top voted, non community-wiki answers of a minimum length are eligible