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.

Accessibility and how people view web.

Web is constantly changing and so is the way we access it.  Not only is there a variety of browsers that people like to use, there are also mobile applications and various accessibility issues to consider. This is something designers need to stay aware of when building any websites.

Mobile web use is popular, as many people have cell phones with built-in simple browsers to allow surfing the internet. There are also, of course, smartphones – fun and useful – which are becoming more available and less costly. Mobile web is dominated by Apple’s iPhone (and iPod touch) with Google’s mobile OS Android being a close second. This article reports Apple having a 60% market share of smartphone traffic in the US as of July 2009 and 45% worldwide. Android has a nowhere near as big of an influence – 12% US, 7% worldwide. Big companies continue to push their mobile web versions while new clever startups try to break through with innovative mobile applications. Mobile web is new exciting land that many people want to claim their stake in. Augmented reality is something new that is predicted to change the way people talk about social media, and that is thanks to mobile web devices.

Another thing for designers and developers to be aware of is the importance of accessibility on the web. Not everyone is able to view our sites exactly as intended – with beautiful graphics, videos, text just at the right size to make it prettiest, etc. Users have various needs. They can simply not have or desire to use certain technologies or plugins needed to view a site in all its glory – like a Flash viewer or Javascript. They might be visually impaired and need to set text much bigger than it was intended by the designer. A screen reader might be used. A site needs to make sense and be usable, no matter how it is viewed. There are several easy things to do to make web pages easily accessible. EMMA – Extensible MultiModal Annotation project from W3C and government’s Section 508 provide guidelines to help. There are also lots of tools online that can check sites, much like CSS or HTML validators, to see if accessibility standards are met (www.cynthiasays.com is one).

Making sites with good accessibility involves logic and common sense. When providing a video, for example, one should also link to a place where a plugin or player for viewing that video can be downloaded from. A user shouldn’t have to hunt for it on the internet. Images on a site should have proper descriptive alt tags (which is also a valid HTML practice). Main content should be placed high in the HTML code, so that it can be seen (if a site is viewed plainly, without CSS) or read (by a screen reader) first.

There are plenty of helpful development tools available, which makes coding beautiful and clear websites easier. When they are integrated into a browser, they make it easy to spot and and fix errors. Here’s a useful list of handy Firefox extensions, including Web Developer and FireBug, which are universally liked by many.

There is a lot to keep in mind when designing for the web. Not everybody views it the same way and many people will view it much differently than the designer did when creating it. In the end, it still has to look good, no matter how it is looked at.

More links:

Firefox extensions I couldn’t live without

Firebug – web development extension for Firefox