 | Level: Introductory Jack D Herrington (jherr@pobox.com), Senior Software Engineer, Leverage Software Inc.
25 Sep 2007 In a world where everything is designed to amaze and distract, it's awfully difficult
to get a user's attention. Learn how to use new techniques such as lightboxes, pop-ups,
windows, and fading messages with your Ajax tools to get your users' eyes on your content.
It's possibly an urban legend, but I was told many years ago of a user interaction
experiment in which USD100 (100 U.S. dollars) was taped beneath someone's seat while that person was
using a desktop application on a computer. In the status bar of the application, it
said, "There is $100 taped underneath your seat." The money was never found or claimed
by any of the participants, which tells you just how poorly the status bar communicates
information and how hard it is to get people's attention nowadays.
This article shows several techniques that use a combination of PHP, Dynamic HTML
(DHTML), and Asynchronous JavaScript™ + XML (Ajax) to throw content right into
users' lines of sight so that it really grabs their attention.
Tooltips
Setting the status bar in the browser is easy, but doing something
useful—like popping up a tooltip—is a bit more
difficult. To make it easier on myself, I employ a tooltip library that's freely
available on the Web and built on the excellent Prototype.js JavaScript library.
Listing 1 shows the code for this tooltip.
Listing 1. index.html
<html>
<head>
<script src="prototype.js" type="text/javascript"></script>
<script src="tooltip.js" type="text/javascript"></script>
<style>
body { font-family: arial,verdana; }
.popup { padding:10px; border:1px solid #ccc;
background:#eee; width:250px; font-size: small; }
</style>
</head>
<body>
<div id="book1">Code Generation In Action</div>
<div id="popup1" class="popup">
</div>
</body>
<script type="text/javascript">
new Ajax.Updater( 'popup1', 'text.php' );
new Tooltip('book1', 'popup1')
</script>
</html>
|
The page first employs an Ajax call to update the contents of the tooltip by using
the Ajax.Updater class from the Prototype.js library.
It then assigns the tooltip to the book1 <div> tag
using the Tooltip class that the tooltip library
provides.
Listing 2 shows the code for the content of the tooltip.
Listing 2. text.php
An excellent book on code generation and generative programming
by Jack Herrington.
|
Now, when I bring up the page in my browser, I see something like
Figure 1.
Figure 1. The text before the mouse rolls
over it
And when I hover my mouse over it, I get the pretty little pop-up window in
Figure 2.
Figure 2. The pop-up window
Tooltips are an easy way to unclutter your page and provide content on demand to
users. If users want to know more about something, they can simply hover their
mouse over it and get details. And those details can be arbitrarily complex,
including images, tables, and formatting.
Lightboxes
Lightboxes are the newest and most novel way to drive your readers' attention to a
particular element on the page. In the case of the example below, I have an image
thumbnail on the page, and when users click it, they're shown a larger version in
a "lightbox."
To create this effect, I use the excellent Lightbox JS 2.0 library, which is also
built on the Prototype.js framework. Listing 3 shows the
example code.
Listing 3. index.html
<html>
<head>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
<a href="images/megan1_400_320.jpg" rel="lightbox">
<img src="images/megan1_400_320.jpg" width="100" height="80"
alt="Megan" border="0" /></a>
</body>
</html>
|
When I navigate to the page, I see just the thumbnail, as in
Figure 3.
Figure 3. The image before clicking it
But when I click it, I see a full-sized image elegantly displayed in the center
of the window, as shown in Figure 4.
Figure 4. The lightbox with the full-sized
image
Even better, all the material in the background is grayed out, so that my eye
is further drawn to the content in the center of the display.
If you aren't familiar with the term lightbox, that's okay: It's an esoteric
term used in photography circles. Back in the days of film photography, a
device called a lightbox was literally a box about six inches deep, a
couple of feet across on both sides, with some clear white plastic on the top of it.
A light in the middle of the box would provide even illumination across the surface.
So, you placed your slides or negatives on the lightbox and, using a loupe,
which is just a fancy magnifying glass, you inspected each image. You can think
of the lightbox shown in Figure 4 as a photo that you're viewing through a loupe on
a lightbox. Thus, the term.
But what happens if instead of an image you want to highlight some text?
Text lightboxing
A variation of the lightbox idea has been implemented on a site called Particle
Tree. This one has the advantage of being able to display any arbitrary HTML
code, fetched using Ajax, from the server. I use it to display some additional
text to users.
Listing 4 shows the main page code.
Listing 4. index.html
<html>
<head>
<title>
Lightbox Text Test
</title>
<link rel="stylesheet" href="css/default.css" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="css/lightbox.css" media="screen,projection"
type="text/css" />
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>
</head>
<body>
<a href="text.php" class="lbOn">More About This Article</a>
</body>
</html>
|
In Listing 5, you see the HTML code that Ajax fetches and then displays.
Listing 5. text.php
<p>This article covers the basics of AJAX Lightbox that
shows text blocks instead of images</p>
<p><a href="#" class="lbAction" rel="deactivate">
Return to article list</a></p>
|
When I bring up the code in my browser, I see Figure 5.
Figure 5. Text you can click for more
information
And when I click the text, I see the lightbox with the content of the page, as in Figure 6.
Figure 6. The text lightbox in action
This is a great way to provide additional material on products or articles listed on the page without moving users away from the page. Instead, you indirectly draw their attention to the additional content you want to provide. As with any HTML code, this can be more text content, images, or even a form such as a registration, comment, or login form.
Windows
I mentioned using a lightbox for a form in the previous example, but that's not
really what users expect when they see a form. What they really expect is a
window. Thankfully, in the Prototype library, you'll find an excellent window
implementation that comes with a variety of different skins to give you whatever look and feel you choose.
The window code also uses Ajax through Prototype to get the content to present in
the window frame. I start with Listing 6, which is the page
that hosts the window.
Listing 6. index.html
<html>
<head>
<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/effects.js"></script>
<script type="text/javascript" src="javascripts/window.js"></script>
<script type="text/javascript" src="javascripts/window_effects.js"></script>
<link href="themes/default.css" rel="stylesheet" type="text/css" ></link>
<link href="themes/spread.css" rel="stylesheet" type="text/css" ></link>
</head>
<body>
<a href="javascript:void showWindow();">Show Window</a>
<script>
function showWindow()
{
win = new Window( { className: 'spread', url: 'test.html',
title: 'Simple Window', width:400,
height:300, destroyOnClose: true, recenterAuto:false } );
win.showCenter();
}
</script>
</body>
</html>
|
The JavaScript code here responds to the click of the Show window button by
creating a new window with the specified width, height, title, and content
specified by a given URL. It then shows the window using the
showCenter() method, which pops it into the middle of
the browser window.
Listing 7 shows the content for the window.
Listing 7. test.html
<h1>Registration</h1>
<p>You need to first register the product before...</p>
|
When I navigate my browser to the first page, I see something like
Figure 7.
Figure 7. The window link
Not much to look at, but when I click it, wow! What a difference, as in
Figure 8.
Figure 8. The window that pops up
It's a bit gaudy, but it definitely gets your attention. You don't have to have the
lime green thing, though. Several different skins are available for you to select.
But what I really wanted to do was a form, right? In particular, I want a
login form on the main page so when I click the Login button, a login
form pops up. Listing 8 shows the code for the main page.
Listing 8. form.php
<html>
<head>
<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/effects.js"></script>
<script type="text/javascript" src="javascripts/window.js"></script>
<script type="text/javascript" src="javascripts/window_effects.js"></script>
<link href="themes/default.css" rel="stylesheet" type="text/css" ></link>
<link href="themes/spread.css" rel="stylesheet" type="text/css" ></link>
</head>
<body>
<div id="myloginform" style="display:none;overflow:clip;padding:10px;">
<form id="loginfrm">
<table>
<tr><td>Login</td><td><input type="text" name="name" /></td></tr>
<tr><td>Password</td><td><input type="password" name="password" /></td></tr>
</table>
</form>
<button onclick="login()">Login</button>
</div>
<a href="javascript:void showWindow();">Login</a>
<script>
var g_loginWindow = null;
function login()
{
new Ajax.Request( 'login.php', {
parameters: $('loginfrm').serialize(),
method: 'post',
onSuccess: function( transport ) {
g_loginWindow.close();
}
} );
}
function showWindow()
{
g_loginWindow = new Window( { className: 'spread', title: "Login",
destroyOnClose: true,
onClose:function() { $('myloginform').style.display = 'none'; } } );
g_loginWindow.setContent( 'myloginform', true, true );
g_loginWindow.showCenter();
}
</script>
</body>
</html>
|
This one has the content for the window on the page itself. But, when the user clicks
the Login button on the form, it uses the Ajax.Request object to request a login with the server. Listing 9 shows the simple login script, which is far more complex in practice.
Listing 9. login.php
Now, when I bring up this page, I get a login link, as in
Figure 9.
Figure 9. The login link
And when I click the link, I see a very cool Web 2.0-style login window, as in Figure 10.
Figure 10. The login window
When I click Login, it sends the user name and password to the server, which
can verify the credentials and set a session cookie as well as reply with a
response that indicates that I should be forwarded to the home page.
This is the type of functionality that can really bring a pop to the application
and give users a sense that they're using something more akin to a desktop
application than something on the Web.
Fader messages
Another new way to communicate with users is the fader message
—that
is, a message that pops up in a known, but valuable, piece of screen real estate
to tell users that something important has occurred. In this case, I use the
Scriptaculous effects library, which is also built on Prototype.js, to implement
the fader message.
It starts with the page in Listing 10.
Listing 10. index.html
<html><head>
<style>
.alert {
opacity: 0.0;
border:2px dashed black;
padding:5px;
background:#eee;
font-family: arial, verdana;
font-weight: bold; }
</style>
<script src="lib/prototype.js"></script>
<script src="src/effects.js"></script>
<script>
function submit()
{
new Ajax.Updater( 'result', 'alert.html', {
method: 'get',
onSuccess: function() {
new Effect.Opacity('result',
{ duration: 2.0, from: 0.0, to: 1.0 } );
new Effect.Opacity('result',
{ delay: 10.0, duration: 2.0, from: 1.0, to: 0.0 } );
} }
);
}
</script>
</head><body>
<div id="result" class="alert"></div><br/><br/>
<button onclick="submit()">Submit</button>
</body></html>
|
Ideally, the page is some sort of form with a Submit button. Then, when
the user clicks Submit, the server is sent the form data and replies with a
message. This message is then shown in an area that fades up to display the message,
then fades away. In this case, I left out the form elements, so I just have the Submit button.
The Submit button sends an Ajax request to the alert.html page. It then puts
the result of that page in the result <div> tag,
which then fades in and out using the Scriptaculous effects classes.
Listing 11 shows the code for the alert page.
Listing 11. alert.html
A new record has been added.
|
When I bring up the page in my browser, I see something like Figure 11.
Figure 11. The Submit button for a form
Once again, not much too look at. Imagine a set of form fields with some data before
the Submit button.
When I click Submit, the alert fades up, as shown in Figure 12.
Figure 12. The faded-in message
announcing the addition of a message
After a few seconds, the message fades away.
This is a simple, yet very effective way to communicate with users. As long as
you don't overuse it, it taps directly into the keen sense of awareness for objects
appearing and disappearing. That's a survival instinct that's bred into humans. So,
it's something you pay attention to. As long as it's well used, it's a powerful
way to get users' attention quickly.
Conclusion
Hopefully, this article has provided you with a whole new set of tools to interact
with and alert your users in novel ways. Over time, I'm sure they will be overused and
become just as ineffective as the status bar. But for the time being, these tools can provide a fun, effective, and Web 2.0 way to get people's attention.
Download | Description | Name | Size | Download method |
|---|
| Sample code | x-ajaxxml6-lightbox.zip | 1573KB | HTTP |
|---|
Resources Learn
Discuss
About the author
Rate this page
| |
