Tuesday, November 17, 2009

Levels of Website Interactivity

Whenever I mention website interactivity, I often see people around me wonder what is website interactivity? Making a website interesting and engaging, interests users and causes them to spend more time on the site. It’s all about enriching user experience. Any website, that presents content in an interactive way will tend to hold user attention. However, over the years, I have noticed the many levels of website interactivity. These levels may have been known to us but we have probably never noticed the gradual change in website design.

I have tried to categorize the interactivities in various levels and cited them with few examples.

Level 1: Using Basic HTML effects


This was the basics of the phenomenal change that we see today. At level 1, I aptly put in examples of websites that include the basic things such as color change for roll over or tool tips that appear for different sections. Websites used revolving text, banners that moved around; images that had some effect such as blinking images, pop ups to share additional information etc. The example given above shows a neat designed popup to show additional information once the cursor hovers above a particular image

Level 2: Displaying Information Through Creative Ways


The websites that belong to the level 2 category had some more amount of interactivity. By now, websites had some new ways to improve presentation of the information. New Technologies like AJAX are used creatively to attract users. For example, by holding the cursor over the heading, an area can be enlarged based on user action. This presents more information on the page without diverting the user to another page. Also, this keeps a user focused on the required information instead of displaying complete information in one go. The example above shows how certain headings are highlighted and linked in grey so that users can access information easily whilst browsing the site.

Level 3: Flash Animations and Videos


Level 3 websites witnessed a further change. Web designers used flash animations and photo sliders to present content in an engaging way. This brought about a livelier change in websites. In the above example, the website deals with accessories and clothing for those who love to skate or surf. There is a very ingenious use of a skating video on the website with the use of flash to engage users.

Level 4: Interactions Based on User Inputs

By now, websites had a higher level of interactivity. As compared to flash interactions in the previous levels which displayed the information, the interactivities now invited users to click for interesting inputs. In the above example, the website ensures that users interact and provide inputs related to the product ensuring users are kept on the page. Interesting surveys about coffee preferences support the subject making the website a success with users.

Level 5: 3D Interactivity


This level is about the highest levels of interactivity for website design. Here, the focus is on the use of 3Dimensional interactivities for websites. The incorporation of 3Dimensional elements to present content has seen many creative forms. In the example above, there is a use of 3Dimensional forms to present the matter. The website is built upon the concept of implementing the power of visuals! Apart from this, websites that use 3D cubes, panning cards, 3D flip books, interactive site maps etc, all belong to this level 5.

I am sure these levels are the stepping stone for website interactivity. Web designers have more scope in terms of creativity and I am certainly looking forward to many such creative canvasses!

2 comments:

  1. Really fantastic article, I appreciate the insights, thanks!

    ReplyDelete
  2. Hi there!
    Thank you for your feedback! I sure do hope this article will help you to plan a more creative website. Do keep checking this Blog for updates. You might want to check out this Site Booster Pack for web site interactivity without the need for web designers to dabble with Flash programming!
    http://www.raptivity.com/webexpert/SiteBooster_Samples/index-sitebooster.html

    ReplyDelete