Creating a Switch/Toggle button – Motion Paths vs. Object States

motion-vs-state

This week I was working on Articulate community e-learning challenge #97: Toggle, Switch, and Slide Your Way to More Creative E-Learning Buttons. I contemplated various ideas and built a quick prototype. I was pretty happy with it and moved on to the design of the interaction. Building a toggle button/switch is a game of ‘states’. You’ve got an on state and an off state. Pretty simple right. All you have to do is choose what you want for your overall look and feel so I googled for ‘switch button design’ and was presented with a ton of possibilities. Some very trendy, some very cool, some rather boring. I did a similar search on Pinterest.

switch
Plenty of design options when creating a switch/toggle button.

To be thorough I even added ‘CSS’ to my search which added in a couple of nice animated buttons (example1 | example2| example3) and that set me to created animated switch buttons.

The first thing I did was rebuild Kevin Thorn’s example. It has a sweet, smooth motion path sliding the button back and forth. It’s a real beauty. It took me about 10 minutes to setup, test if I added all the triggers and conditions correctly and to see if the motion paths are properly aligned and basically do what I expect them to do. As usual I had to do a little tweaking with the order of the triggers to make sure the up and down movement was working properly but after 15 minutes I had myself a schwéééét animated switch button. I started to create a second button and started to copy and adapt it, making sure the new variables, motion paths etc were set-up correctly. Once testing it I noticed I missed something (again) and fixed it. I was quickly getting annoyed with all this tweaking. I was spending a lot of time with just a couple of @#$%^&! buttons.

I started thinking about time spent and effectiveness and the added value of the animation on the button. I thought, how long would it take me to build a regular button with a ‘normal’ state and a default ‘selected’ state. 2 minutes later I had an identical, yet non-animated, button. It worked perfectly, it required no variables or triggers to change states and and play various entrance and exit animations. It just worked. Making a copy was even quicker as I didn’t have to make any changes to any triggers, variables, motion paths and conditions. And the end result looked pretty good.

So, what to do? Should I go with the animated switch buttons or should I go with the effective ‘default’ button? Let’s put them together and decide…

 

Powered by elearningfreak.com

So there you have it.

It’s a bit like comparing a Ferrari with a Volkswagen. The animated button is a thing of beauty. When looking at them together I instinctively know I want it. The default button is just so… default. However… although the animated button is awesome it is, like a Ferrari, a costly thing. It takes more time to build, test and work to get it going as well as doing maintenance to it, then it does to create 20 regular buttons that are still pretty nice and get the job done. Is the additional time spend really adding value to your project?

So what would you do? Would you spend the time or save the dime? Would your client and users love you or hate you for your choice?

Love to hear your thoughts in the comments below!

 

Getting started with pixel art!

Let me start off by telling you that I’m not a pixel art expert. I’m just a regular guy. To be honest, I have done pixel art but that was over 25 years ago, and I would not really call it art. I was 10 years old and I created black and white pixelated images of superheroes that I liked.

Lo and behold I have seen the rise of pixel art in the past year. And I love it. But how could one start creating pixel art from no real experience? I asked a twitter group but I go little to no reply. Next up, Google search. I found a couple of cool tutorials on deviantart.com that explained the basics of creating shadow highlights also called dithering. That seemed just the right place to start.

I also found out that Photoshop is used the most in pixel art tutorials, however using Microsoft Paint will do just fine. Since I’m fairly familiar with Photoshop and I saw a couple of essy tutorials on how to set up my basic grid, I decided to give that a go.

So, what to draw? I want to create something really really cool, however cool stuff is usually really really difficult. So I decided to go for something simple first. In a previous post I shared how you can create your own graphics in PowerPoint and we did not start out with very difficult things, we created simple items.

So again this time I started out with simple items a monitor, computer, that kind of stuff. Check out some of the stuff I did below.

pixel-art-by-jeff

As you can see this looks pretty cool and it was really easy to make simple lines and bringing the whole piece together. It’s important to know what you are going to draw so making a quick sketch can really help you out. Alternatively you can grab a simple picture and trace it. Tracing is a great way to learn how to draw.

Once you feel comfortable drawing basic pixel images start with something more challenging or try adding more detail. For some reason I long to draw superheroes once again…

