Entries tagged “usability”

Every time I put in a DVD (House, Bones, almost anything) I’d get the parental control screen that I’d have to temporarily unlock. While entering 0000 wasn’t that difficult, it was annoying to have to do this before I could get through all the FBI warnings and to the DVD menu… and finally to my content.

I was browsing the TED site, since it’s all up in my blogospheres and ran across this:

[tags]skype, usability[/tags]

[tags]skype, usability[/tags]

[tags]usability, learnability, english[/tags]

[tags]usability, learnability, english[/tags]

[tags]youtube, video, flash, quicktime, windows media, real media, cnn[/tags]

[tags]design,usability[/tags]

[tags]design,usability[/tags]

So I have a small bone to pick with Jacob Nielsen and his opinion on within-page links or anchor links^.1 There clearly is a benefit to not just linking to a specific page, but linking to a specific part of a page.

With a little help from script.aculo.us we can spice up our anchor links by highlighting them as well as linking to them.

For this article we’ll limit our scope to internal anchors only.² We’ll write the code using the symfony framework and in straight up XHTML. This is really dirt simple and is more of a design pattern with an example than a tutorial.

Let’s do the XHTML first:

Yup, that’s it… I told you it was dirt simple. You just need to include the proper prototype and script.aculo.us libraries.

In symfony we avoid repeating ourselves with a helper function:

and call it by doing:

That’s it.

Note: Like many of my tutorials, you don’t need symfony, just PHP. However, I develop in symfony and take advantage of the MVC-support that it offers.

Years ago when I was working on a photo gallery for davedash.com I got the art of making tumbnails down fairly well. It was automated and didn’t allow for specifying how the thumbnail should be made. With dozens of photos (which was a lot back then), when would I find that kind of time.

Flashback to today, for my company… we want users with avatars… but nothing too large. Maybe a nice 80x80 picture. Well the coolest UI I’ve seen was Apple’s Address Book which let you use this slider mechanism to crop a fixed sized image from a larger image.

Here’s a demo.

Overview

The front-end GUI is based on code from digg which is based on the look and feel (as near as I can tell) from Apple.

The GUI provides a clever visual way of telling the server how to chop the image. The gist is this, sliding the image around and zooming in and out change a few form values that get passed to another script which uses this data to produce the image.

Frontend: What would you like to crop?

In this tutorial, we’re going to be cropping an 80x80 avatar from an uploaded image. The front-end requires the correct mix of Javascript, CSS, HTML and images. The Javascript sets up the initial placements of the image and the controls. The CSS presents some necessary styling. The images makeup some of the controls. The HTML glues everything together.

HTML

Let’s work on our HTML first. Since I used symfony, I created a crop action for a userpics module. So in our cropSuccess.php template:

<div id="ava">
	<?php echo form_tag("userpics/crop") ?>
		<div id="ava_img">
			<div id="ava_overlay"></div>
			<div id="ava_drager"></div>
			<img src="<?php echo $image ?>" id="avatar" />
		</div>
		<div id="ava_slider"><div id="ava_handle"></div></div>
		<input type="hidden" id="ava_width" name="width" value="80" />
		<input type="hidden" id="ava_x" name="x" value="100" />
		<input type="hidden" id="ava_y" name="y" value="100" />
		<input type="hidden" id="ava_image" name="file" value="<?php echo $image ?>" />
		</div>
		<input type="submit" name="submit" id="ava_submit" value="Crop" style="width: auto; font-size: 105%; font-weight: bold; margin: 1em 0;" />
	</form>
</div>

Right now a lot of this doesn’t quite make sense. If you attempt to render it, you will just see only the image. As we add the corresponding CSS and images it will make some more sense.

CSS and corresponding images

We’ll go through each style individually and explain what purpose it serves in terms of the GUI.

#ava is our container.

#ava {
	border: 1px solid gray;
	 width: 200px;
}

#ava_img is the area that contains our image. Our window for editing this image 200x200 pixels. If we drag out image out of bounds we just want the overflowing image to be clipped. We also want our position to be relative so any child elements can be positioned absolutely with respect to #ava_img.

