89

All of these UI components are containers/windows that show on top of the content you are currently viewing/interacting with. The different names are based on the attention they deserve, the context you're in, and how you can interact with them. Alert - These messages need immediate attention. The window/container is usually locked, meaning you can't ...


16

If you're going to make the choice for the user, I'd suggest using "Resume" since it's much easier for the user to revert back to the start than it is for them to find their place in the video. An alternative is to give the user the choice. For example for an unwatched video the option is "Play" and for a partly watched video you use both "Resume" and "Play ...


15

Think of it the other way: Not every user has the same level of familiarity, and other sites don't conform to the same standards. Clicking outside the content, or using the esc key to dismiss a dialog vary widely throughout the web. Many sites have frustrating dark patterns for lightbox content Oftentimes dialogs (used to collect email addresses / ...


11

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:


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 same ...


8

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.


8

Let users tell the story This is a very common situation. The user will choose a photo that represents the story they want to tell, but the story will develop sequentially. For example, let's say the user creates "My Wedding Album", and s/he uses a photo of the groom and the bride happily married. Quite possibly, this will be a photo in the middle of the ...


7

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 ...


5

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 ...


5

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 ...


4

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 ...


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 (...


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. The ...


4

I think Quickview as an independent function is a necessary evil in that it loads faster than a product detail page. As a necessary step in a purchase pathway, it holds less value, likewise in all ideal cases, the product detail would carry its full weight in converting a transaction. Your true question of whether next/previous is useful or a gimmick - it's ...


4

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. ...


4

This is one of those times where you have to balance what the user wants against business objectives. Not showing the newsletter lightbox is better for UX (no real question about that), but it's worse at achieving the business objectives. What you have to weigh up is how important those business objectives are against whether you're willing to harm the UX ...


4

There is a certain scenario for which a dedicated button is needed. For video, especially, it sounds like a bad idea to dismiss the Lightbox on clicking somewhere on the overlay background. Because that may happen accidentally, and buffering the same video which just finished loading is terribly painful. This will not be the case for an image, assuming it is ...


3

It's not necessarily a dialog, but it's necessarily a modal window. Think of it: it might not ask anything from the user (like a gallery viewer), but it doesn't allow you to interact with the rest of the page. Even if you click outside of it, you'll interact with the window (asking it to close), not the site behind. Therefore, your system switch to a mode. ...


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

Instinctively (I can't really provide any research to back this up) I'd say that when you close a modal the implication is that it's stopped existing, and when you open it again that's a new modal, rather than the same one that had been hidden all along - so based on that I think generally it'd feel more intuitive to start from the beginning again. That ...


3

I think we cannot give you a valid answer because we don't know why the user has opened the video for second time? What brought him back to view it again? If you can understand that you will definitely know what to do. It depends also on the contents and length of the video. Is the video showing some guide on how to play or is it just showcase of game ...


3

You can try use a band, with an icon and descriptive text. Try to take the color out of the signifier, as you'll often have no control of the color of the actual photos. One approach is a 80-90% black badge pinned to the lower left. It has some transparency, so it doesn't feel like it blocks the view of the photo (well, not as much). With a dark photo ...


2

Have you considered the gTalk style simple but elegant and very functional Pop-out? 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.


2

Modals like a lightbox are modal for a reason; all interaction is supposed to be contained within that modal window. That's actually what "modal" means in this context; it is a different mode of interaction. See my answer on What's modal about a modal dialog? Apple's iOS Human Interface Guidelines give some good tips on creating modal tasks. Your modal ...


2

One important point is keyboard accessibility: Let the user browse with the ← and → buttons, and make esc work as close button. You may offer further details when the user presses ↑ … but that requires probably some hints. Mouse users need clickable buttons to navigate images and to close the active one. These buttons can be hidden when the cursor is not ...


2

My approach would be to have it full screen (e.g. full browser window) on a unicolor background (probably black or dark grey) and hide all navigation (close, next, previous) as long as the mouse isn't moving. Like this you don't distract the user in any way without compromising usability by removing essential functions from the UI.


2

Yes it should for the sake of user control/freedom, unless there's a cancel button on the modal window. Here's a good article that explains the best practices for modal windows: Modal Windows Best Practices


2

Though the term "dialog box" conjures ideas similar to the one that Wikipedia shows here: ...the definition of Dialog is rather broad and applies to most of human-computer interaction. Pretty much everything is a dialog; the user gives input and the computer gives feedback. You click the big red button and the computer says it's shutting down. So you could ...


2

Normally the refresh feature is used for updating the site content, or used as a flush to clear the site of any user input. A question that I ask regarding this is whether the user could get anything out of refreshing the page with the modal image still present, is there any dynamic behaviour that can be presented first after a refresh Eg. a comment ...


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