OneMarco

Improving the Date Picker User Interface (UI)

Marco — Sat, 13 Dec 2008 22:30:20 +0000

Date pickers have become ubiquitous user interface elements in online forms. If you do not know what date pickers are, they are those interactive calendars that pop up to assist you when selecting a date. They are not useful in all situations, like when you already know the date you are going to enter. In this case you can just type the date in, as this tends to be quicker and simpler than using a date picker. However, a date picker can be very useful when you are trying to figure out the date of the Monday before Christmas, the date of next Thursday, or the date of the first Wednesday in May. This is because a date picker allows you to visualize the relationship between a date, January 4th, 2009, and a weekday, Sunday. Yet, the common date picker does have its fair share of drawbacks.

What the Date Picker Lacks

Figure 1. A common date picker user interface.

The common date picker is lacking in speed and simplicity when compared to typing a date into a text field. Typing a date into a text field is a relatively quick and easy process, usually ten keystrokes is enough to enter a date formatted as mm/dd/yyyy. What makes this task even quicker is that you only need eleven keys to enter any date (0-9 and /); using the number pad makes this even easier. On the other hand, selecting a date using a date picker can be a slower and more complex process. If you are selecting a date six months from the month initially displayed in the date picker, then you have to change the month six times before you are shown the appropriate month. The same or a worse problem arises when navigating through years. If the date picker allows navigation by year and month it is only slightly more problematic than only changing the month. On the other hand if the date picker only allows navigation by month, changing the year takes eleven more clicks. It also does not help that most date pickers use a cryptic system of symbols to represent moving forward and back one month or one year. These symbols are the single and double angle quotation marks – or something similar – pointed either right or left. The single angle quotes navigate through the months while the double angle quotes navigate through the years. This is not the most intuitive way to represent month and year navigation. All of these problems contribute to the relative slowness and complexity of common date pickers.

Speed and simplicity are important when filling out forms because users do not usually visit websites for this purpose. Users visit websites to obtain some kind of valuable information. Forms are just there for users to specify the type of information they need. In other words, forms are means to and end and should not hinder or irritate a user on their path to that end. The simple reason for this is that making users happy keeps them coming back to the site. So it should be our goal to make entering dates into a form as easy (quick and simple) as possible.

A Proposed Solution

Figure 2. A date picker with separate month and year displays.

The goal of the proposed solution is to simplify the date picker and make it quicker to use. We start by separating the month and year in order to reduce the complexity introduced by the symbols shown in Figure 1. It becomes easier to connect the meaning of the symbols because they are now grouped with their corresponding item, month and year. We can also use the same symbols to represent navigating forward and backward by month or year. This reduces the number of symbols for which users have to interpret the meaning.

Figure 3. A date picker with expanded month and year interfaces.

The next step is to expand the months so that any month is selectable with one click, as opposed to 1-11 clicks. This also allows us to remove the navigation symbols as they are no longer necessary. Reducing clicks increases speed and removing the navigation symbols reduces complexity because the user no longer needs to decipher the meaning of the symbols or their connection to any item. It is possible to expand the months because the number of months is finite and relatively small. Twelve months can easily fit into two rows when they are abbreviated.

Applying this same solution to the year navigation is more difficult because the range of input for years is application-specific. Displaying 60 years in the manner the months have been displayed in Figure 3 is impractical. It would make the date picker too big and would required more effort by the user to find the appropriate year. In this situation a drop down list would be a better method for selecting a year – better than displaying all sixty years and better then navigating one year at a time. As you can see, I have used an example where the range of input is restricted to five years. In this case it is practical to display all the years because they fit in one row. This has two obvious advantages over a dropdown list. First, it requires fewer clicks and mouse movements to select the appropriate year. Second, the valid range of years is immediately visible; whereas in a dropdown you must expand the list before you are shown that range. While this technique works for small ranges of years, at a certain number a decision has to be made between displaying all of the selectable years and using a dropdown list – or a similar UI element. That decision is application-specific and ultimately left up to the UI designer. I cannot suggest where that line should be drawn, because I donâ€™t know myself. That is a question that may have to be – or has already been – answered by research.

