Stack Exchange Network

Stack Exchange network consists of 175 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

Questions tagged [overlay]

An overlay sits over the top of the primary UI, preventing user interactions on elements other than available actions within the overlay itself in order to keep users concentrating on that particular event.

0
votes
1answer
43 views

On modal window, Is it necessary to put the word “VIEW” ITEM in the title of the modal after clicking a VIEW ITEM button or in a dropdown?

Example below is viewing a quote: A - View quote as the title (quote number as part of the content) B - Quote number as title and removed it from the content
1
vote
1answer
1k views

Full screen modal vs normal modal?

What are the advantages of using full screen vs normal modal? I've seen sites like Airbnb & Slack use white full-screen overlay. How does it impact usability? Are there any advantages for using ...
0
votes
2answers
95 views

More text for transparency vs. cleaner design

Topic: Make user sign up for newsletter in an online fashion shop. Problem: I want to be as transparent as possible with the users and not give them the feeling that this is just to grab their data. ...
1
vote
1answer
108 views

How to structure a page that contains a lot of information? [closed]

So what we have is a page that shows a list of "Vehicles" and the Passengers inside them. Imagine that each "Header" is a Vehicle and when you click the accordion button, it will expand to show the ...
0
votes
1answer
175 views

How to best do contextual help in Web forms for Touch devices?

I've got a Web form that contains contextual help where necessary. There is a small 'help'-icon next to some fields and if an user hovers it with his cursor, a little tooltip fades in. These ...
12
votes
3answers
2k views

Why websites usually block the navigation interaction when under a full screen overlay?

I'm working on a research project of web navigation. During research, I found that when there is a full screen overlay, websites tend to block the interaction of the navigation bar. Like web Twitter, ...
7
votes
4answers
2k views

What is the best position for clear filter button in a filter list

Here I have an example screen for filters in an overlay where clear filter button (which appears only when any of the filters is checked) is below the list of filters. Is it ok to place it here or ...
1
vote
1answer
407 views

Modal Dialog action leading to another Modal dialog - Mobile web

Developing a mobile web page where user has to see info about a particular product via a link in the page . Let say 'See More...' . This CTA opens up a modal dialog (lightbox/overlay... take your pick)...
1
vote
1answer
143 views

Can an image overlay be too obstructive?

For this question lets consider only no-touch devices and lets assume it is alright to hide that text. It is common, specially on grid layouts, to display image overlays with different levels of ...
2
votes
1answer
2k views

Fullscreen Modal Window Usability Issues [closed]

There is a new trend of fullscreen modals used in web applications. Please refer a sample in the below link (Click the green colored "See it in action" button): https://noreiller.github.io/bootstrap-...
0
votes
3answers
1k views

How to make a close button “X” stand out from a image [closed]

I have an image looks like satellite map where I want to put a close button at the top right corner. What I have now is just a span with "X". It's an 100% overlay on a popup so clicking outside ...
3
votes
2answers
664 views

Overlay Vs dedicated page or separate section within the page?

Context We have this situation where we need to display additional information about products that users has selected. The page in question is the page that houses the products, each product is ...
2
votes
1answer
131 views

Why do so many websites need to tell you about cookies?

So many websites have a banner that can be dismissed but otherwise act like a non-scrolling footer, that explains that cookies are a thing. Why is it necessary? Is there any reason why this "footer ...
0
votes
2answers
1k views

Correct name of transparent instructional overlays / coach marks for announcing new features or first time use?

I find always more often when using a mobile app for the first time, these kind of instructional overlays or coach marks which illustrate to the user the basic gestures and menus of an application. ...
1
vote
5answers
460 views

Is it a good UX practice to have more than two popups?

Once I select search icon, the pop up appears as shown in the image. Results are displayed in the same popup. But the problem is once I select one of the Pins (say Pin 1) a pop up appears with ...
4
votes
1answer
210 views

Modal or overlays for letting users carry tasks without shifting context ? Thoughts?

when I read up about modal dialog boxes and their use, there is a lot of discussion on how they interrupt the user's flow and how they should be used sparingly. What research is there suggesting ...
7
votes
7answers
566 views

Best method(s) to allow closing a popup

I find moving the mouse leftwards from it's normal position more easier. Is it the same for all users or at least for you? If not, what's the best position to keep the close button for a popup. This ...
1
vote
2answers
1k views

What's better UX design for a Contact Form? Modal Window or Dedicated Page? [duplicate]

I'm wondering what would be a better design in regards to User Experience for a contact form. Currently the contact form on my website is an overlay that pops up that a user can fill out and submit, ...
9
votes
2answers
8k views

How to manage scrolling issues of a full-width embedded google map in a webpage?

We would like to have an embedded map in a webpage. This map will have 100% width of the browser window meaning that there will not be any real estate left for the user to have the mouse out of the ...
1
vote
3answers
122 views

Displaying text on camera feed

I am developing a iOS app, for which the main screen is used to scan a QR code. I want the camera to cover the screen, and at the same time display several text elements. My main strategy so far has ...
8
votes
2answers
2k views

Disable or remove close button

The initial situation is: a user clicks on a preview image that triggers an overlay to start a video. The overlay has an "X" button in the top-right corner that stops the video and closes the overlay. ...
2
votes
1answer
2k views

Are overlays / modal alerts that display on site load accessible?

Some websites welcome you with a Cookie Disclaimer or to Join their Social Page. You'll find a big modal window, mostly in center overlay rest of the site. (as an example: http://www.lynda.com/) ...
7
votes
6answers
2k views

Should image overlays have a close button?

There is a link which when clicked displays images as an overlay (translucent black background, center aligned image). Clicking outside the image or pressing escape key closes the overlay. At present ...
1
vote
2answers
1k views

Navigation Drawer - Tablet - Push or Overlay?

Using a navigation drawer that is off-screen, and will slide in when a user clicks the 'hamburger' icon, should that drawer push all the content to the right, or be an overlay on top of the content. ...
0
votes
3answers
1k views

Should we load Overlay with loading icon for Ajax loading page?

I am working on an Ajax loading filters for an e-commerce site. On the first page request we load the common html (header, footer, other common contents) as a part of first request and then make ...
3
votes
2answers
2k views

Using overlays on mobile devices

I'm redesigning and rebuilding an existing fixed-width website to make it responsive and mobile optimized. I'm trying to stay as close to the original site as possible. However, it uses a lot of ...
2
votes
3answers
753 views

Display data clearly in small space (Google Maps InfoWindow)

I'm having a trouble using space in Google Maps InfoWindow. I am required to display the building address, image, two (2) sentences about the building, and a couple of icons near the More button. ...