Patterns

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:
  • Share/Bookmark
blog comments powered by Disqus