Questions tagged [modal]
A shorthand way of saying "modal window": a panel that appears over and disables the main content, requiring user interaction with it.
136 questions
28
votes
5
answers
8k
views
What is better: to have a modal open instantly and then load its contents, or to load its contents and then open it?
Let's say you have a button. When you click it a GET request is fired for some data (for this example assume that the data cannot be prefetched). Then a modal opens and displays that data in a pretty ...
- 411
21
votes
7
answers
8k
views
Intuitive dialog for choosing whether to close and lose changes or keep editing
It's a pretty simple use case.
I have a modal with an editable form. If the user enters something into the form and then tries to cancel, we want to warn them they have unsaved changes, which they'll ...
- 353
21
votes
8
answers
8k
views
Close button position: corner or inside?
This is the modal dialog for the admin page. We had a discussion about the close button position. Which one do you think is better?
A is more common and can be seen in many great web apps (Figma, ...
- 343
18
votes
3
answers
7k
views
Stripe Checkout - Modal on desktop and new tab on mobile [closed]
Stripe Checkout claims to be fully optimized to drive payment conversions.
Their solution for desktop involves a modal, so that the user doesn't have to leave the merchant's domain. On mobile ...
16
votes
5
answers
22k
views
Modal or new Page?
I have 7 products.
The site has a lot of content(text) pages.
At the bottom of each content page I want to list my products as thumbnails.
Version A:
Click on a thumbnail opens a modal with the ...
- 343
15
votes
5
answers
5k
views
Laymen's description of "modals" to clients
Our company runs about 1,000 websites for various clients, and we just implemented a feature that will allow them to create their own modals in a "back end" that we've created for them. ...
- 253
11
votes
3
answers
6k
views
Are modal dialogs WCAG compliant?
Are modal dialogs WCAG compliant? I understand that pop-ups of any kind do not meet WCAG requirements, and I assume this includes modal dialogs?
For example, I am working with a Primefaces component,...
- 257
8
votes
5
answers
2k
views
Modal, Slide In or New Page?
I'm currently putting together a page that consists of a grid of offers (say 24).
The data I want to display along with a pic means that each offer will take up approx 200-300px square - not ...
- 81
8
votes
3
answers
714
views
Do good UX guidelines exist against little JS windows inside the browser
I encounter a lot of web applications that essentially implement a small windowing system inside the browser. On you web page there exist a number of little boxes that look like windows, which can be ...
- 1,547
7
votes
2
answers
5k
views
Substitute for a pop-up modal on mobile
A pop-up modal on my website shows information. In the mobile version of the page, what could be a good replacement for a pop-up window?
I tried making the modal pop-up responsive, but the content ...
- 2,104
5
votes
3
answers
2k
views
Should closing the dialog clear its fields?
I identified as the most preferrable strategy for user not to lose their data implementation of confirmation/discard dialog when exiting original one.
I expect a few more form dialogs to emerge in ...
- 161
5
votes
1
answer
10k
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 ...
- 2,511
5
votes
3
answers
7k
views
Display Modal over another Modal, it's really a sin?
I'm currently working in a web app for technology transfer offices and I've been avoiding at all costs to display a Modal window over another one that's already open.
To give more context, there is ...
4
votes
2
answers
6k
views
Is it necessary to have a close icon and close button on a modal?
I went through the search here and found a similar question from 10 years ago about Windows modals. This is just a regular agnostic modal. Is there a best practice with this case?
- 83
4
votes
2
answers
192
views
What to display in a modal window when there is no content?
We have a modal window that should always have content when opened via a mouse click on a web page, however, it's possible that since it's delivered dynamically from a database, it may not be ...
user9533
4
votes
1
answer
7k
views
Best size for modal
I am designing a modal for enterprise application. What is the optimal size for modal width and height. I need to design one for small medium and large..
Is there a resource or user research done ...
- 41
4
votes
2
answers
853
views
Autosave option in a modal dialog with Save & Cancel buttons
Scenario - A modal dialog where a user can type in anything (basically, Notes) with Save & Cancel buttons present, and Auto Save implemented. Auto Save has a purpose - it will avoid the messy ...
- 41
3
votes
1
answer
822
views
Is it a good practise to load contents outside of modal?
There is a dropdown and date-picker inside a modal and the size of the modal is small, so when we click on the date-picker the widget is overflowing the modal. Is this a good practise?
or should we ...
- 1,052
3
votes
3
answers
3k
views
Placement of a modal
Currently, I am going into an application where there was a decision made to have modals slide into the screen from the right but stay snapped to that right window border.
From experience in other ...
- 83
3
votes
3
answers
982
views
Modal button positioning on mobile
I am designing a design system for my company and am currently looking at designing the modals and dialogues for both desktop(tablet too) and mobile.
I have placed the primary action to the bottom ...
- 71
3
votes
3
answers
8k
views
Is a double modal pop up a concern?
What I mean is that say you select something on a webpage. It serves you a modal pop-up form to complete. On this form is a date-picker which would serve another full screen (on mobile) modal pop up. ...
- 494
3
votes
7
answers
878
views
Best practice when creating new element in two dropdowns on the same form and in a modal
I am working on an app that has a side modal. When creating a new lead the side modal opens and you are facing a form that contains the elements in the image below.
When you type inside the company ...
- 4,578
3
votes
1
answer
558
views
Is modal expansion a user friendly pattern?
I have a problem whether to have everything in one modal, or have one after the other. Any help would be appreciated. Please pic the option that makes sense. Any other solution would be awesome too :)
3
votes
1
answer
6k
views
Accessible web modals: Show or hide the "X" (close icon) at the upper right?
How do I handle the "X" at the upper right corner of my web site modals in order to make the modal as accessible as possible for users with screen readers but also for keyboard users?
As I see it, ...
- 859
3
votes
1
answer
310
views
When should input fields be cleared in modals, if at all?
I have an invoice page with a button to make a payment. The payment button triggers a series of modals for collecting user payment info (credit card/check details, billing details, payment ...
- 133
3
votes
3
answers
606
views
Modal upon modal best practices - Web App [duplicate]
The product I am working on at the moment is a standalone product but we are creating a web app to replace it.
It currently opens modal windows on top of modal windows for the same function
i.e ...
- 31
2
votes
2
answers
1k
views
When displaying an "OK/Cancel" button group that is right-aligned should the main action be on the right?
I am designing an "OK/Cancel" button group on a modal hence this button group is right-aligned. Since this is the case I have placed the main action button "OK" on the right, and ...
- 195
2
votes
4
answers
2k
views
Should I use modal or page if there are multiple of steps?
I was wondering whether to make it a modal or a page.
So the process is this:
Enter full name and birthdate
Answer security questions
Upload an ID
After uploading an ID, there are 2 pages that ...
2
votes
2
answers
1k
views
Is it okay to have a modal window with a button that redirects to another page?
In my case, the information written in the modal window is not directly linked to the button. That is, the button is not some action that the user does after reading the information given in the modal....
- 3,017
2
votes
3
answers
858
views
Toggle between two modal windows
I have a system where a user can share a task with his coworkers.
The system was developed in a way where the share button opens a modal dialog with the option to input details of the user to share it ...
- 1,201
2
votes
2
answers
773
views
Change size of modal in wizard experience
I am building a wizard experience to guide a user through a complex setup flow. In the flow, some steps require more space and some require less space. Does it make sense to change the modal size on ...
- 1,035
2
votes
1
answer
2k
views
Could i use a drawer within an overlay modal?
I'm prototyping a candidate selection application for a job agency. The client needs a module in which they can filter to search for the right candidates for a job. When they click on a candidate in ...
- 123
2
votes
1
answer
230
views
Good alternative for popups that show events?
I'm in a team that builds website templates for a wide variety of informative sites. We've had a lot of users asking for popups on the homepage and we've been saying no because it's a bad design ...
- 129
2
votes
2
answers
587
views
Edit mode + Side panel/Modal, how to deal with double validation?
I am currently struggling with an edit mode user scenario inside a web application.
Context
The web application will be used also on mobile, so we can't use “on hover” comportment.
99% of the time, ...
- 331
2
votes
1
answer
2k
views
Should hitting the ESC key close a modal that has a form?
Typically, when you hit the ESC key, that closes a modal. But if this modal contains a form that the user needs to fill out, that would mean that hitting ESC (sometimes, inadvertently) closes the ...
- 1,414
2
votes
1
answer
503
views
What is the best way to add edit and delete buttons to a modal?
I have a task data visualization modal, but I need to add an option to edit or delete these tasks. Where in this modal could I insert buttons to delete or edit?
2
votes
2
answers
1k
views
Align width of dropdown menu to?
In the past I ran often into the problem, that I did not know how to decide the width of a dropdown menu. I as a designer don’t mind to just eyeball a good-looking width, but developers would love to ...
- 23
2
votes
1
answer
326
views
Warning/ Information on top of a Modal
I want to give users a warning on a modal that changing one form field has implications on another form field. I am aware of 2 patterns that are used as shown here. I am seeking suggestions on what UI ...
- 1,035
2
votes
3
answers
143
views
Should browser page back present modals as well as pages?
Currently, on using the browser back button, our site pages back through not only the pages but any modals used. So if the modals were part of a 'series' (e.g. three consecutive modals to capture ...
- 21
2
votes
2
answers
1k
views
Modal or new Page for product description?
I have a question it's kind of research and I have researched a few before posting but I want direct pros and cons for my concerns thus I am posting this question here.
I have a page which has a sort ...
- 123
2
votes
2
answers
2k
views
modal inside a modal (delete confirmation)
I have a View/Edit button which shows the details ofuser in a modal when clicked. In modal it has Save and delete buttons. When they click on delete button the user will be deleted. Before they delete,...
- 123
2
votes
2
answers
1k
views
What are best practices for deciding when to use native iOS UI elements or when to build custom ones?
I know some interactions and content are far too complicated to apply to a default iOS UI element - but when it comes to ones that could go either way, what are the best practices in making a decision?...
- 41
2
votes
1
answer
2k
views
How to best handle a modal with multiple tabs and buttons
We have a modal that is used for an action to Add an item and Edit an existing item. It also has a button to delete the item all together.
I am trying to determine the best way to handle the button ...
- 106
2
votes
1
answer
68
views
Need help with showing information in a limited space
Well, it is my first time seeking help for user experience design, so pardon me as I am not accustomed to the proper rules.
I have an information card which shows a thumbnail for a video and below it,...
- 31
2
votes
1
answer
2k
views
Sidebar modal - pros & cons?
Do slide-out modals work well in your experience?
Our requirements are to present deeper, specific content to users without taking them out of a flow, so linking to another page is not being ...
- 161
2
votes
1
answer
783
views
Filters on mobile e-commerce
I’ve been asked to produce a research on mobile filters. We do have e-commerces that are adaptive. Any native app is going to be developed over the short term.
I’ve done benchmarking and come up with ...
2
votes
1
answer
134
views
Which one is the best for the user, button or icon for the "Close" in dialog/modal?
I'm designing a dialog/modal for my mobile app, which one will be the best practice for "close" on the dialog?
1."Close" button on the bottom left after the content
2."X" on the top right corner
- 1,789
2
votes
1
answer
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-...
- 643
2
votes
3
answers
529
views
What are the benefits of using modals on desktop?
I see a lot of sites use modals for actions such as posting content (often on social sites). For example, Twitter and Tumblr both use modals, but Facebook does not. What is the benefit of using a ...
- 41
2
votes
1
answer
575
views
Pros and Cons for using Modals? [closed]
What sound the pros and cons for using Modal? Whereas the webapp is responsive and will be displayed on mobiles.
- 81