Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Silicon Valley STC Session
Bernard Aschwanden
www.publishingsmarter.com
bernard@publishingsmarter.com
Best Practices when ...
About this session
20:55@publishsmarter
A picture is worth 1000 words, how many is video worth?
In this session we addre...
Housekeeping and note taking
20:55@publishsmarter
Not all slides or topics are
equally weighted
Use some, discard others...
About your speaker
20:55@publishsmarter
Publishing Smarter: President
Content strategist, publishing
technologies expert...
Services
20:55@publishsmarter
We help clients: By helping clients:
5
Standard disclaimer
20:55@publishsmarter
In the interest of brevity I
will make some blanket
statements to keep it simple...
Why it’s a good idea and
what goes into a storyboard
20:55
7
Storyboarding
@publishsmarter
Purpose of a storyboard
20:55
Explains each screen in a course
Details each screen, what the reader will see/do
Helps t...
When to create a storyboard
20:55
After a plan has been developed and approved
Before any video is built
May not be nee...
Reasons you need to put the time in
20:55
Saves time/cost in the long run
ID roles and responsibilities
 Graphic design...
Elements of a good storyboard
20:55
Project and slide info
Visual/video elements
(graphics, callouts, citations)
Text e...
Minimum requirements likely include
20:55
Screen
number/label/identifier
 i.e. DITA-FM-01-23
