Blog

Circular navigation menus are not something that I use very often in eLearning design. I find that they don’t always allow for the most efficient use of space. This week’s eLearning challenge was to build some kind of circular menu, so I took this as an opportunity to try to solve the space issue.

I wanted to build a menu that would take up a small amount of space when not being used. When the menu was showing, I wanted it to be able to hold a larger number of menu items. More traditional circular menus that are located in the corner or middle edge of a screen have a limited area for menu items (90-180 degrees radiating from the menu). Therefore, I decided to build a menu that would move from its original location when opened. Behind the scenes, this would be built on the base layer and a single menu layer.

The Method

I started off with the basics: pretty standard hamburger navigation and X-to-close icons. Since they were going to be clickable buttons, I cut the icons out of the project and then pasted them into the states of 99% transparent circles. This is something new eLearning developers miss a lot- if you don’t make the area around an icon clickable, the user will have a tough time clicking on the three horizontal lines or X of your icon. Pasting the icon components into the states also means I can hide the resulting single item using just one trigger, rather than needing a trigger for each piece of the icon.

To take care of the movement part, I would need to use motion paths. Articulate released updates to the motion path functionality a few months back, which made it extremely easy to add and format the two motion paths I’d need to open and close the menu. I didn’t want the menu to disappear abruptly if the user decided to close out of it without selecting a lesson, so I needed the animation to be “reversible”. As a result, the interaction would be more complicated than just hiding the layer when the user clicks the X-to-close button.

In addition to to the movement, I also decided to have the menu icons rotate as they’re moving. Storyline can only rotate an object on entrance and exit, so I actually needed two versions of each menu item: one that could rotate and fade when transitioning from the other icon and another that stays normal while other things are happening.

With all of that in mind, this is what the finished product looked like in Storyline:

On the Open menu layer, the hamburger menu icon rotates and moves towards the center of the screen. Once it’s in the right place, it fades out and the X-to-close icon takes it place. The directions and lesson buttons quickly fade in, at which point the layer timeline pauses. The user can select a lesson, which would take them directly to a different slide. Otherwise, they can click the X-to-close icon, which resumes the timeline. This causes the directions and lesson buttons to fade out, a new (unnoticeable to the user) X-to-close icon to rotate and move back, which fades into a new hamburger menu icon.

The Result

View the interaction here.

If you’d like to play around with the source file, download the source file here. In my demo, the lesson buttons don’t actually go anywhere (although the triggers are there). I think a good next step for this interaction in an actual project would be moving the interaction to the slide master and using variables to track if lessons are complete so the menu can reflect progress. That would require adding “visited” states to the lesson buttons and having triggers change their states if the variable for each lesson is true.