Hot answers tagged

57

The first option... but with more feedback. You should have the modal appear immediately. This is important so that the user knows that their action has been successful (i.e. you don't want them to keep clicking because they think nothing is happening). However, having a blank modal is not good. Because the user will be confused as to why it is empty (even ...


35

I work at Stripe on the Checkout team. Many people integrating Checkout do not have mobile-optimized websites. The reasons for this vary, but a common observation is that there are various nuances for the getting the right viewport. Many websites using Checkout do not have the viewport meta tag; this puts a modal implementation at the mercy of the browser ...


14

Your app will have a more polished feel by intentionally avoiding the amount of elements quickly flashing or jumping around on the page. A loading indicator isn't needed if the data is returned in 1–3 100ths of a second. Even 10 times slower (0.1 seconds) still feels pretty instantaneous. Quickly showing and hiding elements like that is not necessary or ...


12

There is a section of WCAG 2.0 dedicated to this. 2.1 Keyboard Accessible. https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation.html Specifically: 2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires ...


11

The general rule I apply to modal v's switching to a page is the following. If the information or transition is temporary and the focus of the user is to be returned to the page after they have assimilated the information or interacted with a small form and the focus won't change, then a modal form is the right way to go. If the link or form takes the user ...


8

I'd go for version B, separate page. Modals don't scale well, adding more information tends to break them. Also a separate page allows you, and visitors, to link directly to the product information. Modals don't scale well. As soon as the content of a modal exceeds the height of the screen you need to add scrollbars, or chop the content. On mobile that ...


8

Option C: Expand the card to reveal more info. I favour this method over modals, as I find modals break the flow of the interaction - switching focus to potentially a different part of the page (not so much on mobile, but it's still breaking your context). Expand the thumbnail itself - you know the user is already looking here so it all part of the same ...


7

If the global layout of the data is highly predictable, then the current trend would be to open the dialog immediately, and populate it with "mock" data, which is not data at all, just grey blocks where the data is going to be. Apparently (just learned that), it has a name: skeleton screens. This is used a lot by Facebook, Linkedin, Youtube, and ...


6

Nothing. If you have no content, you shouldn't display a modal at all, simply create a conditional like `if $content=true -> $modal=true; else $modal=false` otherwise you'll be creating unnecessary friction. Remember that modals are intrusive, so they must be used sparingly. If you don't have nothing to show, then you don't need a modal. However If ...


6

Consider a Full Screen Overlay A pattern I see more and more is the full overlay. It utilizes the full screen, has a prominent 'close' button, and often uses a background color to communicate that it's not the standard view. I've most often seen it used with navigation, but I don't see why you couldn't do more with it. It works in a responsive design, and ...


6

The only right way to answer your question is to understand how your users are using your application and interacting with your products. Both of your suggestions assume that your products need attention. Modals are a good fit if your users often switch between products and the interactions are limited. New page is a good fit if the interactions are ...


6

A full screen modal interrupts the workflow of the user and forces their attention towards the modal content. This works well if you want users to undertake actions which require full attention and/or precautions, and you don't want users to be distracted by content laying beneath the modal. The choice between full screen modals and overlay modals depends ...


5

You don't want to prevent your users from closing multiple modals rapidly, every approach in this direction will be a fail. What you want to do is preventing your user to close any tab by mistake. As it is a mistake use case, do not design for it from the beginning (except if it does not disturb any 'normal' use case). Rather than doing that, just add the ...


5

No. You've detailed the actions to the user in the modal box, what you are assigning to the action of clicking outside of the box is a presumed action, as such, you simply cannot 'presume' the user will know this. IMO this would result in a poor user experience. A better prompt would allow the user to cancel the modal box and return to the application or ...


5

That dialog is very confusing. It can be interpreted two different ways: The application is warning the user that pressing the back button has initiated a quit action. Pressing 'OK' will acknowledge the warning and proceed to quit. This leaves the user wondering if there's any way to not quit. OR The user needs to press the back button a second time ...


5

The position of the modal is also going to depend on the exact purpose/goal of the modal. The slide-in modal (or more like a sneak-in panel), would allow the user to go on fulfilling his/her primary goal of seeing this page (for example, reading the text, seeing images, editing content, etc) and ignore the presence of the modal. A modal which is horizontally ...


5

If I understand this correctly, "Upload to URL" is similar to the others (uses all the existing fields) but adds some additional fields that are required before submitting the form. Don't make this another "submit" button. Instead, add it as another option - e.g., a checkbox (Check here to upload to URL) or make a radio button selection with all 3 options ...


5

I would use a page layout with multiple pages if you want to differentiate between each step of the registration process. I prefer this way because having many user interactions in a modal is not optimal and really breaks the flow of how the user interacts with your app.


5

I agree confirmation/discard dialog should not be overused. A good practise which I follow is to use such dialog in case of any loss of data. In your case I would suggest any action that closes the page with uncommitted changes should show the dialog box and discard should clear any changes made. I would not recommend having uncommitted changed state since ...


4

No. This will potentially lead to annoyed users who start spam clicking on buttons, which defeats the purpose of having a confirmation step in the first place. When should you use modal? When you're dealing with uncommon one-off actions with potentially serious consequences (e.g. irreversible delete of multiple records). The modal gives you room to explain ...


4

It's a good idea to guide your users. Make sure he knows where he is, how he got there and where he can go. In the example below I've put a 'why we only need your user name' link below the text field. When the user hovers over the text he sees a popup dialog with explanation. The user does not leave the form. The help text is of a lower hierarchy level ...


4

Talking about cards, Material Design does the following https://material.io/guidelines/components/cards.html#cards-content-blocks Generally speaking, the expected behavior of the button "Read more" is that the user is directed to another page. In the case of the link "Read more", it is expected that more text will be shown in the same place. My ...


4

I think you should have one modal Share one. Below 'Share' model, give a link See who already shared and one click of it display the next Shared List. Simple.


4

I've just checked their official files here and they call it a Grabber You can download the files from here: https://developer.apple.com/design/resources/


4

I far prefer encountering 2 to 1. StackExchange is a great example of work being saved when a New Post page is exited, and I am very grateful for it. I wish more sites adopted it, then I wouldn't have to deal with the frustratingly common situation of losing hours' worth of work to a session timeout or accidental quit. I don't have research to support this, ...


3

Depends on the modal content in my opinion... you obviously want it to be consistent across the platform, but in cases where the data behind the modal might need to be peeked at, I simply put a 20-30% opacity layer on the background so that users could still see the content if needed.


3

Stripe Payments are a painless integration. By that, I mean they are incredibly easy to install/setup/implement for developers. Most other solutions that brag about the same ease of install redirect to a different website on desktop, and do not work well on mobile. Arguably, they have better conversion rates and more seamless integration than most of their ...


3

You could use a percentage based approach regardless of the number of tabs. meaning the sum off all the tabs is 100% of the total width. this way the location of the close button at the edge of the tab will rarely be at the same point.


3

WCAG is there for evaluating the accessibility of content or services and not for components like modals. To understand if the modal keeps things accessible you should look at the accessibilty of the content/service. Also is WCAG a set of guidelines with different levels of implementation. Choose how strict you need to follow the guidelines before ...


3

Yes, that's extremely common. In most cases, the modal would have the equivalent of OK and Cancel buttons (albeit with different labels) with the OK leading to a new page and the Cancel closing the modal and staying on the same page. In your case, it looks like you'd have the primary action button at the bottom leading to the new page, and the close/cancel ...


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