ellipsis flag icon-blogicon-check icon-comments icon-email icon-error icon-facebook icon-follow-comment icon-googleicon-hamburger icon-imedia-blog icon-imediaicon-instagramicon-left-arrow icon-linked-in icon-linked icon-linkedin icon-multi-page-view icon-person icon-print icon-right-arrow icon-save icon-searchicon-share-arrow icon-single-page-view icon-tag icon-twitter icon-unfollow icon-upload icon-valid icon-video-play icon-views icon-website icon-youtubelogo-imedia-white logo-imedia logo-mediaWhite review-star thumbs_down thumbs_up

6 ways to add richness to your site

Riccardo La Rosa and Steve Mulder
6 ways to add richness to your site Riccardo La Rosa and Steve Mulder
VIEW SINGLE PAGE


During the last few years, user expectations have changed with regard to how websites should work. When sites like Google Maps and Gmail came out, they brought a breath of 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 significantly since then, and by using rich internet technologies such as Flash/Flex and AJAX, we are finally experiencing much more interactivity and richness online.



Steve Mulder is director of emerging interactions at Molecular. Read full bio.

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


Form validation
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 mistakes. Most of the mistakes can be avoided by providing clear contextual text, but there are others instances (like if a username is already taken) that can't. By using AJAX technology in the Reebok example below, designed by 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 right away.


Reebok's Run Easy site

 


Do the forms on your website offer instant validation? If not, then they will probably benefit from these enhancements. You will gain in having less frustrated users, better 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 predicts a word that the user wants to type while typing it, without the user completely typing it. One of our favorite examples is on kayak.com. I can never remember the codes for the airports that I'm flying to, so if I need to fly to 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 what data to return to the user as he or she is 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/processes by keeping the user in the context of what they are doing. For instance, on Backpack, users can add new items to a list, edit current items, mark them as complete, or delete them without ever being taken to a new page and waiting for it to reload.


Backpackit.com



Changing only the part of the page that the user is editing allows for faster site response times and decreases the utilization of bandwidth that would otherwise be necessary to refresh the whole page. Highlighting what the user has just changed provides a visual clue that the edit has happened and how it has affected the information on the screen. 


Endless.com has created a very dynamic and interactive product detail page. Users can view different images by simply moving their mouse over the different thumbnails. If they move their mouse on the product photo, a zoomed in photo will then appear without the need for a pop-up window. Sizes are displayed directly on the page, showing immediately what is in 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 having to reload the whole page.



What are the most common processes that users are doing on your website? Registration? Checkout? Viewing product details? Understand which of these tasks can be optimized for your users and thus improve the overall conversion rates on your website.


|  

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.com, if you are reading an article that contains company names that are traded in one of the major stock markets, the stock value is updated dynamically as new information comes in.


Marketwatch.com



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 on that stock. This feature is an elegant way to 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 have been previously only been used in desktop applications. Molecular's Single Screen Selector uses new interface elements like sliders and AJAX technology to create an experience that helps users quickly navigate to a desired product and also encourages enjoyable exploration without having to refresh the whole page. Users can see how the product set changes in real time by moving sliders or 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 power? Don't limit yourself to what is traditionally available on the web, but push your designers to look for more creative ways to interact with your site and content.

Direct manipulation
Many of us struggle with the issue of displaying and interacting with large amount of data. The traditional static html page can't really help with this problem, but there are ways to 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, some of which (like the news section) are driven by AJAX.



The ability to easily compare and overlay other stock market indexes with a click of a button without refreshing the page makes it feel like a natural application and not a traditional 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 technology will deliver a more immersive and natural experience.


Differentiating experiences
Features such as product configurators can push the richness of online applications to the extreme and create an immersive brand experience well beyond a traditional HTML 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 page to refresh. Every action can be easily undone or replaced by another action with just a click or two. The end experience is very immersive and users feel compelled to finish the process to see what they are creating.



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 express their creativity in many different ways.



Where on your site do you want to immerse users in your brand experience? Do you offer products that can be customized? Or are you thinking about them? This is a natural place 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 website, from simple widgets on a page to complex product configurators. Offering this type of richness to your users increases the overall experience and reflects positively on your brand.


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.


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

Comments

to leave comments.