Back home

Modeless Zoomable UI

A progress update on my work with zoomable UIs on the web

After releasing my first iteration of a zoomable UI for the web, I’ve been working on these three key issues:

  1. Making the UI less modal.
  2. Showing more of the document’s actual content before it’s zoomed in.
  3. Focusing the UI on navigating vertical documents.

Here’s a CodePen prototype of what I have right now (unlikely to work in Mobile Safari).

In the first iteration you:

  1. Looked for an interesting article or category.
  2. Clicked it to zoom in.
  3. (Clicked an article, if you only zoomed into a category.)
  4. Scrolled vertically to navigate the article.
  5. Clicked a button or hit ESC to zoom out.

In this new iteration you:

  1. Scroll horizontally through categories and center on an interesting article.
  2. Scroll vertically to zoom in and keep scrolling to navigate the article.
  3. Scroll back up (“scroll to top” shortcuts should work) to zoom out.

I find this new model much more pleasant to use. I think it’s because clicking feels like an inherently modal action, taking you out of the context you were just in. Much like walking to another room and closing the door. Clicking on something feels like a commitment. Compare it to scrolling. It’s so effortless that throwing a page up and down and catching it mid-movement actually feels fun.

Of course, there are still many issues with this new iteration.

  1. I’m relying heavily on CSS Scroll Snapping, which doesn’t even exist in Chrome yet. I “polyfilled” it with a manual snap that happens 100ms after the last scroll event fires, but it feels like crap compared to the native snapping in Safari and Firefox.

  2. Horizontal scrolling is really annoying with bad trackpads and almost all mice.

  3. I’m 3D-transforming a super-massive wrapper to move massive articles around, so performance can be poor. This would be an issue even if I moved each article individually, since performance is a core problem with ZUIs on the web. Browser engines were not designed for displaying lots of zoomed-out versions of large elements.

There are a few possible workarounds to issue #3, each with their own problems:

  • Making the elements tiny and zooming them in instead of the opposite: ruined by browser min-font-size settings.
  • Just resizing elements instead of transforming them (which I did in the first iteration): min-font-size settings again, image resizing causes lag, text reflows cause massive lag.
  • Creating thumbnails and replacing them with real content just in time: animation timing issues, thumbnail creation is a deep pit.
  • Rendering everything in WebGL: promising, but not ready for general use.
  • And so on.

If you have a really good idea how to solve this, let me know on Twitter.

P.S. For more on designing less modal UIs, check out Jef Raskin’s The Humane Interface. Wikipedia has a good summary of some of its most important lessons.

Published on