Practical Design with a Modal Window

Web design is often just organizing the information on a web page to a readable, useable and functional format. The most important thing is to incorporate good organization into your design. The use of modal windows can help in this process.

 

If you don't know, a modal window provides a modal effect that limits a user from accessing components other than the modal window. In other words, it uses a child window within your website to interact with the visitor. Modal windows are often called heavy windows or modal dialogs because the window is often used to display a dialog box. Users cannot access anything outside of the modal window, including clicking or tabbing. Users have to interact with it before they can return to the main window. The best way to use modal windows is when you have to take the user's focus off the main window to an important window that needs their attention, as they are intended to grab the user's full attention.

 

Listed below are some common uses for Modal Windows as well as some great examples:

 

Modal Windows are great for displaying Images and Video’s.

 

It’s often an obvious addition to a website, but take a look how Facebook has incorporated the modal window into their web design. Instead of creating a new page for each photo, Facebook displays the picture for your viewing pleasure, and then when you are done, you escape the pop up window and are navigated back to our original page. The process is seamless and allows you to easially continue your browsing experience.

 

FaceBook Modal Window

 
















Use a Pop Up Window (Modal Window) for Contact Forms

 

Most websites are now using modal windows for contact forms as they are small and you do not have to create an extra full page for it. For the best uses, it’s important that the contact forms be immediately available and easy to find. Have one call to action on them as you do not want to cause confusion to your users.

 

SalesForce.com uses this for contact forms and demo signups.

 

Sales Force Modal Window

 














JavaScript Modal Windows for Alerts or Information

 

To keep your website visitors aware of progress or as an information tool, you can use modal windows to display a download option, or just to make users aware of what is happening concurrently while they are on the page.

 

Versions designed the modal window to display when users are downloading their product. This lets the user know that the download has started, but also lets them continue to browse the page. They also use modal windows to display images and updates.

 

Versions Modal Window Example

 














Modal Windows used as Login or Registration Pages

 

A great way to let users log in or register for your website, without having them go to a separate page, is to use JavaScript pop up windows. With a click of a button your visitors are displayed the sign in or up information.

 

MealNation.com uses this type of interaction with their Sign In Process. We here at hovClick.com us it as well for our login and registration process. Try it out when you select log in above.

 

MealNation.com Modal Window Example

 

Simple to Use!
Just add one line of code generated by hovClick and your popup is ready to go.

Keyword Triggering!
Set your popup to respond to referrals from Google, MSN, and Yahoo.

Signup Now!
Click here to register for hovClick! Thinking about giving hovClick a try? Signup is quick, free, and no download is required!

Latest News

  • January 1, 2011 Did you know that you can customize hovClick to look like your web content? We’re reminding you that hovClick is completely customizable except for the hovClick “powered by.” But, you can remove hovClick branding for a very reasonable cost, click here for more.

Testimonials

HovClick is surprisingly easy to use because you can really make it look like your own website just by adding your own HTML. I use it for our newsletter signup and special offers.

- John T.

Contact Us

hovClick
1801 L St Suite 237, Sacramento, Ca 95811
Telephone: 805-768-4321

Check out our company updates on