So that’s it, open Photoshop, Microsoft Paint, or any other graphics program that you’re comfortable with and start trying to create simple items. Go ahead, you’ll love it.

Pixel-Minion

Got any questions or comments? Let me know below and please feel free to share this article with your friends.

WEBINARS FOR LEARNING… GOOD OR BAD?

I’ll be frank, I love the idea of webinars for learning. An expert sharing his experience with an interested audience, what’s better than that?? Having the ability to connect with peers and the expert, ask questions and discuss the how, what and why of a topic, now that’s where learning happens right? …Right?

Maybe it’s just me, but in reality, most webinars I attended aren’t that great. They’re long, there not that interactive and they’re too crowded to get any real answers to your questions, unless you’re lucky enough to get picked out by the Webinar facilitator at the end.

If you do some research on setting up webinars you’ll quickly find that there are interactions like polling, and asking direct questions to people to make sure the audience keeps participating. Some webinar tools even have a feature that shows if someone is doing something on another screen. To me that seems like the world upside down. You shouldn’t be building in activities force them to focus. Your story and expertise should be engaging enough to do that. Heck, that’s probably why people signed up for the webinar in the first place!

SO HOW CAN A WEBINAR BE IMPROVED?

Simply, make it as short as it can be. Small learning nuggets are well accepted in learning. Don’t waste your audience’s time with a 20 minute introduction. Be concise, stick to the topic. If there is information you want to discuss send anything that can be done as pre-work to the attendees. Watching a video or going through a document or detailed slide deck during a webinar can add so much time which can be prevented with a simple ‘required’ pre-work assignment.

Whenever I do a webinar I force myself to keep it within 30 minutes. That means I plan for 25-30 minutes of content instead of 60-90 minutes. I also plan to have time available to answer as many relevant questions as possible. I tend to plan for 45-50 minutes for the total session and if I use less people are generally happy have some time left.

AN ALTERNATIVE

Are you one of those persons that signs up so you can just watch the recording? I am. I think I attend 20% of the webinars I sign up for and watch 80% afterwards, fitting my own calendar. I do this on purpose. Based on the speaker, topic and obviously time of the webinar I select which ones I want to attend and interact in and which ones I want to just watch. If I have questions I just contact the facilitator afterwards.

I’ve experimented with this format myself and noticed that in our company many people prefer to watch recorded webinars at their convenience and I’ve actually started using this as a default way to share information with my internal customers. I’ve combined it with our social platform pointing them to the webinar post in an email invitation and making use of the commenting ability of the platform to receive and answer questions.

I still do live webinars but only when I feel it makes absolute sense to have people join and participate.

GOOD OR BAD?

So what are your webinars like? Are they good or bad or something in between? There’s always room for improvement! Did you like this post or have you got additional tips? Please share it in the comments below.

 

This post appeared first on LinkedIn.

My 1st Articulate Guru Awards entry!

View Demo

Today I’ve uploaded my first entry to the 2015 Articulate Guru awards. The Guru awards are hosted by Articulate and are open to anyone that wants to show off their mad Articulate skills.

This is my first time entering the Guru awards and I must say I’m excited, and a little nervous, about it. I want to do something good, heck I want to win (which is odd as I am the least competitive person I know). Although most entries will probably be Articulate Storyline based I decided to submit an Articulate Studio 13 demo.

The demo I submitted is a Call Center interaction based on a Storyline interaction Tim Slade created and shared in the Articulate community.

The demo features:

  • fully animated interface to enhance the user experience,
  • branching scenario using the challenge-choice-consequence model. This means that your scenario will develop based on your choices. It allows users to (re)try different options and gives them the opportunity to correct any mistakes they’ve made along the way.
  • illustrated characters with facial expressions to enhance user feedback and add to the emotional experience
  • Avatar selection to personalize the course experience.

The cool thing, if I say so myself, is that anyone that sees this demo automatically thinks it is built in Articulate Storyline and it’s not. It is 100% Articulate Studio and it only took me about 6 hours to build and 2 hours to bugfix, making sure all scenarios for all avatars where branching correctly.

This demo is probably one coolest things I’ve built in Articulate Studio and it shows how incredibly powerful and versatile it still is. Articulate Studio is where it all started for me and this Articulate Guru entry is my personal tribute.

 

