See related material

Visit Urban Peacock

Bali recommends

Ways of Seeing J. Berger (Viking reissue 1995)

Designing Large-ScaleWeb Sites A Visual Design Methodology D.Sano (Wiley, 1996)

EnvisioningInformation E. R. Tufte (Graphics Press, 1990)

Information Design R. E. Jacobson (editor), (MIT Press, 1999)


Graphic Design Manual A. Hofmann (out of print, 1965)

The Spirit of Colors Karl Gerstner, Henri Stierlin (editors) (out of print, 1981)

As a designer, I see almost everything in life as raw material waiting for interpretation and simplification. That’s because it is my job to guide a user through the informational cyberstorm.

In the world of design, we clarify concepts. Consider design as a filter that distills out all unnecessary materials and leaves the core information you, as a user, need to get through your task. In the ultimate web site, visual design elements are integrated with functionality to intuitively guide you to do your best work without you even being aware of the design in action.

User interface (UI) design is the architectural foundation for a web site or any interactive, screen-based venue. Think if UI design as a rubber skeleton: the design has to maintain a certain structure to serve the functional purpose, yet it must also be flexible enough to scale and stretch to accommodate system variations and customization.

Why is UI design important and why should we even care? UI design is the electronic bridge for traversing raging waters of information on the Internet. With great UI design, we have a voluminous opportunity create a world of simplicity and hassle-free interfaces. Our goal is to create effective, easy-to-use interfaces that help people access information interactively and solve problems efficiently. A great UI is one with a flawless integration between structure and aesthetic elegance.

So, how do you start to create a user interface? Before you can move forward with creating a UI design, you need to ask yourself, “Who will be using the interface?” The “user” is an individual who will be sitting at a computer with at least some objective that has brought him or her to your site. My advice to design students and product development teams is simple: Distance yourself from what knowledge you already have of your product or service to put yourself in the shoes of a first-time user. One common factor all first-time users share (no matter what kind of problems they are trying to solve) is that they have never seen your site before. No matter their computer skill levels, computer and browser types, or available time and patience, you need to recognize they don’t know as much about your site or your topic as you do. Keep this in mind as you analyze the content, technical, business, and marketing objectives for the site. Design will help you distill these requirements and create a seamless product but only first for a universal audience, second for a specialized audience.

Let's say were going to create a form of transportation. First, you would ask, “Are you going to create a vehicle for ground, rail, air, space or time travel?” Each form of transportation has a specific set of basic functional requirements. If we know we are dealing with air transportation, then we know we'll be dealing with wings, wheels for take off and landing, a cockpit with altitude and pressure indicators, seats, windows and a door to get in and out. These are the minimal requirements needed to create an air transportation vehicle. Whether for an engine-less glider or an international jumbo jet, these basic specs represent standard functional requirements.

The Internet, like air transportation, has its own specific functional specs: quick identification of the main categories on the site, efficient and easy navigation between these main categories and a systematic, yet flexible way to access sub-categories and related content. These are the minimal functional specs needed for an Internet site.

Basic functional specs make up the foundational architecture and should be used to begin creating a template system. A template system allows for greater consistency and efficiency in design when you are concerned about growing fast in a short period with limited resources for maintenance—the situation everyone I know seems to face these days. The effectiveness of the system depends on the flexibility of the foundational structure. Once you have solved the basic navigational needs of the universal audience, it's time for a more in-depth analysis of the targeted user groups and their specific needs. Here we would embark upon the road to customization, yet another adventure in design.

Depending on your style, you may have your own particular creativity-inducing ritual. For me, it's making sure I clear off all the paper debris from my last burst of creative energy so I have a fresh canvas to begin muddying with the newest project's research, flowcharts, informational/navigational storyboards…you get the picture. Oh, and for the designer in me, I must have a handy stack of bright multi-colored post-its of all sizes and shapes and my colored pencils for those bursts of drawing frenzy. I find these tools very useful and use them to map out possibilities and highlight different sections of a site.

Much of my thinking is rooted in graphic design teachings deciphered while at the Rhode Island School of Design in the mid-1980s. Preston, one of my Graphic Design professors who taught Visual Systems, left a definite mark on my approach towards design analysis, a crucial part of one's product research. 

It was 1986, a chilly sun-streaked afternoon in Providence…Preston kept telling us to "think of the Blues"…but what the heck did that mean? We were third-year students, struggling to figure out what this brilliant professor was talking about. How does one begin to visualize ‘The Blues?’ We explored visualizations in B&W, then in color, with squares, circles, abstract combinations in 2D, in 3D; it was as if we were trying to create a new visual script for the representation of music…it was all about "the Blues"…Gasp!

