Turbo Charged Tabbed Interactions Design


I “stole” the name for this blog post from a fellow Articulate e-Learning Heroes community member, Jackie Van Nice who used this term when referring to this tabbed interaction design I entered in one of the weekly challenges (click on the image below to view the demo).

tabbed interaction
Click on the image to view the interactive demo

I’m sure at some point we’ve all developed the standard tabbed interaction with no bells and whistles (or animation) because that’s what the client wanted, or that’s what suited the topic or learning solution – but for me this sometimes gets a little boring and I like to jazz things up a bit, even if it’s just to challenge myself to re-create something I’ve seen.

This brings me to an interesting question – where do you seek inspiration for your designs?

When I’m designing, I seek inspiration from a number of sources. Sometimes I’m not even looking for it and it appears! Other times I’m looking for something completely different and see something that I want to use as inspiration for a design.

That’s what happened with this tabbed interaction design (below) – I just had to see if I could work out how to develop this after coming across the categories side-bar on this website blog page.

This is what the sidebar looked like.

And this is my second design for the #199 Tabs Navigation challenge, which I hadn’t planned, but was inspired to share.

tabbed interaction animated design
Click on the image to view the interactive demo

The Process and the Design

I only spent a few minutes setting this up in Storyline 360, then a few minutes more to fine-tune the design and animations.

Each tab has three sections, with the centre and clickable section having a hover state (with the tab colour and a wipe from the left animation) and a selected state (the solid tab colour).

The tab content area is on a separate layer with a trigger to show the layer when the tab is selected. Of course, the tabs are all part of a button set so only one can be selected at a time.

The Conclusion

This effect was pretty simple to re-create really – except working out how to incorporate the animation where the selected tab animates back to the left when you hover over another tab may take me another few minutes…

I’d be interested in hearing from anyone who has any thoughts on how much animation is too much in a design like this one.

Colour Themes for e-Learning

For the first ever e-Learning course I designed, I chose the colours red and green as my primary colours. I had a lot to learn about colours and design, particularly with regard to designing for inclusiveness, aka colour blindness.

Colour is such an important part of visual processing and engagement, but how many of us truly understand how this works?

The Psychology of Colour

In this article on The Colours of e-Learning, Brother Andrew from e-Learning Brothers talks about the psychological effect each colour has on learning.

In this article on using psychology to design effective learning, Karla Gutierrez talks about colours being “powerful psychological triggers that help users learn better by changing their perception and evoking emotions”, but also goes on to say that excessive use of colour can lead to cognitive overload.

Of course, there are number of references to this topic in the Articulate e-Learning Heroes community, including this one on The Color Effect: How Your Palette Affects Learners that also has a pretty cool interactive infographic explaining the psychology of colour.

How do you select a colour theme?

Firstly, you need to have an understanding of how the colour wheel works. Here’s an informative article I came across on this topic by Kate Smith – Get to Know the Colour Wheel in which she goes into depth about the parts of the colour wheel – hue, tint, tone and shade. Alternatively, if you’re someone who would rather take in information in a visual and narrative format – I highly recommend the video below.

There are a number of resources and/or tools you can use to select a colour theme for your e-Learning course. Of course, consideration needs to be given to client preferences and style and often this is what dictates the colour theme from the very beginning. However, if you have no such constraints, where do you start?

I most often start with a relevant image that will set the tone for the entire course. Adobe Color CC is possibly one of the most widely-known tools for generating colour themes from an image, or from the colour wheel itself.

2017-03-04_15-58-34
2017-03-04_15-31-09

Here’s an overview of this process.

Big Huge Labs – Colour Palette Generator is a serious contender in this field – it generates the HEX values and names of the colours, as well as a downloadable Adobe Swatch Exchange (ASE) format for Photoshop.

2017-03-04_16-01-13

One last resource I wanted to mention was Coolors which allows you to create, save and share colour palettes online by generating and modifying a random colour palette, or by exploring colour palettes shared by others.

2017-03-04_16-43-16
2017-03-04_16-47-56

Other sources of inspiration

I seek inspiration from lots of other sources and have often based my colour theme on a website that inspires me. An example of this is this Course Starter Template I designed, the design and colour theme of which was initially inspired by the Alannah and Madeleine Foundation website (although I see that this website has changed somewhat since I designed this template).

