Desizn Tech logo
  • Home
  • Freebies
  • Showcase
  • Tutorial
  • Photography

Interactivity in Web Design: A Beginner’s Guide

By Poonam, 4 October, 2009 & filed under Tips & Tools, Web design

The Internet is a different place than it was 10 years ago. Back then, the only way people could find information was by surfing the Internet using search engines and then jumping from link to link to find other websites. This has all changed with time ever since Web 2.0 websites appeared on the scene. In this post we are analyzing and showcasing you different elements of interactive website and  how to create your own interactive website.

Normal is Boring!

boring website

Instead of plain text, present your content in an attractive way. Nowadays, users do not prefer reading text. User tends to responds to more visual elements. Ask yourself, what kind website you would like to visit? A static boring website or dynamic, cool easy to navigate website? Instead of a typical way of presenting content, it’s wiser to use some creative ways. You can showcase your product videos and images in a 3D gallery or simple slide show.

What is Interactivity?

Interactivity

Interactivity is a giant leap from the traditional form of web user interfaces seen earlier. Adding interactivity to a web site attracts user attention and tends to brings them to the website again. They add a good amount of visual interest and attract users to visit your site again and again. The main idea of a website is to convey a message effectively.

Today, to meet people’s expectations it is most important that you have a website which is interactive and provide the most information to the user at its fingertips. Such interaction on a website can be classified in two categories:

  1. Single User Interaction
  2. Multi-User Interaction

Single user interaction is about engaging users by displaying the content in a way which would attract users to spend more time on a website. An example of single user interaction is creating a product portfolio or photography website with 3D Flip book or image sideshow which would allow the user to flip through the pages or images easily and smoothly. You can also present your navigation, photographs, text in way that user are driven to browse through content.  Here are some examples:

Single User Interaction

gambolio

Gambolio is using slider to show its content.  If you go to their demo section you can drag the games to trash, which allows user to interact with the webpage.

jp3_design

JP3 Design is using both flash and jQuery to make the website visually attractive to the visitors. The navigation is using tooltip to guide user when they hover and they also have a flash photo gallery on the side to showcase their work.

metalab

Metalab lab has pretty slick design and user interface.  When you click on the tabs on the sidebar tab it goes to the next content and the transition from content to content is really intuitive and visually attractive.

DHP

DHP is flash powered site emulates blocks in their website element to browse the content. This present an unusual yet interesting way to present their content.

ltd

Leeds Technical Design has a Flash powered 3D interface that worth visiting. It is very engaging.

wonderwall

Wonderwall comes from Microsoft based on flash. The way you go through content is by moving your mouse from left to right and click on desired image to find more about news.

Multi User Interaction

Multi user interaction is about allowing site visitors to interact with each other in various forms. Most common examples of multi user interaction found today are in the form of forums, blogs, polls, discussions, sharing presentations, chat site, images and links etc. Here are some examples:

meebo

Everyone is familiar with Meebo. User can log into multiple accounts and chat with their friends.

blurit

Blurit is a website where readers can ask or answer questions.

gamerdna

Gamerdna as name states is for gamers to find out about the games their playing, have a discussion and more.

The examples you have seen above are just some minor examples of interactive website. User’s are always attracted to innovative designs and interesting way of browsing content. Every time a web designer or developer has to try something creative, chances are that they will end up spending more time on programming which is time-consuming. You can refer to these cool tips that can help you to spice up your web site….in no time!

How Do I Add Interactivity to My Website?

Polaroid

You can add single user interactions in some following methods:

  • Add javaScript  and flash photo gallery or content slider. Here are some detailed lists where you can find some interactive photo gallery and  some jQuery sliders. This allows viewers to engage with your website rather own than old browsing method.
  • You can also get creative with your navigation/menu. If you would like CSS navigation Instantshift complied a great list for that and if you would  javaScript navigation here are some useful tutorials.
  • There are software’s available in market which allows you to add such interactions to websites through simple customization without programming. Use these tools to add such interactions quickly and easily to your website. This phenomenon is called “Rapid Interactivity”( Not Free). Here is a sample page.  If you would have some control over you content, customize and get into little coding you can check some free software for Mac and Windows that use can use to create useful content.
parachat

To add multi-user interactions to your website, you can add various tools based on your needs. For example,

  • Add polls to your website using softwares such as PollDaddy or SurveyMonkey
  • Share presentations, documents using Slideshare, Scribd.
  • You can allow user to leave a feedback or shout via Shoutmix or Freeshoutbox. You can have free community chat on your site by using ParaChat or Free Chat Code
  • Another way is by starting you own social networking site or creating a site where different users can engage with each other on different level. TechCrunch points out nine different ways to build you own social networking site.

Instead of using different tools for different needs, you could also use TeemingPod. It allows you to add polls, share presentations, share new ideas, links, create FAQs etc. through one single Pod. This reduces your learning curve of multiple tools. Also, adding a Pod to a webpage requires only a couple of lines of code. We are recommending it for user who beginners and wants to avoid too much coding.

