In honor of the Super Bowl, the ELH Challenge of the week is to design a learning interaction to teach one or more football concepts. I’ll admit I’m a bit late to this challenge. The Super Bowl was two weeks ago and the New England Patriots pulled out and impressive win. However, after seeing this interactive infographic on the International Violin Competition of Indianapolis, an idea started percolating around showcasing the Lombardi Trophy (aka the Super Bowl trophy).
The infographic has a large picture of a violin along with bits of information about the competition. On the left are navigation buttons. As each button is clicked the violin image and info bits scroll up or down based on which button is clicked.
images © IndyStar
I like how the image of the violin scrolls and the parts of the violin are labeled. I originally thought I could do something similar with the Lombardi Trophy, 
but I decided that wouldn’t work. The Lombardi Trophy doesn’t have different parts like a violin, so the scrolling wouldn’t have the same effect. I decided to scroll the info about the Lombardi Trophy instead. So, the next challenge was figuring out the best way to do this. I didn’t just want to show different layers. I wanted to show the actual “scrolling” effect, both up and down. Rather than the complexity of seven different buttons like the violin interaction has, I opted for two buttons, up and down.
In order to create the “scrolling” effect I used two line motion paths. I say paths, because I had to create an up path and a down path and make them both relative to the start point. For more information on creating motion paths in Storyline 2, check out Articulate CTO Arlyn Asch’s short video tutorials.
In order to make the scrolling effect work, I had to group all of the images and text in one big block. The tricky part with this was tweaking the amount of space between each section and the length of the motion paths in order to have each section scroll up or down to the same section of the slide. Needless to say, I don’t want to do this again anytime soon. This required a lot of nudging to make sure the text didn’t go too far up or down. However, once the all the nudging was finished the effect looks good.
Other Thoughts
I could have done the same type of interaction with a scroll bar, but I wanted a cleaner interface. Plus, when you drag a scroll bar you see the content “drag” with you. I like the simplicity of up and down buttons for moving from section to section. After publishing this project I realized there might be some confusion as to which button (up or down) scrolls which way. I think it was a case of being a SME about the design. I knew it so well that I thought everyone else would interpret it in the same manner as I did. I designed the interaction so that clicking the up arrow scrolls the text up. When I stepped back, I saw that clicking the down arrow may be the more intuitive choice to move to the next section of text, much like clicking the right arrow assumes “Next” and the left arrow assumes “Previous or Back.” What do you think?
Nicely done, David. And thanks for sharing your process! I was wondering how to accomplish something like this in Storyline. Very interesting thoughts about UX too. For sure this is the sort of thing that would benefit from some user testing to make sure it was intuitive.
Thanks for the comments Kristin. Definitely needs some more work, but it was fun to play around with. The other thing that I would try to fix is the “endless” scroll. I’d like to stop the ability to scroll up or down when getting to the end. As it stands you can scroll up or down until there is no content on the screen, which obviously isn’t ideal. 😉 Maybe this could be done with variables and triggers? Or some Javascript magic? Anyway, glad you liked it.