Course name
Module name
...
Audio tips
20:55
Include slide by slide script
Could have sound effect or
music info (be careful)
Sound out tough words...
Graphics tips
20:55
Used to provide ideas to a
media team
Provide a description of the
screen
May include simple
sketch...
Text tips
20:55
Provide exact screen
content
With audio: Include
supporting text for the
narrator (notes about tone
for ...
Navigation and interactivity
20:55
Include info for every
screen
Answer developer questions
about course building
These...
Common storyboard formats/design
20:55
Good for SMEs who like the details outlined
Common format: Tables (Word or Excel)...
Common storyboard formats/design
20:55
Good for visually driven SMEs
Common format: PowerPoint
Visual format with slide...
10-11: Basics of a DITAmap
20:55
Learning objective:
 Basic familiarity with the
look and function of a
DITAmap, able to...
Tips and tricks for storyboarding
20:55
Know your audience and their needs
Know the delivery platform (web, CBT, print, ...
Sample: Storyboard to change a password
20:55@publishsmarter
Consider what goes into changing a password
This is a sampl...
20:55@publishsmarter 22
20:55@publishsmarter 23
20:55@publishsmarter 24
20:55@publishsmarter 25
20:55@publishsmarter 26
20:55@publishsmarter 27
Getting a tool to make the job of implementing a
storyboard easy
20:55
28
The right software
@publishsmarter
According to Adobe…
20:55
Adobe Captivate software reimagines the way interactive
eLearning is created for a multi-device...
My definition
20:55
There are many tools that build interactive content
The reason I pick Adobe Captivate is that it exc...
Get the tools
20:55
http://www.adobe.com/products/captivate
Follow the links to the download
Create an Adobe ID (if nee...
And by document, I mean “create a video to
explain how things are done” and NOT “write a
bunch of stuff”
@publishsmarter 2...
Use software you are familiar with
Find a simple task to perform
 Use paragraph tags in Adobe FrameMaker
 Capture/crop...
Video goal
20:55@publishsmarter
Teach users how to create a basic file
 New, based on a template
 Using the Equity Lett...
May be based on existing task documents
20:55@publishsmarter
Create a document based on a template
New files can be create...
Considerations for building
eLearning content
20:55
36
Create your first tutorial
@publishsmarter
Before recording
20:55
Take notes or outline
(storyboard if you can)
Plan your steps
Work through the process
Configur...
While recording
20:55
Add extra slides as you go (easy to delete)
Mistakes happen
 Restart if it’s early
 Continue if ...
Post-recording
20:55@publishsmarter
Delete slides you don’t need
Add transition slides if needed
 With repeated process...
Other considerations
20:55@publishsmarter
If you type, steady speed
Review all background
elements
Get a quality microp...
Avoid
20:55@publishsmarter
Add audio independent of the actions (do the task first)
Keep it short, 2 to 3 minutes of vid...
More to avoid
20:55@publishsmarter
Avoid uncontrolled environments (especially for audio)
Close messenger, email, etc.
...
Demo of the ideas discussed
@publishsmarter 20:55
43
Putting it into practice
Assumptions
20:55
Our Adobe Captivate version may differ
If your version is different, the process may change
Recording...
Create a storyboard
20:55@publishsmarter
I haven’t done so for this part
The goal here is to showcase Adobe Captivate
O...
Perform a trial run first, test the interface
20:55
Launch Word, and size as needed
Perform actions
 Office Button > Ne...
Repeat actions, find changed behaviour
20:55
Office Button > New
(or, in older versions, File > New)
Under Template, sel...
Record your first video
20:55@publishsmarter
1. Launch Captivate
2. Under Create New > Software Simulation
3. Under Size, ...
Perform your actions
20:55
Office Button > New
(or, in older versions, File > New)
Under Template, select Installed Temp...
Edit your materials
20:55
When done Captivate is ready
File > Save As in case of a crash
Review the slides, and watch p...
When done
20:55
Record your audio
Add effects if required
Add interactions (such as instruction and click boxes)
The o...
Share the finished product
20:55@publishsmarter
Select File > Publish
Set output options
Create and share
Publish to h...
Ideas and samples of finished content for online
and PDF/print
20:55
53
Deliver the content
@publishsmarter
Case study example
20:55
Adobe creates and delivers the TCS5 software suite
Included in this is the FrameMaker 12 Review...
Summing up the discussion,
and options to continue it.
@publishsmarter 20:55
55
Conclusion and contact
About this session
20:55@publishsmarter
A picture is worth 1000 words, how many is video worth?
In this session we addre...
Things that Publishing Smarter can deliver
20:55@publishsmarter
We can build storyboards for you
We can create training ...
Follow up contact information
20:55@publishsmarter
58
905 833 8448 (Eastern Time)
bernard@publishingsmarter.com
www.linked...
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Content creation, reuse, and publishing to everyone on every device (WritersUA)
Next

2

Share

Best practices when creating interactive video tutorial: STC Silicon Valley

A picture is worth 1000 words, how many is video worth?
In this session we address how to:
- Develop a storyboard
- Review a support topic
- Create a related video
- Help users visualize how to perform the task
Doing this helps your audience SEE how to resolve issues before they become problems

Related Books

Free with a 30 day trial from Scribd

See all

Best practices when creating interactive video tutorial: STC Silicon Valley

  1. 1. Silicon Valley STC Session Bernard Aschwanden www.publishingsmarter.com bernard@publishingsmarter.com Best Practices when Creating Interactive Video Tutorials 20:55 1 @publishsmarter
  2. 2. About this session 20:55@publishsmarter A picture is worth 1000 words, how many is video worth? In this session we address how to:  Develop a storyboard  Review a support topic  Create a related video  Help users visualize how to perform the task Doing this helps your audience SEE how to resolve issues before they become problems 2
  3. 3. Housekeeping and note taking 20:55@publishsmarter Not all slides or topics are equally weighted Use some, discard others Slides speed varies (reference) Questions? Ask any time! I’d love to claim errors/typos is on purpose… they isn’t, weren’t never, and ain’t; I’ll fix ‘em as I can… 3
  4. 4. About your speaker 20:55@publishsmarter Publishing Smarter: President Content strategist, publishing technologies expert, author, and geek-enough Certified Technical Trainer  DITA  Content management  Topic-based writing Society for Technical Communications  Vice President  Associate Fellow 4
  5. 5. Services 20:55@publishsmarter We help clients: By helping clients: 5
  6. 6. Standard disclaimer 20:55@publishsmarter In the interest of brevity I will make some blanket statements to keep it simple It’s not all 100% “the truth”, but I’ll stay close Purists may complain  And they are wrong!  (except when they are right) 6
  7. 7. Why it’s a good idea and what goes into a storyboard 20:55 7 Storyboarding @publishsmarter
  8. 8. Purpose of a storyboard 20:55 Explains each screen in a course Details each screen, what the reader will see/do Helps the reader ID course content, media, interactions before development  Could be SME  Could be the client  Could be a stakeholder in the training Guides all members on a team Provides a source that all people can refer to during dev 8 @publishsmarter
  9. 9. When to create a storyboard 20:55 After a plan has been developed and approved Before any video is built May not be needed in all contexts Consider the complexity of what is being created 9 @publishsmarter
  10. 10. Reasons you need to put the time in 20:55 Saves time/cost in the long run ID roles and responsibilities  Graphic designer creates look/feel  Illustrator builds images  Narrator provides audio overlay  Programmer builds interactions  SME/Client approve content  Sets initial expectations, define how course looks/acts  QA tool: Compare the final course with the storyboard 10 @publishsmarter
  11. 11. Elements of a good storyboard 20:55 Project and slide info Visual/video elements (graphics, callouts, citations) Text elements (on screen text) Audio elements (heard as the screen displays) Interactions/navigation for users (what to click, where) Branching (where next, options, flowchart) Overall learning objectives 11 @publishsmarter
  12. 12. Minimum requirements likely include 20:55 Screen number/label/identifier  i.e. DITA-FM-01-23 Course name Module name Lesson name Slide title  i.e. Basics of a DITAmap Visual components On screen text Audio info  Both narrator and effects Interactions info Branching info 12 @publishsmarter
  13. 13. Audio tips 20:55 Include slide by slide script Could have sound effect or music info (be careful) Sound out tough words or initialism and acronym info  DITA is did-uh, and not as dee-ta  SME is pronounce smee, not spelled out Es, Em, Ee.  WYSIWYG is wizzy wig 13 @publishsmarter
  14. 14. Graphics tips 20:55 Used to provide ideas to a media team Provide a description of the screen May include simple sketches, or text notes If video is needed, include notes and a link if possible 14 @publishsmarter
  15. 15. Text tips 20:55 Provide exact screen content With audio: Include supporting text for the narrator (notes about tone for example) No audio: consider if more text is required 15 @publishsmarter
  16. 16. Navigation and interactivity 20:55 Include info for every screen Answer developer questions about course building These may include:  Options a learner can take  Requirements that must be followed  Logical progression (what is next) 16 @publishsmarter
  17. 17. Common storyboard formats/design 20:55 Good for SMEs who like the details outlined Common format: Tables (Word or Excel) 17 ID and topic Learning objective Narrator On screen content Notes 10-11 DITAmap Basic familiarity with the look and function of a DITAmap, able to ID… The DITA map is a document that can be compared to a table of contents, or a document plan. .. Sample DITAmap with basic content, plus sample as code. Talk to SME to get sample as visual map and as code. 10-12 reltable Basics of a reltable with concept, task, reference content. The reltable, or relationship table is used to define related topics in columns and rows… Sample reltable with basic content, plus sample as code. Talk to SME to get sample as visual table and as code. @publishsmarter
  18. 18. Common storyboard formats/design 20:55 Good for visually driven SMEs Common format: PowerPoint Visual format with slideshows or outlines Provides similar information, but may be visual rich Ensure you also use the slide notes if working with a tool like PowerPoint Samples on next screens 18 @publishsmarter
  19. 19. 10-11: Basics of a DITAmap 20:55 Learning objective:  Basic familiarity with the look and function of a DITAmap, able to ID components of a map Narrator/Audio  The DITA map is an XML document that can be compared to a TOC or... Notes  Talk to SME to get sample as visual map and as code.  <?xml version="1.0"?> <!DOCTYPE map PUBLIC "-//OASIS//DTD DITA Map//EN" "map.dtd"> <map id="map_5D33A666A75E4B239F468C70A409CFAF" title="Working with Files"> <topicref format="dita" href="c_PrintingFiles.xml" navtitle="What is printing" type="concept"/> <topicref format="dita" href="c_SharingFiles.xml" navtitle="What is file sharing" type="concept"/> <topicref format="dita" href="c_SavingFiles.xml" navtitle="Why save files" type="concept"/> </map> 19  Screen notes ◦ Ensure the user clicks the map title to progress… @publishsmarter
  20. 20. Tips and tricks for storyboarding 20:55 Know your audience and their needs Know the delivery platform (web, CBT, print, mix) Chunk the info to manageable parts Include detailed audio and visual info Ensure storyboard agreement before work begins Include info about full motion recording, if needed  Avoid it if you can, adds overhead (size, control, edit restrictions)  Minimal amounts, planned, might be acceptable 20 @publishsmarter
  21. 21. Sample: Storyboard to change a password 20:55@publishsmarter Consider what goes into changing a password This is a sample only A very brief example of things that may be in a storyboard 21
  22. 22. 20:55@publishsmarter 22
  23. 23. 20:55@publishsmarter 23
  24. 24. 20:55@publishsmarter 24
  25. 25. 20:55@publishsmarter 25
  26. 26. 20:55@publishsmarter 26
  27. 27. 20:55@publishsmarter 27
  28. 28. Getting a tool to make the job of implementing a storyboard easy 20:55 28 The right software @publishsmarter
  29. 29. According to Adobe… 20:55 Adobe Captivate software reimagines the way interactive eLearning is created for a multi-device world. Develop any-screen mobile learning without programming using all-new responsive authoring. Now use an intuitive UI to transform PowerPoint presentations into engaging eLearning using actors, voices, interactions, and quizzes. Leverage best-in-class HTML5 publishing to deliver any content to mobile devices, the web, desktops, and leading LMSs 29 @publishsmarter
  30. 30. My definition 20:55 There are many tools that build interactive content The reason I pick Adobe Captivate is that it exceeds my expectation on what needs to be done  In the context of technical communication  A tool to create video based training  An environment to create tests in  A system to create content for clients  To do this well though is a lot of work  Adobe has delivered this for years 30 @publishsmarter
  31. 31. Get the tools 20:55 http://www.adobe.com/products/captivate Follow the links to the download Create an Adobe ID (if needed) Download, install, launch, test, purchase Consider the full Technical Communications Suite as it’s more inclusive  FrameMaker, RoboHelp, Illustrator, Acrobat  And, of course, Captivate 31 @publishsmarter
  32. 32. And by document, I mean “create a video to explain how things are done” and NOT “write a bunch of stuff” @publishsmarter 20:55 32 Review a task to document
  33. 33. Use software you are familiar with Find a simple task to perform  Use paragraph tags in Adobe FrameMaker  Capture/crop an image with Adobe Photoshop  Compile a help project in Adobe RoboHelp  Create a table in Word  Restart a game of cards on your computer  Navigate your company site Storyboard how the task will unfold 20:55 33 Considerations @publishsmarter
  34. 34. Video goal 20:55@publishsmarter Teach users how to create a basic file  New, based on a template  Using the Equity Letter Create a document, then close w/o saving Goal is to show how templates impact new documents Under 1 minute or so of video 34
  35. 35. May be based on existing task documents 20:55@publishsmarter Create a document based on a template New files can be created based on predefined standards. 1. Click the Office Button, then select New 2. Under Template, select Installed Templates 3. Select Equity Letter 4. Click Create 35
  36. 36. Considerations for building eLearning content 20:55 36 Create your first tutorial @publishsmarter
  37. 37. Before recording 20:55 Take notes or outline (storyboard if you can) Plan your steps Work through the process Configure screen resolution Hide unneeded parts (e.g.: the Windows Taskbar) 37 @publishsmarter
  38. 38. While recording 20:55 Add extra slides as you go (easy to delete) Mistakes happen  Restart if it’s early  Continue if it’s late Add to your notes as you record Pause to take stock, don’t think of timing  This can ALL be adjusted post recording (if you have good software, and are NOT doing “full motion” recording) 38 @publishsmarter
  39. 39. Post-recording 20:55@publishsmarter Delete slides you don’t need Add transition slides if needed  With repeated process: cut back on slides  Use to combine major ideas if applicable Add markup to materials  Text Caption, Rollover, Click Box, and Zoom Area  Add temporary slide number if location is unclear 39
  40. 40. Other considerations 20:55@publishsmarter If you type, steady speed Review all background elements Get a quality microphone Mix audio/text for those who can’t hear it Save often, and save backups if needed 40
  41. 41. Avoid 20:55@publishsmarter Add audio independent of the actions (do the task first) Keep it short, 2 to 3 minutes of video, not 10 to 15 Don’t pause “just ‘cuz”, people can watch more than once Only add background music if truly needed  Client requests  Cover other audio issues Keep effects simple 41
  42. 42. More to avoid 20:55@publishsmarter Avoid uncontrolled environments (especially for audio) Close messenger, email, etc. Take time on the recording If publishing to YouTube upload once, so get it right Keep the interface tidy Remember to save often 42
  43. 43. Demo of the ideas discussed @publishsmarter 20:55 43 Putting it into practice
  44. 44. Assumptions 20:55 Our Adobe Captivate version may differ If your version is different, the process may change Recording of use of Microsoft Word  Simple application demo  Can show many ideas Video is for internal use (so no specific setup for YouTube, screen configurations, etc.) 44 @publishsmarter
  45. 45. Create a storyboard 20:55@publishsmarter I haven’t done so for this part The goal here is to showcase Adobe Captivate Of course, YOU can consider what the storyboard may look like though If you REALLY want to test yourself, develop a storyboard 45
  46. 46. Perform a trial run first, test the interface 20:55 Launch Word, and size as needed Perform actions  Office Button > New (or, in older versions, File > New)  Under Template, select Installed Templates  Select Equity Letter, then Create  Office Button > Close (or, in older versions, File > Close)  Do not save 46 @publishsmarter
  47. 47. Repeat actions, find changed behaviour 20:55 Office Button > New (or, in older versions, File > New) Under Template, select Installed Templates Select Equity Letter, then Create Office Button > Close (or, in older versions, File > Close) Do not save This process gives you the chance to see what happens on screen as you perform standard actions. 47 @publishsmarter
  48. 48. Record your first video 20:55@publishsmarter 1. Launch Captivate 2. Under Create New > Software Simulation 3. Under Size, select Screen Area (Full Screen of Monitor 1) 4. Under Recording Type, select Automatic, and Full Demo if required 5. Do not pan, no narration needed 6. Click Record, then wait 3 seconds 48
  49. 49. Perform your actions 20:55 Office Button > New (or, in older versions, File > New) Under Template, select Installed Templates Select Equity Letter, then Create Office Button > Close (or, in older versions, File > Close) Do not save Press End (on kbd) when done recording 49 @publishsmarter
  50. 50. Edit your materials 20:55 When done Captivate is ready File > Save As in case of a crash Review the slides, and watch performances Press F10 to view from current to next 5 Delete slides you don’t actually need Review a few times to make sure the right ideas have been captured 50 @publishsmarter
  51. 51. When done 20:55 Record your audio Add effects if required Add interactions (such as instruction and click boxes) The order of those may switch 51 @publishsmarter
  52. 52. Share the finished product 20:55@publishsmarter Select File > Publish Set output options Create and share Publish to help repository Import and include in FrameMaker/PDF content Add to RoboHelp Without interactions put it on YouTube 52
  53. 53. Ideas and samples of finished content for online and PDF/print 20:55 53 Deliver the content @publishsmarter
  54. 54. Case study example 20:55 Adobe creates and delivers the TCS5 software suite Included in this is the FrameMaker 12 Reviewer’s Guide Content (text) in the guide is written in FrameMaker Embedded video is created in Captivate Content is converted to PDF from within FrameMaker Content is converted to online formats using RoboHelp All content delivered to all channels in all formats 54 @publishsmarter
  55. 55. Summing up the discussion, and options to continue it. @publishsmarter 20:55 55 Conclusion and contact
  56. 56. About this session 20:55@publishsmarter A picture is worth 1000 words, how many is video worth? In this session we address how to:  Develop a storyboard  Review a support topic  Create a related video  Help users visualize how to perform the task Doing this can help your audience SEE how to resolve issues before they become problems 56
  57. 57. Things that Publishing Smarter can deliver 20:55@publishsmarter We can build storyboards for you We can create training videos We can develop interactive content And we can teach you how to do it yourself 57
  58. 58. Follow up contact information 20:55@publishsmarter 58 905 833 8448 (Eastern Time) bernard@publishingsmarter.com www.linkedin.com/in/bernardaschwanden @publishsmarter www.publishingsmarter.com
  • borysmar

    Mar. 1, 2016
  • LinaScorza

    Apr. 27, 2015

A picture is worth 1000 words, how many is video worth? In this session we address how to: - Develop a storyboard - Review a support topic - Create a related video - Help users visualize how to perform the task Doing this helps your audience SEE how to resolve issues before they become problems

Views

Total views

1,322

On Slideshare

0

From embeds

0

Number of embeds

108

Actions

Downloads

0

Shares

0

Comments

0

Likes

2

×