Invitation

Example of the Invitation UX pattern.

Problem

People would be overwhelmed or confused if you showed them everything your software can do at once.

Solution

Use interactive visual indicators to invite people to take advantage of capabilities when and where they are applicable.

Context

You have too many capabilities to show them statically at once.
You want to surface a capability when and where it makes sense without overloading your interface.
You want to help people discover and learn your interface in an interactive way.
You want to entice people to take some action.

Rationale

Using appropriate invitations can dramatically improve an interface because they can simplify what is statically displayed, supplement potential actions with additional information such as simple explanations and previews, and reveal aspects of your interface only when and where they are pertinent to the task at hand.

Targeted and thoughtful use of invitations can create a much more interactive, immersive, and productive experience for people due to the dynamic and satisfying feeling that results from of an interface that intelligently responds to input (such as keyboard commands and mouse movements) and reveals capabilities that enable people to dig deeper or easily accomplish what they’re after. They can also be an extremely effective way to help people learn an application without ever picking up the manual.

Implementation

How you implement this pattern depends entirely on your context. The easiest approach is to take advantage of the basic tooltip to simply tell people what they can do, but if you can, consider revealing a capability in place by changing the UI to reveal it there. Sometimes you can just take advantage of a well-known cursor inference (such as changing the cursor to a hand to indicate that clicking will do something or using the IBeam cursor to indicate text selection), though you could still supplement that with a tooltip. If people are dragging an object, you can invite them to put it in the right place using visual indicators.

It is usually helpful to provide some kind of preview of what you are inviting people to do. With basic navigational links, this is often simply a matter of using the link title to indicate what content the link takes them to. If it is an action and you can preview the effects of the action, do so.

Keep in mind that invitations are primarily visual, so take care for those who are visually impaired to make the same functionality accessible for them. If an action causes a change, it is usually best to put the focus on the thing that was changed so that assistive technologies can detect it. When possible, take advantage of built-in facilities such as the ALT tag to provide alternatives for those who need them. Usually, these techniques will only enhance the experience for everyone.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Invitation pattern is implemented throughout all the ASP.NET controls where a click or drag action can enable to user to do something within the control. Check out the samples browser to see it in action.

Examples

These invitations in the Skype 4 UI are certainly attention grabbing. Some of them start out more as little badges until you hover over them at which point they expand out, but I kept forgetting to capture that, so just imagine it (or use Skype, which rocks!). Anyways, they overlay these on top of the UI and the little pointer points at what they're highlighting and inviting you to interact with. Very effective but would get annoying if used too much, I suspect.

http://quince.infragistics.com/11f2