Designing with Code: Providing Feedback

The Benefits of Consistent Feedback

When developing web applications it is necessary to provide feedback to the user based on the results of specific interactions. These results can include feedback in the form of error, warning or success messages. In order to maintain consistency in a web application, each different type of feedback should have subtle differences, such as background or font color for example, but should stay consistent in all other respects. For example, let's say that we have an Ajax application that allows us to interact with a database to save, retrieve and delete data. Many different server responses can occur based on the interactions that a user makes. For instance, a user may not fill out a form element properly and will therefore receive an error message that states the error that has occurred. On the other hand, a user may successfully save new data to the database and therefore we would provide them with some indication that their data was saved successfully. In order to keep these responses visually consistent we could do something as simple as setting the background color for the success message to green and the background for the error messages to red. We could then create an elaborate dialog window that stays consistent for each of the different messages, while simply keeping these subtle differences intact.

With this concept in mind we need to begin to understand how to implement these dialogs within an application from a development standpoint. This dialog component can be integrated with any application and will work especially well with Ajax since it is JavaScript based. It may sound a bit complex for simply displaying a dialog, but you will be surprised just how easy it is to create a reusable JavaScript object that will manage all of these different responses. Once the object is in place we can reuse it in any application and should only need to modify the CSS to match new application designs unless of course we want to add additional functionality. Before we begin creating the files for our dialog you can take a look at a running sample and download sample code here.

Creating a JavaScript Dialog Component

The technologies that we will use for our dialog component are JavaScript, CSS and XHTML. JavaScript will be used to create the actual dialog object, which will accept different message types and render them accordingly. CSS will be used to stylize the dialog and differentiate the message types with subtle color differences specified in custom classes. The XHTML will simply be used as the container that will import the JavaScript and CSS, it will also be the access point to our object from the front-end.

Let's get started by creating the Dialog object and defining the methods and properties that it requires. We can start by designing a dialog in a graphics editor or we can simply visualize how we will represent these messages. Let's say that we want the message to be in a rectangle with a header bar that will eventually contain a color to distinguish the message type, and then below the header we will have an area for the actual message. This is a simple example, but it could easily be made into something much more elaborate once we create the basic object, as it is always easier to start simple. Before we create our object we will need to understand what the dialog needs to do in order to display messages. Luckily, this is fairly obvious, as a dialog only needs to display messages and have a close action, therefore we will create two methods, open and close. Before we create either of these methods we will simply need to declare the Dialog object in a file named Dialog.js with the following code.

Dialog = {};

This code creates the Dialog object which means that we can now create methods and call them from anywhere this file is loaded. Next we will create the open method, which will take two parameters, a message and a message type. The message will be the feedback message that we want to display to the user in the front-end of the application. The message type will be a custom type that we define, whether it is an error, warning, success, etc. is up to us. Ultimately this message type will be used as the CSS class name for the dialogs header and can then simply be styled by adding an additional class into the CSS file that we will create shortly. Below is the entire open method for the Dialog object, which will render the dialog within the current document.

Dialog.open = function(_message, _type)
{
 var d = Dialog;
 if(d.type != _type)
 {
  if(d.type != null) { d.close(); }
  d.type = _type;
  
  d.w = document.createElement(’div’);
  d.w.id = ’dialog’;
  document.body.appendChild(d.w);
  
  var header = document.createElement(’div’);
  header.id = ’header’;
  header.className = _type;
  d.w.appendChild(header);
  
  var exit = document.createElement(’div’);
  exit.id = ’exit’;
  exit.innerHTML = ’[x]’;
  exit.onclick = function() { Dialog.close(); };
  header.appendChild(exit);
  
  d.w.message = document.createElement(’div’);
  d.w.message.id = ’message’;
  d.w.appendChild(d.w.message);
 }
 
 d.w.message.innerHTML += _message +"<br />";
}

