Lecture - 27.02.07 Research of a New Pattern

Just a quick re-cap to What is Pattern?
Basically, Pattern is a solution to problems which keeps occuring over and over again within a particular context.

I am enclosing one of the PATTERNS released by YAHOO and this Pattern is used by Web Designers, find the details of the Pattern below:

NAME : EXPAND TRANSITION

INVENTED BY : YAHOO

KNOWN USES : YAHOO BETA MAPS


PROBLEM
Designer needs to show the detail of an object in its context or reveal a previously collapsed object.

IT IS USED WHEN:

- This pattern is used to manage large contents and modules.
- Shrink feature to create a way to manage real estate on the screen.
- As part of rollover system (with Shrink) to emphasize the currently hovered on object.( e.g; photos in a photo album).
- Need to see more detail (Y! Local maps).
- The need to interact with the content that was previously represented in a thumbnail version.
- Wanting to see the detail of an item in a list (e.g., movie details in a movie list).
- Making content available for editing.

SOLUTION

It increase the size of an object while animating the in-between sizes (tweening). This communicates similar meaning, as does the brighten transition and good rule of thumb is complete an expand in less than 0.5 seconds.

RATIONALE
There are 2 logics behind this pattern designed and those are:

- To expand visually more eye-catching than a brighten, especially when combined with the move transition.

- Be careful to not overuse expand. For example, in a photo application, if you provide a rollover to expand photos from thumbnail to a larger size the transitions will become annoying as the user will see them back-to-back. Either remove the transition altogether or make it extremely fast.

REFERENCE LINK
http://developer.yahoo.com/ypatterns/pattern.php?pattern=expand