Odi's astoundingly incomplete notes
New entries | CodeLayer popups vs. Window popups
It has become very popular to use JavaScript to create modal dialogs and popups "in-page". That means they are overlayed over the content of the webapp window. Before this trend, the standard way to show a popup dialog was in a new window.
Anybody who implements JavaScript popup layers PLEASE make sure not to break the usability that a normal popup window has:
Similarly when you provide a scrollable widget in JavaScript, make sure it behaves like a normal scroll bar: support cursor up/down, page up/down and the scroll wheel.
Similarly when you create a smart text input, make sure it supports everything a stupid standard text box does: ctrl-z for undo typing, cursor, home/end, shift select ranges, etc.
Anybody who implements JavaScript popup layers PLEASE make sure not to break the usability that a normal popup window has:
- Add a close button: Something will always go wrong and your fancy layer will not close correctly. This leaves the user with a broken application. His only option is to close the browser window, or reload the page. Give back some power to the user and let hime close the popup with a simple button. Place this button in the titlebar. Careful: different platforms have varying standards where they place their close buttons. You may not be able at all to detect this standard automatically (Linux desktops are configurable and can put these buttons almost anywhere on a window decoration).
- Make it movable: Popups hide content underneath. Sometimes the user may want to read information that is hidden by the popup. A movable popup lets him move the thing out of the way if necessary.
- Implement the standard keyboard shortcuts: Some people are used to confirm popups with the Enter, Space, Esc, TAB component navigation or other keyboard shortcuts. Careful: different platforms may have different standards.
- Allow copy/paste: If the popup contains form fields, make sure that copy/paste still works -- on all browsers. Some fancy editors break it badly.
- If the window is already open, make sure to bring it to front (focus).
- Make it a "dependent" window, so that it automatically closes if the user navigates away or closes the parent window.
Similarly when you provide a scrollable widget in JavaScript, make sure it behaves like a normal scroll bar: support cursor up/down, page up/down and the scroll wheel.
Similarly when you create a smart text input, make sure it supports everything a stupid standard text box does: ctrl-z for undo typing, cursor, home/end, shift select ranges, etc.
Add comment