Modular/contextual interaction design

I'm doing some research into sites that use a modular/contextual design
approach, and was wondering if anybody knew of any examples. I'll use the
concept of iGoogle to illustrate exactly what I mean…

Say I'd like to add more content to my personalized homepage. To do so, I
click "Add Stuff" and this takes me to a separate area that contains a
catalog of available widgets. Even though I mentally recall that I'm adding
content to my homepage, this area is visually independent of the homepage
itself.

Now, consider another approach. Say I clicked "Add Stuff" and a layer
(possibly 80% of the page) appeared, taking focus above the homepage.
Within the layer, I could browse the catalog of available widgets. The
catalog itself is similar in both cases, however the layer/modular approach
allows browsing and selecting to occur within the context of its destination
– the homepage. Once a widget is chosen, the layer disappears (possibly
with an animation) and the revised homepage comes to focus.

If anybody is aware of any site that uses a similar approach – whatever the
subject matter – I'd greatly appreciate your help. I'd also be very
interested in your feedback regarding the effectiveness of this type of
interaction.

Thanks in advance!

Comments

17 Sep 2007 - 9:36pm

.pauric

2006

I would say that the former scales a lot better than the layered panel
design. A paged model allows you to add content a lot more easily as
the app grows in complexity/breadth

I would try to understand why users needed the context, is it a
strong requirement?

At 80% I have to agree w/ pauric as well. I mean if you are covering
that much of the page, what context is left to be helpful?

now! there are other reasons to do this that I've thought about. By
leaving reference to the referring context while working on a new
modal context, the user is possibly (I ain't got no numbers) left
with a great confidence that when they are done they know where they
are headed, or more importantly if they cancel. Now this is
"contextual", but I would (now) rather think of this as referential
in nature.

I suppose that, even at 80%, the user would see enough of the base
page to interpret the layer as an extension of that page (along the
lines of what Dave said). This is the element of context I hoped to
capture. With this goal in mind, do you think the layered approach
is any more or less effective?

Oleh - thanks for the example. Right, like you said, I'm looking
into doing something that is substantially more content-heavy on the
layer. As a result, the layer would be larger and would only update
the base page after a selection is made.

Any other examples you could throw out there would be greatly
appreciated. To be clear, they don%u2019t have to be related to
homepage customization %u2013 I%u2019m more so interested in
something that illustrates the general layered model.

David: "the user is possibly (I ain't got no numbers) left with a
great confidence that when they are done they know where they are
headed, or more importantly if they cancel."

Label the buttons
[Add to iGoogle]
[Cancel & return to iGoogle]

or

[Add] [Cancel]
And return to iGoogle

I understand there's an innate design motive to be succinct, as well
as button labels arent very web2.0 transparent rounded sliding panel
goodness. But, I'm not all that sure it results in better designs
all of the time.

One other thing to consider is consistent flow within differing
widget apps. What if a complex app came along that requires a level
of configuration/setup and multiple instances of those setups can be
added to the 'homepage'. Like searching and adding stock tickers
and limit alerts, or building filters for your email. Then a
panel/context requirement is right out the window, pun intended.

Take adding widgets in www.chumby.com then yes, it works for very
simple widget apps, but if they get more complex such as filters for
rss feed then you might find a paged model is in fact more clear.