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