Aren’t you using Articulate Studio yet? Get a free 30 day trial version at Articulate.com. You should really check it out!

3 Tips to Optimize Your Screencasts!

Have you ever watched a screencast video where you where thinking “What the heck am I looking at?!”. The items on the screen where so small they were nearly unreadable and where did that mouse pointer jump off to this time?? These are common annoyances for anyone who has ever watches a video tutorial online. Luckily there are a couple of easy things you can do to make this a little better!

Increase Your Mouse Pointer Size

This might seem a little awkward in the beginning, dragging around a massive mouse pointer, but your viewers will love you for it. On your Windows PC go to the Control Panel > Hardware and Sound > Devices and Printers > Mouse.

Select the Pointers tab and check the Scheme section. You’ll find a range of possibilities and you want to select one of the ‘Extra Large’ schemes. As you can see below I’ve selected the Windows Aero (extra large) (system scheme).

mouse pointer

When I started using this trick I used to switch back and forth between regular and extra large scheme because I felt the uncomfortable with the large mouse pointer turned on all the time. After forgetting to increase the size for several screencasts and having to re-record them again I switched to the extra large scheme permanently and actually have come to love my large mouse pointer.

Whenever I get behind a computer now, the first thing I do is increase the mouse pointer size because it is so much clearer when doing my day to day stuff.

Give it a try, you just might like it!

Increase Your System Text (And Other Items)

Another way to increase the readability of what you are recording is to increase the size of system text. Go to your Control Panel > Appearance and Personalization > Display > Make text and other itmes larger or smaller. By default it is set to Smaller -100%. Now switch it to Medium – 125%. The system will ask you to log off and on to take this into effect.

Once you’ve logged on again everything will be slightly bigger and thus more readable for your viewers. It’s a slight difference but worth the effort wouldn’t you say?

textsize

Again this is something that takes a little getting used to and as the screen mentions ‘Some items may not fit on your screen if you choose this setting while your display is set to this resolution’. Be sure to check if your display shows what you want to record properly.

I’ve been using this for a short time and have not encountered any problems as of yet but it’s a good habit to check before encountering an issue halfway.

Add zoom regions to your screen (for Articulate Storyline Users)

If you are using Articulate Storyline to record your screencasts and use them as a single slide video you can add Zoom regions on your video to help the viewer focus on the area you’re discussing.

Zoom regionYou can add multiple zoom regions on a single slide by going to the Insert tab and selecting the Zoom Region button in the ribbon. You can spread your zoom regions over the time line to zoom into the various areas you want to highlight.

 

That’s it. If you have any questions or comments drop me a line in the comments area below. I love to read your feedback!

Create your own PowerPoint illustrations for visual communication

Download all Images and the PowerPoint Source File

A little while ago Blair Rorani started a Twitter drawathon to get people excited about his new book Everybody draw now in which he teaches how to become a visual communicator by drawing! I joined in as I’ve been meaning to start drawing on my tablet for a while and this seemed like a great opportunity.

After the 15 day drawathon I was hooked. I bought Blair’s book (and so should you!) and learned so much more. I was so psyched that I actually kept the Twitter drawathon going up till last week when I took some vacation. I did not stop drawing however. What I did was prepare for a special drawathon, a PowerPoint drawathon!

Did he say… PowerPoint?

PowerPoint is one of the most powerful versatile tools you’ve got on your computer and you’re probably only using it for the most basic stuff. I’ve learned PowerPoint is so much more than a tool that allows managers to create horrible presentations. I use it for everything from story-boarding, developing training materials to designing graphics… You name it!

And that last one, designing graphics in PowerPoint, is what we’ll be looking at. Most e-learning developers spend a lot of time searching for images for their courses. But what if you were able to create your own… In a tool you already have installed on your computer? What if I told you that you can create your own unique graphics and won’t need to spend a dime and a lot of time on finding stock images and photography.

Yes, you can!

The cool thing about creating graphics for visual communication is that the don’t need to be works of art. So for the next few weeks let’s start drawing in PowerPoint exclusively and build a new skill. You’ll love how easy PowerPoint makes it for you to create cool looking visuals that are fully scale-able and customizable to your every need. Every image is nothing more than a bunch of shapes, and shapes is an area in which where PowerPoint excels!