The Date Picker Working Sample

You can take a look at a working example of my date picker. The example code authored by me is public domain, so use it for anything without any restrictions. You can easily identify the code I have authored; as it has my name, email, and URL along with a statement declaring it public domain. If you use the code in your own work, I would appreciate my name and URL be included.

Get the DatePicker.js File. The DatePicker class depends on jQuery.

Get the datepicker.css file and datepicker.ie.css file.

JavaScript Callbacks and Binding (and Callback Arguments and References)

Marco — Thu, 13 Nov 2008 03:03:51 +0000

Callback functions are used in JavaScript (JS) extensively. They are required for AJAX/XHR, event handling, and in popular JS libraries. However, passing around functions as arguments can cause headaches, especially for beginner JS programmers.

Problems with binding/`this`

One of the biggest problems with passing functions as callbacks is this and what it refers to. You usually run into the problem when passing an object’s method as a callback function. Another way to encounter this problem is by passing as a callback a function that expects to be bound to a certain type of object. You’ll usually get an error stating that this.someProperty is undefined. You can resolve this with Function.apply, Function.call or a closure. For example:

//using Function.call
takesCallback(
	function callbackProxy(argOne, argTwo){
		//assume myFunction is already defined
		myFunction.call(myObject, argOne, argTwo);
	}
);

//or using Function.apply
takesCallback(
	function callbackProxy(argOne, argTwo){
		//assume myFunction is already defined
		myFunction.apply(myObject, [argOne, argTwo]);
	}
);

//or using a closure
takesCallback(
	function callbackProxy(argOne, argTwo){
		//assume myObject is already defined
		myObject.myMethod(argOne, argTwo);
	}
);

In the code above, the function takesCallback takes a callback function as its only argument and calls that function at a later time with two arguments. The function, callbackProxy is a wrapper function that takes the arguments and passes them to the real callback, while ensuring that the function is bound to the correct object.

Problems with Arguments

Another problem with callback functions is that the arguments passed to the callback function are often out of your control. Sometimes you need more information than what is passed to your callback function by the caller. This, too can be solved with a closure. For example:

function main(){
	var myVarOne = "one";
	takesCallback(
		function callbackProxy(argOne){
			//assume myFunction is alread defined
			myFunction(argOne, myVarOne);
		}
	);
}

Again, the callbackProxy function takes care of calling the real callback with the correct arguments. In this case it appends myVarOne to the list of arguments.

Problems with references

The issue with references does not come up often. But when it does, it can be difficult to solve. When you use a callback proxy to pass additional arguments to the real callback, you may find that the values of those arguments have changed between the time the callback proxy was created and when it was called. This will happen if you are using a loop counter as an argument for your callback or if you change the value of the variable for some other reason. For example:

//looping
for(var i = 0; i < 5; i++){
	takesCallback(function callbackProxy(){
		//assume myFunction is already defined
		myFunction(i);
	})
}

//general example
var x = 2;
takesCallback(function callbackProxy()){
	myFunction(x);
}
x = x * 2;

In both of the cases above, when myFunction is called, the value of the first argument will be 4. This is true for all iterations of the loop. It happens because the references to i and x are never broken. In the general example, you can eliminate this problem by using another variable in place of x. In the looping example, the fix is more complicated:

for(var i = 0; i < 5; i++){
	takesCallback(
		(function breakReference(arg){
			return function callbackProxy(){
				myFunction(arg);
			};
		})(i)
	);
}

This code creates the callback proxy with the breakReference function. The breakReference function is executed immediately and returns the callback proxy. The reference to i is broken because i is passed as an argument. In JS, primitives passed as arguments are passed by value and objects passed as arguments are passed by reference. So, if you are trying to break a reference to an object, this method will not work.

A better solution

