Are modal windows/dialogs considered a good practice for websites? One of the things that concerns me about using a modal window is that it is so much like a pop-up window and it could cause user frustration or cause users to simply close it because it's intrusive. Do you know of any studies that talk about user preferences and use rates?
模态窗口/对话框是否被视为网站的良好做法?关于使用模态窗口的一个问题是,它非常像弹出窗口,它可能会导致用户沮丧或导致用户只是关闭它,因为它是侵入性的。您是否知道有任何关于用户偏好和使用率的研究?
Are there any accessibility issues beyond having the a modal window link load the content in a new page when JavaScript is turned off? Do you like sites or web apps that use modal windows? Why or why not? What are good and bad practices for implementing modal windows? I know modals are probably most often used when displaying pictures or galleries, but what are some other practical use cases? Do you use them on your site and what lead you to your decision?
除了在关闭JavaScript时使用模态窗口链接在新页面中加载内容之外,是否存在任何可访问性问题?你喜欢使用模态窗口的网站或网络应用吗?为什么或者为什么不?实现模态窗口有哪些好的和坏的做法?我知道在显示图片或画廊时最常使用模态,但还有哪些其他实际用例?您是否在您的网站上使用它们,是什么导致您做出决定?
6 个解决方案
#1
14
From a practice standpoint - excluding accessibility - modal windows provide an alternative that are less startling as, say, dialog boxes and feel less intrusive than pop-up windows. They usually have a more cohesive feel to the site than either of the two aforementioned method. Aside from pictures or media, I've used modal dialogs to serve the same purpose as dialog boxes - to get the user to give some form of required input, or to acknowledge something before letting them interact with the site again.
从实践的角度来看 - 不包括可访问性 - 模式窗口提供了一个不那么令人吃惊的替代方案,比如对话框,并且比弹出窗口感觉更少侵入。与上述两种方法中的任何一种相比,它们通常具有更强的粘合感。除了图片或媒体之外,我还使用模态对话框来实现与对话框相同的目的 - 让用户提供某种形式的必需输入,或者在让他们再次与网站交互之前确认某些内容。
From a purely accessible standpoint, they aren't so great. They typically require JavaScript, and, because of the way that modals are managed with respect to the DOM, screen readers will not interpret them well. To combat this, it's always a good idea to degrade gracefully - one suggestion is to take the content of the modal dialog and place it on a page. Whenever the modal dialog should appear, have the current page redirect to the 'modal page', get the user's input, and return to the page it was on.
从纯粹的可访问的角度来看,它们并不是那么伟大。它们通常需要JavaScript,并且由于相对于DOM管理模态的方式,屏幕阅读器不会很好地解释它们。为了解决这个问题,优雅降级总是一个好主意 - 一个建议是采用模态对话框的内容并将其放在页面上。每当出现模态对话框时,让当前页面重定向到“模态页面”,获取用户的输入,然后返回到它所在的页面。
Finally, as far as my personal opinions are concerned, I don't mind modal windows. I think that, when used correctly, they provide a decent experience - if something has to get my attention, then I'd rather it do so without redirecting me from the page, showing an ugly operating system themed dialog, or a pop-up (which my browser will likely block, anyway). I guess, to sum it up, if I had to choose how I'd like to be interrupted, then I'd choose a modal dialog.
最后,就我个人的意见而言,我不介意模态窗口。我认为,如果使用得当,它们提供了一个体面的体验 - 如果有什么必须引起我的注意,那么我宁愿这样做而不会从页面重定向我,显示一个丑陋的操作系统主题对话框,或弹出窗口(无论如何,我的浏览器可能会阻止)。我想,总而言之,如果我不得不选择我想要被打断的话,那么我会选择一个模态对话框。
#2
1
I only use Modal windows on web apps for simple questions or actions that require the user full concentration, that is what Modal is for, to "forget the background" and concentrate in what the applications is asking...
我只在Web应用程序上使用模态窗口来处理需要用户完全集中的简单问题或操作,这就是Modal的用途,“忘记背景”并专注于应用程序所要求的内容......
examples:
"The maximum loan allowed was reached to a limit, are you sure do you want to send this new loan to the client?"
“允许的最高贷款达到了限额,你确定要将这笔新贷款发送给客户吗?”
selecting a pre-text for sending an email for example (a modal windows that can be used to right subject and body text or select a pre defined subject/body to send to a client...
例如,选择用于发送电子邮件的预先文本(可用于正确主题和正文的模态窗口或选择预定义的主题/正文发送给客户...
stuff like that :)
类似的东西 :)
I do a lot of Finance web apps that works from the website where the user enters all the finance data to the sending of the contracts by PDF completed filled in just some clicks, and those are the actions where I use modal windows.
我做了很多财务网络应用程序,从用户输入所有财务数据的网站到通过PDF填写的合同发送只需点击几下,这些是我使用模态窗口的操作。
hope it helps
希望能帮助到你
#3
1
It seems as though many confuse modal window with a layered panel. A dialog box can be a modal window and a pop-up is a modal window. A layered panel is not a window, but has the appearance of a pop-up or dialog box. It is modal in the sense that the underlying layers are unavailable. Modal window are popular on web sites because they are immune to pop-up blockers.
似乎很多人将模态窗口与分层面板混淆。对话框可以是模态窗口,弹出窗口是模态窗口。分层面板不是窗口,但具有弹出窗口或对话框的外观。在某种意义上它是模态的,即底层不可用。模态窗口在网站上很受欢迎,因为它们不受弹出窗口阻止程序的影响。
Modal windows were designed to obtain information or user action that the underlying application requires to continue. Non-modal windows allow the user to switch back and forth between the window and the underlying application. A good use for a non-modal window might be screen help or a tutorial, where the user needs a reference tool and access to the underlying application.
模态窗口旨在获取底层应用程序需要继续的信息或用户操作。非模态窗口允许用户在窗口和底层应用程序之间来回切换。非模态窗口的良好用途可能是屏幕帮助或教程,其中用户需要参考工具并访问底层应用程序。
IMHO, modal windows were designed for a narrow specific purpose and are used inappropriately a lot of the time now. Just because you can do something doesn't mean you should!:-)
恕我直言,模态窗口是为狭隘的特定目的而设计的,现在很多时候使用不当。只是因为你可以做某事并不意味着你应该!:-)
#4
0
37Signals has an interesting post on modals here. They talk about using modals to indicate importance through screen size, where the modal overlay isn't important enough to necessitate navigating to a new page.
37Signals在这里有关于模态的有趣帖子。他们谈论使用模态来指示屏幕大小的重要性,其中模态覆盖不够重要,无需导航到新页面。
#5
0
I quite commonly use modal windows in web apps for data entry screens. For example the user will have a list or search results screen and can click on a record to open it up in a modal window to edit. I don't use modal windows as much in web sites as I prefer a slightly less 'application' like feel for a site.
我经常在网络应用程序中使用模态窗口来进行数据输入屏幕。例如,用户将具有列表或搜索结果屏幕,并且可以单击记录以在模态窗口中将其打开以进行编辑。我不会在网站中使用模态窗口,因为我更喜欢像网站一样的“应用程序”。
#6
0
Most of the problems of dialogs on the web center on poor implementation. Some considerations include:
网络中对话的大多数问题都集中在执行不力上。一些考虑包括:
- screen size
- browser window resizing
- where to open dialog
- submitting form elements
- harsh overlay strobe light effect
- graceful degradation (as mentioned earlier)
浏览器窗口调整大小
在哪里打开对话框
提交表单元素
苛刻的叠加闪光灯效果
优雅退化(如前所述)
All of these can be easily overcome with some forethought and programming techniques, making dialogs on the web very useful when implemented properly.
所有这些都可以通过一些预先考虑和编程技术轻松克服,在正确实施时使网络上的对话非常有用。
#1
14
From a practice standpoint - excluding accessibility - modal windows provide an alternative that are less startling as, say, dialog boxes and feel less intrusive than pop-up windows. They usually have a more cohesive feel to the site than either of the two aforementioned method. Aside from pictures or media, I've used modal dialogs to serve the same purpose as dialog boxes - to get the user to give some form of required input, or to acknowledge something before letting them interact with the site again.
从实践的角度来看 - 不包括可访问性 - 模式窗口提供了一个不那么令人吃惊的替代方案,比如对话框,并且比弹出窗口感觉更少侵入。与上述两种方法中的任何一种相比,它们通常具有更强的粘合感。除了图片或媒体之外,我还使用模态对话框来实现与对话框相同的目的 - 让用户提供某种形式的必需输入,或者在让他们再次与网站交互之前确认某些内容。
From a purely accessible standpoint, they aren't so great. They typically require JavaScript, and, because of the way that modals are managed with respect to the DOM, screen readers will not interpret them well. To combat this, it's always a good idea to degrade gracefully - one suggestion is to take the content of the modal dialog and place it on a page. Whenever the modal dialog should appear, have the current page redirect to the 'modal page', get the user's input, and return to the page it was on.
从纯粹的可访问的角度来看,它们并不是那么伟大。它们通常需要JavaScript,并且由于相对于DOM管理模态的方式,屏幕阅读器不会很好地解释它们。为了解决这个问题,优雅降级总是一个好主意 - 一个建议是采用模态对话框的内容并将其放在页面上。每当出现模态对话框时,让当前页面重定向到“模态页面”,获取用户的输入,然后返回到它所在的页面。
Finally, as far as my personal opinions are concerned, I don't mind modal windows. I think that, when used correctly, they provide a decent experience - if something has to get my attention, then I'd rather it do so without redirecting me from the page, showing an ugly operating system themed dialog, or a pop-up (which my browser will likely block, anyway). I guess, to sum it up, if I had to choose how I'd like to be interrupted, then I'd choose a modal dialog.
最后,就我个人的意见而言,我不介意模态窗口。我认为,如果使用得当,它们提供了一个体面的体验 - 如果有什么必须引起我的注意,那么我宁愿这样做而不会从页面重定向我,显示一个丑陋的操作系统主题对话框,或弹出窗口(无论如何,我的浏览器可能会阻止)。我想,总而言之,如果我不得不选择我想要被打断的话,那么我会选择一个模态对话框。
#2
1
I only use Modal windows on web apps for simple questions or actions that require the user full concentration, that is what Modal is for, to "forget the background" and concentrate in what the applications is asking...
我只在Web应用程序上使用模态窗口来处理需要用户完全集中的简单问题或操作,这就是Modal的用途,“忘记背景”并专注于应用程序所要求的内容......
examples:
"The maximum loan allowed was reached to a limit, are you sure do you want to send this new loan to the client?"
“允许的最高贷款达到了限额,你确定要将这笔新贷款发送给客户吗?”
selecting a pre-text for sending an email for example (a modal windows that can be used to right subject and body text or select a pre defined subject/body to send to a client...
例如,选择用于发送电子邮件的预先文本(可用于正确主题和正文的模态窗口或选择预定义的主题/正文发送给客户...
stuff like that :)
类似的东西 :)
I do a lot of Finance web apps that works from the website where the user enters all the finance data to the sending of the contracts by PDF completed filled in just some clicks, and those are the actions where I use modal windows.
我做了很多财务网络应用程序,从用户输入所有财务数据的网站到通过PDF填写的合同发送只需点击几下,这些是我使用模态窗口的操作。
hope it helps
希望能帮助到你
#3
1
It seems as though many confuse modal window with a layered panel. A dialog box can be a modal window and a pop-up is a modal window. A layered panel is not a window, but has the appearance of a pop-up or dialog box. It is modal in the sense that the underlying layers are unavailable. Modal window are popular on web sites because they are immune to pop-up blockers.
似乎很多人将模态窗口与分层面板混淆。对话框可以是模态窗口,弹出窗口是模态窗口。分层面板不是窗口,但具有弹出窗口或对话框的外观。在某种意义上它是模态的,即底层不可用。模态窗口在网站上很受欢迎,因为它们不受弹出窗口阻止程序的影响。
Modal windows were designed to obtain information or user action that the underlying application requires to continue. Non-modal windows allow the user to switch back and forth between the window and the underlying application. A good use for a non-modal window might be screen help or a tutorial, where the user needs a reference tool and access to the underlying application.
模态窗口旨在获取底层应用程序需要继续的信息或用户操作。非模态窗口允许用户在窗口和底层应用程序之间来回切换。非模态窗口的良好用途可能是屏幕帮助或教程,其中用户需要参考工具并访问底层应用程序。
IMHO, modal windows were designed for a narrow specific purpose and are used inappropriately a lot of the time now. Just because you can do something doesn't mean you should!:-)
恕我直言,模态窗口是为狭隘的特定目的而设计的,现在很多时候使用不当。只是因为你可以做某事并不意味着你应该!:-)
#4
0
37Signals has an interesting post on modals here. They talk about using modals to indicate importance through screen size, where the modal overlay isn't important enough to necessitate navigating to a new page.
37Signals在这里有关于模态的有趣帖子。他们谈论使用模态来指示屏幕大小的重要性,其中模态覆盖不够重要,无需导航到新页面。
#5
0
I quite commonly use modal windows in web apps for data entry screens. For example the user will have a list or search results screen and can click on a record to open it up in a modal window to edit. I don't use modal windows as much in web sites as I prefer a slightly less 'application' like feel for a site.
我经常在网络应用程序中使用模态窗口来进行数据输入屏幕。例如,用户将具有列表或搜索结果屏幕,并且可以单击记录以在模态窗口中将其打开以进行编辑。我不会在网站中使用模态窗口,因为我更喜欢像网站一样的“应用程序”。
#6
0
Most of the problems of dialogs on the web center on poor implementation. Some considerations include:
网络中对话的大多数问题都集中在执行不力上。一些考虑包括:
- screen size
- browser window resizing
- where to open dialog
- submitting form elements
- harsh overlay strobe light effect
- graceful degradation (as mentioned earlier)
浏览器窗口调整大小
在哪里打开对话框
提交表单元素
苛刻的叠加闪光灯效果
优雅退化(如前所述)
All of these can be easily overcome with some forethought and programming techniques, making dialogs on the web very useful when implemented properly.
所有这些都可以通过一些预先考虑和编程技术轻松克服,在正确实施时使网络上的对话非常有用。