Cutting the Chrome

Why your Content is the UI

In 1998 I was working as a UI Design Manager at Corel. No not the place that makes dishes. Corel was an famous software developer out of Ottawa Canada, who's claim to fame was an application called Corel Draw. A little know drawing application that today doesn't have the traction or market presence of Sketch, let alone an Adobe Product.

Prior to the DOT COM bubble - back when Google didn't even have a home page - I was exploring ideas that became the cornerstone of my Design philosophy.

The Project

I had been working at Corel for a few years. First working on releases of CorelCAD, and then on special UI projects. 

Corel had just acquired Word Perfect, amongst other pieces of software. At the same time some new flavour of the month technology called 'JAVA BEANS' was being tinkered around with. Someone had an idea to make a productivity suite out of it. 

My task was to take the UI prototype, and to help 'beautify it'. To create icons, adjust the layout, and in general make it 'pretty'. For me this was a great opportunity to re-think how information is presented and ultimately consumed.

At that time, thats what we UI designers did, we came along after the walls were laid out and were asked to slap some primer, paint and then hang up a few pictures.

Design Philosophy - Content as UI

Motion Study - Cutting the Chrome - UI Designs, by Sanjiv Sirpal

The basic premise behind this concept is that information can be the user interface.  This is not true of all, but for certain types of information there is less reliance on labels and descriptions. In essence the Content is the UI. Instead of stringing together a set of spinners, entry fields and widgets, I explored removing them. 

For example, a North American telephone number can be recognized as XXX.XXX.XXXX. Email's can be recognized by their own pattern  - xxxx@xxxxxx.xxx. Other examples such as Twitter @XXXXXXX, and dates XX/XX/XX are also easy to recognize.  This minimalist approach needed to balance the known, with the unknown.  Who's email is that? The senders, or receivers? Context, experience, and purpose help users identify these information types. 

One Small Change

By addressing one simple constraint (i.e. the content was the UI) a cascade of ideas, and concepts were developed (faster then I could keep up with). This allowed me to explore other avenues and ultimately led to some big break-throughs. 

Detail Design - Cutting the Chrome - UI Designs, by Sanjiv Sirpal
Detail Design - Cutting the Chrome - UI Designs, by Sanjiv Sirpal

A Card Based UI - A Big leap forward.

While I was distracted by solving a UI problem, I had an epiphany - what if the chrome could disappear all together? What if the design of the UI, could be cleaner, simpler. My answer was the 'Card', or what I called the Card UI (as seen below).

A card has some unique characteristics.

  1. Cards are dimensional.
  2. Cards are tactile.
  3. Cards can form stacks.
  4. Cards are light weight.
  5. Card can be unique.

These characteristics make them very loveable by designers. Thats probably why they're so popular today.

Card Metaphor - Cutting the Chrome - UI Designs, by Sanjiv Sirpal