Dave Dash

Removing parental restrictions from the PlayStation 2

2009-06-27T00:00:00-07:00

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.

Unfortunately it's hard to figure this out and the instructions are buried in the manual. It's like this:

Play a DVD
Stop the DVD
Enter select to get to the custom menu.
Enter X on the briefcase icon.
Select the "lock" by moving right.
Go down to the parental settings and set the level to 'OFF'

It's more complicated than any game cheat I've had to do.

Smarter excerpts: the art of the semi-automatic CMS

2008-02-28T00:00:00-08:00

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

If you look at the excerpts, they are piss poor descriptions:

Frans Lanting is one of the greatest nature p...

Nature p-what? Nature painter? Nature preserver? If you click around enough... the answer is nature photographer. Many of the excerpts failed at giving me any indication of who these people are or even enticing me to find out. I am a web 2.0 person, if I have to click on a link and load a new page, then it better be good. When I'm doing an information binge, I am not going to have that level of patience.

One day at del.icio.us I decided to test the limits of every profile field... and I learned that every now and then you do need to truncate user generated content.

This page however, is trusted users who have edited structured content (to borrow a term from the Django Book). That means, that someone had to enter in a description for this person. Someone who is trusted at TED. Chances are the page was rendered to trim the excerpt at 46 characters.

There's two easy solutions to this:

DHTML

This remaining excerpt could have been hidden away, and a button that said "show all" or "expand" (or whatever is the usable phrase/icon) could show the full except. This prevents me from having to jump around.
Use Semi-Automatic excerpts

