21

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


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

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

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

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

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

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

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

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

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 personally think you can show the user just one or two buttons at the time. Tasks have two states: not complete and completed. When the user hasn't completed the task yet only show them the button 'Do this now'. When they press this button change it's state and show the 'I've done this' button. There is no need for showing these buttons at the same time. ...


2

Having a lot of data, you should use some solution, which allows to reduce information overload and focus user on a current task. This could be implemented as separate page, tabs, modal windoows, etc. Some additional information about the task, users and context will help to choose better solution. Still, I insist, modal window is acceptible solution if it ...


2

Consider Page Layers You can display what you're referring to as a "deeper" view without using a modal dialog, but maintain the main benefit of the modal i.e. it doesn't feel like you're leaving the table view and can just get back to that view with a single click. When the user clicks for a more detailed view, or to make an edit that your main table UI ...


2

2nd the call for a modal window, not only because it'll be less confusing for the user, but because on mobile it will also be faster & use less system memory. Most mobile browsers deliberately animate new windows in such a way to tell the user "you're no longer browsing that site - you're going somewhere else now, whether you like it or not!" They may ...


2

I would consider a a modal window the better practice. It keeps the user on the same page, it just gives them a quick glance. If a new tab sporadically opens up, they might get confused and try to hit back (Which won't work in a new tab) then get frustrated. I also never liked moving my mouse all the way to the top of the page just for this small ...


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


2

I create many apps that over lay one modal over another. Example: There is an underlying app where business users choose among programs. They select one and a modal appears that covers 90% of the screen (using desktops with the app consuming a fixed with of 1600px) In the modal the users fill out information regarding said program. And, there are numerous ...


2

My suggestion would be approach 01 ie inline validation. The reasons being: This satisfies Gestalt's law of continuation and law of proximity. Since 01 is valid, it is much easier to relate the error message belongs to which field, hence less likely user will commit the error again. While in approach 02, It takes a while to map the error to the specific ...


1

i think you should make the user to confirm leaving ( only if he have entered data ) if he pressed out side , hit ESC or hit cancel . it will be simple ( You have unsaved data , are you sure you want to leave ? ) if he hit yes and open the dialog again , he shouldnt see his unsaved data . also consider how critical is the data entered and its size for ...


1

I presumed both edit buttons point to the same page. Coincidentally NNgroup published an article on something similar. At a glance without reading your description, I thought the edit buttons are used to modify their own section content. There is nothing wrong with your approach but I think it make better sense to allow the edit button to change its own ...


1

I'm not a fan of the cancel button as the only solution - would only encourage people to press it and probably would probably make them more impatient (don't think of a white elephant on a stool...dammit!). I'm assuming you have a warning about the length of time the calculations may take before they actually submit it (Warning - your calculations may take ...


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