A textarea for every day.
I’m an independent Finnish web designer and game developer.
A progress update on my work with zoomable UIs on the web.
An alternative to in-site hyperlink navigation.
I’m afraid to click things on websites. Often the result is either:
I’ve been searching for ways to improve on this issue for a long while now. After making some detours with concepts like the Infinite Canvas and bi-directional scrolling, I landed on zoomable user interfaces.
Jef Raskin’s ZoomWorld, described in his book The Humane Interface, is just about the only serious ZUI design outside map browsers that I’ve stumbled into. For some reason ZUIs never really made it out of the early 2000s. Maybe it was the technical issues related to building them (I’ve certainly run into a pile of them so far), the lack of input devices designed for them, or just pure chance. Either way, I’m giving them a go!
This site is the first working zoomable UI design I’ve produced. Here’s a list of things I think are cool about it:
Navigating through posts and categories feels like I’m still in the same “system”. The site feels less like a collection of separate documents, and more like an app where each URL points to a different state of it. Traveling between states feels like a fast continuum of actions, unlike browsing separate documents. It helps me keep my train of thought.
There is no home page or navigation menu. These two elements are usually among the hardest to design, so I'm glad to be rid of them. In this design, they're both replaced by the same thing: a zoomable view of the site's contents. The content itself is the navigation.
Every article feels like it has a spatial location on the site. The zooming animation helps me understand where elements come from and where they’re going. I’m trying to aim for a system that makes me think “the article with yellow bars somewhere in the bottom left” instead of “the article named Golden Grid System”. This effect was stronger in some of my previous prototypes, which used a “dive in closer to the canvas” type of system instead of the current “bring that object closer to me”, but this one is more suited to the web’s technical constraints and seems less likely to cause issues with motion sickness.
Permalinks, browser history, animation-free browsing, and JS-free browsing are supported. The different between a zoomed-in post and a non-zoomed-in one is a couple of classes and some AJAX-loaded markup. It's easy to render on the server-side when visiting a permalink. This also means the site is browsable with traditional full-page reloads, for people with motion sickness and for times when JS isn’t available.
You can hit ESC to zoom out. It just feels right. I’m working on doing something similar for touch screens with a pinch gesture.
You either zoom or scroll. Never both at the same time. The home view, the “map”, the “bird’s eye view” or whatever you want to call it always adjusts to the viewport’s shape and size. It never overflow-scrolls. The idea is that zooming is the way to handle its overflow. As more articles get added, they get grouped into more zoomable categories.
The fluid “covers” for each article are pure HTML/CSS. Since I’m actually resizing articles instead of using scale transforms — proved troublesome in a previous prototype, which I'll write about in another post — I can't show their actual textual content before they're zoomed in. I added the "covers" to still have something recognizable there when navigating the site. I started off with bitmap images, but found that they too are a no go: too laggy to resize. Eventually I tried a pure HTML/CSS illustration for one cover, and found that they're really cheap to resize. The constraint of illustrating with nothing but box elements turned out to be fun, and here we are.
I'm not the only one currently thinking about UIs like this. Some sites have begun using zooming as part of their designs, and there’s a lot of talk about making UIs more “spatial”: (Spatial Interfaces is required reading on the subject). I think this is a good trend.
Either way, making this site has been a blast. Let me know what you think about it on Twitter.
Before I go, I’d like to thank the following awesome people for their feedback on and help with various prototypes of this design.
P.S. The resizing technique, rem-units, and some of the history-related JS I’m using cause issues in some older browsers. I'm also a little worried about SEO and accessibility, since the nested DOM structure is weird. I’m working on it!
P.P.S. The code is available on GitHub, but it's messy.
Update: I posted a progress update on my work since this post.
A two-way scrolling layout used on a previous version of this site. (2013)
A recipe for building an infinitely adapting fixed-width grid (2011).
A folding grid system for responsive design (2011).
An early adaptive CSS grid system (2010–2011).
Basically like a long blog post about the state of responsive design in 2011–2012.
Using media queries to make a clean break from legacy browsers. (2011)
An unexpected opportunity to control how the page loads, using Typekit. (2011)
This is an article I wrote in 2011, for .net Magazine #211. I’m rehosting it here, since they’ve since made their old issues inaccessible on the web.