Sketching a Novel Ui Concept: QUAD

For my Design Tool Studio project I was initially interested in exploring digital organization. I wanted to think about and maybe re-imagine the traditional folder/file structure. What follows – a conceptual user interface (Ui) I’m calling QUAD – started as a tangential thought.

Thinking about organizational structure lead me to how we visualize organization and finally to how we interact with that visualization. In my thought process, I abstracted out from the system itself to how we visualize and interact with the system, just as a computer abstracts from machine language to an organizational system capable of interaction. (I’ll be returning to the root at some point to consider several other interesting ideas I hit on as I meandered down this path. Including, how different modes of thought reflect the need for different methods of organization, a multi-dimensional, coordinate-based file structure (shades of which can be seen in QUAD), and alternative flexible organizational patterns.)

On a Mac, Finder is the explicit default for exploring files and folders. But often times the “desktop” becomes the de facto place for organizing and interacting with files. I’m curious as to why we still use a desktop at all? It’s not particularly useful. It’s a lot of unused or misused space. An inelegant dump for the things we don’t want to deal with right now. It’s not like we spend a whole ton of time on the desktop, but still, I can’t help but feel that there’s a better solution to this wasted digital “space.” At least, it’s an opportunity.

Touch screen devices have moved away from the traditional organizational system in some ways (e.g. multiple “pages”) and not at all in other ways (e.g. icons). We can push the design and interaction way further in order to make the system more flexible and more customizable.


QUAD is based on a flexible grid system. There are two “views” which have different properties – Quad View and World View. Quad View viewport divides the screen into four flexible areas defined by one vertical line and one horizontal line. Their point of intersection is essentially a handle, which allows you to resize the quadrants. Once you zoom out of Quad View you’re in World View. In this view you can see many Quads, each of which could be holding a document or program. Quads can be linked (creating groups of similar or related documents) and rearranged at will with simple gestures.

I haven’t thought through all the use cases or, probably, even half of them. This is a thought exercise and my only hope is that there is one good (or interesting) idea for every few bad ideas.

Gestures & Interactions

These are rough ideas of how gestures might work in the conceptual QUAD interface. Consider these digital sketches of an idea – a visual exploration of the possibilities, rather than diagrams of the right answers.  


Resize on One Axis



Create / Remove Links

Reveal Links

Random Thoughts on Organization

The Simple Rules of Everyday Objects

When it comes to computer storage* the hierarchical folder system is the standard. It’s a fine option. Probably not the best option. But ostensibly the only option widely applied.

Folder > (sub)Folder > File

The folder system has simple rules that allow for the formation of complex structures. These four rules define how almost every who uses a computer keeps track of their files:

1. A Folder may contain a Folder

2. A Folder may contain a File

3. A File may not contain a Folder

4. A File may not contain another File

That’s pretty neat.

The challenge is to create a set of simple rules like these that allow for complexity to emerge as needed.

*There’s obviously a difference between storage structures and the visual representation of the storage structure (i.e. user interface vs. low level data storage structure). I have almost no clue as to how the files on my computer are actually, physically and systematically stored. As far as this class and this project goes, let’s assume I’m talking about the representation of a file storage system.


  • WinFS (Windows Future Storage): a “rich database” storage schema that is the one thing Bill Gates has said he wishes was fully developed.
  • Notes for a Liberated Computer Language: by Alex Galloway & Eugene Thacker (c. 2006). I’m honestly not entirely sure what this is. But I love it. It seems to be definitions of the parts of a fictional (theoretical?) programming language.
    • E.g. the “Zombie” data type is a process that is inactive but cannot be killed; the “Maybe” control structure allows for possible, but not guaranteed, execution of code blocks.

Design Tool Studio Project


I’m a digital packrat. I bookmark everything. I drag images willy-nilly onto my desktop. I’ve got folders nested so deep you need an oxygen tank to get files.

I keep things fairly organized but I’m always wondering if there’s a better system. So for Design Tool Studio, I’d like to explore the theory and development of a organizational or archival system.


Thinking about potential projects I immediately go to things I wish I would have thought of. My favorites are the ones that are simple and functional.

  • Grid: An interesting take on the spreadsheet. 
  • Evernote: Everyone’s favorite task-managing, note-taking, work-spacing, collecting-ing, cross-platforming app.
  • Pocket: Article saving app.
  • Internet bookmark organizer.
  • JSON: Data format.

Let me know if you have one I should check out.


In order to get some information on other people’s preferences and habits I sent out a survey to the ITP student list. Waiting on responses now, but I’ll link to the results when I have a reasonable number of responses.

Piano Tops

“If you are in a shipwreck and all the boats are gone, a piano top buoyant enough to keep you afloat that comes along makes a fortuitous life preserver. But this is not to say that the best way to design a life preserver is in the form of a piano top.”

That’s Bucky Fuller. And this idea was the starting point Design Tool Studio.

The discussion centered around questions like: What ideas or tools do we take for granted? What “piano tops” are they based on? Can you imagine a tool not based on a something else?

In the end, the consensus was that most tools are necessarily based on a previous version or analogous tool. It’s easy enough to simplify a tool’s basic function to find a parent. Simply, piano tops exist because things have existed before them.

In fact, they need to exist. If designers continuously went around wholesale reinventing tools we’d see a different tool for every designer, there’d never be enough adoption to make it viable, and replacement would edge out refinement. 

Path Dependency

That being said, we’re lazy. And that’s actually the reason that many of these piano tops still exist.

Take the QWERTY keyboard layout. The popular tale is that Christopher Latham Sholes designed this layout (c. 1870), which separated many of the most common letter pairings, to slow typists down in order to prevent jams on early mechanical typewriters. (Some point to the proximity of ‘e’ and ‘r’ to debunk this theory. Others think it was in response to typists input that the layout evolved as it did.) In any case, this “decidedly counterintuitive” layout became the standard and has remain so for quite a while.

What’s fascinating and unbelievable is there’s been very little competition or inclination to change the layout since. Even Sholes, QWERTY’s daddy, spent the rest of his life refining the typewriter and its layouts. He even patented layouts that he deemed to be more efficient. You’d think that as the keyboard became ubiquitous (and shrunk to the size of a phone screen) someone would have developed a better system. And you’d be right. Of course there are other keyboard layouts. But they’re been almost no adoption of them.

Adoption means relearning how to type. It means changing manufacturing processes. It means switching a massive, intrenched system. It means a lot of work for a lot of people. And at the end of the day most people would rather lay out sunning ourselves on a piano top than get off and build something better.