20 tips for interactive designers

They say we learn from our mistakes. That's certainly the case when working across web, TV and DVD - over the course of a number of years, you'll pick up more than just a little insight into what works and what doesn't.

To help prevent you from making some of those errors for yourself, we've put together the following guide. We've gathered some great interactive design advice for use on websites, DVD menus and interactive TV content. We've also asked a few industry experts to contribute their own tips into this interactive mash-up. Forewarned is forearmed, so read, absorb and take note of these tips and you'll be an interactive design guru before you know it€

1 Aim at your audience
Be mindful of your target audience. Get to know who they are and what kit they use. It's a disaster if you're making a full-on interactive site using the latest version of the Flash Player - with all the bells and whistles available to you - if most of your audience won't see any of it because they still have Flash Player 6. It's also good to bear in mind those design features which are available only in Flash 8. Bevels, glows and drop shadows can be cool, but not if they can't be seen. Don't fall into the trap of thinking that viewers with anything less than Flash Player 9 will see your designs without the effects, because what they'll actually see is a large white area with nothing in it at all!

2 Keep focused
Tom Harding, designer at WeeWorld believes that you can avoid losing focus on a project by asking yourself a series of questions related to the project. "Be it for the web, a kiosk, CMS, DVD or mobile, these questions should apply: Who will use what you're creating once it's complete? What environment will they be in? What tool will they interact with and how will this affect the design? Most importantly, what information or experiences do they want to gain from interacting with your project? Ask yourself these questions again and again throughout the development of your project to see if you're still on brief," says Harding.

3 Test your site
User testing can be a painful process. You may think anyone who can't find that button back to the homepage is an idiot, but it's good to identify these issues early on. Find out how user-friendly your website, mobile interface or DVD menu is, by getting your friends and family to test your work for you. Listen to their opinions and act on them. Be sure to test your interactive designs on different types of set-ups too. DVDs should be tested on widescreen and 4.3 TV sets and home computers, and websites should be previewed on different browser set-ups and different screen resolutions. This is vital for any content that can't easily be withdrawn, such as on a DVD.

4 Make it simple
Visitors to your website should be bowled over with its richness of design and interactivity. When it comes to signup forms or search boxes, however, keep them as straightforward and as obvious as possible. Ask only for pertinent information - don't request people's life stories, because interactivity should be fluid and immediate.

5 Boost your rankings
When you finish building and designing your all-singing all-dancing website, it's not much fun if only mum, dad and your best mate come to visit. Ensure all the important keywords appear in the title, description, Alt tags and content of your web pages. This will improve your keyword density and, in turn, will boost your ranking in the search engines.

6 Keep up with new technology
Tom Kershaw works across all of the BBC radio websites. For him, education is key to creating successful interactive sites, as he explains: "Keep up with new and emerging technologies. This doesn't mean going home and studying - it could simply mean subscribing to your favourite magazine, or keeping an eye on some current websites. Some sites that are worth checking regularly are A List Apart, Zen Garden and The Web Developer's Handbook - the Swiss Army Knife for web development. Keeping up with new technologies might mean using AJAX to make the user experience faster, easier and more fluid, but whichever way you decide to use these tools, they'll be shaping the web above and beyond the 2.0 era as we move towards a more desktop-like internet."

7 Font types and sizes
Designing for a computer screen is not the same as designing for interactive television or DVD. There's a greater viewing distance for a TV, so fonts need to be much larger than on a computer screen. 12pt text simply isn't going to work, so keep your font sizes at 30pt minimum. Be careful with serif fonts too -televisions flicker because of interlacing, making serifs hard to read, so use a font designed specifically for television or one that's a slab serif font. Have a TV monitor hooked up from your computer so you can use it for testing purposes. This is not only good for testing font sizes but will also enable you to check colour temperatures. The difference in these between TV and a computer can be quite shocking - computers have a much higher resolution and display colour temperatures differently.

8 Think modular
Use the 'loadMovie' function in Flash to load SWFs. These will enhance the user experience by cutting down on initial site load times. Create a container movie and from that load movies in and out of it. This makes the experience of using the site more seamless and 'interactive'. Don't put everything in one SWF - the lengthy load time alone will make visitors go elsewhere. Images, video and content SWFs should all be loaded on demand.

9 Be creative with layouts
'Functional and usable' doesn't have to translate into 'duller than dishwater and boring'. The challenge of being a designer of interactive content is to find a middle ground between great functioning interactivity and inspiring, original creativity. Experiment with different layouts and schemes until you get a balance of content and functionality - in other words, wow-factor visuals and intuitive navigation.

