Designing Dialogs to Meet the General Data Protection Rule

Following the implementation of the General Data Protection Rule across the European Union a few years ago, we started to see more dialogs come up on websites that we visit for the first time. These web elements warn us about the kind of cookies and other tracking technologies that may be activated if we agree to continue browsing the site; in some cases, there is an option to manage the cookies.

We see other examples of dialogs in action when we are about to download and install applications on mobile devices. These interactive elements let us know about actions that will be take place if we proceed with installation. Depending on how these dialogs are coded, there may be multiple choices and interactions. Even more recently, dialogs have been used to nag visitors into staying or clicking other sections of the website so that more traffic can be captured.

The recommended design of dialogs call for a container, description, title, backdrop, and action buttons. A/B testing results show that these five parts of design structure are needed for effectiveness in 2021. There should always be a choice to dismiss the dialog, and it is up to you as a designer to create that function; you can listen for the Escape key, place a close button, or terminate the element when the user clicks on the background. If you choose the latter on CSS, you will need to code a div.backdrop solution along with some JavaScript.

Some designers use an overlay or modal pop-up as a differentiator for a special message or offer. When users are viewing an offer that they like, you can offer them a special discount, add a free gift, or change the content to something more inviting and desirable. Another function that can be created by coding a special modal window is to nag the user about some action. Users will often dismiss an undesirable nag immediately.

Other types of dialogs include a chat or Q&A style, an alert box, an informative message with a background or link that shows more details, a form for subscription, and a welcome greeting. Some of these elements are more difficult to code than others and have special requirements. For more information click here https://tympanus.net/codrops/2021/10/06/how-to-implement-and-style-the-dialog-element/.