19

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


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


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

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


6

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


5

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

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

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

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

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


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

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

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


2

Scrolling with modal dialogs largely depends on the type of modal dialog. If it's a full screen dialog (i.e. it takes focus away from any other elements on the page) then I'd expect scrolling to only affect the modal dialog. It might look odd however if the rest of the page is too visible, so I'd be inclined to hide it or fade it out. However if it's not ...


2

Personally, I always (when possible) prefer the Modal way, because it is less jumping between pages and the user can concentrate on what he is doing... But If you change page to save (say, your form action is another page and it reloads each time they save from the form), the point of staying in the mood is lost. You should go with AJAX forms if you want ...


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

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


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