We are talking about "trusted users" meaning, we can trust them to do things that humans do better than machines (there's my del.icio.us humans-do-some-things-better mentality). When they enter the description for a person, their administration interface should be able to suggest an excerpt and they, the "trusted user" should be able to make adjustments or tweaks.

The former solution is far easier, but if you're scanning a site, especially one as extensive as TED's speakers listing, the last thing you want to do is click "expand" buttons everywhere to read everything. The latter solution is smarter. Of course, the problem could also be solved by upping the 46 character limit, but not everything should be fully automated.

Thoughts on Skype

2007-09-23T00:00:00-07:00

[tags]skype, usability[/tags]

So I've been thinking more and more about Skype lately. Especially now that I have a cordless Skype phone from Philips.

Some easy UI Changes

The best UI change to Skype would be listing the time for everyone in your list and maybe an icon to indicate day or night. I, like many of you, have people from US/Central, Holland, Japan, New Zealand and California. It's really confusing... New Zealand is near the International Date Line! I have to do a lot of mental math before I know it's okay or not to call them.

SkypeOut/Domestic calls

A few years ago, I would have thought that using Skype was a great idea. Less than 3 cents a minute for calls? Awesome. Now I just use my cellphone for all my calls. It's cheap. A good portion of my friends also use T-mobile so those calls are free. My wife and I share a family plan with a friend so those calls are free. I've used 281/1000 shared minutes. I think I'll stick with my cell phone for now.

Even when Skype in the US was free, it wasn't worth using the service, so the current $3/month unlimited plans aren't really worth it.

International calls

International calls are cool, but honestly I don't talk to people that much domestically. It is nice to know that I can pick up the phone and for pennies call my relatives in India or my friends in East Asia and Europe. It's not the cheapest, but the convenience of Skype does win.

SkypeIn

SkypeIn also sounds really appealing... maybe because I have a new handset that I'd like to ring. Also the thought of having a number that I can dispose of, use as a business line, forward elsewhere have a new area code, etc.

It'd be nice if I could get an Indian Skype number for my family.

Man... Skype would have been so awesome 5-10 years ago.

Thoughts on Skype

2007-09-23T00:00:00-07:00

[tags]skype, usability[/tags]

So I've been thinking more and more about Skype lately. Especially now that I have a cordless Skype phone from Philips.

Some easy UI Changes

SkypeOut/Domestic calls

Even when Skype in the US was free, it wasn't worth using the service, so the current $3/month unlimited plans aren't really worth it.

International calls

SkypeIn

It'd be nice if I could get an Indian Skype number for my family.

Man... Skype would have been so awesome 5-10 years ago.

Usability for a limited audience and learnability

2007-07-19T00:00:00-07:00

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

Usability for a limited audience... (for example a web app for one person, or a small team) is far far different than web usability for a public web site.

In many ways it's easier. You can think about it in terms of what would Joe, Bob, Sue or whoever is using the site would think. Usually design constraints are normalized, like screen resolution.

It gets tricky though when your audience wants an interface that others might not consider usable. For example, having an optimal resolution of 1920x1200 or having less readable labels for controls, because they are learnable (we'll touch on learn-ability soon).

Sometimes you got to bite the bullet and actually suppress what you know about designing an easy to use interface and understand the needs of just your audience.

Usability for a limited audience and learnability

2007-07-19T00:00:00-07:00

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

Usability for a limited audience... (for example a web app for one person, or a small team) is far far different than web usability for a public web site.

In many ways it's easier. You can think about it in terms of what would Joe, Bob, Sue or whoever is using the site would think. Usually design constraints are normalized, like screen resolution.

Sometimes you got to bite the bullet and actually suppress what you know about designing an easy to use interface and understand the needs of just your audience.

Flash video killed the RealMedia star...

2007-07-17T00:00:00-07:00

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

and Quicktime and Windows Media Player... almost.

Embedded flash video is great and plays almost universally on peoples web browsers since the plugin is so widely installed.

Some web sites still insist on supporting plugins for players that just don't work too hot on the web. CNN still insists on RealMedia or WindowsMedia Player. It's time to grow up. RealMedia is dead from an unexperienced enduser's perspective. WindowsMedia Player doesn't work so great for the Mac. Flash for the win.

So wake up CNN to the YouTube'd generation.

Blindly Trusting Locks

2007-03-20T00:00:00-07:00

[tags]design,usability[/tags]

How many times have you been minding your business, assuming you have total and complete privacy and BAM the privacy is broken for a split second as someone bursts into your private haven that you've made of the public rest room.

Those locks never seem to work. I don't like blindly trusting a lock. If I push a button, how do I know it works? I don't. What I do like is big heavy dead bolts that I know work. I turn the device and if I can't see it, I can at least feel that it's preventing the door to open.

Even better are the bolts that actually mark a room as being occupied (like the lavatories on airplanes).

Then there are the latches and levers that make a vain attempt at locking, but really just don't do what they say they're going to do.

I thought about this, and it makes for a great design analogy...

We need to make features that people don't need to blindly trust.
We need to make features that are trustworthy.

When I hit save, or I hit modify in a web app, I want to know that the save occurred or the modification took place. I shouldn't have to glue my eyes to the screen and just look for that flash that occurs when a browser refreshes. With Ajax, things like notification are generally planned out in advance (indicators, etc). At the same time, they are absolutely necessary. Features need some sort of feedback to tell you, yes, I did exactly what you wanted.

We also need things that are trustworthy. If a feature is enabled or activated and there's a notice, let us know. But don't lie. Do whatever sanity checks that need to get done to make sure this really occurred. Don't be the bathroom stall lock that says it's locked but gets easily unlocked with a gentle nudge.

Blindly Trusting Locks

2007-03-20T00:00:00-07:00

[tags]design,usability[/tags]

Even better are the bolts that actually mark a room as being occupied (like the lavatories on airplanes).

Then there are the latches and levers that make a vain attempt at locking, but really just don't do what they say they're going to do.

I thought about this, and it makes for a great design analogy...

We need to make features that people don't need to blindly trust.
We need to make features that are trustworthy.

Making anchor links smarter... and sexier

2007-02-14T00:00:00-08:00

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.

Jacob Nielsen is an easy target. ↩
Anchors on other pages are equally useful. To implement that, you need to have an event listener to examine the URL for an anchor and appropriately highlight the correct element. ↩

Cropping Images using DHTML (Prototype) and symfony

2006-09-16T00:00:00-07:00

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.

Slick Designs and Bad Usability: Translucent Text

2006-08-01T00:00:00-07:00

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.

Untuitive Interfaces: A look at MPL's Automatic Doors

2006-07-31T00:00:00-07:00

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."

Usability for Nerds: Traversing URLs

2006-07-30T00:00:00-07:00

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.

Not to pick on the wonderful symfony development team, but I truly do see this a lot on their site. I'm sure they'll setup a redirect or something to fix this. Or probably call me out on the fact that many of my sites violate this principle. ↩

Do you like see-food? See? Food.

2006-07-29T00:00:00-07:00

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.

How to remove file extensions from URLs

2006-07-26T00:00:00-07:00

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.

Version numbers need dates

2006-06-28T00:00:00-07:00

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.

ReviewsBy.Us bugfixes

2006-05-30T00:00:00-07:00

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.

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.

Google Analytics

2006-05-26T00:00:00-07:00

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.

More usable approach to adding restaurants

2006-05-25T00:00:00-07:00

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:

Add a new restaurant.
Add a location.
Add a review of the restaurant.
Rate the restaurant
Add all the menu items I ate.
Tag the menu items.
Write a review of the menu items.
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:

Add a new restaurant.
Rate the restaurant
Add all the menu items I ate.
Tag the menu items.
Write a review of the menu items.
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.

Comment Anonymously at ReviewsBy.Us

2006-05-18T00:00:00-07:00

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.

Dave Dash

Removing parental restrictions from the PlayStation 2

Smarter excerpts: the art of the semi-automatic CMS

Thoughts on Skype

Some easy UI Changes

SkypeOut/Domestic calls

International calls

SkypeIn

Thoughts on Skype

Some easy UI Changes

SkypeOut/Domestic calls

International calls

SkypeIn

Usability for a limited audience and learnability

Usability for a limited audience and learnability

Flash video killed the RealMedia star...

Blindly Trusting Locks

Blindly Trusting Locks

Making anchor links smarter... and sexier

Cropping Images using DHTML (Prototype) and symfony

Overview

Frontend: What would you like to crop?

HTML

CSS and corresponding images

Internet Explorer

The Javascript

Processing the crop

The Model

Conclusion

Slick Designs and Bad Usability: Translucent Text

Untuitive Interfaces: A look at MPL's Automatic Doors

Usability for Nerds: Traversing URLs

Do you like see-food? See? Food.

How to remove file extensions from URLs

Why?

Version numbers need dates

ReviewsBy.Us bugfixes

Logins

Tags

Latitude and Longitude even more precise.

Google Analytics

More usable approach to adding restaurants

Comment Anonymously at ReviewsBy.Us