Card Interface
Card UI Controls - Corel - Sanjiv Sirpal
Cutting the Chrome - 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 a 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
Form Based vs Card Based UI
Corel had just acquired Word Perfect, amongst other pieces of software. At the same time a new technology called 'Java/JAVA BEANS' was being tinkered around with. Someone had an idea to make an office 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 - UI Design
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.
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.
Cards are dimensional.
Cards are tactile.
Cards can form stacks.
Cards are light weight.
Card can be unique.
These characteristics make them very loveable by designers. Thats probably why they're so popular today.
