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 information 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 of 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 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 to 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. first for a universal
audience, second for a specialized audience.
Let's say we're
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 quickly 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 helpful 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 decor?
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 decor. 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 decor, 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. |
|
| |
Indian Sari |
|
| |
|
|
|
This
appxt. 4' wide x 18' long rectangular sheath of fabric is truly an adaptable
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 and Creative Director 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 |