#ava_img {
	width: 200px;
	height: 200px;
	overflow: hidden;
	position: relative;
}

#ava_overlay is a window we use to see what exactly will be our avatar. If it’s in the small 80x80 window in the center of the image, then it’s part of the avatar. If it’s in the fuzzy region, then it’s getting cropped out. This overlay of course needs to be positioned absolutely.

#ava_overlay {
	width: 200px;
	height: 200px;
	position: absolute;
	top: 0px;
	left: 0px;
	background: url('/images/overlay.png');
	z-index: 50;
}

#ava_drager is probably the least intuitive element (Heck, I’m not even sure if I’ve even got it right). In our demo you’re not actually dragging the image, because you can drag anywhere within the #ava_img container and move the image around. You’re using dragging an invisible handle. It’s a 400x400 pixel square that can be dragged all over the container and thusly move the image as needed.

#ava_drager {
	width: 400px;
	height: 400px;
	position: absolute;
	z-index: 100;
	color: #fff;
	cursor: move;
}

#avatar is our image, and since it will be moving all around the window, it requires absolute positioning.

#avatar {
	position: absolute;
}

#ava_slider and #ava_handle are our slider components. They should be self-explanatory.

#ava_slider {
	width: 200px;
	height: 27px;
	background: #eee;
	position: relative;
	border-top: 1px solid gray;	
	background: url('/images/slider_back.png');
}
#ava_handle {
	width: 19px;
	height: 20px;
	background: blue;
	position: absolute;
	background: url('/images/handle.png');
}

Internet Explorer

PNG do not work so well in Internet Explorer, but there is a small trick, adding these components into a style sheet that only IE can read will make things work:

#ava_overlay {
  background: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ui/cropper/overlay.png', sizingMethod='crop');
}

#ava_handle {
  background: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ui/cropper/handle.png', sizingMethod='crop');
}

The Javascript

The Javascript is actually not as complicated as you’d expect thanks to the wonder of prototype. This framework provides so much so easily. You’ll need to include prototype.js and dom-drag.js.

So let’s take a look.

<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
function setupAva() {
	if ($("avatar")) {
		var handle = $("ava_handle");
		var avatar = $("avatar");
		var drager = $("ava_drager");
		var slider = $("ava_slider");
		var ava_width = $("ava_width");
		var ava_x = $("ava_x");
		var ava_y = $("ava_y");
		// four numbers are minx, maxx, miny, maxy
		Drag.init(handle, null, 0, 134, 0, 0);
		Drag.init(drager, avatar, -100, 350, -100, 350);
		var start_w = avatar.width;
		var start_h = avatar.height;
		var ratio = (start_h / start_w);
		var new_h;
		var new_w;
		if (ratio > 1) {
			new_w = 80;
			new_h = (80*start_h)/start_w;
		} else {
			new_h = 80;
			new_w = (80*start_w)/start_h;
		}
		// these need to be set after we init
		avatar.style.top = '100px';
		avatar.style.left = '100px';
		avatar.style.width = new_w + 'px';
		avatar.style.height = new_h + 'px';
		avatar.style.margin = '-' + (new_h / 2) + 'px 0 0 -' + (new_w / 2) + 'px';
		handle.style.margin = '3px 0 0 20px';
		avatar.onDrag = function(x, y) {
			ava_x.value = x;
			ava_y.value = y;
		}
		handle.onDrag = function(x, y) {
			var n_width = (new_w + (x * 2));
			var n_height = (new_h + ((x * 2) * ratio));			
			avatar.style.width = n_width + 'px';
			avatar.style.height = n_height+ 'px';
			ava_width.value = n_width;	
			avatar.style.margin = '-' + (n_height / 2) + 'px 0 0 -' + (n_width / 2) + 'px';
		}
	}
}
Event.observe(window,'load',setupAva, false);
// ]]>
</script>

If this isn’t exactly crystal clear, I can explain. If you’re new to prototype, $() is the same as doucment.getElementByID() (at least for our purposes).