You probably don’t want to remember all these tricks or write these routines over and over. Personally, I dislike closures because they can become nested several levels deep, making debugging and reading your code difficult. If you’ve ever written a web application, you know the code can quickly become a mess. Closures can compound that mess, so I try to stay away from them or hide them in other functions. So what can you do? You can write a function to take care of these issues for you and use it as often as you need or you can use a binding function from your favorite JS library. Or, you can use the one I already wrote (if you don’t use a library and don’t want to write your own).

/**
 * @param {Function} func the callback function
 * @param {Object} opts an object literal with the following
 * properties (all optional):
 * scope: the object to bind the function to (what the "this" keyword will refer to)
 * args: an array of arguments to pass to the function when it is called, these will be
 * appended after any arguments passed by the caller
 * suppressArgs: boolean, whether to supress the arguments passed
 * by the caller.  This default is false.
 */
function callback(func,opts){	
	var cb = function(){
		var args = opts.args ? opts.args : [];
		var scope = opts.scope ? opts.scope : this;
		var fargs = opts.supressArgs === true ?
			[] : toArray(arguments);
		func.apply(scope,fargs.concat(args));
	}
	return cb;
}

/* A utility function for callback() */
function toArray(arrayLike){
	var arr = [];
	for(var i = 0; i < arrayLike.length; i++){
		arr.push(arrayLike[i]);
	}
	return arr;
}

The callback function is fairly straight forward. It takes a function and and an object literal and returns a callback function that takes care of the problems discussed earlier. The properties of the object literal are all optional and will default to what is normal behavior for callbacks. The object literal defines the scope and extra arguments. It can also supress the arguments provided by the caller (the extra arguments are still used). This is useful when you don’t need the arguments provided by the caller or when you are using a function that isn’t always called as a callback. Here is an example of how to use it.

takesCallback(callback(myFunction,{scope:myObject,args:[myArgOne,myArgTwo],suppressArgs:true}));

//or
takesCallback(myObject.myMethod,{scope:myObject,args:[myArgOne]});

As you can see, using the callback function is much easier than using the tricks shown above. If you are using callbacks often, as is the case with event handling and AJAX, this is very handy tool. You can create your objects, methods, and functions once and quite easily reuse them.

Startup Weekend Houston

Marco — Mon, 01 Oct 2007 12:41:56 +0000

This past weekend I participated in Startup Weekend Houston. For some reason I ended up in the UI design group, even though my specialty is front-end web-dev. I had a blast though, working with the UI team, Matt Alberty, Marcus Mateus, and Ramesh Bhaskar. Two and a half days went by incredibly fast, and in the end we ran short on time and only partially launched. But, this project will keep moving forward. We created TipDish, a news wire for social media. If you blog/dish, you can register at the site to receive tips pertinent to the subject(s) you blog about. We expect a full launch sometime this month.

The Google Maps Tooltip Gets a Shadow (and HTML Support)

Marco — Tue, 07 Aug 2007 02:11:20 +0000

In the spirit of consistency, I decided to add a shadow to the tooltips (View the example). They just didn’t blend in with the rest of the Google Maps overlays. So I set out to replicate the “standard” Google Maps shadows.

Replicating the Shadow

Through a mix of reasoning, instinctive guessing, and trial and error, I have devised a technique to replicate the shadows using Adobe Photoshop. It’s a fairly simple process and the steps are outlined below.

Make a copy of the overlay’s layers and merge and rasterize the copies if needed
Make the copy all black (I use a gradient map and set both ends to black)
Perform a Free Transform and set the Height/Vertical Scale to 50% and the Horizontal Skew to -45°
Apply the Gaussian Blur filter (I set it to .5 pixels for small images and 2 to 3 pixels for large ones)
Set the Opacity to 45%
Save the shadow layer only as a PNG

Drawing a Variable Size Shadow on the Map

