App Style Navigation

Click on the image to view the demo

The Challenge

This design was developed as a submission to the E-Learning Heroes challenge of the week #107 Give Your Course an App-Style Navigation.  The challenge was to “design a navigation menu for use on a mobile phone or tablet.”

The Design Process

I always start my design process by seeking inspiration from relevant resources.  For this project I collected images and resources on a Pinterest board Mobile UI Design and used this board as the basis for my design inspiration.

2015-11-22_17-31-31

As far as designing for mobile devices goes, as I understand it, we are apparently right about now at the tipping point for the use of mobile devices overtaking that of desktop devices for the average user.  However, in the field of training, I believe we still have a way to go here.  I would say that currently the minority of instructional designers design their courses with this in mind, for a number of reasons.  Employers are still coming to terms with the value of making online employee training accessible on mobile devices and in some cases there are also technical constraints relating to a lack of flexibility with regard to the organisation’s LMS and/or accessibility outside of the workplace.

One of the most useful articles I came across as I was getting my head around this design challenge was 16 killer design tips for creating mobile apps by Valerie Lisyansky of SWARM, featured on the Creative Bloq website.  Here is a list of her 16 tips, explained in more detail in the article:

  1. Everything exists on a grid
  2. Every element defines the spacing
  3. Colour creates hierarchy
  4. Colour is not about you liking it, it’s about the brand
  5. Pink is not a shade of red
  6. Logos add style but they don’t make or break
  7. The page title
  8. Define elements, then repeat them
  9. Simple tricks can be used to separate text and create hierarchy
  10. Outdated is another word for not trendy
  11. Most apps are basically just lists
  12. How to make a decision on layout
  13. Action requires feedback, and fast
  14. Postpone sign up
  15. When to use a fancy font
  16. Each system has visual guidelines

Other articles I reviewed included 10 New Mobile App UI Design Trends for 20155 Big Mobile Design Trends of 2015 and Top 5 Design Considerations for Creating Mobile Learning.

Stand-outs from these articles which I considered potentially relevant to my design were:

  • Consider mobile usability heuristics to provide a positive useful experience for learners
  • Design with the smallest device firmly in mind
  • Consider the suitable of videos and/or audio for the target audience
  • Use larger diffused / blurry background images with eye-catchy CTA (call to action buttons)
  • Use subtle colour schemes
  • Use only minimal, shaded and thin icons
  • Incorporate animated elements and parallax scrolling (?)
  • Keep it simple

Once I started my design, I began to realise that it’s one thing to look at the visual elements of an app-style design for a mobile device, but another to analyse the navigation and animation and apply this to the design.  I found it very interesting to compare how different the navigation is and I learnt a lot about how this could easily be applied to any e-Learning course design.

Keeping it simple was one of the main points I took on board.  I did find limitations with the range of transitions and animations in  Articulate Storyline 2 and this was probably where I spent most of the time – going back and forward between actually using an app and seeing how the navigation looked and felt, then trying to replicate this in my design.

 

The blurred background was created in PowerPoint from the original image, using the Artistic Effects formatting option “blur”.  After the splash screen and initial screen my design gave learners the option to log in by typing their name (using a Text Entry Variabale) and choosing an avatar which then generated their name throughout the screens of the course, or selecting an “I’m just looking” button which took them straight into the course without “logging in”.  This was easily developed by duplicating the initial scene, then changing the avatar.  I then duplicated each of these scenes again, adding a “backward” navigation set of slides with a “Push – from left” transition for when the learner selected the left navigation arrow at the bottom of the screen (with a “Push – from right” transition when they selected the right navigation arrow).

I defined the button elements and the navigation arrows and repeated these design elements throughout, using shades of the one colour for the hierarchy of the module buttons.

The Result

I felt that my final design was clean and simple and as the navigation elements such as the menu icon, the help icon and the navigation arrows were universally recognisable needed limited instruction.

UPDATED COLOUR SCHEME

Click on the image to view the demo

This colour scheme is based on the Pantone colour of the year.

final3

On revisiting this project to change the colour scheme, I changed the set-up slightly, which is not noticeable visually, but made the development a lot simpler.

On the original project I had a lot more scenes, but on this redevelopment, I used triggers and conditions to generate the different avatars based on the user’s choice at the beginning of the course, which meant that I only needed three scenes – the introductory and closing slides, and a forward and backward scene.

scenes

In the original design, the menu was developed using states, but in the new design I added a “menu” and “menu close” layer to each slide where the menu icon was on display – this allowed me to add animation to the menu buttons and overlay to make the menu fly in on selection, and then fly out when closing.  I made this change because even though you can animate objects in a state, I couldn’t find a way to stagger the flying in and out of the four menu buttons in the state, whereas this is easily achieved when these objects are added to a layer in a slide.

menus

4 thoughts on “App Style Navigation

  1. Dianne, this is a lovely example! (I even like both color schemes, and I generally tend to be allergic to all varieties of pink.) Kudos on the design and the two different looks.

    1. Thank you for your very kind words Nadine. Yes, the Pantone colour of the year was a shocker – although as you can see I do like pink myself! This was a really good exercise in revisiting a design project and as a designer I find it’s really vital to embrace all types of design, regardless of personal preference. Sometimes I find this easier than other times!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s