Battle Of The Atlantic – Application – Interactivity

In this post I will showcase some of the designs I have created for my application, for the interactive buttons, and roll overs that are used on the mock-up for my application and my secondary time scale.

Interactive Button – Roll Over

Below as you can see I have attempted to recreate an old WWII radio, this will be an interactive button on my application, The reason I have chosen to do it like this is because I loved the idea of using wreckage from the actual ships as interactive buttons. The only reason I have not used actual images for my buttons is because they did not fit in with the application, so I created this icon.

Once you click on this interactive button a video or an audio clip will play, and go into a bit more detail about a subject it will be floating next to. Accompanying these buttons will be a short piece of information, this gives the user and option between reading about the subject or watching or listening.


Here you can see what the interactive button looks like on the application, I have positioned them so it looks as though they are floating around to the sides. The white really makes the icons stand out from the background as well, which is very important when it comes to spotting the buttons. I have also added some radio signals coming out of the side so it looks as though its active.


Bellow is one of the roll overs, it comes up with a video that goes into greater detail about the subject the interactive button is floating next to. My idea behind the roll over was, to black out the background when the video comes in, because like the idea behind the wreckage being my interactive button, I wanted it to look like old oil coming from one of the ships.


Time Scale – Secondary Time Scale

The inspiration for my main time scale came from guide lines that divers use when they go deep-sea diving, I wanted it to be central to the page and its as though your following it down to go and check something out under water. My main inspiration for this app was to make something that was visually immersive in that way, its kind of like your going under water to discover the wreckage of the battle yourself. On the top of each time scale is the year, that looks like a red flashing light that stands out among the rest of the application, this is so its clear you know what year you’re in on the app. As you can see below is a picture of my main time scale.


After creating the main time scale I decided the user needs to be able to transfer between the years a lot quicker than just scrolling down the page to each year individually. So I came up with this secondary time scale inspired by a pressure gauge you will find on board of a WWII submarine, I loved the idea of keeping it attached to your screen as you go down like it’s a piece of your apparatus for the user, and as you go down the dial slowly goes up, but you can also click on the years to quickly shoot down to a different year. Its like your going down in time as the dial goes up, as though its building up pressure, as a submarine would do if it was going deeper and deeper under water. Just below is my secondary time scale, and below that is the pressure gauge I based it off.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s