Hot answers tagged

33

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


11

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


9

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

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

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


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


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


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.


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.


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


3

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


3

It's not that crazy an idea. Sure, I always think of modals appearing in the middle of the screen, but Mac software (often) slides modals out from the window header. You ought to mock up a right-edge modal and have some people try it out. (Don't warn them about the modal ahead of time.) See how they react to it when they see it for the first time. Me, I'd ...


2

As a writer of money making, monopolistic, don't care about the UX, enterprise software ;-) I have to say that AgilePro asks some valid questions here. In my view, there are limited cases where creating a js windowing system could give the user a better experience. But some background first. When we choose the browser as client for our applications, we ...


2

In short For a new entry: All input should be dismissed and the auto save deleted For when editing an existing entry: The new input should be saved to a separate file. If the user hits OK then overwrite the old file with the new. If the user hits Cancel the new file should be deleted and the value of the entry should load the value of the old file. Eg. ...


2

There are many existing guidelines on displaying information messages to the user (whether it is by modal window, toast notification or some other method), but the general principle is that it should help solve a user's problem or help them achieve their goal. So you should ask the question: "What is the user expecting to be able to do when they click this ...


2

You should let user delete or edit without confirmation, which increase friction. Instead of confirmation, you should implement an undo action. Have a look on this example in Rails.


2

WCAG Provides guidelines about internet accessibility & not the interface methods itself. As far as the direct concern go - there is no reference for "Modal Dialogs" in the WCAG2.0 documentation. The closest I could find was a reference to pop-up and new tab windows but no hints about modal dialog. I think it's safe to assume that it falls under the ...


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