By Poonam
There are many elements that go into the creation of a website. A website is the best medium to communicate with users from all over the world. It is therefore essential, it should be designed in such a way that users should be attracted and be engaged on the site. This is when a website can reach its users effectively.
Designers have often wondered about the secret ingredient to make a website appealing. The combination of design and functionality is something every designer wishes to implement in a site. Many successful websites have one main secret ingredient, not every designer is aware about. That element is website interactivity.
What is Web Interactivity?
A simple example can illustrate this point. Picture this: 2 shopping stores are right next to each other. However, one attracts more customers than the other although both have the same goods. This is only because of one reason. The one shop that attracts more customers uses the concept of interaction with people. This is in terms of consumer suggestions, attractive offers, contests and displays. The whole scenario draws people as the overall environment makes a customer feel more comfortable.
In terms of web design, the concept can work in the same manner. The trick lies in a subtle use of web interactions to attract users and cause them to engage on a page.
Here, we can take another example. A radio button or hyperlinks are elements of a web interface. Contrast these with a 3Dimensional Cube or a 3Dimensional Flip Book, both being examples of interactivity. They are complete experiences of doing stuff that engages users with web pages whilst the user is going through the information displayed on the website. This is what makes these examples stand out. The use of interactivities woven very creatively with website content makes them successful in capturing user-attention.
How does one achieve website interactivity?
There are many elements that can be focused upon to achieve web interactivity that attracts users. The main subject of the website should be taken into consideration. This can give a clue as to the kind of interaction to be used. For example, a product website will have various categories on display. The range should be presented in an interactive manner rather than plain rows of products. A 3Dimensional Flip Book can be used to its advantage to showcase a range of products with the relevant information. A user gets engaged whilst flipping through the book.
The creation of these website interactivities requires time to be spent on technical details. However, in the recent times, designers can create these interactivities within minutes without any programming with rapid interactivity software that is available in the market.
Examples of great interactivity websites
Infinit Colours
This example shows the creative use of design and content. The design of the website is such that it engages users from the first moment itself. A user can change the background of the website. Besides, the menu is simple and hangs freely at the bottom area. It can even be dropped down if required. The color and layout used is clutter free. The text is neat without seeming too overpowering yet giving the message to be conveyed. The company is an advertising based company that conveys to users about the abundance of creativity.
Starbucks Coffee at Home
This brand sure does know how to impress its users with loads of creativity that is used generously on its site! A user can simply know the kind of coffee taste he/she is more suited to by taking a simple Find my Perfect Coffee quiz. It makes browsing the site fun and interactive. A user can view the different types of coffee available by moving the cursor over the coffee packets as shown in the image.
Square Circle
This creative agency does know how to connect with its users. Prospective clients are bound to be impressed with the way the site engages the users; one needs to pan through the page and zoom in to view details.

Roth Aniko
This artist manages to display the portfolio in an interactive manner. In this website, users can find a good balance of color, layout along with the interesting presentation of information that engages users.
Harry Potter
Harry Potter lovers will surely love this interactive site which has used interesting elements for display. The picture gallery is used in an interesting way with the pictures revolving around the main figure as shown in the image.
Cathy Beck Communication
The home page of this website involves little interaction. But as a user clicks on the tabs, the layout unfolds into an interesting layout with a zoom panel in the corner; a user can zoom in and out and is engaged on the site!
Magnivate Interactive Boutique Agency
This creative agency has used a unique approach on their site. The site has a cartoon character which takes a user through the various segments in a very interactive way.
Data Fisher
The company information is presented through an interactive 3Dimensional book. This book has a very creative mix of visuals and company information, the combination of which makes the content very readable!
Mercedes A-to-S
This site is one of the perfect examples of a creative and intelligent use of interactivities. The various features of the Mercedes car are explained through a very intelligent use of Flash. The quality of leather can actually be ‘felt’ once the cursor is clicked and dragged over the surface as shown in the image.
Nokia 3110 Evolve
This Nokia website has a very interesting and engaging interaction, where in a user can move the cursor over the mobile phones and the entire angle of the phone changes.
In the same website, a click on the phone enlarges it, as shown in the image. The phone can be viewed in a 3Dimensional way which definitely appears more interesting as compared to a display of images.
Aparte Graphique
The website has a great combination of interactivity. There is a cartoon character along with an engaging way of presentation of information.
Monoface
This creative agency knows how to display its creativity rather than talk about it! The main image can be played around with, by changing the facial features to try many funny combinations!
Unfortunate Events movie
This popular movie needs no introduction as it is full of creative effects. The website is created on the same lines; users can move the cursor over the elements to know details. These are shown in a very creative fashion keeping in mind the concept of the movie.
Website interactivity thus forms to be a very important ingredient for web design. Has this idea made you have a second glance at your website? I would love to hear your response about website interactivity.
Let us share our experiences right here, keep the comments rolling in!
About Author: Poonam works as Product Manager at Harbinger Group and looks after Raptivity Web Expert. She holds a Bachelor’s degree in Computer Engineering and is an active blogger.
Related Contents |
Sponsors |
|
Posted by hongkiat in Web 2.0 , at 01.15.10
Tags: Design, interactivity, user experience, ux, web |
|







