We need to initialize two draggable elements, one is our slider for zooming and the other is our avatar itself. We initialize the draggers using Drag.init(). We specify what to drag, if another element should be used as a handle and then the range of motion in xy coordinates. In the second call we use that #dragger to move around the image in this manner.

Drag.init(handle, null, 0, 134, 0, 0);
Drag.init(drager, avatar, -100, 350, -100, 350);

We want to initialize the the size and placement of the avatar. We do that using maths. First we want it in our 80x80 pixel box. So it should be roughly 80x80. I’ve set the math up so that the smallest side is 80 pixels (there’s reasons for doing this the other way around).

	if (ratio > 1) {
		new_w = 80;
		new_h = (80*start_h)/start_w;
	} else {
		new_h = 80;
		new_w = (80*start_w)/start_h;
	}

We then place the avatar element. We initialize it to be in the center of the screen (top: 100px;left:100px) and then nudge the image using margins.

	avatar.style.top = '100px';
	avatar.style.left = '100px';
	avatar.style.width = new_w + 'px';
	avatar.style.height = new_h + 'px';
	avatar.style.margin = '-' + (new_h / 2) + 'px 0 0 -' + (new_w / 2) + 'px';

We also use margins to place the handle.

	handle.style.margin = '3px 0 0 20px';

#ava_x and #ava_y tell us where the center of the avatar is. So when the avatar is moved we need to set these again:

	avatar.onDrag = function(x, y) {
		ava_x.value = x;
		ava_y.value = y;
	}

That was easy. Slighly more complicated is the zoomer function. We are basically adjusting the width and the height proportionately based on roughly where the slider is. Note that we’re still using that ratio variable that we calculated earlier. We basically take the new x-coordinate of the handle and allow our image to get just slightly larger than the #ava_image container.

	handle.onDrag = function(x, y) {
		var n_width = (new_w + (x * 2));
		var n_height = (new_h + ((x * 2) * ratio));			
		avatar.style.width = n_width + 'px';
		avatar.style.height = n_height+ 'px';
		ava_width.value = n_width;	
		avatar.style.margin = '-' + (n_height / 2) + 'px 0 0 -' + (n_width / 2) + 'px';
	}

We want to load initialize the slider right away when the page loads: Event.observe(window,'load',setupAva, false);

Not terribly hard or complicated. Once these elements are all in place you have a working functioning slider. It returns the x and y coordinates of the center of the image with respect to our 200x200 pixel #ava_image. It also tells us the new width of our image. We feed this information into a new script and out should pop a new image which matches exactly what we see in our GUI.

Processing the crop

Initially I was frustrated with the data that was being sent. I knew the center of the image in relation to this 200x200 pixel canvas and its width… but what could I do with that. Well I could just recreate what I saw in the GUI. I needed to create a 200x200 pixel image first, place my original avatar resized (and resampled) at the precise coordinates and then cut out the center most 80x80 pixels to become the final avatar image.

If you note in our template above for cropSuccess.php we submit our form back to the crop action. Let’s look at the action:

