Mobile Navigation Examples

Mobile Learning Menus and Navigation #107: Challenge | Recap

These days, there's so much we do on mobile devices—from productivity tasks like email and scheduling, to social media, and even to doing tasks once relegated to a desktop or laptop, such as creating and editing documents or presentations. The phenomenal capabilities built into our mobile devices are amazing and make it so we're able to consume e-learning just about anywhere. Mobile is the new norm. So why not make your course feel mobile-tastic? 

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.

Mobile World Navigation

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.

Scenario Tabs Example
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.

Medical E-Learning Example

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.

App-Style Navigation

View the tablet navigation example | David Anderson


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 Makeovers #106

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.

Tatum Bernardo

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. mobile: Expand

Maija Perfiljeva