A brief worked example

This is a brief worked example of a website design. Surprisingly, there is no usability here but adherence to constraints.

Sticking to constraints is important - if you don't, the site won't do what it's supposed to. Quite simple really.

The site is Blue Zero 2 which I wrote to showcase some of my photographs. There is lots of software out there that does this already, but I wanted to write my own with my own design for my own needs. Plus it was a good chance to re-familiarise myself with the Yahoo User Interface (YUI) toolkit which is an excellent set of Javascript / ECMAScript libraries.

So display photographs in a web browser. Quite simple isn't it? But there are constraints. I wanted the site to be:

• Minimalist


• Clean


• Allows the visitor to focus purely on the pictures


• Can access thumbnails of other pictures


• Can have information about the pictures

The problem is that there are conflicts here: I want visitors to view thumbnails of other pictures, and to view each photograph's information. However, I also want the information to be absent so that the visitor can concentrate upon the photograph.

The solution is to have the information available, but to hide it. With YUI, this is a doddle: just define each information piece as an overlay and hide it - and then give the visitor some way of showing it that's unobstrusive.

The first design is this - it was written in PowerPoint which is a surprisingly powerful prototyping tool. I drew this prototype design up in a few minutes. What we have here is the photograph in the middle of the screen. To the bottom left is a list of "seasons" which contain a new load of pictures, and to the right are some words (from David Sylvian's "Orpheus" which is a wonderful song).

The next stage was to construct a working HTML and CSS model. This would allow me to work out the spacing and positioning of all elements. As you can see from the picture below, it is quite similar though the font was changed from a fantasy font to a fixed-width font.


This is quite close to the original design, but when I used it, I could see that it just didn't work. The song lyrics, wonderful though they were, intruded on the picture. The border was also wrong though it looked better than no border (easily done: just surround the image with a DIV element, and set the DIV's background to white and 5 pixels or whatever space of padding.

The next stage was to drop the writing and show the pictures but another problem loomed up - I had photographs in portrait format - they would either be enormous, or would disappear off the screen!

I had to code some Javascript to ensure that the images would be resized appropriately though I found it best to simply resize the images in photoshop and use a fixed size. This is bad according to many purists, but web browsers are not the best at resizing images. Photoshop or the GIMP do a much better job.

Check out the website for real here.

I also put a column of thumbnails to the right of the picture, but also wasn't sure of how to show the photograph's information box. I tried a link saying "more info..." or "about this..." but both intruded more than I wanted (yes, I required a very minimalist design). Clicking on the photo itself to show the box was another option, but I decided to interrupt visitor's process of viewing the photographs as little as possible by having the information box appear only on a mouse-over event. This means that when ever the visitor places their mouse somewhere over the picture, the box appears.

Using YUI's transitions, the box doesn't just appear either - it fades gently in. The length of fade is 0.8seconds which is far too long for most websites (particularly e-commerce), but for an artistic site like this, it was perfectly acceptable.
tIf you go to the site, you will see that The column of thumbnails has a small arrow pointing left above it. Clicking on this arrow causes the thumbs to slide out of view. The arrow is then changed to one that faces right-wards, and clicking on it again restores the column back again. This is a very unobtrusive control, assuming that the user works out how to use it. The best point is that because the design is so minimal, there is a logo, a menu of seasons and an arrow - there is nothing else to click so clicking the arrow might be expected. Of couse usability testing would find this out, but for my own personal photographic site, I was just happy to finish.

So what did I learn from this?

Firstly that a working prototype can tell you more than a static one - even if it's just HTML and CSS.
YUI is a great tool to work with for more professional looking webapps.
Conflicting constraints can both be met.