So join me and spend a few minutes a day drawing in PowerPoint and become a PowerPoint Illustrator Pro!

Luckily you won’t have to come up with your own topics. When I mentioned my idea to Blair he suggested to use one of the lists in his book and that makes absolute sense.

Just like with the original #Everybodydrawnow Twitter drawathon I plan to share a video of me drawing the object of the day and I’ll be sharing the image on Twitter using the #Everybodydrawnow hashtag combined with the hash-tag #pptx. You should too! (Check out all entries on twitter here).

Let’s get started!

Day 0: Setting up PowerPoint for Illustration (Video)

Day 1: Watch (Video)
01 WATCH

Day 2: Tablet (Video)

02 TABLET

Day 3: Laptop Computer (Video)

03 LAPTOP COMPUTER

Day 4: Desktop Computer (Video)

04 DESKTOP COMPUTER

Day 5: Mouse (Video)

05 MOUSE

Day 6:  Document (Video)

07 DOCUMENT

Day 7: Sticky Note (Video)

08 STICKY NOTE

Day 8: Folder (Video)

09 FOLDER

Day 9: Pencil (Video)

11 PENCIL

Day 10: Brief case (Video)

12 SUITCASE

Day 11:  Drivers License (Video)

13-DRIVERS-LICENSE

Day 12: Money (Video)

14 MONEY

Day 13: Trash Can (Video)

15 TRASH CAN

Day 14: Printer (Video)

16 PRINTER

Day 15: Photograph(s) (Video)

21 PICTURE

Day 16:  Calendar (Video)

18 CALENDAR

Day 17: e-Mail (Video)

19 EMAIL

Day 18: Cup (Video)

24 CUP

Day 19: Take-Away Cup (Video)

25 CUP

Day 20: Boy & Girl (Video)

20 BOYGIRL

THE END! A big thank you for all of those that joined the Drawathon and shared your illustrations on Twitter or otherwise! And a special thank you to Blair Rorani who started it all!

FREEBIE: Download all images and the PowerPoint source file here (1,5 mb)

 

Like this post? Got questions or remarks? Please leave your comment below. I love to read your feedback!

Jeff

Less = More: Customizing the Articulate Player

When you’re creating courses using Articulate Studio or Storyline you’ve got a very effective and highly customizable pre-built player available. It allows you to adapt the color scheme to your specific needs, to turn on and off every possible player feature from menu, to volume button, from glossary to previous and next button.  This allows you to create the exact look you need.

But what if you want to go that extra mile? What if you want to give your course that fully custom look? In that case you’ll need to make a few extra adjustments.

Turn off all Player features

The first thing you want to do is turn off all the player items. You’ll do this in the Features section of the Player Settings. Turn of everything, the menu, the title, the seekbar , all player tabs like glossary and notes… everything!

Make the Player fully transparent

As I just mentioned you can customize the color scheme of the player to create your own unique look and feel. You can do this by going into the Colors & Effects section of the Player settings. Here you’ll find the option Show advanced color editing. Next to selecting a specific color for every conceivable element of the player there is also a transparency setting. This is where you’ll do your magic.

colorediting

When you select the Show advanced color editing option the label will change into Hide advanced color editing as you can see in the image above.

When you select Edit item: a menu will fold out with all player elements, don’t worry you don’t have to set them all to 100% transparency. All you need to focus on is the Base section. The base section contains seven items and you need to set all of these to 100% transparency to make your player fully transparent.

That’s it for the player, it’s now fully transparent. To make it easy on yourself you’ll want to save this as a custom player setting. You can do that by selecting Current Player in the ribbon. This will open a pull down menu were you can save your adjustments. Select Save as… and save it. For easy reference I suggest you call it ‘Transparent’.

Remove the Previous / Next Button

So now you’ve made the player fully transparent there are still a couple of things to change. Unfortunately we cannot turn off the Previous and Next button in the player settings. This is a setting that needs to be adjusted at page level.

The easy way to do this is by selecting all slides in your scene when you are in Story view. Just select the first slide and press CTRL-A. Now uncheck the Prev and Next buttons in the Slide Properties section in the right-hand corner below the Triggers panel.

