大家好,這篇由Hahow兩個老師:林協霆與吳哲宇共同發起的線上課程紀錄與討論,以相同的問題形式探討線上課程選擇與製作的眉眉角角,將分別來從幾個面向著手,協霆的版本&哲宇的版本:
期待這篇文章可以讓更多人加入線上課程製作的行列,也能給與大家選擇線上課程時的參考基準。三人行,必有我師焉,當我們勇於教學與分享、我們可以打破教育的彊界。
協霆信箱: hsieh.ting.lin@gmail.com
哲宇信箱: frank890417@gmail.com
可以簡單的介紹一下你們跟線上課程的淵源嗎?
從小開始學習程式語言跟各種軟體操作,初步熟悉之後大部分都是遇到特定經驗問題,看線上教學的影片才能解決自己的需求,包括以前學習Adobe Flash/ Premiere…等系列軟體或程式語言,常會希望看從零到有的實作過程。
學習網頁的過程中,一開始是看普通的html/css教學,也嘗試過codeschool一步一步跟著打的形式,然而學沒多久就覺得他只教學怎麼使用,鮮少提及怎麼把網頁做得好看,離實際能夠上線的網站還有好大一段距離。不僅自己想要的視覺設計難以實踐,同時也覺得很挫折,最後才開始到處翻別人的作品/ 影音教學。
大量攝取經驗之後,每天寫兩三個網頁,現在才能夠完整做出有美感的網站,因此把自己的經驗統整起來,不保留的開設了 《動畫互動網頁程式入門 (HTML/CSS/JS)》,不僅是希望讓大家少走段冤枉路,更希望作為一個里程碑,把會的東西重新咀嚼跟系統化,希望作為一個開始,把探索設計跟程式結合的路徑插好路牌,期盼更多人能夠一起擴張這條道路。
依其內容分類,主要可以分為三種
其本上這些課程已經預錄好的影片,由老師上傳到平台上,學生購買後,在一定的時間內可以觀看,而課程影片內容主要可以分為四種
以你們教學以及學習的經驗來看,線上課程有哪些限制?
線上課程的限制主要有四個:
進入心流模式難在開始的掙扎
我認為線上課程最困難的是 自制力,一個300分鐘的線上課程其實只要一個下午就能看完,更別說一般來說語速會稍微放慢,若是使用2x速度功能,大約兩三個小時就能夠完成一門課,相對於學校體制的選課是集中性很高,很容易快速累積的。
但也因為沒有開始的強迫性,難以長時間專注作「正事」,我們體制內的學習經驗之糟使我們下意識的會抗拒學習,認為過程痛苦而難熬,因此我以一個中心思想行銷與錄製課程:這裡有一個夢想,我們要做的是逼近那個想像中的自己,絕非囫圇吞棗把知識死背起來。
實作是學習最快的進化方式
學習是嘗試錯誤並改進的過程,人能問能改的話進化速率之快,線上課程的缺點在於沒有實體的老師站在你身邊「盯著」你,產生實作的場合跟氣氛,因此動手的門檻會難以跨越。
在準備線上課程的時候,最好是將素材包裝好,資訊整理的清楚雅觀,去除多餘的干擾,講義跟提示(hint)在教材裡面準備好,從學生的角度想「當我完全不會的時候,嘗試時可能需要些什麼?會遇到些什麼問題?」,就像開始寫報告我們會先把紙跟筆還有參考資料放在桌上隨時參考,才能夠讓越多的學生開始動手,若學生剛好遇到問題回來看講義裡早已有Q&A解答,就能無痛跨越了。
線上課程之於實體課程,相似於廣播之於真人秀。
線上課程少了真人的講師魅力,極度倚賴講師的聲音表情,演說便成重要的好壞憑據,好的教材是乾貨,寫在書本裡等待稀釋,老師的權責是消化咀嚼後以自己的觀點、經驗、帶著聯想來「稀釋」這些知識結晶,免得學生看到一半就不想看了,因此影片更重視好的口條跟聲音、不鬼打牆的說明、清楚的詮釋,才能夠在沒有肢體語言或即時問答的情況下把經驗傳授出去,舉例來說:
「padding代表網頁的內距,margin代表元素的外距」
對於沒程式經驗的人而言,誰聽得懂你在講什麼,但若是說明:
「當我們在製作網頁的時候,一個頁面內部像書包含了文字,如果文字全部都跟書的邊邊貼合擠得滿滿的,我們會覺得視覺壓力很大,因此這時就必須往內留白,保留跟邊緣之間的空隙,這段空隙就稱為內距,也就是外框與內部內容的留白距離。而內部段落與段落之間彼此的距離/段落與說明圖片的距離,就稱為段落元素間的外距」
如此,我稱為是固體知識的再還原,當看完再回去看第一句時,就能與剛剛的內容連結,看得懂的乾貨就成為知識與自己經驗理解的連接窗口。
如果問題沒有得到回覆、或成果沒能得到檢視,學生就不會想再學了。
實體課程人數少而精,一次要修正20個人左右的作品給建議可以寫得很仔細,線上課程2000多人,蜂擁而上的交作品就有點難每天花那麼多時間在上頭了,建議是培養一個大家會互動的討論區,當遇到問題的時候即使你不在學生也能彼此照應,如果不吝給予學生自己的經驗,相信樂於分享與彼此幫助的學生很多的!
這些問題,有沒有什麼解決方案呢?
上面提到的問題:
自制力
目的與實作練習
學習流暢度
學生互動
每個人的吸收速度、方法不同,因此對於線上課程的評價也不一定,請問該如何選擇一門好的線上課程呢?
線上課程可以從以下方式進行評估:
課程包含你需要的總知識量,與其他課程的相對優勢
一個課程內總知識量越多則這個相對比例越大,像是網頁課程只有教會基礎的html/css,就跟教會並且你帶著做一個實作作品的課程內容量差很多,因此在比較課程的時候可以先比較內容量。
哪些是吸引你的內容? 哪些是網路上教學共通有的? 哪些是只有這門教學有的內容? 如果全都是網路上有的內容,也沒有進一步延伸跟舉例,那這門課程就很容易埋沒在眾多免費資源中。
另外,有個額外的指標,內容的呈現形式分為 網狀 跟 單點式 ,如果講PS每個單元講工具列的一個按鈕在做什麼,沒有連結其他跟前面的概念,或者講網頁把每個標籤跟用法分單元洋洋灑灑十幾個單元講,就是單點式,因為知識體系零散沒有組織,常學完過沒多久就忘了。
網狀應是一個解決問題連結經驗的過程,無時無刻補足當下學習點跟以前學到東西的模式,才能學以致用,不惜重新略提過也要把學過的概念深深地刻印在腦裡。
講解好壞可以從幾個面向評估:口條、詮釋能力與經驗
口條:比如hahow的試看影片就是給學生選擇口條,建議是選一個聽得進去的,如果老師講話很多語助詞、音調你不喜歡、講話時候有氣無力…等等,都會影響你接下來學習的意願,因此,請挑一個你聽得下去口條的老師學習。
詮釋能力:老師能把概念描述清楚嗎?能夠透過適當的比喻讓你快速進入抽象的內容嗎?能夠在適當的內容段落切停留給大家思考嗎?能夠給你些問題引導你一起思考嗎?當然,如果要符合全部的條件大概沒多少課程,但是這些都是量化吸收程度的指標,像是二十一世紀資本論枕頭書艱澀難懂,但詮釋二十一世紀後資本論導讀的書就容易閱讀相同的概念。
經驗:之所以大家都喜歡聽老手教學,不是因為他會用那些功能,而是想聽他用那些功能的時候,曾經遇到什麼情況,後來怎麼解決的情境故事,這才是關鍵的know how,不然去官網看看功能教學就好了。
像Adobe基本功能只要看完官網都學得會,但能帶你深入當時在工作情境的老師,有著實戰經驗能夠很有系統解決看似糾纏問題的思考方式,才是學習的核心,因此在評估的時候可以從試看內容和課程敘述,來判斷是否有足夠的經驗值。
做出一個完整作品需要的時間,是一個半成品的五倍
入門課程跟進階課程差在完整度,比如你鮮少看到入門課程從規劃網站視覺開始一路講到把網頁魔鬼細節中遇到的問題也能帶著一起跨越,就像陡峭的學習曲線。
實作作品最後的細修能帶來很大的差別,也許只是幾個padding / 距離的調整就能改變整體作品的質感,因此挑選有好又完整實作作品的課程,會比單純demo過功能就草草老了事,從頭到尾沒有做過一個大東西的課程更能讓你進化。
若內容很少且老師講很多無關的東西、語速又快,沒辦法快轉會很辛苦。
語速慢時,有內容的老師還能透過快轉來解決。但是語速快又容易繞圈的老師,沒有辦法快轉時是件很痛苦的事情,就跟你沒有辦法快轉大學教授說的話,坐在台下就會想滑手機的感覺一樣。
可以與我們分享一下你們製作線上課程的流程嗎,包含動機、選題、課程單元安排、內容設計等?
一開始是Hahow的魏敏問我說,現在平台上很少網頁相關的課程有沒有興趣開設,一開始想說「入門」嘛..應該不講太多,不過希望自己的教學能夠為兩年的網頁前端之旅留下個里程碑,所以決定將所有會的東西不保留的一次錄製成教學影片,但是塞了1600多分鐘,總覺得都還只講到淺層的東西而已呢..
核心目標
對於入門而言,我自己遇到最大的困難是沒有人從頭做過一個完整的網頁給我看,如果有看過參考流程,至少每個環節都知道需要做什麼,怎麼搜集資料,所以我認爲一個課程很真實的帶領大家經歷製作「動態」有趣的網頁,是有參考價值的。
完整 / 分拆?
原本想說開很多堂系列課,但考量到如果一個人學完第一堂課之後,發現自己做不太出東西來,會不會覺得很沒有成就感A_A,就不會想繼續上課了,所以選擇一次抓完整而非分拆,依照內容做分拆,不如依照難度分拆,如果真的要拆開來開設,應是一堂入門課接著是一堂進階課,建立通盤理解,接著選擇進修。
範例規劃
動態跟範例方面,我認為要學生直接自己想會太抽象,所以先準備好幾套虛構的範例,帶著實作一遍(要虛構一個完整的品牌很花時間…),不過好處就是能夠賦予課程臨場感,感覺學生就坐在工作室會議的一角,參與著整個專案的進行。
在講述課程內容的時候,我主要有兩種情況,一種要說明一個新的概念(a),一種是遇到問題時如何解決(b)。
說明的核心在於我會用概念說明夾住頭尾,中間盡可能延伸跟舉例,最後再提到一次是為了要讓印象更深刻。
脈絡:概念核心 -> 說明 -> 舉例 -> Recall概念核心
例子:padding是內距 -> 以書籍比喻說明概念 -> 舉在實際網頁應用padding的地方 -> 重新說一次padding是內距跟概念結尾
遇到問題時更好,如果有練習過很多遍,帶著大家走過問題解決流程,增加臨場經驗
脈絡:遇到問題 -> 說明情況 -> 連結過去概念 -> 實作並尋找資源 -> 解決問題
例子:html元素沒有跑出來 -> 說明可能沒跑出來的原因,帶著一起檢查他跑去哪裡了 -> 連結第xx單元提的display/overflow概念推測問題原因並解決 -> 實際修改 -> 解決完問題後recall一次概念加深印象。
單元長度
我是先想像自己還沒學會網頁之前的歷程,一步一步把探索學會的東西列出來再濃縮,一個單元大約10-20分鐘左右說明一個概念,不過越後期實作會越來越複雜,就有所取捨了,我選擇把一個單元完整的拉很長,想停就停,有考慮依照相同的形式分階段寫範例,讓實作能夠拆成幾個階段進行。
章節編號
Hahow的流水編號蠻難用,建議自己建立章節編號,3-1 3-2…這樣一路排下來,每個大單元的結束都會安排比較大的專案讓大家「一次用上」所有這個大單元裡面學習的東西,做一次深刻的複習。
共筆
我有整理一整份HackMD共筆統整所有問題,也有把所有單元與建議學習列出來,方便想要安排的學生參考 動畫互動網頁程式入門 | 資源整理
講稿/範例的規劃
一般來說,我會先根據該章標題把範例寫出來,寫到自己能夠做的極致,將能夠加的東西都加進去,接著根據自己的單元長度/內容作簡化,把範例梳理壓縮到自己能夠從頭到尾順暢demo的程度,加上一些必要的註解。
錄製課程我會先講過一遍,試著看看臨場發揮的時候會想到什麼跟講什麼,把所有覺得重要的點記下來(直接講勝過一直卡在紙本規劃!),接著兩三遍之後會稍微比較熟一點,就大概知道單元總共有什麼內容了。
比較痛苦的是到後期每個實作專案都很長,我需要很完整的demo順過一次,所以同一個大型作品必須要重錄2-3次,每次長度都到一個多小時很痛苦,建議如果有大型單元規劃,梳理完之後可以拆成幾個階段,不止可以分開錄,也不會讓學員太痛苦。
基本元素-課程封面/介紹影片/講義圖示風格/影片前opening
你的課程最吸引的人核心,描述「產物」而非「軟體」
忌諱:僅以專有名詞下標/沒有產物描述,入門課程容易傳播不出去
範例:以網頁課程為例 (x為較不建議的方向)
(o) 動畫互動網頁程式入門(html/css/js)
(x) html/css/js前端建置與實務
分析:
(x) 前端-以入門課程而言太過艱澀,僅會下一個「專業詞」的印象
(x) 建置-建置什麼? 前端看不懂的情況下 這個動詞沒有主詞跟受詞
(x) 以看完之後留下的印象而言
前者留下「動畫」「互動」「網頁」「程式」「入門」
這些關鍵字,後附的專有名詞供懂的人共鳴
後者只有本身有底質的人看得懂
(o) Photoshop練功坊 -入門操作到進階合成
(x) Adobe Photoshop軟體教學速成班
分析:
(x) Adobe為冗字,Photoshop的品牌識別已經足夠,
(x) 軟體教學 教什麼?
上面提到操作到合成,
下面僅提到「教學」跟「速成」,
「教學oo」跟「xx速成」都沒有主詞xx受詞oo
課程名稱中完全沒有提到就會是弱勢
清楚 簡潔 概念性
忌諱:字太多太雜 圖樣或顏色辨識度不夠
課程封面非常重要,除了標題之外,課程封面是一眼望過去選擇的主要因素,太雜太小的文字在螢幕尺寸小時都是看不到的,僅憑著第一眼的「印象」,因此有些做法是用純色塊把字放很大,也有的是放課程中最精緻的作品加上標題當作封面。
三分鐘,問題 -> 反思切入需求 -> 說明課程怎麼滿足需求
忌諱:一直描述豐功偉業反而沒提到要教學什麼
如果你的課程介紹影片只有在講講師經歷過a專案得過b獎項上過c媒體所以快來上課,那麼很容易把原本有機會買課程的同學弄的不想買。
大部分人看影片是希望知道
「你能解決他們的什麼問題?」
「你的課程特色在哪裡?」
「這堂課程適合我嗎?」
因此太多的歌功頌德令人反感,看完不知道重點在哪裡,可以試著敘說
「現在普遍存在什麼問題?」- 跟生活經驗連結共鳴
「什麼樣的人適合來上這堂課?」- 產生專屬感
「課程會怎麼進行?有什麼環節?怎麼參與?」- 具體步驟降低想像
「我學完之後可以做出什麼?」- 提供目標跟夢想
這樣的思路引導腳本的編寫,三分鐘左右是注意力的極限,除非你有像圖文不符那麼強大的動態圖像,否則還是以兩分鐘左右為劇本上限,意思是起(問題)、承(怎麼解決)、轉(課程特色)、合(綜合推薦),四個階段大約各只有30秒而已。
清楚簡潔向量(以一般程式類為例)
講義的目的是說明清楚,太裝飾性會對閱讀造成干擾
動畫化課程封面,建立品牌連結
對於一個同樣想開課的人,假如他已經對於課程有所規畫了,那接下來他需要做什麼準備?像是器材設備、軟體等
好的麥克風讓耳朵上天堂,壞的麥克風讓課程住套房
300元的麥克風與6000元的麥克風品質差距之大,後者好像講者本人就在面前,前者則是遙遠模糊又有許多雜音,線上課程倚賴器材的成分中,麥克風就是最需要投資的一項設備,我使用Zoom h2n(約5000元)進行課程錄製,當旁邊有噪音時他的指向性強,可以針對人聲清晰的收音,也就不會有太多干擾。
學生上課時使用的耳機居多,其次是喇叭,因此噪音跟清晰度很重要,耳機以一般初階作為基準,像是Apple附贈的Earpod即可拿來當作收聽測試。
可以以以下標準檢視自己的錄音設備條件:
Zoom H2n/H4n在不同環境中的介紹影片,用好的耳機聽效果尤其明顯。
對了,使用指向性麥克風要注意它指的方向,剛開始錄前幾堂的時候我放反了,錄到鍵盤的聲音,害的我想說怎麼講能那麼大聲了還聽起來如此遙遠。
Hahow的影片尺寸是16:9,若不想額外剪輯或切到軟體畫面,最好是買個16:9以上的螢幕,螢幕錄影對於硬體需求不高,能跑能動不會lag就可以了,但足夠高的螢幕畫質才能夠錄製出足夠品質的影片,你總不會想要用個方形螢幕錄製結果兩邊影片留下兩條黑條吧! 上下貼滿會留左右黑,左右撐滿又被裁切到軟體,搞得最後只好重新錄製。
對於後製而言快的CPU跟SSD很重要,不然錄一個課程一小時,要花三個小時的時間轉檔,等到枯萎了也浪費時間。
軟體
基礎的後製包含加 片頭動畫 / 單元名稱 / 片尾 / 簡單的背景音樂(即使小小聲也差很多),能夠大幅提升教學影片的完成度,我使用Adobe Premiere進行編輯,後製經驗較少也可以選擇 威力導演 之類的剪輯工具,學習成本比較低。
音量平衡
一定要轉完一個檔案後自己先用耳機評斷這樣的聲音夠不夠大,我會把音量拉到60%的位置做測試,如果剛剛好就ok,要考慮若學生用阻抗大的耳機聽課程,不能再放大音量的時候就會太小聲,以一個影片為所有影片的音量比較,盡可能的一致。
背景音樂
注意人聲相較於背景音樂會不會干擾,淺淺的、能彌補空白時間尷尬的背景音樂即可。
這邊我著墨的比較少,因為課程都是螢幕錄製沒有露臉(笑,不過小提醒就是不要相信筆電的前置鏡頭,畫素絕對是不夠的,擺個腳架一台DV都會是更好的選擇。
你們的課程都Hahow的銷量都很高,請問你們對於課程行銷方面有什麼看法或建議呢?
宣傳方式: 故事行銷 / 實作行銷 / FB持續更新 / 提供延伸建議 / 活動散播 / 半公開內容
「大家都在教作網頁,很少人教做好看的網頁」
網頁通常是誰學呢? 如果TA打學生,學生做網頁大部分會當作一種興趣或是備用技能,所以想是網頁課程除了學生外,我打的是「想要嘗試程式的設計師」,這些設計師往往經歷過很多的網頁UI設計,但每次跟工程師的討論都是夢靨,細節被草草帶過,恨不得跳下海自己碰程式,盼望有招一日就算不能自己寫完整的網頁,也能夠有修改微調的能力。
除了課程的內容能夠行銷之外,課程製作的課程也是一種行銷!
一篇出於什麼想法製作這個課程、製作中的辛酸談、想要帶給大家的改變…等等,就帶來看到商品背後製作過程老師傅揮汗精琢的感覺,更能讓教師從夢想的高度回到努力的現實,覺得也是一個活生生,不斷付出的人,不然潛意識總覺得線上課程是無中生有「崩!」就出來的,自然就不會有太多額外感情。
「如果課堂內容極為吸引人看到會說『哇!』,就是最好的行銷」
為什麼有些課程你看到會想購買,有些則是覺得還好?
除了課程核心理念外,大家想像的是「學完課程後我到底能夠成長什麼?」,從實作宣傳,第一眼覺得哇 這種作品我也做得出來的感覺,不斷不斷的能在FB滑動的時候有曝光度、直接轉貼重點社群,以作品形式夾帶範例與課程,機會行銷(看準風潮直接以教學的東西創作作品)。
另外,可以逐一在FB課程社團介紹重點單元,以快轉、精彩截圖、範例會用到的功能脈絡來說,如果作品好的話,就很容易打中學習者的心,或是快轉影片打中產生「哇 好厲害」印象的心理。
視覺包裝在這裡就很重要,如果做出來的東西有美感,連雞鴨都可以成為天鵝飛上天,在內容已經很充實的前提下,盡可能提升課堂範例完整度跟美感,在大家心目中留下好的第一印象。
「只有在FB上看到po文的時候,才會想起塵封已久的課程」
很多募資課程上完之後就很少人學了,要評價更是遙遙無期,因為買的人跟本忘記他有課程了…所以適時的刷存在感是必要的,以學生的角度來看,如果教師不斷發佈更新、新增課程內容,三天兩頭你就看到老師在fb上面回答問題,總會升起一股愧疚之心週末就打開來看看課程吧(笑
「欸,我有買你的課程耶,但是我還沒開始看XDDD」好多人遇到都跟我這樣說,也跟提到一直看到我po文,一定會趕快開始的,可能這樣的手法真的能在隨著時間流逝的FB瀑布留下些足跡吧。
「給完釣竿後,順道告訴他們魚在哪裡」
做完了實際的範例,學完了東西,作為教師是一個引路人,當學生渡過了河來到另一片汪洋,準備好地圖是最後好好送一程的祝福,也是自己課程的句點。
做完一個作品或專案時,不妨提供說「這個部分可以怎麼改造成自己的東西」「可以參考哪些更進階的案例」「更多延伸的練習」,才能避免學完後就不知道要做什麼,沒有精進目標的窘境A_A
「一場實體活動加上好的演說,推廣自己的努力」
我曾在雜學校攤位與高雄前端聚會時推廣課程,當你在對的環境會有有共鳴的潛在學生時,勇敢的推銷自己課程(剛開始感覺真害羞),不過對於自己的努力不應該否定,帶著謙卑的心情與人推廣。
有多少就講多少,千萬別誇大自己的課程,大家都是明眼人,如果買了之後看沒幾堂發現沒料 或沒有「當初推銷時說的東西」的時候,除了失望外準備多個負評吧XD 更甭提幫你推薦給其他人了。
「學生買的是脈絡而非只有作品」
在課程內容中,我並沒有特意的去鎖codepen實作網頁的內容,因此你可以看到原始碼,要是你會寫網頁也能自己實作,我認為真正有價值的在架構的過程,怎麼分析怎麼建構,半公開課程中的專案不僅沒有壞處,更有可能吸引很多喜歡你作品的學生。
「讓當課程好的留在大家的心底」
有一天如果朋友突然說想學網頁、想學Photoshop,你會想起什麼課程呢?你會推薦給朋友嗎? 綜合所有課程品質跟行銷,如果能讓這個答案是願意,你不僅幫助到他,更是讓他覺得你有價值,願意將你分享給其他人,這樣的時刻是非常感動的。
互動提供成就感,同時檢視課程問題
如果遇到問題都要來來回回的翻「問題討論區」太麻煩了
請問你們未來對於線上課程方面有什麼規畫呢?還會不會想再開設線上課程,如果會,會以什麼樣的形式製作呢?
未來我如果還有開課計畫,我會想將進階的網頁課結合設計與其他領域,學習互動設計與機器學習創造更有趣的作品,畢竟網頁僅僅是呈現的媒介,有了功能、故事後才能投入我們的生活中。