Later, on an overcast afternoon, I realized I still couldn't grasp the constants and shifting variables of notes which when seen/heard as a whole created a visual system in motion, sound and time…the multiple, shifting layers and reflections, refracted variations to the system…it was all such a huge mental undecipherable mush for me…I was sure I would never untangle the cryptic mysteries of that world of unattainable design wisdom unless I learned ‘The Blues!’

In the midst of this whirlwind of mental tortures, combined with other wonderful all-nighters and escapades in the art of graphic form and function, color and typography, visual translations and semiotics, our powers of creative analysis surfaced. We didn't really see what was happening…we didn't suspect anything at the time…but our creative seeds were being planted by the best design minds in the world. All we could do was sit at Carr House on the corner of Benefit Street downing a late night bagel and coffee while banging our heads against the meaning of design. Little did we know that our seemingly torturous attempts to attain the ultimate wisdom was actually a life-long journey in its earliest budding.

In 1995, after a number of years in corporate graphic design, museum exhibit design, CD-ROMs and studies in film, I jumped into the uncharted world of the Internet. I had been searching throughout my early design career to find a fit that encompassed all my curiosities and analytical tendencies. Then, the Internet arrived. It was gray with blue links and it was just a sort of non-stop scroll…an electronic sheet of black text in the unglamorous Times typeface with little opportunity for design, or so we thought. The concepts of navigation design, information architecture were not connected to the world of this new communications medium as yet. As designers, we were sort of sniffing it out, trying to figure out whether it would follow CD-ROMs in a quick economic death and go where all quickly antiquated 'new' media go if they fail to spark the imaginations of Wall Street and profitability.

I started playing around with the nuggets of text and crude blue outlined, rectangular link buttons, concepts of information flow, variable pathways, levels of information, electronic galaxies that a person could navigate through with cyber clicks. In this soon-to-be-congested-land of information, the next generation’s answer to a cyber library with infinite pathways, I would find my personal truth behind the meaning of design. Remember ‘The Blues?’ Well, once I started trying to navigate through the myriad labyrinth-like passageways, without even realizing it, I was putting to use the lessons learned during Preston's infamous classes. After a few years I came to have a renewed and very deep respect for a professor I had had such difficulty in comprehending at the time. He was a man ahead of his time, and we were only now realizing the gift of conceptual analysis that he had bestowed upon us. Soon, the multiple pathways and numerous gateways available to users in achieving their goals on the net became analogous to deciphering the nuances of complex systems, such as the beauty that can be appreciated when a musician dissects a concerto.

So, the Internet was here and as the new kid on the block, few respected designers wanted to play with the uncultured media child. As I myself was sort of the new kid on the block in the NYC design agency, having just jumped from the film school ship, it was only fitting that we befriended each other. Our relationship has made for a tremendously exciting creative journey. Little did I know when I embarked upon this voyage that I would soon come face to face with the realization: I think I finally ‘Got it!’

Today, the Internet is still in a very infantile stage, barely able to crawl, let alone walk, amongst the other modes of communication that have aided us in the transportation of knowledge, information, entertainment and exploration. How does one navigate through all this information? In 1995, the concept of a User Interface was a familiar concept for software developers but not for graphic designers. Slowly, designers shifted from the media-rich world of CD-ROMs to the bare-boned world of the Internet. It was a painful beginning. Transparent and animated gifs were just starting to make themselves known to the design community. Graphic production management was undergoing a huge shift in processes and file conversion technologies which made it imperative that everybody on the team be aware of the process of development for this new medium. I was about to jump into the middle of this development.

After spending 10 years in design agencies, I had a solid grasp on my industry jargon. Then, in early 1997, I moved from NYC to Silicon Valley. I, like many new arrivals, was amazed at how unversed I was in the valley lingo….I mean it was still English, right?  A corporate meeting was like going to a foreign country. The outfit at that time consisted of blue jeans, company t-shirts and a palm pilot. The activities ranged from drawing on large white boards with a lot of cool multi-colored markers while simultaneously speaking to three offices internationally via conference call and, after 4:00 p.m. on beer-bash Fridays, to the more entertaining multi-player Quake computer games. 

This world considered design as graphic production. They didn't seem to think there was much else to it. I was dumbfounded that they didn't realize the conceptual depths and analysis that go into design. They didn't really know what to do with me, yet they knew they needed me. They had hired me to provide a senior management role and to provide creative leadership for the company, but confided that they didn't think people knew what that meant or entailed. It was unbelievable that in this designer-depraved world, a logo was considered to be a red rectangle with a bold typeface that could be popped out in two hours and then be branded to represent the Company's top new Internet Product. I was shocked. So, I did what any respectable designer would do, considering they had already moved my whole life to the West Coast and I was stuck here--I started to educate those around me on the wonders of design as a communications tool, mainly so that I could get the information I needed to do my job.