slideproperties

Note that when you turn off these navigation buttons it’s up to you make sure users can navigate from slide to slide.

So that’s really it for the Player… Well, almost.

Changing the Feedback Slide Master

One of last things that needs to get customized it the Feedback Slide Master. By default this has the standard design for the basic feedback windows that get shown when you use quiz slides. You can create a new generic look and feel that could match any of your projects or a specific one for this course. Either way, you’ll want to get rid of the default look.

feedbackmaster

And that’s it! Adjust these screens and you’re course will look as unique as it possibly can.

Note: There are some default screens we cannot alter that have that default feedback look. This applies for the popup that asks you if you want to continue where you left off and the screen that will popup when you haven’t selected an answer on a quiz slide. These popups are colored according the default color scheme and if you want to adjust these you need to go back into the advanced color editing section of the Player settings.

Like this post or have any questions or concerns? Let me know in the comments below. I love to read your feedback.

 

 

Increase your visual thinking capability and presentation skills… by drawing.

The past month I’ve been participating in a twitter draw-a-thon organized by Blair Rorani. Every day, for 15 days, Blair gave an assignment to draw something, a boy, a dog etc. He did this as a pre-launch event for his book Everybody Draw Now, in which he explains how to capture, clarify and communicate information and ideas using drawings.

Basically he shows you; why drawing pictures is such a good idea, how to listen, read and decide what to draw and how to turn your words into pictures.

It’s really been a lot of fun and in those 15 days I really learned to look differently at the way I communicate . For this challenge I picked up a €6 stylus at the local super market and downloaded a couple of apps for my tablet and started playing around with them. In the end I went with the free Adobe Draw to create most of my entries. Even now that the 15 day draw-a-thon is over I still create a random drawing each day to hone my skills.

What truly amazed me is how fast I was able to draw and how easy it is to turn a presentation slide into a picture, or set of pictures in just 15 days of practice. I’ll be presenting at the Articulate Community event in Zurich on April 17th and for this purpose I’ve completely overhauled my slide deck. No more bulleted lists, just a drawing and a tag line. This way, when I’m presenting the focus will be on what I’ll be sharing with the group, empowered by the illustrations behind me.

Check out the presentation I’ve created using drawings below or on speakerdeck.

So here’s a big THANK YOU! for Blair Rorani and if you’ve missed the draw-a-thon not to worry, you can always catch up and start drawing. I can recommend it!

Jeff

 

 

The Rise of Corporate Mobile Learning

Check the demoDownload the SL2 fileCheck the How To... Video

Mobile learning is not new. It’s been around for years now but only recently we’ve seen it maturing into something that you can use for more advanced forms of training. A big part of this is due to the technology that is all around us. Smart phones and tablets can be found in almost any house-hold making delivery to a mobile device easier than ever before. E-learning authoring tools, video recording tools and mobile learning apps are available for free or at very reasonable prices. These advancements will make that the development of mobile learning for corporate organizations will become accessible and affordable. Let’s take a look at what corporate Learning and development professionals will need to consider when going mobile.

Select a delivery platform 

Most organizations have had a Learning management system (LMS) for quite some time now and traditionally these have not been state of the art. If you’re lucky you are partnered with a vendor that has a larger vision then just making money out of its client’s pockets and actually has been proactively listening to the industry and implementing new features and along the way keeping their platform ready for the present (and hopefully, the future). If this is not the case for your organization you might be looking to acquire a new LMS or to be putting a mobile ready learning portal in front of your ancient LMS. Whichever may be the case you need to make sure the employees can access, search and launch your organizations training just as easy as they can access any application from their mobile devices. A couple of things to take into account are:

  • Available via an open internet connection or accessible via the company network (guess what’s more user friendly)
  • Search-ability is key. Often not all your content part of the LMS. You’ll have 3rd parties supplying content or content located on the intranet or other platforms. Ideally your delivery platform will have all relevant training available via the search feature
  • Usability should be on the top of your list (then why is it the 3rd bullet point?)

Make it accessible for Mobile devices 