public function executeCrop()
{
	if ($this->getRequestParameter('file')&&$this->getRequestParameter('width')) {			// we are saving our cropped image
		// Load the original avatar into a GD image so we can manipulate it with GD
		$o_filename = $this->getRequestParameter('file');  // we'll use this to find the file on our system
		$o_filename = sfConfig::get('sf_root_dir').'/web' . $o_filename;
		$o_im = @imagecreatetruecolor(80, 80) or die("Cannot Initialize new GD image stream");
		$o_imagetype = exif_imagetype($o_filename); // is this gif/jpeg/png
	
		// appropriately create the GD image
		switch ($o_imagetype) {
			case 1: // gif
				$o_im = imagecreatefromgif($o_filename);
				break;
			case 2: // jpeg
				$o_im = imagecreatefromjpeg($o_filename);	
				break;
			case 3: // png
				$o_im = imagecreatefrompng($o_filename);
				break;
		}
		
		// Let's create our canvas
		$im = @imagecreatetruecolor(200, 200) or die("Cannot Initialize new GD image stream");
		imagecolortransparent ( $im, 127 ); // set the transparency color to 127
		imagefilledrectangle( $im, 0, 0, 200, 200, 127 ); // fill the canvas with a transparent rectangle
	
		// let's get the new dimension for our image
	
		$new_width = $this->getRequestParameter('width');
		$o_width = imageSX($o_im);
		$o_height = imageSY($o_im);
		
		$new_height = $o_height/$o_width * $new_width;
	
		// we place the image at the xy coordinate and then shift it so that the image is now centered at the xy coordinate
		$x = $this->getRequestParameter('x') - $new_width/2;
		$y = $this->getRequestParameter('y') - $new_height/2;
		
		// copy the original image resized and resampled onto the canvas
		imagecopyresampled($im,$o_im,$x,$y,0,0,$new_width,$new_height,$o_width,$o_height); 
		imagedestroy($o_im);
		
		// $final will be our final image, we will chop $im and take out the 80x80 center
		$final = @imagecreatetruecolor(80, 80) or die("Cannot Initialize new GD image stream");
		imagecolortransparent ( $final, 127 ); // maintain transparency
	
		//copy the center of our original image and store it here
		imagecopyresampled ( $final, $im, 0, 0, 60, 60, 80, 80, 80, 80 );
		imagedestroy($im);
	
		//save our new user pic
		$p = new Userpic();
		$p->setUser($this->getUser()->getUser());
		$p->setGD2($final);
		$p->save();
		imagedestroy($final);
		$this->userpic = $p;
		return "Finished";
	}


	$this->getResponse()->addJavascript("dom-drag");
	$this->getResponse()->addJavascript('/sf/js/prototype/prototype');
	$this->getResponse()->addJavascript('/sf/js/prototype/effects');
	$this->image = '/images/userpics/originals/' . $this->getRequestParameter('file');
}

It’s doing exactly what the paragraph above explains when the image dimensions are given. The code is well commented so it should be easy enough to follow.

GD image functions in PHP are fairly robust and can help you do a lot of tricks with image data. Note the code to save the image, we’ll cover it in detail soon.

The Model

$p = new Userpic();
$p->setUser($this->getUser()->getUser());
$p->setGD2($final);
$p->save();

First some clarification the second line. myUser::getUser() gets the User object associated with the currently logged in user. The third line, however, is where the magic happens. Before we look at it, let’s have a quick look at our model:

userpic:
 _attributes: { phpName: Userpic }
 id:
 user_id:
 image: blob
 thumb: blob
 created_at:
 updated_at:

We have an image attribute and a thumb property to our Userpic object. This is where we store PNG versions of each icon and their 16x16 thumbnails respectively. We do this in Userpic::setGD2():

public function setGD2($gd2_image)
{
	//convert to PNG
	ob_start();
	imagepng($gd2_image);
	$png = ob_get_clean();
	//save 16x16
	$gd2_tn = @imagecreatetruecolor(16, 16) or die("Cannot Initialize new GD image stream");
	imagealphablending( $gd2_tn, true );
	imagecolortransparent ( $gd2_tn, 127 );
	
	imagecopyresampled ( $gd2_tn, $gd2_image, 0, 0, 0, 0, 16, 16, 80, 80 );
	ob_start();
	imagepng($gd2_tn);
	$tn = ob_get_clean();
	
	$this->setImage($png);
	$this->setThumb($tn);
}

We capture the output of the full size PNG, then we scale it again and capture the output of the thumbnail and set them.

Conclusion

When it comes to web apps, having a relatively simple GUI for people to resize images can go a long way in terms of adoption rate of avatars and custom user pictures by non technical users.

Enjoy, and if you found this useful (or better implemented it) let me know.

Not to pick on the Minneapolis Public Library again… but they are really good at featuring usability flaws. This one is also related to doors, and can very easily be related to web and software usability (if you can’t tell, web and software usability are the exact same things as the usability of everyday things).

