Improving The User Experience Of Your Website With Modal Windows




With new elements of design trending the web it’s no surprise a large portion of these aim towards enhancing the user experience. What better way to help create a more usable environment then to start by properly structuring the way your users interact with key aspects of your websites (i.e. the login process)? This is where the use of Modal Windows steps in.

These child windows help facilitate the connection between the parent application leaving room for a smoother work flow. That’s a pretty good reason to use one, but why else? Let’s find out!

Where to Use Modal Windows?

Modal windows improve the usability of your website by allowing the user to access a variety of areas on your site without having to load any new pages. You can also use them to turnover higher conversions on sign-up forms. For example, DesignReviver has a Questions and Answers community based on Qhub that allows anyone to ask questions without being registered.

However, whenever a user tries to ask a question without being registered a modal window automatically pops-up asking them to sign-up or continue as a guest. Point being that the users who weren’t planning on registering will consider it because of how “all-to-easy” the process seems.

Apart from sign-up forms, you can place your contact form within a modal window. This can be accomplished by setting up a link within your navigation menu (or anywhere else) that will point to a quick and easy contact form once the user clicks on it. Other common uses are log-in forms, alerts/warnings, videos, and photo galleries. All in all, modal windows create a bridge allowing information to move freely between you and your users.

Creating Your Own

Simple Modal ↓

Simple Modal
SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.

ColorBox ↓

ColorBox
ColorBox allows users to create a customized lightbox that is unique to their project. You’ll also be able to promote accessibility, W3C standards, and best practices.

Modalbox ↓

Modalbox
ModalBox is a JavaScript technique for creating modern modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. It’s inspired by Mac OS X modal dialogs.

Fancybox ↓

Fancybox
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of a web page.

jQuery Dialog ↓

jQuery Dialog
The jQuery Dialog plugin helps you structure components in a dialog window. You can customize the windows to your specification.

Livepipe UI ↓

Livepipe UI
LivePipe UI is a suite of high quality widgets and controls for web 2.0 applications built using the Prototype JavaScript Framework. Each control is well tested, highly extensible, fully documented and degrades gracefully for non JavaScript enabled browsers where possible.

Prototype Window ↓

Prototype Window
This class is based on Prototype. The code is inspired by the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file, but it’s not mandatory.

jQuery Alert Dialogs ↓

jQuery Alert Dialogs
These methods simulate a true modal dialog box. They will automatically re-position themselves if you resize the browser window (unlike many existing dialog/lightbox-style plugins). If you include the jQuery UI Draggable plugin, the dialogs can be moved by dragging their title bars. Everything you need to produce the dialogs in the demonstration is included in the download. They are completely customizable via CSS (which can make your apps look much more professional)

MochaUI ↓

MochaUI
MochaUI is a web applications user interface library built on the Mootools JavaScript framework. If you take a look at the demo you’ll find an interactive modal window. Take a look at the documentation and the Mocha framework.

Boxy ↓

Boxy
Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays I’ve seen by providing an object interface to control dialogs after they’ve been created.

What other techniques and plugins do you know of for developing modal windows?

Modal Design Showcase

DesignersCouch ↓

DesignersCouch

Versions ↓

Versions

Design Reviver Answers ↓

Design Reviver Answers

Behance Gallery ↓

Behance Gallery

Nasi Briyani Lounge ↓

Nasi Briyani Lounge

Jango ↓

Jango

Vewzi ↓

Vewzi

Pixelmator ↓

Pixelmator

Build With Me ↓

Build With Me

Zoo Tool ↓

Zoo Tool

Yorkdale ↓

Yorkdale

Mac Heist ↓

Mac Heist

Sales Force ↓

Sales Force

Gowalla ↓

Gowalla

Popscreen ↓

Popscreen

Veritocracy ↓

Veritocracy

Kiehls ↓

Kiehls

Dishizzle ↓

Dishizzle

Cnet ↓

Cnet

Remix Jobs ↓

Remix Jobs

GrooveShark ↓

GrooveShark

Pixelight Creative ↓

Pixelight Creative

Accept-Ideas ↓

Accept-Ideas

Iceberg ↓

Iceberg

Mail Chimp ↓

Mail Chimp

Your Turn To Talk

I hope you enjoyed this post and learned a thing or two about modal windows. Please let us know of any other techniques and plugins we might have missed. See you in the comment section ;)





About the author:

Joel Reyes is a web designer and developer with years of experience in the industry. He runs a development studio called Looney Designer, a design resource site at GrindSmart.com, and an a free file hosting site for designers, developers and creatives at ShareDen.com.

Comments:

Scroll back to the top