E-Learning Heroes - Advice and ideas from the Articulate Community

I've been gathering design thoughts and inspirations in Evernote and wondered if this http://www.napp.org.uk/ was doable in Articulate Studio.

On the page, the images that you see at the top slide from right to left to reveal a new image when you click on the words/label and I think this is a neat way to think about navigation or do an interaction. I tweeted the question and Jeannette suggested that I post it in the forum. 

Anyone done this before/think they have an answer to how to do it? Thanks community!

Holly

Hey Holly! That's a nice site! You could create something *kinda* similar in Articulate Presenter... here's a super-simple mockup that I threw together quickly.

There are a couple challenges with a vertical sliding menu like this... one is the fluidity and "smoothing" effect that you see in the website example - where the  vertical menu bars slide into place from one side or another, and they kind of slow down before they stop moving. Unfortunately that slow-down isn't possible to replicate in content that you publish from PowerPoint to Presenter.

Another challenge is the direction of the sliding motion. There isn't really a way in PowerPoint/Preseneter to predict which slide a user will be coming from when they arrive at any particular slide - which means you can't really apply intelligence that tells the animation which direction to start from. (Wow that sentence was really a grammatic mess, lol!)

So, those are the reasons why in my mockup I just used a fade animation on each of the content slides. It's not horrible, but it's not as slick as the example you posted.

Hi Jeannette,

Was just looking for ideas to freshen up some process learning and found this... I am in Australia so it is already Friday the 13th here, so a very auspicious and lucky day for me...haha... I digress...That is really neat - will you be doing a quick screenr for this or could I just get instructions?

Thanks as always

I am working on it. I am SO CLOSE!!! I got all the sliding functions out to work, except for having them move together if you press the second or third tab instead of doing it in order. Hopefully I can figure it out. If not, I will post what I have and maybe someone else can figure the rest out.

OK, so after trial and error....here are my findings. I don't know about the recreation to Articulate specifically...but using simply PowerPoint functions (which I think translate smoothly to Articulate although I have not had the great honor of being able to purchase it yet...working on that), I was able to get another *sort of idea working.

As Jeanette says...you cannot anticipate which one the user will click on, so I had to make each one react as it would whether it was the first second or third piece to be clicked. With that in mind, I had to duplicate the sliding options. Here is the link to the video of it working (I don't have articulate so I cannot reproduce it in a presenter method.

http://www.youtube.com/watch?v=eXrhKQ0mHvw

Sorry about the watermarking on it. I am working on my stinky home laptop which is in a tremendous need of a format c: and reinstall!!! I had to use a freebie converter to get the video to work because I coudln't get screenr to work on my home computer. blah!

Looks really nice, Gina - thanks for sharing that!!

One of the challenges with using PowerPoint triggers is that although they're a great tool to use in PowerPoint presentations, they're not preserved when you publish the content to Flash with Articulate Presenter, as PowerPoint triggers are not a supported effect. A workaround is to simulate a trigger-like experience by creating separate slides, which are invoked by hyperlinks... that's the method I used in the mockup I posted, and it sort of works okay, but as you mentioned, there's still that pesky problem of not being able to build in "intelligence" that allows PowerPoint to know which slide the user is coming from when they arrive at a new slide. It's an interesting challenge, for sure! When Articulate Storyline launches, there will be new ways of tackling challenges like this... Storyline includes the ability to construct logic via variables, so effects like these become much more feasible.

@Katherine - happy to share the file & will do a screenr a little later & post it here.

I think this is doable but as Jeannette mentioned you'll need a whole bunch of slides and branching logic since you'll need to account for every possible combination/order of how they click each option.

Here is my quick & dirty take on it.   http://t.co/tuUl1CCr

Nice, Mike! Thanks for posting! Yeah the prospect of creating the "intelligent" sliding direction is kind of a bugaboo, isn't it!

Maybe a good project to play with in Storyline on a cold, snowy midwestern day? 8-)

