When Highly Interactive Websites Work

Every website today should have an interactive design on some level. Why? In simple terms, interactive design makes a connection between the digital world and humans. Basically, interactive websites are designed for easy use. And who doesn’t want a website that users navigate confidently?

Interactive designs provide quite a few more benefits than just user confidence. They help with organization of a large amount of content. Interactions also increase time on site, meaning that people spend more time learning about a service or product. This in turn increases the chances that they will use the services or products.

Now, a great many websites probably only need anywhere from a small to a medium amount of interaction to create that connection between a website and a human, for instance, clickable buttons that change color or animate when hovered on. Only a few need the high level of interaction such as the examples I discuss below.

No matter the amount of interactive elements on a site, though, all should follow some guidelines:

  1. Know Your AudienceJessica Moore, interactive designer for AfterCollege, emphasizes the importance of first knowing the audience for whom you are designing and also the constraints of the design. Otherwise, it will be quite difficult knowing how much and what type of interactions you need.
  2. Learnability – a complicated interactive website will only end up frustrating users and defeat the purpose. So make sure that interactions are easy to learn. Use signifiers that give clues on how each piece works.
  3. Consistency – make sure that interactions remain consistent throughout the site. This also means that interactions should be consistent with what users have experienced on other sites, although you can vary a bit if you stick with the learnability principle.
  4. Feedback – every interaction must provide feedback immediately; too much of a delay and users will get frustrated. Also, don’t forget to remain consistent with the type of reaction. Here’s a very simple example: if your signifier indicates that a button that says “See More” is clickable, make sure clicking on it will lead users to learn more about that actual section they are reading.

As I mentioned above, all of the following examples are highly interactive websites, meaning that users have to really get involved to navigate the site. Take a look and see if you agree that each of these stick with the guidelines common to interactive design. And also notice what types of websites work well with a high rate of interaction.

Bugaboo – Design Your Own

A great many websites allow you to choose the color of an item if different colors are offered. But what I love about Bugaboo is the way they set it up. They make users feel like they can “design your own” stroller, etc. In the screenshot of the Bugaboo Cameleon above, users are able to choose the type of frame, the hood, and the seat by clicking on a color/texture wheel. When users click on the wheel, the wheel spins and that section changes to the color clicked on. I spent way too long on this site because it was fun, easy to learn, and gave me a feeling of ownership with my designs…perfect ingredients for reeling customers in to a purchase.

Lærepenger

This website quizzes users on their money knowledge, except that it’s not just a normal “click on the circle” type of quiz. Choosing the right answers requires drawing circles around answers, drawing lines to match items, using a slider to select the right amount. With the beautiful graphics included in each section, this is one quiz that most anyone wouldn’t mind taking!

Void

An online experience created by the creative agency Hi-Res!, Void allows users to hold down the spacebar to browse through different aesthetic, animations. All sections allow users to create their own experience, either by uploading images, dragging to create new shapes, clicking on different options, and more. And it runs surprisingly smoothly, something not always found with highly interactive websites.

The A-Z of YouTube

After 10 years of being online, YouTube created a promotional interactive website to celebrate with a quiz on the most popular videos from A to Z over the years. Again, this is one fun quiz with cute graphics you have to drag into the circle to correctly answer the questions. Get the correct one, and you get to watch the video. Interactive websites like this one are an excellent way to build a sense of comradery among users, a sense of feeling a part of something big, and these feelings lead to loyalty and an increased use of the product.

#EspritCox

This Volkswagon website targeted to French customers helps users choose the right model of Beetle for them. Users are shown a variety of Instagram photos, and they choose either Like or Don’t Like when each one is shown. Once five Likes have been chosen, a model is shown as a result. A caption that explains the reason for the match (pictures=user’s personality=a model that expresses the personality). One of my favorites is the signifier that occurs when hovering over the Like and Don’t Like buttons: a heart or an X is sketched over the picture while the buttons themselves dance.

Ava Sessions

interactive-websites-ava

What a better purpose for highly interactive websites than to build hype for a blockbuster release? The Ava Sessions is just this: a website built to get users excited about the release of the Ex Machina movie (April 2015). The movie is about a female A.I., so the website is created as if seen through the eyes of an A.I. observing you, the user. It asks your name, how you feel, and then it asks to take a picture of your face. A drawing is rendered in real time, with an analysis of your mood and other personal information displayed on the side of the page.

Dennis Video

Another excellent reason for a completely interactive website: to experiment while also showing off some killer skills. The Dennis Video website is an interactive music video experience. Animations interact with music from Popcorn_10 as well as from the user. As a user moves the cursor around the screen, the real time video reacts, providing a purely unique experience every time. This amazing website was created by Always & Forever using Javascript in WebGL. Be sure to check out their cool interactive graphic on their contact webpage as well. After clicking on the graphic a few times, it pops back into place, colors change, and new musical sounds are heard with each click.

Migration in the Census and in the News

Sometimes statistics can be quite boring to read through. Graphics help a lot with the mundane processing of dense information, but what about adding in some interaction to help organize information better? This is exactly what the SeeingData website does. Users get to choose what information they want to see about UK migration by clicking on links and qualifiers for each section. And the graphics are gorgeous and animated, making the content even more aesthetic. This website is one of the best examples I came across for just how incredible interactive design can be for organizing a wall of information.

Crea Carte

A contest is always a great way to build awareness of and a loyalty around a product. This is exactly what this credit card design company has done with a design contest, except in this contest, users create a design with an interactive program on the site. By using a drawing pad, a color and texture palette, and the mouse to fine tune the shape, users can create their own design. The company will use the winning designs on cards.

Inside Abbey Road

Google Creative Lab designed quite the online experience of Abbey Road, world renowned recording studio. For the first time ever, music enthusiasts can now catch a glimpse of the inside of the studio and learn about different tidbits of information by clicking on various floating buttons. Users can even try their hand at mixing different recordings. The only drawback is the slow load time, quite a disappointment for a website built by Google. However, the entire concept is incredible and an excellent idea for any top company that wants to create hype around its business.

The Witnesses

This is another great site that uses an interactive game for building anticipation of a popular French TV show, The Witnesses. Users can move around a crime scene in the room, finding clues to help solve the murder. The reward is that users get to watch the first episode – what a clever way to get an audience excited about a show’s upcoming season! This WebGL experience is amazingly smooth and fast loading; plus, it looks incredible. As users click on a clue, it is added to a transparent list on the right side of the screen. All of the movements were easy for me to learn rather quickly, making it easy to jump into the game right away.

Interactive Websites Work

As I mentioned above, most websites do not need to be as highly interactive as the ones above. However, those that are heavily interactive should certainly take care to follow common guidelines for interactive design, as the ones above do.

One last point I want to mention are the purposes of these highly interactive websites. Did you notice that most were mainly for extra promotion or bringing awareness to a cause, company, or product in a unique way? A high rate of interaction only works if it doesn’t distract from the message the website needs to get across, and this is why knowing the audience and the constraints are so very important before any prototyping has begun. Know the who and why and you’ll be able to determine what level of interaction is best for your design.

Do you agree that the websites above are good examples of highly interactive designs that work?

For Similar Articles, See:

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

Comments are now closed on this post.