18 Enchanting Interactive Sites You Can’t Ignore

Some sites look good and some sites function well, but there are a select few that do both with an extra sense of magic.

These sites engage us on a deeper level, command our attention and take root in our imagination. They draw us into their world and make us forget our own — even if just for a moment.

In this post, we’ll analyze 18 sites with brilliant interaction design. We’ll explain how you can learn from them to be a better designer. 

Interactivity and enjoyment feed one another. In his book The Social Animal, psychologist Eliot Aronson explains that, when performing a task, a person is likely to justify the action in their head. This can easily lead into a self-fulfilling prophecy of the user enjoying any given site that they invest even a small amount of time into.

Interactivity does not always need to be about interactions — emotionally engaging content like videos or poignant visuals can achieve the same results. In this case, simply watching and/or reflecting on the content is the user’s role in the interaction. This experience is just as immersive — as anyone who’s ever seen a movie can tell you — and forms the same connection.

For a more detailed analysis of how to design interactivity and its best practices, as well as the techniques behind 9 other modern design trends, check out the free e-book Web Design Book of Trends 2015-2016. 

1. KFC: Colonel Sanders

Source: KFC: Colonel Sanders

We’ll start with a familiar name, KFC. This satellite site celebrates the life of their founder and mascot Colonel Sanders in a variety of different ways, including written history, oral history, music, videos, interactive maps, and even online games.

The entire site is joined through animation, with transitions between each area, starting with the site’s introduction. Interactivity is immediate, as hovering over the six initial choices creates movement (not to mention signifies to the user that these elements are interactive).

Source: KFC: Colonel Sanders

2.  AirBnB

Source: AirBnB

The popular travel site is a perfect example of interactivity without many real interactions: their video background is engaging enough. AirBnB depicts the magic in the everyday moments experienced when traveling, such as being woken by an excited child (above)

Much like a well-made film, these videos establish an emotional connection with the user. Aside from being fun to watch, the looping videos also serve the site’s business purposes: they establish some personal context around the service provided, and get the user excited about going on vacation.

3.   Lærepenger Quiz

Source: Lærepenger Quiz

While not as well-known as the first two examples, the Lærepenger Quiz nonetheless has a commendable grasp on interactivity.

Right from the start, the site features a catchy value statement and only one main call-to-action, focusing the user’s options. The value statement is key: aside from explaining what the site is about, it’s phrased in a way to generate interest — most people are naturally curious about how much they know about money, and would like tips on saving it. Notice which words are in bright orange.

Source: Lærepenger Quiz

As soon as the call-to-action is clicked, the site asks the user simple questions: name, sex, age, and location. While slightly boring, these questions are small enough that they don’t dissuade the user from continuing (the progress bar at the bottom removes more worry). The answering of the questions personalizes the quiz, generates demographic data, and deepens the user’s investment.

Source: Lærepenger Quiz

4.  Chanel: Café Society

Source: Chanel: Café Society

Chanel certainly knows how to create an atmosphere with their Café Society site. They combine video, still images, and poetically written product descriptions — all united with an interactive scrolling navigation — to immerse the user in an environment rich with the elegance and fashionability the brand is known for.

5.  Space Needle

Source: Space Needle

Scrolling in general is an excellent strategy for immersive interactions. The Seattle-centric site for the Space Needle shows off stunning visuals and displays content with scroll-activated, animated boxes — a far more entertaining method than simply listing facts about the city. Like we described in the free e-book Web Design Trends 2015-16 users aren’t normally accustomed to scrolling upwards on a site to learn more, but the navigation pattern works for this specific context because it matches the on-screen journey.

6.  Nest 100

Source: Nest

An art project unlike any other, Nest features pictures of personal objects donated by real people and a short, written description of the sentimental significance of each object. This alone would be enough to establish emotional connections with users, but the interactive design takes the experience to the next level.

Remember that this site is designed for art enthusiasts who probably appreciate a more avant-garde approach to interface design. The design works in this context, but definitely wouldn’t be suitable for a corporate site or ecommerce site.

Users can preview descriptions by hovering over stars, which reveal enticing descriptions such as “The most depressing thing…” or “I was nearly divorced because…” These curiosity-provoking statements lead to a zoomed in cluster of stars, with instructions for the user to “connect the dots” with their cursor to display the full object and story.

Source: Nest

The percentage of objects seen (with the word “achieved” to frame it as an accomplishment) give extra incentive to fully explore the site.

7. Beatbox Academy

Source: Beatbox Academy

Simple and straightforward, some sites like Beatbox Academy simply offer online games and tools to hold their users’ attentions. You can’t really show off the fun of beatboxing in a static format, so the beatboxing soundboard is a clever device to try out a few techniques. In doing so, they’ll more likely want to learn more and browse the site’s instructional products.

8. Aquatic Macroinvertebrate Collection

Source: Aquatic Macroinvertebrate Collection

Education facilities, too, understand the value of engaging the learner in increasing both memorability and enjoyment. In the case of the Aquatic Macroinvertebrate Collection, users can examine lesser-known species by zooming in and out of various body parts and reading the descriptions.

The effects themselves aren’t groundbreaking, but they definitely create the wonder of exploring something new and exciting. Never forget that it’s not about the best design, but the right design.

9. Do You Know YouTube from A to Z?

Source: Do You Know YouTube from A to Z?

Celebrating YouTube’s 10th Anniversary, this quiz uses a unique interface to encourage deeper immersion than other, more basic online quizzes. Going beyond clicking on the right word, users must drag and drop cute icons representing the answers into the “drop zone.” This system allows for creative and fun use of icons (instead of common text), and entices more user involvement with a drag-and-drop system.

Additionally, the entire site is rich with superb animation. The answer choices all shift and “dance,” creating visual delight while the user thinks on their answer. In between questions, the background expands and contracts, distracting from and thus easing the loading time. It’s a clever technique that we described in greater detail in Web Design Trends 2015-16.

Additional Examples
10. Cinderella: Past Midnight

Source: Cinderella: Past Midnight

11.  Cybeer Bar

Source: Cybeer Bar

12.  The Happy Forecast

Source: The Happy Forecast

13. Mammut: Project 360

Source: Mammut: Project 360

14. Browser Awareness Day

Source: Browser Awareness Day

15.  Make Your Money Matter

Source: Make Your Money Matter

16. House of Borel

Source: House of Borel

17. Inside Abbey Road (by Google)

Photo credit: Inside Abbey Road

18. Beoplay

Photo credit: Beoplay

Conclusion

A main goal for any website (or movie, or book, or any piece of media, for that matter) is to establish a connection with the user… and interactive design is one of the most reliable routes there. The difference between low and high interactivity may seem like only a few extra clicks, but the effects on the mind are much greater.

The extra emotional investment makes the difference between using a website, and experiencing one.

If you’d like to create similarly delightful and usable sites, feel free to start prototyping with our custom animations editor. No code required, your imagination is the only limit.