This open method first starts with a flag to check for an existing dialog type, which will be the type that is passed as the second parameter. If the existing type is not equal to the parameter we enter the first condition, then if the type is not null or has a value we know that we have an existing dialog on the page so we close it before moving forward. Once beyond the two flags we set the type to the new type that was passed as a parameter, then we need to create the new dialog window. We start by creating a div element, which I have named w as in window, giving it an id value of dialog and appending it to the body. Once we have the dialog window created we then create the header div, an exit div, which contains an html value to represent an x for closing the window and an onclick event that fires the close method for the Dialog object. The last div element that we create is one in which we give an id value of message. As you can see, the window and message elements are set to properties of the object rather than local variables such as the header and exit elements. This is because the window and the message elements may need to be referenced at a later time, which is what we see in the code following the flags where the message parameter is appended by default, regardless of the results of the flags above. What this means is that we can continue to append messages to the message div in the dialog as long as the current dialog type matches the parameter message type being passed to the method.

The close method is much simpler than the open method. As this methods job is to solely remove the dialog element from the body of the page and set its type to null so that our flag in the open method, which checks for an existing and/or matching type, continues to function properly.

Dialog.close = function()
{
 document.body.removeChild(Dialog.w);
 Dialog.type = null;
}

As you can see this object is fairly easy to create and will be extremely useful moving forward because of its reusability. We can take this object into any web application, change some styles and we will have a custom dialog with almost no work. Before we add any style to the object we will need to import the JavaScript and the CSS file into an html file. Here is the html file with the imports and the actions for creating the dialogs.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" 
    content="text/html; charset=iso-8859-1" />

<title>Designing with Code: Providing Feedback</title>
<link href="css/dialog.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/Dialog.js"></script>

</head>

<body>

<a href="javascript:Dialog.open(
        ’Error message...’, ’error’);">Errors</a> | 
<a href="javascript:Dialog.open(
        ’Success message...’, ’success’);">Success</a> | 

<a href="javascript:Dialog.open(
        ’Warning message...’, ’warning’);">Warnings</a> | 
<a href="javascript:Dialog.open(
        ’Any Questions? <a href=\’http://www.krishadlock.com/
            ?request=contact\’>Contact Me</a>’, 
            ’question’);">Questions</a>

</body>
</html>

Giving the Object Style

Attaching CSS to the Dialog object is extremely easy once we know what element ids and classes we need to create. Now that we have the correct files imported we can simply add the classes and begin to see the dialog object take shape. We will start by stylizing the main div element and digging deeper into the dialogs nested child elements. Let's start by defining the dialog elements styles.

#dialog
{
 width: 500px;
 height: auto;
 border: #333 1px solid;
}

This class sets a pixel width for the dialog window, which will constrain the child elements and force them to wrap their contents if they happen to be wider than the number that we have chosen as the width. The height is set to auto because we want to keep it flexible, so that we can append messages without spilling out of the dialog window. Last we set a gray border of one pixel as a solid line around the window to make it stand apart from any other elements that may be displaying in the page.

The first child element that we will create a class for is the message element, which simply has padding of ten pixels surrounding the messages that are appended.

#dialog #message
{
 padding: 10px;
}

The other two children that exist in the dialog window are the header and the exit element. Below are the classes for each.

#dialog #header
{
 height: 20px;
 border-bottom: #333 1px solid;
}

#dialog #header #exit
{
 float: right;
 cursor: pointer;
}

The header class contains a height to accommodate the exit element and/or a title if we would like to add an additional parameter to the open method of the Dialog object at a later point. This element also has a bottom border that matches the main window border in order to make it seem more integrated. The exit element is floating to the right in order to follow suit with the standards that have previously been set with desktop applications. We also have a pointer cursor for the exit element so that it is more obvious that it is clickable.

As if the previous classes don't lend enough flexibility, the following classes are completely up to us and can change at anytime by simply passing a new message type parameter to the Dialog object and defining a class for it. Here are the pre-made classes that I have created for the sample.

#dialog div.error
{
 background-color: #ff0000;
}

#dialog div.success
{
 background-color: #009900;
}

#dialog div.warning
{
 background-color: #ff9933;
}

As I mentioned earlier, the differences between each dialog message will be very subtle while keeping the overall design of the window intact. Therefore each of these classes simply change the color of the background for the header element.

Creating a New Message Type

To show how easy it is to add a new message type to this object we are going to add a dialog specifically for asking questions. The message type will be question and the question can be any custom message that you would like to add.

Dialog.open(’Any Questions? ’, ’question’);

And here is the class that we would add for the question styles.

#dialog div.question
{
 background-color: #0099ff;
}

Need I say more?