Unfortunately I didn’t have my digital camera, but the Emergency Exit doors at the Minneapolis Public Library feature a translucent stenciling that says, “Emergency Exit” or “Emergency Exit Only.” Of course, it was very easy to gloss over this important note attached to the door, after all, the door looked fairly ordinary, and opening it would seemingly bridge access from one area of the building to another, therefore inviting one and all to open it. The cautionary notice about it being for Emergencies is easily dismissible.

As a matter of fact, you know the nice translucent sign was failing to notify people when a laser-printed notice was taped to each and every emergency exit as a label.

Obviously the designers were going for aesthetic. “Sure, we need an Emergency Exit, but it doesn’t have to stick out.” In the real world, it seems people preferred having no aesthetics (laser printed sheets of paper are temporary, right) and usability over aesthetics and fire-alarms.

The closest thing I can think of in the electronic world is the “close” feature of an application or a pop-up window. If it says close, you know what it means. If it’s an “X” you know what it means. If it’s in “red” and “red” isn’t part of the design, you know to maybe read what you’re doing first. But if we decide to have the close button look really pretty and part of that design means not labeling it or coloring it different from … oh let’s say the “maximize window” button. It’s easy to see how much user-frustration you can cause.

I really wish I was there to see just how many times that Emergency Door was pushed before some library staff decided to whip open Microsoft Word and type in the largest font possible “Emergency Exit Only” and Scotch tape it on that door.

Every now and again, there’s a tried and tested way of doing something and it gets enhanced somehow. Sometimes these enhancements are pure genius and sometimes they are half-baked. Today, we’ll look at the half-baked automated doors at the new Minneapols Public Library.

Automated doors are all fairly standard. There’s either a platform that opens when weight is applied (a la grocery stores), or there are large buttons with an engraved handycapped** symbol placed at wheelchair height. Usually automated doors only work well when they are moved by the motor, and give quite a bit of resistance to manual operation.

These aren’t the most perfect designs in the world, in fact, there’s plenty of room for change, for better or worse. MPL’s design involves making the entire door the button. You push the door slightly, and then it opens (and somehow knows which direction to open, as to not smack you in the face). Pure Genius… almost. While logically this makes sense, the flaw is in the execution. When I approached the door, I pushed it, like it beckoned, and then pushed it again… and again, and then eventually it started opening. Since it’s motorized, you can’t easily push it manually. This 5-second frustration was more than just me, it was everyone wanting to get in.

Fortunately it’s not a bad design, it’s just unresponsive. If I pushed it, and the actuator took over immediately in a single smooth motion, this would be perfect. Wheel chairs would gently run into the door and the door would open up. People would attempt to push open the doors and “voila!” it’d give you a helping hand.

This really isn’t so much a rant about automated doors, so much as its a look at what I’d call as “untuitiveness.” You have something which people do intuitively (e.g. push a door open) and then you break it. In our example pushing a door to open it is now broken, because although pushing the door slightly triggers the actuator, this is a lot different than what people expect. Plus the added wait time results in more confusion.

This can apply to web sites. For example, let’s take scroll bars. A web site that doesn’t fit in a browser window will often have horizontal and/or vertical scroll bars so that you can view the entire page. We can easily change the interface for a scroll bar. Maybe it’s a thumbnail in the corner that shows a view finder (a la Photoshop ) and we use that to navigate and disable the scroll bars. It’s arguably a better interface, but it’s going to cause problems for the end user ultimately since they 1. aren’t used to it, and 2. there might be some lag-time (assuming it’s implemented with Flash or DHTML).

This isn’t to say we shouldn’t come up with creative new ways of doing things – we should – but, some care needs to be taken toward usability. After all, your site is just one site on the Internet, even if you have a high ranking web site, you’re risking huge user-frustration if you try to do things too different – to “untuitive.”

A recent peeve of mine is URLs that you can’t manually traverse. Let me explain. Let’s say you visit http://reviewsby.us/restaurant/cheesecake-factory. You should manually be able to remove cheesecake-factory and see an index page of restaurants at http://reviewsby.us/restaurant/. It makes logical sense for that page to be something that would enable you to find more restaurants.