Comments
Steave January 15th, 2010
Great piece of inspiration, thanks for the compilation!
ReplyAlice January 15th, 2010
Loved the analysis and the examples, especially the Monoface, which is, by far, one of the best examples of website interactivity. Flash offers a lot of great option in that sense. Congrats for this post!
ReplyBalticseo January 15th, 2010
Version “Starbucks Coffee at Home” it’s very rulezz.
ReplyRune Risom January 15th, 2010
Haha – some great examples in this. Especially love the Mercedes one. Fantastic use of interaction to entice the customer.
Still a very small concern on full use of Flash in terms of load times. Can be quite big for some users not sitting on a massive broadband connection.
ReplyDinesh January 15th, 2010
I used Monoface few weeks back, its just awesome and the faces created are very funny.
ReplyRahul - Web Guru January 16th, 2010
Certainly, today people are looking for interaction in websites also. They want websites to be an interactive one like any software. They don’t care if the website functions or not, i.e., if the website is functional or not, but what they want is the user interface of the website.
Replydonny January 16th, 2010
just to say thank you.. :)
ReplyCool Valley January 16th, 2010
Cool collections! Those website inspired me a lot!
ReplyWilliams January 16th, 2010
Great Creativity, Thanks Man. Really interesting.
ReplyTech Maish January 16th, 2010
This is great.
ReplyVery nice and helpful collection.
Rent Car Ankara January 16th, 2010
Good collections, thank you..
ReplySalmen January 16th, 2010
WOW nice collection
Replyaizuddinmanap January 16th, 2010
c00L collection.. :)
ReplyJeff January 17th, 2010
Amazing Collection
Replybee January 17th, 2010
so creative and so amazing…
Replyerlangga January 17th, 2010
cool colection bro..
ReplyMario January 17th, 2010
Flash is the wrong way…
ReplyTan Nhu January 18th, 2010
I really love Infinit Colours. It’s amazing with colors, music, and effects composed together. Like in a game.
ReplySoft Skills January 18th, 2010
I visited few website, all has real great design and encourage interaction from the user. Nice sharing :D
ReplyCanton real estate January 19th, 2010
Thanks for sharing this, I have never seen anything like it!
ReplyLee | Money4Invest January 19th, 2010
I love Monoface the most. It’s all about Human Interaction design. Our human face features greatly described our emotions and first impression to other people. Therefore, it’s more attractive to people compares to using other things. Just my opinion.
ReplyAnggaRifandi January 19th, 2010
Wow, another great collections from HONGKIAT.
ReplyBut in my country with limited bandwidth and slow connections very hard to access those sites.
Tommy January 19th, 2010
Yeah, the last site is great!
ReplyI’ll try to implement some of the advices within the next projects!
thanks!
Rozy January 20th, 2010
amazing tips
Replythanks
DhionDating January 20th, 2010
thank you for the tips. Am waiting other tips to come :)
Replycientista January 20th, 2010
unbeleivably beautiful websites. well done once again for collating the most inspirational stuff around. nokia was next-level!!!
ReplySudhir January 23rd, 2010
thanks for important tips……………………………………………………
ReplySaroj January 23rd, 2010
Thanks a ton!! very helpful!
ReplyEzuca January 25th, 2010
Sometimes you, as the web designer, also have to decide whether to go for interactivity over bandwidth or vice versa. Or perhaps both.
ReplyDizi izle, lost 6. sezon izle January 29th, 2010
maşallah çatıcı boyacı kivici çivici :D :))
ReplyCanlı ve erotik şov,+18sohbet January 30th, 2010
hehehe
very good photos
ReplyVector February 21st, 2010
To learn, and very grateful author!
Replycheap prom Dresses March 21st, 2010
very good photos
ReplyTrackbacks