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.
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:
- Everything exists on a grid
- Every element defines the spacing
- Colour creates hierarchy
- Colour is not about you liking it, it’s about the brand
- Pink is not a shade of red
- Logos add style but they don’t make or break
- The page title
- Define elements, then repeat them
- Simple tricks can be used to separate text and create hierarchy
- Outdated is another word for not trendy
- Most apps are basically just lists
- How to make a decision on layout
- Action requires feedback, and fast
- Postpone sign up
- When to use a fancy font
- Each system has visual guidelines
Other articles I reviewed included 10 New Mobile App UI Design Trends for 2015, 5 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.
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
This colour scheme is based on the Pantone colour of the year.
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.
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.