After figuring out how to replicate the shadow, I moved on to drawing it on the map. The first step to drawing the shadow is getting its size and location. From replicating the shadow we know that the height is 50% (plus padding for the Gaussian blur). The width of the shadow is the width of the tooltip, plus half the height of the tooltip (and again, the padding). Half the height of the tooltip is added to the width to take into account the offset of the shadow’s top, right corner caused by the skew. Since the skew is 45 degrees, the offset is a one to one ratio with the height of the shadow. The position of the tooltip’s shadow is relative to the marker’s shadow. So I apply the same principles to the marker’s dimensions in order to calculate the position of the tooltip’s shadow.

Because the size of the tooltip is not fixed, the shadow needs to be able to grow vertically and horizontally. I accomplish this by dividing the shadow into four quadrants. Each quadrant contains the same shadow image, positioned to display its respective corner. The image’s positions in the first and third quadrants are straight forward. The image is positioned so the top and right edges of the image line up with the top and right edges of the first quadrant. The bottom and left edges of the image line up with the bottom and left edges of the third quadrant. The positioning of the image in the second and fourth quadrants requires some simple calculations. The image in the second quadrant is placed so the top edge of the image lines up with the top edge of the quadrant. The left edge of the image is offset from the quadrant’s left edge. The image in the fourth quadrant is symmetrically opposite from the second, bottom edge of image to bottom edge of quadrant and right edge of image offset from the right edge of quadrant. See the source code, the Tooltip.prototype.redraw method, for the calculations of the offset.

The code below is a sample of the xhtml generated by the Tooltip object to create the shadow. The parent div is the container for the entire shadow, it is outlined in black in the image above. The child divs represent the quadrants of the shadow. Each quadrant contains a reference to the same shadow image and the image is positioned relatively to the quadrant.

HTML Support

The tooltip can now take an HTML Element for its content. To do so, just create an element and pass it to the tooltip’s constructor. This technique is illustrated below.

//create the marker
var myMarker = new GMarker(new GLatLng(lat,lng),{icon:icon});

//create the tooltip content
var myElement = document.createElement('p');
myElement.appendChild(document.createTextNode("Some Text..."));

//create the tooltip with the marker and content
var myTooltip = new Tooltip(myMarker, myContent, 0);

Improved CSS Styling for Visited Links

Marco — Thu, 07 Jun 2007 03:06:06 +0000

I was recently checking my site traffic reports to see where my visitors were coming from and I found a mind-blowing (at least for me) CSS technique for visited links. Eva-Lotta Lam uses a check mark background image for visited links rather than simply changing the text color. You might not think that this is mind-blowing, but consider that using background images to attach information to links has been around for awhile now, i.e. external link icons.

Why has this technique not been applied broadly to visited links as well? It makes so much more sense than changing the color. You don’t have to think about which color corresponds to a visited link as opposed to a non-visited link. The color swapping doesn’t really help across different websites because there is no standard convention for which colors to use. The exception may be blue for non-visited purple for visited, but these are antiquated and clash with most websites’ color schemes. Using a check mark doesn’t require that users remember a link had a different color when or if they re-encounter it after they have visited the it the first time. Users do not have to compare one link’s color to another and try to remember which of those links has been visited and which has not. The check mark conveys the same meaning without requiring the user to think as much; it is a much better solution.

Evalotta pointed out that Paul Boag also uses this technique. If you know of any others, let me know.

Batch Geocoding with the Google Maps API

Marco — Sun, 03 Jun 2007 23:52:45 +0000

I’ve been working more and more with the Google Maps API recently. And one thing strikes me as odd; it’s difficult to find examples of how to retrieve geocodes for addresses. If you’re going to implement the API in a website, you usually have to take multiple addresses and convert them to geocodes. But how do you do this?

