larlet-fr-david-cache/cache/4f0455fc513d3cbd0892241e60972771/index.md

title: Zoomable UI for the Web
url: http://www.jonikorpi.com/zoomable-ui-for-the-web/
hash_url: 4f0455fc513d3cbd0892241e60972771

<p>I’m afraid to click things on websites. Often the result is either:</p>

<ol>
<li>A jarring full-page reload. Even though browsers try to avoid the “flash to white” effect now, an entire page’s worth of elements blinking out of existence and another bunch blinking back in is difficult to follow. It feels like teleporting from one room into another. It makes me lose my train of thought. And even though the transition isn't actually that slow, it <em>feels</em> slow.</li>
<li>An arbitrary animation. One that either brings in new content from a random direction, transforms the entire page into another, or causes an element to morph into something else. Many well designed sites found in galleries like <a href="http://www.siteinspire.com/">siteInspire</a> do these things, which even lead me into writing <a href="https://twitter.com/jonikorpi/status/616553119586066432">this dumb tweet</a> a while ago.</li>
</ol>

<p>I’ve been searching for ways to improve on this issue for a long while now. After making some detours with concepts like <em><a href="http://scottmccloud.com/4-inventions/canvas/">the Infinite Canvas</a></em> and <em><a href="/bi-directional-layout/">bi-directional scrolling</a></em>, I landed on <em>zoomable user interfaces</em>. </p>

<p>Jef Raskin’s <a href="https://en.wikipedia.org/wiki/Archy#Zoomworld">ZoomWorld</a>, described in his book <a href="http://www.amazon.com/The-Humane-Interface-Directions-Interactive/dp/0201379376">The Humane Interface</a>, 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!</p>

<hr/>

<p>This site is the first working zoomable UI design I’ve produced. Here’s a list of things I think are cool about it:</p>

<p><strong>Navigating through posts and categories feels like I’m still in the same “system”.</strong> 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.</p>

<p><strong>There is no home page or navigation menu.</strong> 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.</p>

<p><strong>Every article feels like it has a spatial location on the site.</strong> 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 <em>Golden Grid System</em>”. 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.</p>

<p><strong>Permalinks, browser history, animation-free browsing, and JS-free browsing are supported.</strong> 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.</p>

<p><strong>You can hit ESC to zoom out.</strong> It just feels right. I’m working on doing something similar for touch screens with a pinch gesture.</p>

<p><strong>You either zoom or scroll. Never both at the same time.</strong> 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.</p>

<p><strong>The fluid “covers” for each article are pure HTML/CSS.</strong> 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.</p>

<hr/>

<p>I'm not the only one currently thinking about UIs like this. <a href="http://work.co/grid/">Some sites</a> have begun using zooming as part of their designs, and there’s a lot of talk about making UIs more “spatial”: (<em><a href="https://medium.com/elepath-exports/spatial-interfaces-886bccc5d1e9">Spatial Interfaces</a></em> is required reading on the subject). I think this is a good trend.</p>

<p>Either way, making this site has been a blast. Let me know what you think about it <a href="http://twitter.com/jonikorpi">on Twitter</a>.</p>

<p>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>



<p>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>P.P.S. The code is available on <a href="https://github.com/jonikorpi/jonikorpi-v9">GitHub</a>, but it's messy.</p>