Animated guides?

[TS | Thomas]

What would peoples feelings be towards animated examples in future guides, e.g. a short (& small) 10-20 second flash animation showing how to perform a particular tweak per page. Or just stick with the current static gifs.

 

[howard_hopkinso]

I think that would be a very good idea.

They say a picture paints a thousand words.

It should help to get the point accross, even better than the guides are at the moment(good though they undoubtably are).

Regards Howard

 

[TS | Thomas]

I've uploaded an example of what I had in mind here. This relates to the mpg123 plugin for Winamp (See original page here).
As you said I too feel it's something easier to actually show what you're talking about than just typing it, or giving a single screenshot.
For creating this mini-flash video I used CamStudio, a free open-source app, though I'm entirely open to suggestions on formats, etc. at this point; presumably gif or flash (With a preference for Gif I'd image; no plugins required).
Obviously this will make pages longer to load (Compared the current screenshots) depending on the length of the video to be used, which may also be a consideration.

 

[Julio Franco]

I definitely like the idea... and I assume it's not too much of a hassle to make with the proper program? Implementation for a flash animation should also be easy, current one is not working ok in Firefox but seems to be working fine in IE.

A few things to consider:
- What's the size of the movie, and how does it compare to a GIF?
- Should we put these along with the usual images in the article or not?
- We should make it clear in the article that those are not necessarily the recommended settings but rather an example of how the panel/tab/screen should look like, and how you should interact with it.

Any more thoughts?

 

[ThomasNews]

Right, I've fixed the page, it now displays properly in other Browsers.
I like the pop-up window idea alright; could just stick a note stating that clicking on the image will launch a new window with a demo-video. That'd basically eliminate page loading issues to.

Software recommendations for recording/conversion? The aforementioned Camstudio captures in AVI (With built-in Flash converter). Windows Movie Maker would presumably be the most logical choice for simple AVI -> WMA conversion.

 

[DelJo63]

suggest video / animated examples be implemented as frame target=_new
and require user click to activate OR use the pop-up eg keyword activation as
done with the current adverts.

Formats that are common and least intrusive (imo) are QT and WMV.
Personally, I distain FLASH for security and as a resource hog.

Concept is great

 

[TS | Thomas]

Uploaded a new sample page; this retains the original image, prompting you to click on the image for a pop-up video in a new window

https://www.techspot.com/tweaks/memory-winxp/memory-2sample.shtml

WMV video this time

 

[DelJo63]

Amost

transitions between 'user actions' in the video are too quick to follow -- insufficient time to read the selected items.

also don't see any mouse-over actions to suggest 'animated example' is available
via click (neither IE or FF).

 

[Julio Franco]

I don't think opening in a new window is the way to go, but rather an implementation in the same page as before but if possible, it would be best if it is user-activated (if we can embed controls such as play/pause/stop).

Flash quality is much better than WMV/AVI, too. Not to mention it doesn't take ages to load in slower connections.

It's good that we are doing these tests though, in order to see the feasibility of such implementation in real guides.

 

[Vigilante]

I'll throw in my two cents.

GIF is out, not enough colors for decent quality.

Flash is ok cause most people have it already.

QT is out cause I hate it and it forces people to d/l their crap. Sticking you with iTunes bundled if they can.

WMV is ok.

I would go so far as to link both a wmv and flash version if possible. But I also say, make it on the same page and not a popup.

I noticed with the first animation, it was to long, as in, if I were really following it, I would be lost already cause I can't pause or rewind etc... So either all the flash have to have play/pause, or else stick with windows media.

My last thought is that, audio compliments animation tremendously. If possible I would have a voice-over explaining as the animation goes through. For more complex things, not EVERY thing.

And my last last thought is, continue using still images unless an animation just helps cutting out a thousand words. For example, animating an options page to "show" what options to click, versus an image with the options set already. I'd choose the image, cause all you're doing is looking at what options to set. But on the other hand, if the explanation has things like "look for the tiny blue line and just above is a cross arrow pointing left, right click on it and...." In other words, confusing things where just seeing it done would help a lot, use the animation.

.02

 

[DelJo63]

Flash quality is much better than WMV/AVI, too. Not to mention it doesn't take ages to load in slower connections.