Infographics is another source of inspiration I fall back on at times. I love infographics and have many of these pinned to my Infographics Pinterest board waiting for me to use as inspiration. Top of the list is this one by Isabel Avery, a section of which I’m going to show below with the colour palette generated in Adobe Color CC – isn’t this colour combination amazing?!

One thing you can generally do with these colour palette generators is choose your “colour mood”. This first image shows the “Bright” colour mood palette generated from this image. The other three colour moods shown below are “Dark”, “Muted” and “Colourful”, also generated from the same image.

2017-03-04_17-23-45
2017-03-04_17-26-46
2017-03-04_17-26-21
2017-03-04_17-26-08

Lastly, seeking inspiration from sites like Design Seeds can be a rewarding exercise, although I find I get lost in the awesome amount of creativity that others possess and are willing to share, so keeping focused on the task at hand is a must!

More articles and resources on this topic

Popular Colour Schemes for e-Learning Design – Articulate e-Learning Heroes
4 Tips to Use Color in e-Learning – eLearning Industry (Christopher Pappas)
The e-Learning Color Guide: Evoking the Right Emotion: eLearning Industry (Christopher Pappas)
Find Color Schemes for your e-Learning Courses – The Rapid e-Learning Blog (Tom Kuhlmann)
The Complete Guide to Color Combinations in e-Learning – SHIFT e-Learning (Karla Gutierrez)
7 Tips to Choose the Right Color Scheme for your Online Training – Allen Interactions (Christopher Pappas)

Templates for e-Learning

As an active member of the Articulate e-Learning Heroes community, not a week goes by where I’m not inspired by the creativity of these talented community members.

Recently members were challenged to design and share a course starter template.  Course starter templates are “multi-slide templates that include a combination of the most common e-Learning content and interaction slides.  They provide a structure to the design, layout and flow of an e-Learning course and include enough slides to give users a working model from which they can begin assembling their projects”.

The thought process behind this challenge was that this could be beneficial for new e-Learning designers and developers. A number of members very generously shared not only their designs, but their source files as well and you can view and access these in this post.

Everyone has their own process for designing a course, whether the design starts with the creation of a template or not. This challenge was a good opportunity for me to reflect on and document the process I go through when I’m developing a template.

How I develop a template in Articulate Storyline 2

I usually allow myself a little time at the beginning of designing a template to “play” before I start working through the process of developing the template.  If there’s no time pressure, I can spend a lot of time in this phase – but as we all know, this isn’t always possible!

This creative time generally includes the following:

  • Identifying up front if there are any design constraints or assets that are to be provided that would dictate the template design
  • Revisiting previous templates I’ve designed or worked on and see if any of the design elements or concepts would be appropriate for the new template design – often it’s the case that I can re-purpose a previous project and this is a huge time-saver
  • Searching generically within the industry the template is being designed for, looking for inspiration and design ideas

I start by looking at images / websites / designs relevant to the course topic – this could include sites such as Shutterstock, WeeJeeCanva, Pinterest, Fribly, Behance or Dribbble, just to name a few – I even look at sites such as SlideHelper, Presentation Magazine, Creative Market or some of the sites that sell templates such as eLearning Chips, eLearning Brothers or Skillsdox

I then move on to sourcing the design elements such as any images that may dictate the colour scheme or size of the template slides.  During this phase I make sure I have a good understanding of what will be included in the course as far as content, icons, multimedia, quizzes etc to cater for any specific requirements in the design to include these assets.

When I’m developing a template in Articulate Storyline 2, there are a number of elements that I like to customise to make sure the template can be effectively converted and used for different styles of courses, different client requirements and even different clients. These include:

  • the story size
  • the course player
  • the theme fonts
  • the theme colours

I use the Slide Master for the slide layouts and slide design elements that will remain consistent throughout the course. Within the Slide Master there is also provision to select a theme and edit the theme colours and fonts.

I also make sure I edit the Feedback Master as the design that comes standard with Articulate Storyline 2 is not very often appropriate for use without some modifications. The Feedback Master also has provision to select a theme and edit the theme colours and fonts.

feedbackmaster.png

With the Slide Master and the Feedback Master, I always retain the original masters of these and insert new ones to use for my design modifications – this way if something goes terribly wrong I can revert back to the original masters and use these elements to get me back on track.

If I take the time to customise all of these elements, the final template will be much more efficient to work with and any changes I need to make to the design can be easily applied at the master slide level, saving development time overall.

