Interactive Maps

Click on the image to view the demo

The Challenge

The Articulate E-Learning Heroes weekly challenge #86 Interactive Maps:  Where Do You Live? challenged participants to “show us where you live by creating an interactive map of your town or city” using any combination of photos, audio and video.

The Design

I chose to recreate the look and feel of Google Maps for this design.  Halfway through this project I began to regret this decision a little as Google Maps is so extensive in its functionality, but pushed on and focussed on designing some of the elements, not all of them.

There was a lot of learning that came out of spending the time on this design and although there was little scope for creative expression in a visual sense, I  found the challenge of working with the existing look and feel very rewarding from a technical perspective.

I deviated from the standard Google Maps a little by thinking laterally about some of the elements that I couldn’t recreate from a technical perspective, such as the login icon at the top right of the screen.  I thought it was a good opportunity to change the standard “Apps” icons and add links to my website, WordPress and social media sites – some shameless self-promotion here!

The Process

I started this challenge by looking at interactive maps others had created and came across a whole range of designs – some very engaging.  I bookmarked these resources in diigo with the tags “interactive” and “maps” and started on my design.

Choosing the destinations and attractions for each of the maps was the fun part.  Melbourne is my home town – and one of the most liveable cities in the world.  There are many, many attractions and tourism is a big industry here.

Here are some of the things I discovered about the functionality and effective use of Articulate Storyline 2 during this project:

  • If you have images or elements you will be adding to more than one slide or layer, try to finalise the look of these before getting too far down the track with copying and pasting – otherwise you end up spending too much time revisiting each slide or layer to incorporate the changes.  This design has two main slides, with each slide having separate layers for each destination or attraction in both the “Map” view and the “Earth” view – plus the initial navigation layer to display the “Explore” images.  Even minor changes to any of the visual elements or animations meant revisiting each of these layers for each change
  • There are things you can and should do to achieve a clean visual effect.  I used the “Align Middle” and “Align Centre” options to line up objects and elements and with the photo images in my “Explore” toolbar I used the “Size and Position” setting to make sure each of these was exactly the same size.
  • I had never used the “Wipe” animation before – applying this to a line shape was something I learnt during a presentation by Veronika Budnikas at the first Melbourne Articulate User Group meeting.  This worked perfectly for recreating the effect from Google Maps – thanks Veronica!
  • When the learner will be choosing their own way to explore the interaction and functionality allows for them to re-explore slides and layers, if any slides or layers have animations attached to objects, such as the “wipe” animation I used on the line in the explore layers of the map, set the “Revisits” option for each of these slides or layers to “Reset to initial state”, otherwise the animation won’t play after the first visit
  • By using object “States” wherever possible in preference to “Layers” you can save time by not needing to create a myriad of layers and complex triggers – an example of this is the Apps Grid at the top right of the screen – by using a State to display the “Apps” images I was able to easily achieve the interactivity I wanted for this element – the bonus of which was that by using the “Selected” state, a toggle effect is achieved to view and hide the Apps images

The Result

I was glad I persevered with this project – we all use Google Maps, but until I began breaking this down and recreating the interactive elements, I really didn’t appreciate the complexity of this application.

As this was an exercise is recreating an existing interactive interface, I think my focus on attention to detail has shown in final product.

As pointed out in the overview of the challenge, “Interactive maps put users in control so they can visit the locations they’re most interested in” and as opposed to creating a virtual tour, this final product definitely puts the learner in complete control.  There are lots of interactive elements to explore and discover, including hyperlinks that take the learner out of the course to external resources relevant to the destinations and attractions that make up the design, so it is not only functional, but educational as well.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s