This is a throwback to static web sites, that consisted of directories and files. If you accessed a file by its name, you would see the contents of the file (possibly filtered by the server). If you accessed a directory, you would see an index of files. In the world of web apps, however, URLs are made up.
Web apps where these gaps are missing can be especially frustrating when you use your browser’s history. Often I reference the symfony api. The URL is http://www.symfony-project.com/api/symfony.html. All the other URLs in the API listing begin with http://www.symfony-project.com/api/, so you could assume that http://www.symfony-project.com/api/ is an index page.

It’s not the index page (http://symfony-project.com/api/symfony.html is). If you googled for sfConfig and got to http://symfony-project.com/api/symfony/config/sfConfig.html and didn’t feel like figuring out the navigation structure… or let’s say at a later date you’re using your browser’s URL auto-complete feature, you will get a 404 Error1.

Web applications can try to mirror directory indexes with pretty URLs, but often have a few gaps as every URL (or level of URL) needs to be designated in the app. Its a good idea to fill those in as it is another way to navigate a web site.

The nice thing about some restaurants is they pay extra special attention to presentation. That way if the food isn’t to your taste, maybe it is at least pleasing to your eyes. We know that just a list of each dish and comments about said dish served at a restaurant isn’t going to fly. But if we spruced it up with member-submitted pictures… well… now our eyes have something to see other than text and rating stars.

Now, who wants a sundae in a boat!

Restaurant Reviews By Us.

URLs should be treated as prime real estate. Their primary purpose is to locate resources on the Internet. So for a web developer, it makes sense to make things as user-friendly as possible. One effort is to remove the extensions from files. I don’t mean things like .html or .pdf, as those give you an idea that you’re reading a page of content or a PDF document. I meant things like .php or .asp or .pl, etc. These are unnecessary items that just clutter the location bar on most browsers.

There are two ways to do this. The easy way which just looks at a request, if the requested filename doesn’t exist, then it looks for the filename with a .php (or .asp or whatever) extension. In an .htaccess file:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ $1.php [L,QSA]

Now if you go to: http://domain/about the server will interpret it as if you went to http://domain/about.php.

Makes sense, but if we’re already breaking the relation between URL and filename, we may as well break it intelligently. Change that .htaccess file:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]

Now if you go to: http://domain/about the server will interpret it as if you went to http://domain/index.php?q=about. How is this useful? Well now index.php is always called, so it can do anything common to all pages (which might be nothing) and do something based on the $_GET['q'] variable.

For example:

require_once('html_functions.php');
switch ($_GET['q']) {
	case 'about':
		echo myhead('about page');
		break;
	default:
		echo myhead('home page')
		break;
}
include($_GET['q'] . '.php');
echo myfoot();

We’re loading a hypothetical library html_functions.php which contains some simple functions (myhead() and myfoot()) that print out a simple header or footer for this site. The switch statement dynamically sets the <head/>. After the switch we include a file based on the query string. In our case it will still pull up about.php. Granted, this is not what I use personally, but it’s the general idea behind how symfony works.

Why?

So why go through all this nonsense? Extensions for the most part don’t mean much to an end user. Sure, jpg, png or gif mean images and html mean web page and pdf means the file is a PDF document. Dynamic pages, however usually come from cgi, php, pl , asp pages or some other 3 or 4 letter extension that the server uses as a hint to determine how to parse, but the output is usually html. Servers are smart though. They don’t need hints, and the above code eliminates the need to reveal so explicitly just how a page is delivered. Take our restaurant review site, for the most part you can’t tell that it’s done in php. In fact all the URLs are “clean” and somewhat logical. The benefit of having clean simple URLs is if we decide to change from PHP to ASP for example, we won’t need to change our URLs.

What is the point of a version number? For the most part, it’s just a milestone. The difference between version 2.3 and 2.4 of a software is a given feature-set. Between 2.3 and 2.5 is an even larger feature-set that encompasses our previous feature-set.

So if I tell you, I have version 0.9.6.2 of svnX what does that tell you? For most, absolutely nothing. If I told you I was on I-35W at marker 7a you wouldn’t have a clue either… unless you looked at the map.

