Zen Photo is a web application that allows you to create online photo albums. It supports automatic thumbnails and individual image comments. It has grown out of a desire to create simplicity among a myriad of complex alternatives.
I’ve been looking for just such an application for quite a while. Until just recently the landscape for web photo albums was bleak. Hence, I couldn’t refuse an invitation to design the default Zen Photo template, and the administration section.
Built from the bottom up with simplicity in mind, Zen Photo tries to adhere to the very photo album guidelines I proposed a while back. It wouldn’t be fair if I didn’t at least try to adhere to these myself:
- Simplicity in Structure
- Simplicity in Interface
- Simplicity in Concept
While these were meant for the architecture of the application, they apply just the same to the design. They have resulted in a number of design and usability decisions on my part.
I have spent only two colours. A hue of blue, and a hue of brown. Adjusting the brightness of these produces several shades used for different areas of the design, yet keeping the overall impression simple (but not simplistic).
According to Fitts’ law, “The time needed to acquire a target is a function of the distance to the target, and the size of the target.” For important navigation areas, such as the “Next” and “Previous” image buttons, I’ve increased the size of the hit area, so as to make the buttons more obvious and easy to hit, for faster navigation.
Additionally, since I deem these buttons the most important part of a web photo album, I’ve gone to great lengths to make sure the buttons stay in place all the time. This means that the next/previous button area will always stay in the same top-right location. Additionally, the next button will always align to the right side of this box, and the prev. button will always align to the left. As a result, you won’t have to move your mouse at all, when quickly flicking through an album.
The use of concepts
Paginated navigation has been used by search engines for years (visit Google for an example). There’s no reason to re-invent the way this is done. So I’ve done what Google does, but with big buttons; the active page is bold, and the remaining pages are underlined hyperlinks.
Unstyled GUI widgets
Jakob says it, and I agree. Whenever not absolutely necessary, and especially for web applications, one should always use unstyled interface elements. This means plain push buttons, plain input boxes, plain check boxes, etc. The result is an instantly usable page that anyone familiar with an operating system knows how to use. As an added benefit, widgets will be styled in the same way as the operating system itself, for instance Mac OSX styles it with Aqua and Windows XP with Luna.
Text is scalable
If the text is too small to read, scale it up using plain browser controls. Text sizes are in percentages, and do as they’re told. This is also recommended by our friend Jakob Nielsen.
The administration area is the heart of operations. It’s the face of the application part of the web photo album. This carries with it a few demands;
- It has too look like an administration area
- It has to feel empowering
- It has to look as though it won’t break
- It should brand the application
Making users feel at home
I chose to once again go with unstyled interface elements. This is an integral part of any web application because at least it will have those elements in common with real applications.
Keeping the layout liquid and the margins and paddings relaxed opened up things and gave the whole area a look of simplicity when it is in fact, complex. This helps new users learn, and experienced users feel in control.
Branding a box
Basically, there are many boxes or frames used in administration layouts, so what better place to brand Zen Photo than by styling these boxes? There’s a logo of course (the work of the author – Tristan – by the way), but making sure a simple design is still unique is not an easy task. There are only so many options, and most of them have been tried already.
The result was a colored box, armed with 4 borders, one of them thicker than the others:
Using tabs for navigation has, for better or for worse, become de facto for web applications. They have the unique power to simplify the structure of huge amounts of information, yet allowing for sub-menus. This one is designed with large comfortable buttons:
Tristan has put up a demo which you can explore. Visit it to see the theme, and stop by the admin section (login/password is admin/1234). Just don’t mess up Tristan’s nice gallery too much with your newfound powers.
I’m making a living designing websites, usability and even web-applications. Most of the time, clients are open to suggestions for improvement. Other times, clients have unique needs and wishes for their designs — needs that I have to fit in as best possible even though I know it probably won’t improve the product.
Working on Zen Photo has been a welcome change. Tristan gave me completely free hands, both design-wise and usability wise. It helped out a lot that the structure was already sound, and his feedback was essentially something I agreed with upon first hearing – or simply something I had forgotten in the first place.
I’m rather proud of the end result. I trust that users who want a no-clutter web photo album will thoroughly enjoy Zen Photo. For people who want to use their own designs, I think they’ll be able to quickly modify this new default template to fit their needs.
What matters is they both have a good and stable launch pad.