Print Article http://www.imediaconnection.com/printpage/printpage.aspx?

id=16458

Published: September 04 2007

6 ways to add richness to your site

By Riccardo La Rosa and Steve Mulder

Molecular explains how to improve functionality and usability with these easy ideas.

During the last few years, user expectations have changed with regard to how websites should work. When sites like Google Maps
fresh air to an industry that has been tied to the "html page" syntax for too long.

A few years back, during many web development projects, we used to say: "You can't do that in html." Technology has matured sig
technologies such as Flash/Flex and AJAX, we are finally experiencing much more interactivity and richness online.

In this article, we will explore different levels of "richness" that can be added to your website to improve
don't need to invest in an army of developers to achieve this richness.

Form validation

Steve Mulder is director of

emerging interactions at
Molecular. Read full bio.

One of the most tedious tasks for any user is to fill out forms online only to find out that after they submit it, they have made some
providing clear contextual text, but there are others instances (like if a username is already taken) that can't. By using AJAX techno
our company, we can verify in real time, after the user has finished typing the information, if it's valid or not and let the user know r

Reebok's Run Easy site

1 of 6 05/09/2007 14:17
Print Article http://www.imediaconnection.com/printpage/printpage.aspx?id=16458

Do the forms on your website offer instant validation? If not, then they will probably benefit from these enhancements. You will gain
conversion rates and offering a better overall experience.

Auto-suggest
Another feature that has become very popular lately is auto-suggest (also known as type-ahead). Auto-suggest is when the site pr
typing it, without the user completely typing it. One of our favorite examples is on kayak.com. I can never remember the codes for t
New York, I can just type "new" and the site quickly returns a short list of airports that I can easily select from.

Auto-suggest is another feature that can be easily added to your site if you haven't already. The only complex part to figure out is w
typing. If you have a search feature on your website, compile a list of most used searched terms and start from there.

Next page>>

Faster processes
Another area that can greatly benefit the overall user experience and the responsiveness of your site is to improve common tasks/
what they are doing. For instance, on Backpack, users can add new items to a list, edit current items, mark them as complete, or d
page and waiting for it to reload.

Backpackit.com

2 of 6 05/09/2007 14:17
Print Article http://www.imediaconnection.com/printpage/printpage.aspx?id=16458

Changing only the part of the page that the user is editing allows for faster site response times and decreases the utilization of ban
refresh the whole page. Highlighting what the user has just changed provides a visual clue that the edit has happened and how it h

Endless.com
has created a very dynamic and interactive product detail page. Users can view different images by simply moving their mouse ove
mouse on the product photo, a zoomed in photo will then appear without the need for a pop-up window. Sizes are displayed direct
stock and what is not. Another nice touch is the ability to look at a different product using the scrollable list on the top without havin

What are the most common processes that users are doing on your website? Registration? Checkout? Viewing product details? U
for your users and thus improve the overall conversion rates on your website.

<< Previous page | Next page >>

More ways to interact

Traditionally, users don't expect a page to change its content after it's been loaded. But this is not true anymore. On marketwatch.c
company names that are traded in one of the major stock markets, the stock value is updated dynamically as new information com

Marketwatch.com

3 of 6 05/09/2007 14:17
Print Article http://www.imediaconnection.com/printpage/printpage.aspx?id=16458

Also, if you move your mouse over the stock ticker, a new layer is revealed with the chart of the stock and links to more information
not crowd the page initially, but to reveal additional information when necessary.

At Molecular, we have tackled the problem of helping customers find the right product or content using tools and techniques that h
applications. Molecular's Single Screen Selector uses new interface elements like sliders and AJAX technology to create an exper
desired product and also encourages enjoyable exploration without having to refresh the whole page. Users can see how the prod
making other selections, making the application feel much more responsive than a regular web page.

Are there new ways that you want your users to interact with your site and content? Where do users want more flexibility and powe
available on the web, but push your designers to look for more creative ways to interact with your site and content.

<< Previous page | Next page >>

Direct manipulation

4 of 6 05/09/2007 14:17
Print Article http://www.imediaconnection.com/printpage/printpage.aspx?id=16458

Many of us struggle with the issue of displaying and interacting with large amount of data. The traditional static html page can't rea
augment it. At Google Finance
for instance, they have nicely integrated very powerful and intuitive charts built using Flash technology with the rest of the page, so
AJAX.

The ability to easily compare and overlay other stock market indexes with a click of a button without refreshing the page makes it fe
web page anymore. Even the time scale is very intuitive and so easy to use that it becomes very addictive.

Do you have large sets of data on your site that you want your users to interact with? Building charts and graphs using Flash techn
experience.

Differentiating experiences
Features such as product configurators can push the richness of online applications to the extreme and create an immersive brand
interface. One of the best executed and well known is the Mini USA
site. Users can create their own version of the Mini and see the results as they are making changes without having to wait for the p
undone or replaced by another action with just a click or two. The end experience is very immersive and users feel compelled to fin

Another example is the Nike iD

website, where users can customize their shoes, shirt or bag with different combination of colors, images and text. Users can expr

5 of 6 05/09/2007 14:17
Print Article http://www.imediaconnection.com/printpage/printpage.aspx?id=16458

Where on your site do you want to immerse users in your brand experience? Do you offer products that can be customized? Or are
where rich technology can be used to create a unique experience.

Implications
Richness is becoming more and more pervasive. As we have seen, there are different ways that you can add richness to your web
product configurators. Offering this type of richness to your users increases the overall experience and reflects positively on your b

If you are ready to add more richness to your website, keep these three things in mind:

Every website is becoming and behaving more like an application and less like a traditional site.
The experience is more about performing actions than going from page to page.
Users are expecting more power and complexity, without a hit to the design's simplicity.

<< Previous page

Riccardo La Rosa is director of emerging interactions at Molecular. Read full bio.

6 of 6 05/09/2007 14:17