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

Tablet Navigation

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

Resources

• 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.