Working on Articulate challenges offers a wonderful chance to be creative and to try new things out with Storyline 2. I don’t get the chance to participate in the challenges as much as I used to but couldn’t resist after reading the post “Give Your Course an App-Style Navigation #107“. The goal of this challenge (from 2 months ago) was to design a navigation menu for use on a mobile phone or tablet. The entry could be designed to run on a mobile device, or it could be larger for demonstration purposes. That is the wonderful thing about challenges, you can join them any time you want!
I have a Samsung Galaxy S5 and decided to see if I could develop something that looked good on that specific device. I can’t vouch for how it looks or works on other smart phones but it appears to work well on this one.
For the topic, I pondered several ideas but decided I wanted to use something that had a “real-world” application. To save time and focus on the actual design, I also wanted something I could pull from an earlier challenge. One of my favorites was a smart phone video project that my daughter and I did when I first joined the Articulate community. This involved a 5-step process we used to make one of her favorite’s…guacamole dip! I wanted to take what we did earlier and reformat it, modernize it, and give it an app-style navigation feel. To see the final result click the graphic; otherwise, keep reading to learn about how this was built in Storyline 2.
For navigation (see the image below), I built an off-screen menu (#1) and an on-screen menu (#2). Accessing the off-screen menu should be very intuitive since it appears on many mobile apps and drops down after you tap it as shown in (#3). Another tap and it disappears like magic! For each of the steps, I added previous and next navigation along the top (#4 and #5) to allow the user to move back and forth between the steps.
Under the hood, each step was designed to fit on its own slide. To save time, I just copied the menu layer to each slide but this could be added via a master slide to make the process more efficient. It’s short and sweet but I had a lot of fun building this quick mock-up. From start to finish, it took me approximately 1 hour. The home screen graphic was provided by 123rf.com. The videos were recorded using two i-Phone 4s.
Although this provides the steps necessary to make a tasty dip, you could easily modify it for any step-by-step task within your organization!