How could I effectively communicate the importance of good design to these engineers and MBAs in Silicon Valley? In my earlier days, I would be so passionate about conveying the wonders of great design, I would fail to see the glazed looks that often resulted from too much information with unrecognizable designer vocabulary. It took me only a few such conversations to realize that I needed to try a more effective and diplomatic approach to communicate the fantastic rewards that come with attention to good design practices. Now, after a number of years of passionate conversations with engineers, business strategists, marketing professionals and designers I have arrived at a relatively simple design philosophy.

Over the years I've relied heavily on metaphors as a way to bridge the communications barriers between functional disciplines on a team. I have often found myself conveying the concept of good UI design with simple visualizations such as the rubber skeleton and air transportation stories. At the heart of good design, there is a marriage between functionality and form. In terms of product development, two other stories have become increasingly popular with my colleagues and students.

Example 1: Iron and Silk

Take the concept of a table. The defining functionality of a table is its ability to hold almost anything placed upon it (stability). You could have a hunk of iron welded together to create the strong, flat surface to hold up a delicate glass of wine. This iron monstrosity does the job. It does answer the call of functionality. However, would you want such a table in your living room? Does it fit your décor? Do you really want to look at it day in and day out?

Now we come to the question of form/aesthetics. The defining aesthetic of a table is that it be suitable to fit your current décor. There should be a certain style and elegance to it, a sense of beauty. A sheath of vibrant magenta silk with golden embroidery is surely an example of aesthetic loveliness. However, can this sheath of silk hold up a glass of wine? No. It is beauty without strength. It is a flowing abstract form without functional stability.

The ideal design would draw upon the strength and functionality of the iron table and the majestic vibrancy of the magenta silk to result in a table that is a well united hybrid of form and function. The result would be a table that could hold up a glass of wine and also grace your home with elegance.

Example 2: The Indian Sari

Another example is the Indian sari. This ancient, yet elegant form lends itself readily to the needs of scalability and customization. This 4' wide x 18' long rectangular sheath of fabric is a truly adaptable design. It is lightweight, beautiful and versatile. There is only one size, and it can be easily customized to fit many body types. When draped and tucked, the rectangular fabric transforms into an elegant garment unparalleled in its sheer simplicity. This singular garment can adapt to life's changes, should your mid-region grow with child, or your height increase or shrink with age. Customization occurs not only in terms of the woman's size and height, but also in choice of fabric, colors, level and combination of detailed décor, and styles of draping. Over the years, women across India have found innovative ways to customize this classic garment to suit their changing lifestyles.

Aesthetics and adaptability are vital to good design.

In the end, the success of a good product depends on a team's ability to work together in evaluating the challenges from their respective expertises and allowing for shared explorations in problem solving. Don't lose sight of the importance of collaboration, for it provides the vital energy needed to fuel your project's success. I encourage time spent in initial research, brainstorming and pure explorations to allow for freshness in perspective. Just looking at current websites from the perspective of a first-time user as well as from a UI deconstructionist's viewpoint will help to fine tune your responsiveness to informational clutter. Is all that content and visual excess really necessary to help the user perform their tasks? If not, get rid of it and help to clear the path for more intuitive and efficient User Interfaces! I hope the stories here have helped to open your mind to new ways of looking at the concept of design. Wishing you all many great UI journeys through the informational cyberstorm!

Kavita Bali is the Founder of Urban Peacock, a Design consulting firm specializing in complex UI infrastructures and visual systems in Silicon Valley.  Kavita has served as Sr. Art Director at Intuit's Centralized Engineering Division, UI Design and Usability Impressario for PeopleSoft's eBusiness Solutions Division, and most recently as a UI Design Director at Groundswell, specializing in long term Strategy and Research & Development of multi-level, enterprise infrastructures. You can reach her at kavita@urbanpeacock.com.

KBVDNIC121800GR

Copyright (c) 2000-2004 LiNE Zine (www.linezine.com)

LiNE Zine retains the copyright in all of the material on these web pages as a collective work under copyright laws. You may not republish, redistribute or exploit in any manner any material from these pages without the express consent of LiNE Zine and the author. Contact permissions@linezine.com for reprints and permissions. You may, however, download or print copyrighted material for your individual and non-commercial use.