Interactive Content enables the viewer to engage in an entertaining way with images, animation, video and sound through the use of exploration, making choices and being able to control the elements on screen for a given purpose.

If you can imagine it, the chances are I can make it!

Below are a few examples of interactive content, there is so much more that can be done, but this type of content is perfect for interactive learning materials, interactive information kiosks, large digital screens, entertainment and engagement on websites and many other digital environments.

Virtual Tour of Scarborough house

You will be able to use the MENU button to return here

About Ichabod Davenport

Search the home of the late Ichabod Davenport and search for clues in order to find the combination to unlock the wealth in his safe.

How does it work?

This uses mobile responsive and bespoke interactive navigation, meaning it will scale perfectly for any mobile, tablet or large screen display.

In addition to the virtual tour the riddles and answers provide an interactive experience for the viewer to enter the unlock code based on the clues in the virtual tour. The riddles and clues are provided randomly in order to provide a different ‘treasure hunt’ each time. All of these features work with standard web browsers and do not require any ‘clunky’ media players or plugins to run.

This is a very simple concept, we can go nuts with ideas for this type project.

What can it be used for?

This concept can be applied to many different applications on a website or interactive presentation such as virtual tours of buildings and environments or sequential informational content delivery. Every scene can be stylised as preferred and can include additional animated or interactive content, this is a fairly simple example, but can be expanded with as much detail and elements as needed.

Clairvoyant Mystic Maud Yorkshire clairvoyant psychic and tarot readings

You will be able to use the MENU button to return here

About Mystic Maud

Mystic Maud was once Scarborough’s premier clairvoyant until she was exposed as a fraud. Relive the classic days of a seaside tarot card reading from Mystic Maud.

It must be pointed out though that there are many other psychics and clairvoyants that are genuine and provide much needed guidance. Mystic Maud wasn’t one of them though.

How does it work?

This interactive feature utilises random elements in order to deliver the cards and accompanying narrative for the reading. Although if you have your cards dealt a few times you will notice everyone’s favourite the Death Card does appear a little more frequently.

What can it be used for?

This feature simply demonstrates how randomisation and particular rules can be used in any circumstance to provide entertainment or refreshing web content. This can be applied to many other different applications and uses on a website such as photographs, news features, advertisements and special offers.

SMS Von der Tann Scarborough Raid and Bombardment

You will be able to use the MENU button to return here

About Bombardment!

When I was at primary school (which is many years ago now) we did a project about the Scarborough Raid in 1914. I was fascinated with the project and still am with the historical events. I remember spending a whole afternoon in primary school drawing a picture of SMS Von der Tann. This is an interactive feature detailing the events of the Scarborough Raid.

How does it work?

I’ve worked in education for many years and this is an exercise on delivering content that provides a narrative (as opposed to a story, narrative and story being two different things).

A few years ago I produced similar interactive content for museum/school activities. This enables the viewer to explore further detail as they wish. This can be seen with the illustration of a U-Boat I have made also the profiles of the ships that lead to extra content. Likewise old photographs have been ‘brought to life’ with animation in order to provide a reason to look and study them.

What can it be used for?

A project like this can go much further, this is a small example, any of the other interactive elements you see across my website can be included in an interactive presentation such as this.

This type of interactive presentation is good for educational learning materials or any other scenario where a story is to be told through the use of a narrative. This suits websites, digital information kiosks or interactive screens.

Scarborough pinball and penny arcade amusements

You will be able to use the MENU button to return here

About BinBall

Can you get the crumpled paper ball in the waste paper bin?

A ball drop game that has been cross-bred with pinball and the old tat we collect over time in the garden shed.

Tip: Use the see-saw to start the ball rolling.

How does it work?

This is really less of a game and more an example to show how interactive content can react with other elements. Here the ball will bounce off objects and act independently. The radioactive blocks can be moved by the viewer to wherever they want and used to nudge the ball, (but I have made them a little unpredictable in their behaviour). Likewise everything on the screen can react to a press and operate simultaneously as opposed to one thing happening at a time, the cog goes backwards, the see-saw will dip either side, have a click around and see.

What can it be used for?

This principle can be applied to a very wide range of scenarios using graphics, illustration or photographic elements, there can be interactive restaurant menus, product demonstrations and simulations, even learning materials.

This is a take on pinball, and therefore a basic game, but if you want an array of objects that move and react to other elements or reveal and provide extra content then the principle is the same.

Aston Martin Martini James Bond

You will be able to use the MENU button to return here

About Double Agent

I love Bond films, always have done, a walk on a cold winter beach, then home for a large mug of coffee and a James Bond film…

Er… anyway, back to the real point in hand, this is an interactive feature that enables you to view a classic spy car in different colour schemes that relate to the narrative of Bond.

How does it work?

This demonstrates the use of 3D Modelling texturing techniques for the cars, a framework for providing a user interactive method of selection and incorporates the use of perspective that reacts to a mobile device and tablet when they are physically tilted. If viewed on a screen that doesn’t use tilt motion then the computer mouse pointer will engage the tilt effects.

Get tilting your phone or tablet!

…or get your mouse moving around the computer screen if you have an old 1990s Nokia phone like me.

What can it be used for?

This type of presentation is good for products, logos, general website meaty goodness, even car dealerships!

It is simply a method of providing a piece of user interaction in a more subtle sense with a physical tilt or making an object or scene stand out. It’s like witchcraft to be honest.

I have worked in education for many years and my Masters Degree (MA) in Digital Media focussed on utilising interactive concepts in order to motivate people to engage with content through exploration, narrative, curiosity and entertainment. With interactive content it is a combination of technical skills, creative development and being able to disseminate information in a manner that meets all the Learning Styles of individuals, something that lies at the heart of education delivery.

All of the interactive content I produce is web standard and will work in every mobile, tablet and large screen device without any additional plugins or viewers. The framework I use for this web content is the same used by companies such as Disney, Ford, Mozilla, Samsung, HP and National Geographic to name a few.

Important Note About Wordpress

A lot of people are using the Worpress framework now, which is understandable as it is super-easy and super-quick to build a website with. It has empowered everyone with the ability to build their own website, which is a good thing.

It does though have a lot of limitations, it is a block-based method of construction that relies on plugins for features. Although Wordpress provides an easy way to build a website the downside is that it is a bit of a leaky boat situation that constantly needs maintenance as these plugins self-update in the background and can knock out the functionality of another plugin when they conflict. That's the trade of you have to accept for having an easy to build website. Because of this (and other limitations) Wordpress does not like to play nicely with web standard interactive content as it retains limitations with certain functions and file formats.

So if you already have an existing Wordpress website there are a few things that can be done to get around these. I have a few nifty tricks to get this content to work with Wordpress, however there may be a bit of compromise with some issues or a task performed slightly differently as intended in some cases.

© 2020 Ben Nolan (graphicsandmedia.co.uk)

Interactive Content for Websites, Kiosks, Displays and Screen-based Devices