Give Your Course an App-Style Navigation #107
Mobile Learning Menus and Navigation #107: Challenge | Recap
Challenge of the Week
This week, your challenge is to design a navigation menu for use on a mobile phone or tablet. Your entry can be designed to run on a mobile device, or it can be larger for demonstration purposes.
In an earlier challenge, we looked at custom navigation ideas and examples. For this week’s challenge, you should narrow your designs to mobile devices to create an app-style feel.
To help you get started this week, take a look at the following mobile examples:
Mobile World Navigation
Here’s a practical example of mobile navigation that features colored icon buttons and tabs navigation. You can download the template to learn more about how it was built or use as a starter template for your own projects.
View example | Download | Paul Alders
Scenario Tabs Example
Using the popular tabs interaction design, this mobile tabs example features big, chunky buttons making them easy to see and click.
View the tabs example | Tom Kuhlmann
Medical E-Learning Example
I really like the way this example steps away from the traditional mobile navigation and uses colorful, full-slide menu buttons.
View the medical example | Jackie Van Nice
Give learners the menu options they need and move everything else out of the way with the tablet app design. This approach works equally well in landscape and portrait modes.
View the tablet navigation example | David Anderson
- Show Us Your Custom Navigation Menus for E-Learning #79
- #FREEBIE: Minimalistic Storyline player menu and navigation controls
Share Your E-Learning Work
- Comments: Use the comments section below to share a link to your published example and blog post.
- Forums: Start your own thread and share a link to your published example..
- Personal blog: If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
- Twitter: If you share your demos on Twitter, try using #ELHChallenge so your tweeps can track your e-learning coolness.
- Facebook: Share your work on our Facebook page by replying to this Facebook post with a link to your example.
Last Week’s Challenge:
Before you hyperlink to this week’s challenge, take a few moments to check out the cereal box designs your fellow community members shared in last week’s challenge:
E-Learning Cereal Box Makeovers RECAP #106: Challenge | Recap
Wishing you a nav-tastic week, E-Learning Heroes!
New to E-Learning Challenges?
The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.
Hi Everyone, This is my first challenge. I had previously designed this mock up app as part of a school project on tuberculosis. I had envisioned it as an emergency worker’s manual in an app form, primarily used on a personal device. I used the freebie from Jeff Kortenbosch as reference. Reading about TB is usually out of necessity and not for light reading so I made it into three sections based on needs: 1. Prevent exposure 2. What to do when exposed 3. More in-depth information. If there are problems with the links, let me know. Tested on my phone as well and looked ok. Feedback is also appreciated. https://s3.amazonaws.com/elearningchallenge/tb_app/Mobile_App_TBv7+-+Storyline+output/story.html mobile: https://s3.amazonaws.com/elearningchallenge/tb_app/Mobile_App_TBv7+-+Storyline... Expand