Version numbers tend to force us to look at “maps.” If my svn client acts up, I have to go to the website and see how old it is. Generally this isn’t a big deal. But some sites don’t publish when they made updates. Take Acquisition. It’s great software, but if I told you I was still using 128.3, you would have no clue how out of date I was.

On the otherhand if version numbers incorporated a date, we’d be set. If I told you I was using 1.0.20050405 of a piece of software and I was experiencing problems, you’d wonder why I hadn’t upgraded to something newer. If something newer didn’t exist, you’d question if development has stopped.

We can address versioning concerns by using this hybrid versioning. The developer’s own style of versioning (e.g. 1.0, 2.0, etc) can be combined with dates: 1.1.20060505. Now we know this is a 1.1 style release. Generally that means, the developer feels the software is complete enough to consider it at least 1.0, but with some improvements beyond that release. It tells the rest of the world, at a glance, that it was released in May of 2006.

A lot of bugs have popped up recently.

Logins

The logins weren’t redirecting people to the correct place. Unfortunately the login system still needs a lot of work. I am probably going to rewrite it completely. It doesn’t consistantly remember where you are coming from or where you intend to go after logging in. I’ll be jotting down a clean system to log people in propperly.

Tags

Tags work a bit better. They follow the flickr style of tagging, which is each word is a tag, unless surrounded in double quotes. Previously they weren’t producing a lot of empty tags.

Latitude and Longitude even more precise.

A small error in the database definitions resulted in lat/longitudes of restaurants that were greater than 100 (or rather abs(x) > 100 where x is latitude or longitude were being truncated to 100 or -100. This was easily fixed so things should look just right on the maps.

I’ve also jumped on the Google Analytics bandwagon and added a lot of the sites in “family.” If you’re familiar with Urchin, it has a similar feel to it. It almost feels a bit lighter feature-wise. There’s a few issues I will take with it:

• When they list links to your site (e.g. /login) they don’t hyperlink it.
• I’d like to drill down to raw data. I like to make my own correlations. Heck, I want to drill down to see if I should filter someone from the list.

Other than that, I like the potential that this will offer me. This combined with Google Sitemaps will provide powerful analysis of the site. As it stands, Katie and I should be eating at the Cheesecake Factory and non-chain restaurants as we seem to do well in the ranks and I need to write more about maps.

The “lazy” approach to usability is to just use a web site or application yourself and use usability heuristics. This is what I do, and it’s why I have a huge to-do list of things to fix on the site. Lately to build out the site content, I’ve been going to a lot of restaurants not listed on the site. This means I have a multi-step process after I eat:

1. Add a new restaurant.
2. Add a location.
3. Add a review of the restaurant.
4. Rate the restaurant
5. Add all the menu items I ate.
6. Tag the menu items.
7. Write a review of the menu items.
8. Rate the menu item.

For everyday users, I don’t expect 1 or 2 and only a few of 3-8, but 1 is a requisite and 2 is nice for maps and just being able to get information quickly. I did want to streamline this process, so I made a combined form that does 1,2 and 3 all in one place. That’s just six steps:

1. Add a new restaurant.
2. Rate the restaurant
3. Add all the menu items I ate.
4. Tag the menu items.
5. Write a review of the menu items.
6. Rate the menu item.

For most users it makes sense, since most restaurants just have one location - or if they are adding a restaurant they are only thinking of a specific location.

I also took the opportunity to do a check on restaurant names. If you attempt to enter Green Mill twice, you’ll be prompted that a restaurant with that name already exists. It’s not a very smart check, but it should serve it’s purpose.

I decided to overhaul the comment system on the reviewsby.us site. I implemented an AJAX form and allow anonymous comments. Anonymous comments is a slippery slope, but reading about friction and identity some things need to be taken into account.

The site is new. It’s going to take a while before it generates a lot of traffic and therefore members and therefore comments. But it would be nice to keep collecting information and make that collection as painless as possible. Of course the potential for spam is high, but when/if that happens there are safeguards that can be put in place. I imagine, until a decent membership base is established, the rules for who can and cannot post will probably change every now and again.