You can read more about my design process and view an interactive demo of a course starter template I recently designed by clicking on the image below.

snip_20160330120942

Skeuomorphism – an awesome interactive infographic

I came across this amazing interactive infographic on Skeuomosphism and wanted to share it – so here it is!  You need to scroll to the bottom of this static infographic to access the link to view the interactive version, or go to this link on the TemplateMonster.com website.

The WhatIs.com definition of skeuomorphism is “the design concept of making items represented resemble their real-world counterparts”.  Apparently it’s commonly used in UI and web design and contrasts with flat design which is a simpler graphic style.

Interestingly, there are also what’s known as “non-visual skeuomorphs”, eg the page-turning movement used to advance an eBook, the sound of a record ending at the end of a CD and the sound of a camera shutter on a digital camera.

As far as interactive infographics go, this would have to be one of the best ones I’ve seen and definitely an inspiration to try some of the design features that have been used here.

You can read more about my attempt at Skeuomorphism from the ID perspective here.

skeuomorphic design infographic
Via: TemplateMonster.com

Why you should use SlideShare

According to SlideShare, “70 million professionals trust SlideShare to learn about any topic quickly from subject matter experts”.

SlideShare supports the uploading of presentations, infographics, documents and videos and since joining with LinkedIn in 2012 has become a top destination for professional content.

Visual formats help you stand out – apparently images are processed by the brain 60,000 times faster than text and get shared more on social media, so the tip is to make sure your content has a strong visual story to go along with the text content.

One of the best things about SlideShare is that if you need to make a change to a file you’ve uploaded, SlideShare allows you to re-upload and retain the same URL.

SlideShare makes it very easy for viewers to add “clips” to your own profile clipboard. From the clips in your clipboard you can then you can share these clips, or view the clips in the original SlideShare presentation. You can create numerous clipboards, and even nominate whether these clipboards are private or viewable by others.

The analytics are exceptional – with information on exactly where your views are coming from and how they discovered your content – right down to the time your content was viewed.

2016-03-14_18-49-21

Here’s a good place to find out more about how to get started.

As far as using SlideShare for business goes, presentations, infographics and videos can be powerful marketing assets, so sharing your corporate story, industry insights, or marketing your business directly to a target audience can help you connect with potential customers.  Another tip is to connect your social media accounts (under account settings) to help your content “go viral”.  You can also embed your SlideShares into blog posts, websites, LinkedIn posts and more.

You can upload YouTube videos to SlideShare – firstly you need to upload your presentation file (so you need to create at least one cover slide).  Once your file has been uploaded, click on the “Edit” button, then from the “Add YouTube video” tab, enter the video URL and placement, then click on Insert and Publish.

From your profile “My Uploads” tab you can instantly see how many views, likes, comments and downloads each of your uploaded files has had, as well as preview in mobile or desktop view and edit or delete each of your uploads.

2016-03-14_18-34-45

Additional design and promotion tips are available in the Creator’s Hub here.  If you’re interested in being featured on SlideShare’s homepage, there’s some information in this SlideShare that will help you achieve this.

Powerpoint Tips for e-Learning

I use PowerPoint extensively when I’m designing e-Learning courses, mostly for image editing, but I’ve also started to use the export to video functionality to record text animation effects that I can’t produce easily in Articulate Storyline.

Here’s a short video explaining this in a bit more detail.

Creating a GIF from a Video

I’ve been experimenting with using .gif files to display information on a web page or WordPress site and have recently discovered that you can create a .gif from a video.

2016-02-04_10-27-54

This is a .gif I created using the Video to GIF converter on ezgif.com – it’s the opening slide of an interactive resume I’m working on.

The one thing about .gif files that is a little restrictive is that you can’t control when they start – they have a mind of their own and start, then loop around continuously.

IR1medium

 

Introverts and leadership

I loved the enthusiastic approach of the voice-over person in this video I came across on YouTube.  I found this very engaging, although if the video had been longer than the 5 minutes it is, this may have become a little annoying.

From a design perspective, I thought the dynamic content and mixture of visuals and text was well-balanced and the message effectively delivered.

If you are at all interested in personality types and strategies to work more effectively with others, you may well relate to this video as I did!

Visual arts inspiration

If you’re looking for inspiration for web design and some free resources, check out Fuzzimo. This is a website about visual arts where you can also get lots of free stuff (14 pages worth last time I visited the site).  The website design is amazing and very inspiring.