Custom Menu in Storyline 360 Desktop vs Mobile
Jan 22, 2017
By
Todd Haynes
I was wondering how developers are working with their menus in desktop and mobile courses for Storyline 360.
I typically include a custom menu in my courses (i.e. a button in a top horizontal header that triggers a layer to appear) and disable the default Storyline menu feature. However, in a responsive player (i'm really thinking smaller phones), this custom menu is probably going to be too small to be usable. In that case, I'd like the Responsive Player to display the default menu (hamburger).
How are you all handling your courses with custom menus and the responsive player via HTML and mobile playback?
18 Replies
This is a great topic...
I am trying to find out if you can force the mobile menu (hamburger style) on the desktop version.
Hi again, Justin! Just linking these two discussions for anyone who comes across.
You can use a topbar tab for your Menu in your Player Properties to get the Menu out of the way until the learner clicks on it. We're looking into a feature request for adding the responsive player design seen on your mobile devices to the desktop version of courses as well; others can add their voices in a request here!
Todd - I also think this is a great discussion topic, and we're interested to hear how folks are engineering their courses!
Thx Crystal, that's the direction we're going - putting the "standard" Menu in the topbar.
BTW, I've played around with various templates/players for a few days. Because we're deploying on multi-devices, we're probably going in the direction of using the standard player features for Menu and Prev/Next buttons. That counters years of my tendency to build custom UI's with menus and navigation buttons.
You have to have the default player "menu" enabled in the player when you publish to get the Hamburger menu visible in HTML5/mobile playback correct? In some mobile playbacks, such as phone w/h portrait mode, a custom Menu and Next/Prev buttons might become too small for users to use with near 100% reliability.
Hi, Todd. Yes, that's right. You'll need to enable the Player features that you'd like to show.
I agree with the previous comments. What I'm finding is that if I turn everything off for a seamless player and use completely custom navigation, the responsive players look ridiculous because it just gives an extra bar with nothing to click on.
I too would like to see the option to use the hamburger menu design on the desktop version.
For now I expect we'll use at least the Menu feature and customize it to only direct to certain sections of the course.
Is there a way to edit the story.html5 file to force the responsive player on non-mobile devices? That would be an easy solution.
I'd like to see Pedro's suggestion, both for the ease of use and also for the design aesthetics - the responsive player feels more modern... no matter how much you style the full player it feels like something that was designed a while ago.
Hey Richard,
Looks like I replied to a similar question here, but I'm going to add this thread to the report as well :)
I agree with the sentiment of this thread. I'd like the option to use the mobile web version's menu instead of the desktop menu. I submitted a feature request.
Hey folks!
You asked, we delivered--the Modern Player is here! Now you can give desktop and mobile learners a fresh, unified experience with a modern player style that’s consistent across all devices.
Head over to this article to catch all the details of this new feature. Then, download the latest update of Storyline 360 to take it for a test drive!
If you’ve got any questions about it, we’re here to help.
Great news, Alyssa and Articulate design/dev/marketing/support team! Thanks for all your efforts on this. It's really neat to see such a big new UI update in Storyline.
I really like that - if one chooses to toggle the new "Menus & Controls setting to "off" - you can now truly have a chrome-less, no borders kind of design. Before, you could toggle all the features off but you'd still have the 10-or-so pixels of color-of-your-choice border along all four sides.
I was also mostly excited about the menu, and hoped that it would be collapsible for desktop users (it is). Nice. Really nice. In a test, I saw that it would start opened, and that I could collapse it. But then I wondered if there was a trigger or setting to set to collapsed/closed right away. Anything for that? Maybe I missed a way to do that, or perhaps I should submit a feature request?
Hey Scott!
The Modern Player menu will be auto-collapsed in tablet portrait, mobile portrait, and mobile landscape. Otherwise, the menu will start as open, and the learner can collapse it by clicking or tapping the icon.
I'm happy to pass along the feature idea to our product team!
Thanks Alyssa. I've added a feature request, as well.
Hi Scott -
If you're looking to have the sidebar/menu start off collapsed, we do have an option under player properties that you can enable. When enabled, the sidebar/menu will start off collapsed on desktop browsers. I included a screenshot just in-case.
Thanks,
Ronnie
Hey Ronnie! That, kind sir, is exactly what my eyeballs obviously missed (looking too hard, I think). It's just what I was looking for - thanks for pointing this out!
Is there anyway to have mobile landscape start with the menu open, but not on top of the content? I would like to to appear the same as it does on desktop/tablet.
Hi Leah!
Great question! To fit the size of mobile devices, the menu will always overlap the content. As always, we love hearing new ideas so don't hesitate to share in a feature request!
This discussion is closed. You can start a new discussion or contact Articulate Support.