10 Correct ratios
Computer screen pixels are square; on a television they're rectangular. Photoshop enables you to create graphics in the correct ratio by selecting Image>Pixel Aspect Ratio. Here you can make sure that circles don't become ovals when viewed on a TV set by switching between square and rectangular pixels. Try and get into the habit of using this tool because it takes the guesswork out of creating graphics across different types of media.

11 Interactive menus
Mark Bulley, web producer for Square Enix, has recently completed work on the site for the PlayStation 2 game Kingdom Hearts. He's got this advice for designers: "Make use of interactive menus within your site, because these bring depth and make your site stick out from the rest. On the Kingdom Hearts site, I used tools such as 3D Studio Max, After Effects and Flash to create a fluid carousel as a navigation device for the site. I used a lot of modelling, texturing and rendering to achieve this effect, which, although time consuming, pays off with the visual effects you can achieve."

12 Compress video files
Sorenson Squeeze is a piece of kit which is a lifesaver for anyone working with video delivery on the web. It's an amazing video compression suite which uses the Sorenson Spark codec to make mincemeat of bloaty video files. Export as Windows Media, MPEG 1 and 2, QuickTime, Real, SWF, FLV and AVI. Streaming media can also be exported and videos can be trimmed before you export them.

13 Make DVD text clickable
Bear in mind that DVD menus are also used on computers and controlled by mouse-clicks rather than remote controls. Some DVD interfaces use highlighted graphic areas rather than clickable text on screen and these can be quite hard to find when using a mouse. When designing menus, ensure you make all text next to your buttons clickable. This will remove the pain and frustration experienced by computer viewers desperately trying to figure out where to click on a menu screen.

14 Improved preloader
"Skip intro?" Well, okay, I will. It's disheartening to think of all those finely crafted animations being ignored across the web, so you need to be a little smarter with your Flash work. Stop the madness of looping animations and create a preloader whose animation changes as more bytes are loaded. The result should be functional and more visually interesting, rather than an intro movie which comes across as a hindrance for the visitor.

15 Push the limits
"Keep the design nice and simple"? Nonsense. That's a phrase which often just means, "We couldn't really be bothered to do that much design work." Just because a menu system or layout looks clean and simple doesn't mean it adds anything to the visitors' overall experience. Stretch your creativity to the limits and make fantastic eye-popping menu systems which fit well with your overall design. Interactivity should be about fun, excitement and pushing the limits. Just remember to make your layouts and menus logical and intuitive. Nothing original was ever achieved by following the herd. Be experimental and break a few moulds.

16 Website structure
Oliver Davies is a project manager at FremantleMedia Ltd, where he works on TV properties such as Neighbours, The X Factor and The Bill. "Getting the information architecture right on the websites is vital in creating a good user experience," says Davies. "Be clear about the site's aims and who your target audience is. Write each content type on a Post-it, work out what's in, what's desirable and what's out. Take the definites and maybes and group them into related subjects. Name your Post-it 'piles' and use them to draw a structure diagram for the site, like a family tree. This will help you work out a logical onscreen navigation system."

17 Formatting Flash text
Be innovative with your designs. In Dreamweaver use the Flash Text option for formatting display type. This allows you to use unique face fonts for titles and headings. Flash Text ensures that your visitors will see your headings the way they were originally designed.

18 Keep it brief
First-play movies on DVDs are the ones that take you to the menu screen after you pop the DVD into a player. Some of these are amazing. Rendered in 3D or animated in After Effects, they're sometimes more fun than the movies themselves. But some of them go on and on and on. Keep first-play movies less than 20 seconds long and menu transitions down to five seconds maximum. Show off your animation and 3D skills by making your video menu screens longer. These are the screens which will be seen for the longest duration by viewers (your first-play movie will only be seen once) so it makes sense to invest more time and energy in this area.

19 Remember your gran
With our televisions getting bigger and better, many of us have become familiar with widescreen TV and surround sound. But not everyone has the latest kit. All that fantastic content is being delivered to some poor souls who stick like barnacles to their outdated equipment. So you should remember the 'Granny with the black-and-white portable' rule when creating video content for your websites. Believe it or not, there are still people who connect via narrowband, so be sure to have an option available for a 56kb video download.

20 Give your visitors the choice
Be warned! If you're building a website which has a movie player on the homepage, don't have the video player set to auto run. Your bandwidth will be zapped and your hosting bills will go through the roof. Every time your homepage is loaded, a video is served and bandwidth consumed. Save your pennies and have the video on pause or have a filler image in its place with a 'Click to play' option. By leaving this choice with the visitor, you also enhance the user experience by not bombarding them with your video content.