Posted by: Brian de Alwis | June 22, 2012

Scrunchable UIs: Progressive disclosure through foldable and unfoldable displays

I was chatting with a friend a while back about table computing, and came up with an interesting idea: progressively disclosing UIs for foldable and unfoldable displays.

We’re currently witnessing a Cambrian explosion in the world of computing gadgets. Gadgets now come in all number of sizes, from wrist-watch sized IPod nanos to wall-sized displays. These different sizes demonstrate a tradeoff between size and suitability for different tasks. Although I happily use my phone/PDA to remind me of appointments and keep my grocery list, I usually surf using a tablet or my laptop — despite its amazing desktop-like web rendering, not having to squint provides a more pleasurable experience. On the flip side, I don’t take the tablet to the supermarket as its size is a hindrance.

So I now have several gadgets of different sizes, and it can be vexing. Keeping them in sync is a pain, especially when your wife wants to know why your recent music purchase hasn’t been synced to her phone to listen on her commute. Oh sure I could keep everything in The Cloud, but I pay enough to my mobile operator as it is, and repeated security breaches at best-of-breed providers are hardly reassuring. And The Cloud only pushes the syncing problem from a per-device problem to a per-application problem — waddya mean your app can’t pull down from my webdav/dropbox/flavour-of-the-moment service?

But with the advent of rollable, scrunchable, foldable display technologies perhaps we can move to a new paradigm. Rather than have multiple devices of different sizes, I propose that we instead have a single device that can adapt to different sizes. For sake of a name, let’s call this a scrunchable UI: a UI that progressively adapts to changes in the visible display area. For example:

  • Fold down a table-sized display into a wallet-sized display to use as you might use a PDA.
  • Unfold a PDA-sized display to a 30 cm diagonal rectangle for a nice tablet-sized display.
  • Fold a display to a broadsheet size for a newspaper-like experience.
  • Boarding a crowded bus? Fold your display for a more compact viewing size, and unfold it again if you get a seat.

UI design for such a world would be quite different — responsive design taken to another level. Rather than design our UIs for particular modalities (available inputs), we’d need to come up with ways to adapt to the modalities that make sense at the moment. For a sense of the problem, try interacting with a large desktop display via VNC on a tablet or PDA — while walking! Fold the display to a small size and the display could be put into a single-application screen mode and the current app would change to being in “mobile” mode with fewer but larger buttons. Unfold the display and the app should progressively show more detail. When a lappable size, perhaps the UI switches to a virtual desktop, showing multiple windows. A fully unfolded display could produce a typical PC desktop-like experience. Where these transitions should occur, and how the software should adapt is sure to provide much merriment for years.



  1. I only started reading up on responsive design a couple of weeks ago. I saw two libraries: bootstrap and jquery mobile. What both these libraries have in common is, if you resize your window, they layout could transform in a number of ways, the most noticeable being that a table layout would become a single column layout. In particular with bootstrap, it detects your “device” based on the size of your viewport. So if you scrunch and unscrunch, the css would dynamically adapt to you, and you really only just created a single html file for the content. Does this not meet your criteria?

    • Reflowing information works well for straightforward media consumption apps. But I believe the problem is deeper than “just” reflowing media content to adapt to browser size (which has thorny issues, to be sure).

      What if the environment changed such that there is no longer a keyboard & mouse, and the display has shrunk to a 5cm x 5cm square? Or if the display is now curved? UI design restrictions suited for interacting with a small 3.5″ PDA become chafing when docked to a large display, keyboard, and mouse (try using an iPhone app under the iPhone simulator; pinch ‘n’ zoom is not too fun).

      Our answer so far has been to switch to a device that better support your needs. For example, I usually check the Eclipse forums from my iPad, but some questions require some cutting pasting of code snippets found in the source, something that’s much more efficient to do from my laptop.

      I loved Corning’s “A Day of Glass” concept videos — how do we make such systems real? How do we build systems that *gracefully* adapt to changes in the user’s environment?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s