The fun of interactivity.

Creatively done interactive content enhances a website. It turns a simple, one-dimensional site into an environment that a visitor can play with. When it’s really fun or clever, people will return to it again and again. It might even be something worth sharing with friends through email or IM so that other people can also see it. There are many amazing sites that implement an interactive element well. Here are just two of them.

We Choose the Moon (www.wechoosethemoon.org) is a spectacular Apollo 11 mission site brought to life by The Martin Agency and John F. Kennedy Presidential Library and Museum. Through rich audio and visuals, it recreates the moon landing in front of the audience – you.

The site was launched on July 10, 2009, exactly 40 years to the minute after the original mission took place. The real-time re-enactment spanned 4 days and enticed people to stay at the website, look at images and videos and check back often for updates. The actual continuous NASA transmissions served as background sound. It added an impressive sense of reality and made people want to stay on the site to just listen. Some people on Discover Magazine blog mentioned minimizing the website and letting the audio run in the background while they were doing other things.

The site is divided into 11 stages that guide you through the mission, starting from the launch from Earth, through landing on the moon, to eventual return. Each stage has a mission tracker, which lists some vital stats and a way to skip through all the stages. There is also a status window and a short transmission transcript that keeps track of important parts of the audio. Animations show Apollo 11’s journey through space. Videos and images of the original mission add another layer of authenticity. After going through all the missions, the viewer gets a pdf certificate they can download and print.

Hailed as the best of show in HOW’s Interactive Design Awards, We Choose the Moon is something more than just an impressive Flash site. It is a lovingly-crafted user experience. It lets the viewer be immersed in a story and forget they are visiting a website. A full-screen option certainly helps to get rid of distractions, like browser window edges and computer’s task bar. The user is given several choices: to either make the website full-screen or no, to keep background sound or to turn it off, etc. This is important, since people don’t like being forced into things and sometimes sites automatically make those choices for the user. That can be irritating.

The Red Interactive Agency (www.ff0000.com) uses interactivity to promote its services. It’s a Flash site that entices users to play and explore it as soon as they enter. Visitors can customize their own characters and chat with others, but they don’t have to – it’s optional. While being a fun environment that people will want to revisit, it also showcases the agency’s talent.

The Red Interactive Agency, as expected, specializes in interactivity. Giving a sample of the kind of work they are capable of is great. It is impressive already, even if a person never even ends up on clicking on any of the navigation.  It’s also an example of a site that uses Flash with a clear purpose in mind.

3 designs and their critique.

direction 1 – brown and pink

This design is made with a warm, feminine mood in mind. It is delicate, set in pinks and browns. It is targetted at women, so it could alienate a male visitor. It has two layers of navigation: main and secondary. While useful for a site with a lot of content that needs to be organized, it would be unnecessary for a small simple site.  There is a blank space on the right side of the design that was planned for extra content, which content should be put in to show how it would be organized. The logotype, while clear and simple, might benefit from another design element, like an icon.

direction 2 – light blue and navy

This layout is set in light grays, blues and navy. It is more neutral and unisex than the previous one. While staying elegant and wedding-themed, it uses a color palette that isn’t necessarily girly. The design has only one layer of navigation, which would be suited for a small simple site. There’s a limited amount of navigation links that can fit in the space provided and still look well, so it wouldn’t be suited to a big site. A shortcoming of this design is that it looks a bit generic and requires of the content to clearly show that this is a wedding boutique website.

direction 3 – light gray and pink

This design looks like a start of something nice, but something that is not completely fleshed out. Its pink-gray color scheme is delicate and neutral enough to appeal to women but not turn away men. It’s very simple and doesn’t have many graphics.