When getting ready for mobile learning you’ll come to a point where you need to make a decision. “Will I define which mobile devices I’ll support or will I make it available to all devices (and there are a gazillion of them)”. Unfortunately each device is unique. Like computers they’ll have different processing power, video capabilities, storage capability, operating system(s), browser types and versions… the list goes on.

You need to consider your security policies and perhaps make some amendments to make them more current.

You also need to realize that most of the current offering probably isn’t ready to run on a mobile device. True, some of the really old courses in your catalog is probably built in DHTML (the preHTML5 stuff) but most will be running on Flash and that won’t work on your devices. This means you need to review your current course catalog but I’ll talk about that a bit more later.

Make it available via the internet

Now that you’ve selected your delivery platform (LMS) and you’ve made some decisions regarding the device(s) you’ll be supporting it’s time for another challenge; making your courses available via the internet. If you’re looking for a truly successful mobile strategy you need to allow users to launch your courses directly from their devices (even if it’s a laptop) without the needs to log into the corporate network. You really don’t need that hurdle. In the real world we’ll connect to everything without the need to do so and we’re doing more important things than following some training program.

Select an authoring tool(s)

As I mentioned earlier most of your catalog is probably not mobile ready. It may be that you’ve got training programs that are still completely classroom based, have e-learning materials that date from a not so mobile era and have fairly new stuff that isn’t mobile ready simply because it never was a requirement. That means everything that you have created (purchased or licensed) from now on needs that requirement. All the existing materials need to be reviewed and rebuild. To make sure this happens as smoothly as it possibly can (hey, you’re working with technology, there’s always something bound to surprise you) you need to find one or more authoring tools and make them the standard for the organization. This will help you by knowing the capabilities and restrictions of the tools you’re working with and help you select which tool suits which learning solution best.

When you’ve implemented these standard tools you’ll also have the benefit of doing your own maintenance. Make sure the project source files are part of the projects deliverables and you’ll never have to be depended on a specific supplier again.

Review your course catalog

The task of reviewing your current course catalog may be daunting but it is absolutely necessary. There is no easier way to lose your credibility than have your employees go online, have them search for a course and it turns out it doesn’t work. You might get away with it once but after a second time you’ve lost them. They’re gone and won’t be coming back any time soon.

What NEEDS to be mobile?

Obviously you cannot just convert everything and anything. You need to go through the current catalog(s) and mark which courses absolutely need to be available for mobile learners. You could also mark those courses that might need to be available but use separate marks for easy reviewing and to have something that you’re going to work at when you’ve completed all the need-to-have’s.

Prioritize!

Once you have finished marking the need-to-have’s from the nice-to-have’s and the not-going-to-happen’s you need to start prioritizing. Like any other new project a rebuild (and probably redesign) will take time and money. You probably need to jump to quite some hoops before you get the time, the budget and resources you need. Having your priorities straight, and checked with your internal stakeholders, will help you make the right decisions straight from the start.

Rebuild or Rebuild, Update and Rebrand?

Rebuilding existing content is actually a great opportunity. Where possible don’t just start rebuilding the exact thing in your new authoring tool but take the time to learn from what you already know about this course. How has it been doing the time it was available? Does it actually achieve what it sets out to do? Is the issue being addressed still an issue? What has been the actual business impact of this course or program? What do users think about the format and more importantly, the relevance of the content? Take advantage make sure you improve where possible. That might mean your rebuild becomes a totally new course to replace the current version. Again, taking this kind of assessment will help your company’s bottom line as that is where the effect of your corporate training should be measured.

Identifying the quick-wins from the bigger projects allows you to set up two development tracks making sure you keep making progress while creating new courses along with the ones that ‘simply’ need a brand and content update and some basic mobile accessibility updates.

Relaunch!

Now that you’re working on rebuilding and rebranding your corporate learning portfolio you shouldn’t forget to do the marketing that is o so important. People need to know what you are working on and what you have achieved for them. Upwards and downwards in the organization people need to be informed and inspired and should be eager to take the time to check out these new and updated training programs and courses. Make sure you tailor your message to your audience and keep at it!

If you build it, they will come!

I’d love to hear your thoughts or comments! Leave them below

As you may have seen I’ve added nice Articulate Storyline 2 freebie. Check out the Mobile menu and download the file to adjust and use in your own projects!