One Last Word…

ugly

Whenever you are adding banners, animation on your site do not overdo it ! Make it simple, attractive and user-friendly. Crowding with too much interactivity, flashy items can drive readers away instead of drawing them. You should consider providing better usability and easy browsing experience for your viewers. Last but not least know what can drive your visitor away and in what way you can ruin your website.

Interactions makes web pages exciting, unique and memorable! If you haven’t yet added these to your website, it’s high time for you embrace new ideas and have some interactive elements in your website.

Edited by: Kawsar Ali

Pin It
Tweet

Author: Poonam

Poonam works as Product Manager at Harbinger Group and is responsible for the overall technology architecture of TeemingPod. She also looks after Raptivity Web Expert, software to make websites interactive without programming. She holds a Bachelors degree in Computer Engineering and is an active blogger.



Related posts:
  • Digg the Design : Web Design Site You Should Know/Follow
  • 50+ Sites to Promote your Portfolio, Web Design, Blog
  • 10+ Web Resources to Make Web Designers Life Easy
  • Building/Customizing your own WordPress theme: Beginners and Intermediate
  • 8 Web Usability and Best Practices for Beginners


65 Responses

  1. Clipping Path Service December 6, 2012

    This is stunning ! Beginner’s Guide

  2. Shamim cpz July 19, 2012

    Thanks for putting this list together

  3. Web Design May 10, 2012

    Very interactive for basics learner. good share Poonam.

  4. rekor kurye September 27, 2011

    thanks, i will share..

  5. Deepetch February 16, 2011

    Thats wonderful collection, Will come to your website for collection more info, Thanks for sharing.

  6. sydney web design February 3, 2011

    Wow! What a research! Thanks for sharing, i found it very useful!
    Keep on wiring great posts like this one!

  7. Ivan Tsankov January 31, 2011

    Thanks for the info!

    By the way, the last site was too ugly to look at. ;)
    Great fun!

  8. Diesel Engine November 6, 2010

    Is good way to say your point about it , and of course any beginner should read and document before starting anything so it wont fail from start.

  9. philwebservices October 13, 2010

    Great article! This will be a big help to all inspired web designers and how to make their designs more functional and interactive. Thanks for sharing.

  10. Rokaiya Yeasmin Munni August 13, 2010

    So nice design inspirations.

  11. That Flash Guy May 22, 2010

    Thanks for a great post, I’m sure this will be of use to me when designing and building my next Flash game!

  12. Brent April 28, 2010

    Very imformative post. You made some great points. This gave me some great ideas for for my design company.

  13. Barry April 16, 2010

    hello
    What are the differences between web design and graphic design and which career should I choose?
    Barry

  14. Barry April 16, 2010

    Hi really enjoyed reading your article and was wondering What is the difference between web design and web development? Which one makes more money on average?

  15. Neil | Orange County Web Design March 4, 2010

    Great Infomation looking for this.
    Thanks and Keep up the good work!

  16. Neil | Orange County Web Design March 4, 2010

    Great information was looking for this Thanks again and keep up the good work!

  17. Web 2.0 Images February 25, 2010

    This site has got some great web 2.0 images and they even have a sample pack that you can download for free!

  18. kurye January 24, 2010

    thank you very much succesfull artilce. pertect

  19. web design chicago January 15, 2010

    reat way for newbs to learn what works and what doesnt. Advances the design ‘game’ into the future..

  20. @orlandocr January 6, 2010

    “TechCrunch points out nine different ways to build you own social networking site.” Missing link!

  21. kre8iveminds November 30, 2009

    This is informative post indeed. Thanks

  22. Herman November 18, 2009

    I just recently added a free flash image rotator to a client’s web site. It really helped present their products in a cool way.

    Thanks for your examples.
    .-= Herman´s last blog : Top Search Engine Rankings Don’t Guarantee Success =-.

  23. Lee Corbo November 17, 2009

    Great blog post, I really enjoyed it. I’ve been trying the same thing and it’s pretty cool what a bit of motivation can go a long way. I found this blog by typing Texas Web Design just to let you know. Keep up the good work, I’ll bookmark this for future reference.

  24. steven November 3, 2009

    Just what i was looking for!

  25. carl November 2, 2009

    If you are looking for a fantastic selection os web 2.0 images, templates, Icons and more, please visit my website

  26. Justin Howley October 29, 2009

    Agree, there is so much room for improvement on design and navigation. But the age old what’s best for SEO always come up too.
    .-= Justin Howley´s last blog : Making your website an overnight success =-.

  27. balup4h October 27, 2009

    Nice Work. Thank you for sharing.

  28. Felix October 26, 2009

    Hi there,
    Please blog more about this. Very informative.
    Thanks

  29. Fashion Games October 22, 2009

    very nice article thanks for sharing

  30. canadian drugs October 22, 2009

    Great work, webmaster, nice design

  31. kurye October 20, 2009

    thank you for share

  32. clippingimages October 19, 2009

    WoW :) awesome post. Thanks for sharing this nice post. Really great for newbies who want to learn web design interactively.

  33. PelFusion October 19, 2009

    very well written and helpful post

  34. web design firm October 19, 2009

    Graphic Design Firms building is a technology entrepreneur and currently a Venture.
    .-= web design firm´s last blog : More Reasons Your Site Sucks =-.

  35. mark October 19, 2009

    Good read, always on the lookout for free seo software.

  36. CSS October 16, 2009

    You know what … all of you. Just go and get some life. Don’t you see whats going on ? I’m hoping there want be any web3.0 …

  37. kurye October 16, 2009

    very nice gread article thanks

  38. gawed October 15, 2009

    hi, how does this interactivity affects search spiders (SEO)? I was told that java and images and such are not read by Google and other search engines. do these tips take that in account or are you sacrificing ranking for visuals?

    • Kawsar Ali October 15, 2009

      It advised too not overdo flash. However, Javascript is does not harm your seo because its all in text. But “Java” might be bad for seo. It depends how you are using java. If you have your meta and keywords correctly then you should be fine.

  39. trinity7designs October 14, 2009

    This was very useful Thank you!
    Please feel free to give me feedback on my website.

  40. moto kurye October 14, 2009

    very goog thank you

  41. loan October 12, 2009

    cool nice site

  42. web design October 9, 2009

    See loads to do with web design at this URL

  43. loans October 9, 2009

    Very helpful post. Very clear commentary and suggested phrasing are most impressive, as are his and your generosity in sharing this explanation and example.

  44. Fashion Games October 8, 2009

    very nice tips. thanks for sharing ! keep up with your working ! i’ll be back to see more. :)

  45. Web Design October 8, 2009

    i must say the author really put a lot of effort in crafting this post. Looks like this requires at least 1/2 hours to compose

  46. tonybordonaro October 8, 2009

    thanks very informative …hope I can use some of it

  47. web October 8, 2009

    web 2.0 websites?

  48. knarl October 7, 2009

    Too bad this site looks like shit.

  49. Web design October 7, 2009

    Is that guy freaked out there are hands extending from his monitor?

  50. Clippingimages October 7, 2009

    Definitely an informative post :)

  51. Bendesign October 7, 2009

    Nice Work. Thank you for sharing. :)

  52. Mark Carter October 7, 2009

    Thanks for the showcase …. I’d forgotten about Metalab …. such a slick design

  53. Shane October 6, 2009

    Nice post, some useful tips.
    Thanks.
    .-= Shane´s last blog : Very cool Flash website? =-.

  54. Tim October 6, 2009

    Thanks for the tips

  55. Tim October 6, 2009

    Great tips. Thanks

  56. Hearing Aids October 6, 2009

    Great tips here. Thanks for posting this. It’s definitely important to think about what you want in a site when you’re creating yours.

  57. favSHARE October 6, 2009

    This article has been shared on favSHARE.net. Go and vote it!
    .-= favSHARE´s last blog : 30 WordPress Plugins To Help You Improve Your Sidebar =-.

  58. Fiona Regan October 6, 2009

    The more ways you can get a person to interact with your site the better. Video is also good tool to use.Some great site you have mentioned above will give them a look.

  59. Phaoloo October 6, 2009

    Nice guidelines for beginner like me. Interactivity is a key factor of an website now aside social media as well as other sort of promoting.
    .-= Phaoloo´s last blog : 11 Free Tools To Split Your Large File Into Smaller Chunks With Ease =-.

  60. Most Interesting Ideas October 6, 2009

    Nice examples of the interactive design

  61. Social Icon Library October 6, 2009

    Interactive websites are def the future of web design.
    .-= Social Icon Library´s last blog : Free Grayscale Social Icons Pack =-.

  62. Alex Kearns October 5, 2009

    Poonam, thx so much for featuring htto://gambolio.com

    We really appreciate it.

  63. Kawsar Ali October 4, 2009

    Poonam is an expert in her field. So no doubt some very useful tips here

  64. Sneh Roy October 4, 2009

    very useful stuff to keep in mind when doing UIs :) Thanks!
    .-= Sneh Roy´s last blog : 10 Free Dirty Green Water Textures =-.

Stay Connected

rss twitter facebook google

Search


Cheap Tablet PC

Our Supporters

  • Cloud Storage
  • Dedicated Server
  • Modern Furniture
  • Online Business Printing
  • Online Backup
  • Logo Design
  • Wow Gold
  • Secure and protect your business with SiteLock.
  • Festklänningar
  • Blogroll

    AnimHut
    Designmodo – Web Design
    Design Superhero
    Inspireyourway
    iBrandStudio
    OurTuts
    Skyje
    Stock Images
    Vector Pack
    365icon
    TexTuts

    • About
    • Contact
    • Contribute
    • Privacy Policy

    Copyright © 2008-2013 Desizn Tech