Enter Geocoder. You may be asking yourself, “Who’s Geocoder?” No, no my friend; Geocoder is not a who, it’s a what. It is a little web app that will retrieve the coordinates of any address (known to Google Maps), using the Google Maps API. The beautiful thing about Geocoder is that it allows you to perform batch retrievals using any character(s) to separate the records. Geocoder also gives you the ability to drop a draggable marker onto the map and it will tell you the coordinates of the location you move it to. This is extremely helpful for locations without addresses. And best of all, Geocoder is completely free and onemarco.com-independent. “How,” you ask? Simple, you can download Geocoder and insert your Google Maps API key in the index file. It will run on any web server as long as you have an API key. I’ve even zipped it up into a convenient archive so that you can download all the files with one click.

Geocoder is free to use for any reason without any restrictions. Just credit me if you redistribute it.

View Geocoder in action.
Download Geocoder.zip.

P.S. I would like to thank Simon Reynolds for designing my masthead. You can check out his blog at SR28.com and his artwork at 4StoryStudio.com. His blog is designed beautifully.

Custom Tooltips for the Google Maps API

Marco — Wed, 16 May 2007 14:19:04 +0000

Welcome to my JavaScript blog, onemarco.com, or as I like to call it, Blog de Alionso. I’ve been developing with JavaScript for about six months now and I’ve learned so much from others’ blogs. I’ll be sharing some of the scripts I’ve developed recently, in the hopes that my experience and knowledge will help others.

What?

Today I present the Tooltip object for the Google Maps API. It is used to add quickly-appearing, easy-to-style (via CSS) tooltips to Google Maps’ markers. This is in contrast to the built-in tooltips of versions 2.5 and higher, which appear after a short delay and cannot be styled. You can view ~~an example~~ the new example of the tooltips in action which also includes a sidebar.

View the Tooltip source code. The code is free to use for any reason without any restrictions. Just credit me if you redistribute it.

Why?

I developed the tooltips for two reasons. First, I find it difficult to figure out which marker a sidebar entry belongs to. It is time consuming to look at the letter for the entry and find the matching letter on the map, especially when markers overlap and hide each other. It is easier if the tooltip appears above the marker when I hover over the sidebar entry. Secondly, sometimes I just want to quickly figure out what a certain marker on the map is without having to look for its corresponding letter in the sidebar. And having to click on the marker to pull up the location’s name is annoying, especially when it moves the center of the map. It just seems natural to me that when you hover on a marker, the name of the location should appear. Besides, it was a good exercise in extending the Google Maps API.

How?

Adding tooltips to a Google Map, using the Tooltip object is easy. I’ll explain the steps I use when implementing the tooltips. The constructor for the tooltip takes three parameters: the marker, the text, and the padding between the tooltip and the marker.

var marker = new GMarker(new GLatLng(29.78933,-95.716748));
var tooltip = new Tooltip(marker,'HEB Grocery Store',4);
marker.tooltip = tooltip;
map.addOverlay(marker);
map.addOverlay(tooltip);
GEvent.addListener(marker,'mouseover',function(){
	this.tooltip.show();
});
GEvent.addListener(marker,'mouseout',function(){
	this.tooltip.hide();
});

After I’ve created the tooltip, I set it to the marker’s tooltip property. Then, I add the marker and tooltip to the map via the addOverlay method of the GMap2 object. The last step is to add the mouseover and mouseout listeners to the marker to show and hide the tooltip.

Things to consider

You may want to suppress the tooltip when the GInfoWindow is open. Since the markers do not have a property that indicates whether their info window is open, you would need to add listeners to their infowindowopen and infowindowclose events. For an example of how to do this check out the source code of the Tooltips with drop shadows example.
Another possible extension would be to add a timeout to the hide method of the Tooltip object to delay how quickly the tooltip disappears.
~~One limitation of the tooltip is that it currently only supports text. If you wanted more advanced styling, you could add support to the Tooltip object for inserting DOM Elements.~~ The new version of the tooltip now supports DOM Elements for the content.
~~The Tooltip object does not cast a drop shadow. If you want to keep it consistent with the Google Maps look-and-feel, this would be something to consider adding.~~ The new version of the tooltip now casts a drop shadow.