Podcast #128: We chat with Kent C Dodds about why he loves React and discuss what life was like in the dark days before Git. Listen now.
18

Modal dialogs assume slightly different interactions, compared to a separate page. Modals are good for small and quick interactions, like confirmation, signing in, subscribing, feedback, image viewing, etc. Fast task execution within a modal dialog allows easy return back to previous view and restoring the context. Modals provides less real estate. It's ...


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

You seem to be asking about the horizontal grey bar that indicates further information may be available off screen. They are often referred to as handles or (swipe) indicators. In non-touch interfaces, they may be dragged. For instance, the text box I am typing in has a handle at the bottom for resizing. Sidebars and windows also often have handles for ...


8

The intent of modal windows is to serve situations when it’s logically impossible to proceed without completing an activity This includes things like getting the user name and password before interacting with a page or window, or confirming a dangerous action, or waiting for protracted processing that cannot be conducted in the background (e.g., ...


8

YES INDEED For most users, this will be just another page. And conceptually, they will be right, they have no idea about the technical part, they only know that by clicking or doing something they are presented with different content. This is a very common (and quite studied) situation, of course. From NNG Overuse of Overlays You should also consider ...


7

I like a modal window for "interruption" tasks. That is, tasks that are performed when you're really trying to do something else. Signing in is a good example. From any page I can click to sign in, complete the little form, and get back to my current task. Granted, that can be done without a modal (when Sign In is on its own page, submitting can jump you ...


6

Since you're basically using this as a modal (that's what I assume the "black curtain" is for), it makes sense that scrolling would scroll only the modal. (By definition, a modal dialog should block you from interacting with anything else.) That said, the user's opinion is more important than mine. If you only had one user say this, I'd find a few more to ...


5

I also prefer to maintain the user in context. A different approach I find less disruptive is to be able to modify an entity (product in your case) directly in the list page. Maybe an icon in the upper-right corner that, when clicked, would turn labels into text fields, for example. Of course this only works if all the information needed to be edit is ...


5

Modals are a popular for a good reason: They provide fast, focused, contextual interaction. Page loads should be saved for when they're really needed to move the flow forward. Another contextual information option is content that loads into the page as needed. I've used this solution for payment forms in particular in the past. This article reminds us of ...


4

I agree with your colleague, mostly for reasons that are outside your control. I'm also particularly against the solution Trello uses in its mobile app, so it's interesting you bring that up. My reasoning is as follows: If you use the browser's own scrollbar for all cases, the item with focus is not nearly as important when the user scrolls down. In most (...


4

UX Guidelines suggest that the primary action for every page/activity should be placed at the right-most corner (top or bottom, depending upon design language). In your case it seems like it is an alert modal with the only action being Cancel. By the UX rule, Cancel here is the primary action. So it goes in the rightmost corner. Example :- UPDATE I ...


3

Modal windows to show more data is a bad idea. You lock the view from other elements in the page, which will make data consumption difficult for you users. Accessing more information from three different boxes in your design require six click, and the overview is lost. Open A, Close A, Open B, Close B, Open C and Close C. You also add massive cognitive load ...


3

First off: no, I don't think there's any definitive research, because what you should do is dependent on the context of your design. Who are your users? What are you asking them to do in a modal overlay? Is it compelling to them or merely an interruption? Modal overlays are an extremely disruptive design pattern. Abuse of these is rampant, especially when ...


3

Twitter is quickly becoming an add-on to other tools. If you ever use the Twitter API in your own apps you'll value this feature greatly. It lets you pull tweets into your own work and retain all the functionality of Twitter without a lot of engineering overhead. Being able to reposition this popup is important because it will be used in many contexts, and ...


3

Given your question is specific to Apple iOS I will refer to the Human Interface Guidelines (HIG): Use a modal view when you need to offer the ability to accomplish a self-contained task related to your app’s primary function. A modal view is especially appropriate for a multistep subtask that requires UI elements that don’t belong in the main app ...


3

You could have a form element for "Change password?" And only display the password fields when selected? If changing password is not a frequent operation this would work.


3

I would change "New username" to "Username" and prepopulate with the existing username. Have 3 password fields: existing, new and confirm new. Making a change requires the existing password to be entered regardless. Replace the "close" button with a "cancel" link - it's not the main call to action, and "close" does not make clear if the changes are saved or ...


3

Modal view should always contain a brief information, having a scrollview is discouraged. Mainly because of the reason that Modals are mostly annoying and people would want to get rid of them as quickly as possible, that is why modals have very pronounced Cancel button. Apple's HIG (Human interface guidelines) Modal section also discusses this . Avoid ...


3

I think you can make a huge difference there if you implement a concept the user can see through and accept when using your forms. There are facts to modal windows you should consider to make that concept & decision: Concerning Modal Dialogs / Forms: Non-Javascript Accessibility: You will have to have a separate form anyway for users with JS disabled (...


3

I guess a playlist is a fixed-length event in a calendar-like something, even if more precise than calendar events usually are. done using the fullcalendar jQuery plugin I don't see why you need modality here, it looks more like a list-detail issue to me.


3

I have previously designed an interface which had the exact same header links. A basic wireframe of what I finalized upon is shown below download bmml source – Wireframes created with Balsamiq Mockups The reason for the design of the login/signup link were: A button indicates an action as opposed to link divs which are for navigation A bright CTA ...


3

The left field answer to this is to make your calculation process asynchronous. In other words, don't trap your users on a page where you don't know how long they will be stuck. Instead, have the "submit" instance an asynchronous backround process, which will then notify the user once completed, at the end of the async process. Basic user flow: submit ...


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

The modal doesn't need to mimic the layout of the underlying page. Because it's more natural for people to read left-to-right in the western world. The pattern follows horizontal motion reading patterns.


2

It sounds like you are describing something I would refer to as a "pop-over". As you say, they are useful when you need to display more information (or more complex information) than a simple tooltip can handle but less information than a full overlay and without removing the user from the current context. Twitter Bootstrap has a "popover" JavaScript widget ...


2

While I agree that a modal should usually be very focussed and have only a small amount of content, this doesn't always work. There are many situation where it makes a lot of sense to have a large modal window with a bunch of interactions. Your example is one, you have the photo popup in Facebook that also shows a conversation. I've utilized this pattern in ...


2

I would recommend a simple approach where the password is not open by default but the user if he desires can edit the password field by using the text link as shown below Facebook has something similar where the user only edits the password field if he needs to


2

You could still use a on hover trigger to show a Quick view of the products on the devices that has a mouse activated. For touch devices you could use a simple tap to open the Quick view. I'm not so sure that modals should be avoided but I've found that this animated slide in window (that only covers one part of the screen) solution is a nice way to toggle ...


2

You asked a lot of different questions. As you requested, I will ignore the reasons and labels for the three different fields presented in each column. Is it useful/important to automatically populate a field if the values are the same for this field across every product? iTunes does this - if you go to edit more than one song at once, any field with an ...


2

I would say that the primary reason for using a modal view is for a user to complete a single task that they should not be interrupted from. This means that all the information required for the user to complete the task should be contained within the modal window it self, because the behaviour for a modal window is designed such that they cannot access other ...


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