An exploration into the use and creation of widgets in web design by Austin Marshall for ACN6341 Human Computer Interaction, Fall 2007
Here I present a framework for the creation of widgets in user-centered web design and demonstrate their use in enhancing web usability. Widgets in this case are simple, discrete, re-usable mini-applications that can be embedded into a web page. This is intended as a guide for web designers and as an educational tool for students of user-centered design.
The web is an inherently open and decentralized platform built on several (often conflicting) standards. Differences in hardware and software can affect user experience in ways beyond the control of the web designer. As such, a link to an external web page or one that spawns an application on the users computer opens up the possibility that the user experience suffers due to factors beyond the control of the web designer.
By using widgets, the web designer can present external content in a clean, consistent interface while at the same time reducing the likelihood of user error.
To maintain consistency, each widget has the following common components:
Widgets are intended to behave in a way that is familiar to the user by capitalizing on the users prior experience with a windowed GUI. For example, a widget...
The widgets presented here are made possible by utilizing and extending the Script.aculo.us Library, Prototype Javascript Framework, and Prototype Window Class.
<script type="text/javascript" src="js/prototype/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous/scriptaculous.js"></script> <script type="text/javascript" src="js/window/window.js"></script>
Two custom classes WidgetHelper, and Widget are defined in the file widget.js
<script stype="text/javascript" src="js/widgets/widget.js"/></script>
...and require the following CSS directives for the theme used in this example:
<link href="css/themes/default.css" rel="stylesheet" type="text/css"></link>
<link href="css/themes/alert.css" rel="stylesheet" type="text/css"></link>
<link href="css/themes/alphacube.css" rel="stylesheet" type="text/css"></link>
<style type="text/css">
.alphacube_minimize
{
right:33px;
}
</style>
To instantiate a basic widget, attach the following code to an event:
var w = new Widget('widget');
w.window.setTitle("This is a widget");
w.window.setSize(300,125);
w.window.getContent().style.marginTop = '1em';
w.window.getContent().style.fontSize = '10pt';
w.window.getContent().innerHTML = "<p>Dynamic content here, including HTML</p>";
The dynamic content in a widget can be text or formatted HTML. It is best to attach widgets to events in non-obtrusive ways to keep the HTML code clean, the examples below include code to attach widgets to events on page load without the need for embedding Javascript code in HTML. Using OOP techniques, the base Widget class can be extended to provide additional functionality, such as the Google Maps and Image Viewer examples in the next section.
By forming a url according to the format Map://<physical location>, I can attach a Google Maps widget to a link on page load by identifying all links that begin with "Map://", replacing the href with javascript:void(0) and adding an onclick event that opens a map to the address defined in the URL. Click on the link below to see it in action.
UTD physical locationBy utilizing the Google Maps API, I am able to offer a much richer experience to the user than if I were to draw a simple map or give directions. The Google Maps API provides a tangible interface that encourages user-control over how the physical location is put into context in a way that makes sense to the user. The user can zoom in or out, move around and see alternate views, including an overhead satellite view. Meanwhile, the web designer need only to format their links in a simple format that makes sense, a URL that looks like
Map://800 West Campbell Road, Richardson, TX 75080http://maps.google.com/maps?oi=map&q=800+West+Campbell+Road,+Richardson,+TX+75080Similarly, I can add the attribute rel="imagewindow" to a link to an image or photograph and load a widget that displays the image in the widgets dynamic content area. I can also annotate the image or photo by setting the value of the title attribute. Click on the thumbnail below for an example.
As I have done with Google Maps, I have taken what would normally direct the user to an external page and brought that content into the current page, reducing the overall amount of hopping from one page to another that a user might otherwise be forced to do.
