Looking for a creative way to display content to your website visitors and spur them to action? For content that needs to be noticed, such as a “Sign Up for our Newsletter!" Or, peek at my personal modal message to you.
Made you look!
×
or
“Don’t forget your shopping cart” consider a web design feature called “modals,” known to most of us as the pop-up boxes that are automatically seen at certain points of a user’s experience.
What is a modal?
Modal dialogs, when used properly, can free up valuable webpage real estate. Modals also can provide some great interactions between your users and your content.
They’re a great way to add a level of sophistication to your site and give your audience a direct call to do something on your site.
Note: You need to be running LRS Antilles Content Manager version 17.3 or above. (Contact HelpDesk to upgrade.)
As an example, as you scroll down this blog post for the first time, you’ll see a modal we created encouraging you to subscribe to this blog. (Test it out and sign up for the blog!)
See! This an example of a modal.
(I told you modals were fun.)
×
Modals are fun, but they also need to be used carefully. Here’s a chart to help you decide if a modal is right for you.
When Should I Use A Modal?
Before you create a modal, think about what you want specific action you want the user to take. Then see if this action matches the guidelines on this chart.
| YES OR NO? |
If YES |
Reasoning |
|
Will the content of the modal dialog enhance the user experience?
|
Use a modal |
Your website content should be designed specifically to help your visitors.
|
|
Do you really want to interrupt the user’s experience, get their full attention and have them interact with information before continuing?
|
Use a modal.
|
However, use modals deliberately and avoid annoying your website visitors. |
|
Is it better if the modal text stay within the existing content on the page?
|
Do not use a modal.
|
The content should most likely remain on the page itself and not within a modal.
|
|
Are you providing a clear and specific way of opening the dialog that a user won’t miss?
|
Use a modal
|
Meaningful link text and/or styling are an absolute necessity when you are enticing users to click on a link that will trigger a modal.
|
|
Is the content within the dialog considered unnecessary “fluff” such as “Welcome to/Thanks for visiting our website!”
|
Do not use a modal
|
Usually, if you question the usefulness or importance of content, it is better to leave it out altogether.
|
Ready to use a modal? Here’s your handy-dandy 3-step guide:
1. Create the modal.
Click the double window icon Insert Modal Popup prompts you for a unique ID and title for this specific modal.
The ID must be unique to that individual modal and contain no spaces or special characters. For example, “myUniqueModalID”. The title of the modal is used for accessibility purposes. When the modal is opened, a screen reader will announce the title and/or purpose of a modal to the user.
Click “OK” to insert the modal markup into the rich text editor. You'll see a box like the one here.
2. Add text.
You can add the text for the pop-up directly in this box. Include a call to action in the title. The content should have the information needed such as email, phone number, or link.
3. Trigger the modal.
Now that you have the modal, decide where you want it to pop up. To trigger the modal, select the text or image you want to become the trigger and click the link button. In the insert link box (see below) include the ID of your modal as the Url - don't forget the "#" symbol Set the Class to “Open Modal”. Voila. You're done.
Advanced Modal Options
You have two options with modals: you use a link to trigger a modal see below or the modal can fire when the page is loaded. To do this, just include the Unique ID of the modal in the page link. Click this link for an example.
Become an Antilles Pro!
Sign up for our blog to learn all about web design and construction, best practices and LRS Antilles Content Manager.
×
Instead of a link like www.mysite.com/about-us/, you could provide a link of www.mysite.com/about-us #myUniqueModalID. Our modal script will automatically search the page for a modal with that unique ID and display it to the user as soon as the page is loaded.
Go Modal!
Modal dialogs, when used properly to provide information to users in a clean and efficient manner, can be extremely useful and create a better user experience.
Contact HelpDesk to learn more or to request a modal stylized for your company’s website – and give your users the direction you’ve been wanting.
Watch our video to see how to create a modal.