98

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


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

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


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


6

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


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

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

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

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

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

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

I'll answer this question in two parts. Are modal windows Accessible The answer to what I can find seems to be Generally no. I recommend looking at this study which was done to check how screen readers react to modal windows. To quote the study Being a screen-reader user I tested several modal dialogs, including the jQuery modal dialog, with several ...


3

Popovers are an extension of tooltips which include more content beyond simple text. They often have a title and can include images etc. A tooltip is merely text. When should I use a popover vs a tooltip? https://stackoverflow.com/questions/9843249/twitter-bootstrap-popover-vs-tooltip https://www.quora.com/Whats-the-difference-between-a-modal-a-popover-and-...


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

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

I would say that on page refresh no, you should not continue to show a modal. Modals are, by their nature, intended only for limited, transient information that is used to supplement or enhance the main content. If the information being shown in them is important enough to be displayed as the main content on a page refresh then they should most likely be ...


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


2

For me the answer lies in how much data is in each row, and what other actions you might want to do from there. If there are only a couple of fields in each row and it's a "dead end", a lightbox makes sense. Dead end meaning there aren't any other actions that will take the user to another page. If you're taking the user to another page to edit the data, ...


2

What about using one of these awesome transitions to display the error message? http://tympanus.net/Development/PageTransitions/ The message could be inside a hidden div in each accordions, and can be revealed when the error occured.


2

Another option is to have an dismissable overlay like how stackoverflow does it when a mistake is done This way you can draw the person's attention to the concerned error and allow him to take the corresponding action needed.


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