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

Resources

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.

192 Comments
Jeff Kortenbosch
Tracy Carroll
Parichaya Kanungo