I saw something similar to that by following a trail someone started in the community once. It took me here

 http://www.iceltd.ca/   The site menu slides, but only in one direction.

and I put this on my list of things to replicate in PPT. It's right along the lines of what Mike threw together. I think it captures the same overall feel and cuts out that need for logic.  

Or a cool west coast day!

Thanks Mike, it is so appreciated. I just love this community's willingness to share and collaborate.

Stephanie does haz some mad skills, doesn't she? Thanks for pointing that one out too, Natalia.

Thanks for all the information! I can't wait to get Articulate (hopefully in the next couple of weeks) and start learning how to balance all these. I use Captivate right now, so when I built that demonstration, I had Captivate skills in mind since I can do that functionality with that software. I am sure it will be a learning curve for me to balance between the two programs.

Heck ya. Stephanie's work inspires me on a daily basis. 

Gina, I have no doubt you'll be an Articulate rock star. There just aren't that many things in ppt that don't carry over and many that do have a  work-around 

Alright- I made a quick one. This is NOT identical. It's more taking the idea and seeing how I could use it in a course. There are definitely more things that would need to be taken into consideration once all of the links are added, but I still like the general effect. 

Thanks for starting this thread, Holly!

Sliding Menu

Cool, thanks for sharing your sample for this - I like it!

Glad to offer a little design challenge, I think it is such a good way to build up design portfolio ideas and very thankful to have a range of samples to draw upon too.

You guys rock! 

I'm loving this thread! So fun to see everyone's cool ideas!

For Katherine & any others who wanted more details on how to make something similar to the mockup I posted earlier, here's the source file and here's a screencast that shows the gist of it:

<iframe src="http://www.screenr.com/embed/t7es" width="550" height="335" frameborder="0"></iframe>

Very nice, in every way. Thank you.

I know that someone in the Articulate community did this effect a year or two ago on his blog, will have to go thru my stuff and see if I can find the link.  I can picture his face, but his name escapes me.

Linda

I found it.  It was in Sasha's e-learning blog http://sashascott.wordpress.com/2010/09/14/dynamic-powerpoint-interactions-for-articulate-4-sliding-tabs/ back in September 2010.

Linda

Ooh, good find, Linda! I'd forgotten about that one. Sasha does amazing work. Thanks for posting!

Thanks everyone for posting! I've been trying to design more interactions just like this lately! Very helpful!!

This is a very neat idea.  It got me thinking about a project I have coming up which requires about four pages (SECTIONS) of data to read but there is no need for audio.  So I took what I saw here and starting tinkering.  I was going to try and post the module, but honestly I have never done that so I have no idea of how to put it here so folks can see it.  Anyway, thanks for finding the site Holly, yet another very useful topic.

I forgot I have Dropbox, so here is the link.  http://dl.dropbox.com/u/29969882/Sliding%20Presentation%20Test/player.html

I do not have PPT 2010 so I was not able to clean up the edges where the colored rectangle and square meet.  This was a fun quick project that taught me a few new tricks.  Thanks to everyone.

Nice, Eric - thanks for sharing!

Wow, this style must be "in" with web developers - here's another great one I found with the vertical sliders, it has a few additional elements for those who are more advanced: http://www.alumni.hbs.edu/careers/pitch/. Kind of ties the other question I asked about cumulative input to this: http://community.articulate.com/forums/t/8556.aspx 

Love all the samples, templates, shares, etc. Such a fab community to be a part of, really appreciate the effort of all involved. 

Thank you Jeanette - I am going to play around with the template and see what I can come up with. A really great thread!

The sliders are very, I am in the process of thinking up some new navigation slide templates for our internal elearning templates and this is a very nice one! I was also thinking about setting up a Windows8 Tablet kind of navigation: http://content.hwigroup.net/images/articles/Windows8dev1.png

Has anyone ever made something like this?