|
|
|
 |
|
Design Patterns
I have
worked on Design Patterns. Basically if a
design problem fits in an existing pattern
then use that interaction method. But I you
have to coin a new interaction method then
its documented as a new Pattern. These patterns
are documented and distributed to our team
and development.
Patterns are structural and behavioral features
that improve the "Learnability"
of something -- a user interface, a Web site,
an object-oriented program, or even a building.
They make things more usable, easier to understand,
or more beautiful; they make tools more ready-to-hand.
Patterns can be described
as the best practices used in a given design
problem. For instance, a UI designer who needs
to pack a lot of stuff into a too-small space
can use Card Stacking:
Example
:
| Use when |
There's too much
stuff on the page. A lot of controls
or texts are spread across the UI, without
benefit of a very rigid structure (like
a Property Sheet); the user's attention
becomes distracted |
| Why: |
The labeled "cards"
structure the content into easily-digestible
chunks, each of which is now understandable
at a glance. It makes the information
architecture obvious.
Tabs, especially, are very familiar
to users. Finally, Card Stacks save
space.
|
| How: |
First, get the information
architecture (IA) right -- split up
the content into coherent chunks, and
give them short, memorable names (one
or two words, if possible). Then choose
a presentation:
->Tabs are great, but they usually
require 6 or fewer cards. Don't "double-row"
them; scroll them horizontally if you
must.
->A lefthand column of names works
well on many Web pages and dialogs.
You can fit a lot of cards into one
of these. It lets you organize them
into a hierarchy, too. (At some point
it becomes more like an Overview Plus
Detail; there's really no clear boundary
between them, technically.)
->Some UIs have a dropdown list at
the top of the page, which takes less
space than a link column, but at the
cost of clarity. It can work if the
containment is very, very obvious; see
the example.
Remember that if you split it up wrong,
users will be forced to switch back
and forth between cards as they enter
information or compare things. Be nice
to your users and test the IA.
|
| Examples
1: |

. |
| Examples
2: |
 |
|
|
|
|
|
http://www.sameerchavan.com |
 |