|
 Use proximity to apply Fitts's User Interface Law
One day I stumbled across an article on the MSDN Library that discussed Fitts's User Interface (UI) Law and how it applied to Web design. The general idea is that the difficulty or ease of a UI is based on the size and proximity of clickable objects.
While this seems like common sense, the principles of Fitts's UI Law are not always applied, which is obvious with the many common Web sites that are poorly designed. For example, Internet search engines often present a list of numbers at the bottom of the results page representing additional results. These numbers are usually designed with a small font and without much area to click on. However, there is usually a Next or Previous click area that's much easier to hit.
According to Fitts's UI Law, this is bad design. We can turn this bad design into a more user-friendly design by adding some code to create a dynamic effect that will change the clickable area size based on mouse pointer proximity to the clickable area.
Search results normally appear in the following fashion:
1 2 3 4 5 6 7 8 . . .
Let's assume that each of these pages is a hypertext link (<a>). If we wrap all these links in a <SPAN>, we can use the onmousemove event on the SPAN object to capture the coordinates as they relate to the individual links.
Here's the HTML to produce the links to the page numbers:
<SPAN id="spnEasyLink" onmousemove="spnEasyLink_onmousemove(this)">
<a href="#" style="font-size: 8pt;">1</a>
<a href="#" style="font-size: 8pt;">2</a>
<a href="#" style="font-size: 8pt;">3</a>
<a href="#" style="font-size: 8pt;">4</a>
<a href="#" style="font-size: 8pt;">5</a>
<a href="#" style="font-size: 8pt;">6</a>
<a href="#" style="font-size: 8pt;">7</a>
<a href="#" style="font-size: 8pt;">8</a>
</SPAN>
As you can see, this is a simple list of <a>'s to create the individual links. Each link contains an HREF set to "#" for simplicity's sake.
Here's the JavaScript code to handle the size calculations:
var m_maxFont = 48;
var m_minFont = 8;
var lastX = 0;
var timerID = -1;
function reset_easyLink() {
var element = document.all.spnEasyLink;
for (var i = 0; i < element.children.length; i++) {
element.children[i].style.fontSize = m_minFont + "pt";
}
}
function spnEasyLink_onmousemove(element) {
if (Math.abs(window.event.x - lastX) < 1) return;
clearTimeout(timerID);
lastX = window.event.x;
for (var i = 0; i < element.children.length; i++) {
var midX = element.offsetLeft + element.children[i].offsetLeft + (element.children[i].offsetWidth/2);
var pct = (midX - Math.abs(window.event.x - midX))/midX;
var fontSize = Math.floor(m_maxFont * pct);
if (fontSize > m_maxFont) {
fontSize = m_maxFont;
} else if (fontSize < m_minFont) {
fontSize = m_minFont;
}
element.children[i].style.fontSize = fontSize + "pt";
}
timerID = setTimeout("reset_easyLink()", 1000);
}
Whenever the mouse is moved over the SPAN object, the spnEasyLink_onmousemove() function calculates the proximity to the individual object in a percentage value. First, the function checks to make sure that the mouse has been moved by at least one pixel (this can be changed in order to adjust the mouse movement resolution). If it hasn't, it exits the function.
Next we clear a timerID in case one was set. Then we reset the lastX variable. The for() loop loops through each child element of the SPAN object and calculates the percentage proximity of the child element based upon the distance from it.
The font size is calculated by multiplying the percentage value times the maximum font size of 48 points. If the font size is larger than the maximum font, it's set to the maximum font. If the font size is smaller than the minimum font, it's set to the minimum font of eight points.
Finally the child element's font size is set and a timerID is set to reset all the links to the minimum font size. The latter step is performed in case the user moves the mouse pointer outside the SPAN object. The reset_easyLink() function merely resets all the link font sizes to the minimum font.
This dynamic resizing of the <a> objects allows the user to more easily target them for clicking. This also creates a smart UI design that allows space saving while adhering to Fitts's UI Law.
Phillip Perkins is a contractor with Ajilon Consulting. His experience ranges from machine control and client/server to corporate intranet applications. | 
Copyright Information 