flash requires ActiveX and personally, I'll never run it except for accessing
MS Updates via IE. My default browser is FireFox forever

Here's a list of Flash install issues (you guessed it, I don't have it installed

 

[DragonMaster]

flash requires ActiveX and personally, I'll never run it except for accessing

Not on Firefox.

What about just putting pictures?

 

[TS | Thomas]

Yeah, I was thinking similar, with WMV the qualities not so great & the file size is larger than the Flash version (That I'd put down in part to Windows Movie Maker; it doesn't offer much in the way of relevent options).
Flash works well but as has been mentioned, many find it a pain. ActiveX isn't particularly an issue; Firefox & Opera both feature Flash plugins. It's probably the easiest of the video plugins to install for any of the Browsers. As regards controls, they can be added, just when I chose to encode I disabled that (I think I had the animation set to loop instead).
Using another program I could insert text boxes into the image, not too sure I'd want to put my voice to it

So, my understanding on the topic is that;

Animation should be on page
Animation should be optional, e.g. click on image to load animation in its place (Hard to implement?)
Text/Audio commentary to animation as appropriate
Standard playback controls should be available

 

[TS | Thomas]

As regards why not just stick with pictures. Well, I think they can be a bit limiting, but primarily I like that it's different & with more & more on broadband, well, why not scale up the content accordingly?

 

[Vigilante]

Animation should be optional, e.g. click on image to load animation in its place (Hard to implement?)

The easiest and least painful way is with Javascript. But the problem is JS can be disabled easily and so those people wouldn't have it. Then you'd have to add code to see if JS is enabled, and then display the page accordingly.

But as for JS, you can have a text link or a small image, then add a 'onclick' event. Then when they click it, you tell javascript to load the animation in place. I think that will still work with flash. You would put perhaps <div> tags in the code as placeholders, and then tell JS to load the flash into that. Or something along those lines.
Also you could program it directly into flash to just sit there and wait for a click, and only when a user clicks, flash just loads it's own movie, don't know how hard that would be.

Otherwise, if the animations are small enough in size, just display them all, but stopped, or paused. And the first frame of the ani could be the descriptive image, maybe giving them some instruction.

Also, just off the cuff, a lot of sites will completely split their tutorials and things into two sections, the videos and the others. So when you enter the videos area, you get thumbnails and descriptions of the tuts, and they click it to enter the video.
But that doesn't work to well if you're talking about just popping small videos into a mostly textual tut.
So you could toss around the idea of doing the ENTIRE tutorial as a video, and just display the video on a page. Rather then having text and images AND videos on the same page.

Just food for thought...

 

[DragonMaster]

Should WMV even be an option? It's very painful to get working in Linux and even once you're setup, not every WMVs are working.

Pictures are great, and you don't have to play with back, forward, every time you want to see an other step. (Especially with the thumbnails used in the guides here) It's easier to print that way also.

 

[Julio Franco]

> Animation should be optional, e.g. click on image to load animation in its place (Hard to implement?)
>>Standard playback controls should be available

Those two go hand in hand IMO. Of course we should look for something automated so it's not a pain to implement, but say, static image, then on mouse over it shows a toolbar for play/stop.


> Text/Audio commentary to animation as appropriate
I don't think text besides the animation itself is appropiate, and audio commentary is not my favourite option either. Another idea would be a "click" sound for every click made, and that sort of thing. Also I have seen somewhere that every time a click is made, the pointer is surrounded by a few circles, like emiting waves and making it more obvious.

 

[DragonMaster]

but say, static image, then on mouse over it shows a toolbar for play/stop.

Looks like we're going to have compatibility problems with something like this.

 

[Spike]

personally, I rather prefer the flash idea. Or perhaps you could (as some sites do), display a gif which launches a small flash player window or suchwhen clicked. (obviously, unless closed between movies, the flash player window should be recycled by loading the new movie into the player in place of the old)

 

[Vigilante]

Perhaps TS should write a custom flash playing app for web pages. For example, where you have just ONE flash "box" on the screen. Then you have like a built-in selection to choose which "steps" to "show".
This could go side-by-side with a standard text/image tutorial, then just have this special flash player for added explanation.
As people read the page, it would have a special "note" saying, animation available, step 5, or whatever. To give people the option of watching, or not.