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.
You’re basically talking about using a modal pop-up–common in desktop applications. And yes, this is definitely the way to go if you can hack it. You’re right about keeping focus on the task.
The easy way would be to use a “pop-up window,” but the day of the pop-up window is over, so you’ll have to use a layer, or Flash. I see this frequently with ads, but rarely for useful interactions.
you can achieve this behaviour with Javascript. Best is, you use existing frameworks like mootools.net , which has a lot of already built-in scripts to make it easy. You can do some Flash alike sites with it and haven’t to care for browser compatibility. Though, I did my HP with it and the programming approach of this guys is a little strange - so, fight through it.