1 / 18

互動還是交流 ? 以訊息傳達觀點看教學網頁設計

互動還是交流 ? 以訊息傳達觀點看教學網頁設計. 淡江大學大眾傳播學系 朱孝龍 slchutw@mail.tku.edu.tw. 教學網頁常見兩種類型. 輔助課程學習 提供上課時無法詳讀的資料，與課程互補 充足課外資料與師生互動是網站設計重點 提供自學管道 提供結構化內容與解說，讓學生容易瞭解 引起與維持學習動機是網站設計重點. 為何教學網需要互動？. 優點： 適應學生不同的需求 讓學生有操控感覺 主動擷取而非被動接受 可跳開已學過的知識，快速進入想學的課程 缺點： 初學者無法判斷基礎知識與進階知識 資訊成為片段呈現，缺乏完整體系

kalila
Download Presentation

互動還是交流 ? 以訊息傳達觀點看教學網頁設計

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 互動還是交流?以訊息傳達觀點看教學網頁設計互動還是交流?以訊息傳達觀點看教學網頁設計 淡江大學大眾傳播學系 朱孝龍 slchutw@mail.tku.edu.tw

  2. 教學網頁常見兩種類型 • 輔助課程學習 • 提供上課時無法詳讀的資料，與課程互補 • 充足課外資料與師生互動是網站設計重點 • 提供自學管道 • 提供結構化內容與解說，讓學生容易瞭解 • 引起與維持學習動機是網站設計重點

  3. 為何教學網需要互動？ 優點： • 適應學生不同的需求 • 讓學生有操控感覺 • 主動擷取而非被動接受 • 可跳開已學過的知識，快速進入想學的課程 缺點： • 初學者無法判斷基礎知識與進階知識 • 資訊成為片段呈現，缺乏完整體系 • 缺乏學習軌跡(learning path)，無法知道學習進程

  4. 為何教學網需要訊息交流？ • 訊息交流是網站內容與學生相互回饋 • 訊息交流包含認知(cognition)與回饋(feedback) • 網站協助學生構築知識框架 • 網站內容與學生交流，增強認知效果 • 網站成為同儕與老師的訊息橋樑 • 知識經過認知、學習保留(retention)，進而轉化應用(transfer)

  5. Noise 雜訊 Source 發訊者 Message 訊息 Channel 管道 Decoder 解碼者 Receiver 收訊者 Encoder 製碼者 Feedback 回饋 Schramm, 1982 訊息的交流與傳達 • 有效的訊息(message)傳播(communication) • 常見傳播模式：

  6. 雜訊(noise)有哪些？ • 對網站降低察覺(awareness)效果 • 對網站內容無法維持興趣(interest) • 內容架構不清楚，學生無法建築知識框架 • 用語與舉例無法符合學生過往經驗 • 視覺與介面設計造成學生認知干擾 • 練習活動欠缺學生與網頁內容之間的連繫

  7. Okay! Then What? • 選定主要學生(target learner) • 喜好、需求、環境、 學習經驗等資料對於學習網站內容與風格設計具有很大影響 • 以問卷調查、訪談、及觀摩類似網站收集資料 • 設定學習目標 • 目標使網站有設計依循方向，並讓學生知道學習焦點與學習效果 • 作為網站學習成效評估標準 Learner Goal

  8. 建議：吸引注意力 • 運用創意、符合主要學生喜好 • 良好版面設計，加強網站的專業權威感 • 與一般類似網站不同的風格 • 密集在主要學生常去的網站廣告 • 挑起學生對需求的渴望 • 拿胡蘿蔔在前面：給予完成學習後的好處 • 放根棒子在後面：缺乏這個能力的壞處

  9. 建議：維持興趣 • 要求進度 • 網站具有自動紀錄點名(login)功能，並顯示出來 • 顯示學習進度，讓學生看到目標在望 • 要求回報分組討論或學習結果 • 密集個人小作業，讓學生互相評比觀摩 • 教師與助教回饋 • 學習期中提供學習指標（分數） • 導引學習方向 • 解決疑問

  10. 建議：內容架構 • 內容架構：內容知識的層屬（樹狀）關係 • 內容架構最好利用操作介面（通常是按鍵）表示，可隨時與內容同時對照 • 複雜內容架構可另設一頁說明，但容易打斷對內容的理解 • 有先後順序的架構可用數字(1,2)編號表示，平行的架構可用項目符號(*, ◆)表示

  11. 建議：內容敘述 • 使用與主要學生共同語言、經驗的例子 • 多使用舉例或案例代替說理 • 單元內容最好能提及前後接續單元，以及相關參考單元或連結，讓知識連貫 • 專有名詞要提供解釋（另開小視窗） • 使用聲音或影片時，三小段要比一大段容易傳遞與瞭解其中的訊息

  12. 建議：多媒體資料考量 • 圖片、聲音、影片的使用盡量在品質與網路傳輸速度（越快越好）間取得平衡點 • 使用聲音、影像要考量多數人的電腦配備與頻寬 • 減少網站對硬體或plug-in的需求 • 小心Javascript，以免無效用或拖慢電腦速度 • 每個影片或聲音檔播放前後最好有1~2秒空白，讓學生有接收訊息的準備 • 聲音與影片可考慮未來銜接iPod、MP3、MP4player的需求

  13. 建議：視覺設計 • 不要固定螢幕尺寸，有彈性會更容易閱讀內容 • 使用video時，最好能同時與文字內容一併呈現 • 注意螢幕各區域的視覺焦點(focal point)配置 • 減少視覺疲勞(visual fatigue)的產生 • 背景與文字顏色接近 • 強烈或凌亂背景色 • 視覺焦點凌亂 • 圖片與文字搭配時，注意視覺動線(visual movement) • 注意顏色、字級、行距等的視覺統一(unity)與協調(harmony)搭配

  14. 建議：介面設計 • 操作方式簡單、直覺、一致性 • 即時顯示目前操作狀態（感應、按下連結、目前連結） • 允許操作錯誤的彈性 • 除非步驟性內容因素，否則最好將所有連結顯示出來

  15. 建議：活動設計 • 練習題設計是可達成的(achievable)，給予答題暗示(hint)，引導學生思考，並顯示完成進度標示 • 利用團體學習(group learning)。但要求交個人作業同時，說明與小組成員討論與個人思考經過。 • 舉辦至少一次與專家或他校老師遠距會議（video, audio, or text)，讓學生獲得不同刺激 • 固定面對面小組聚會很重要，亦是考核個人學習成績最具參考價值的途徑。

  16. 結論 • KISS (Keep It Simple and Stupid) • 讓學生專注於內容，避免發生不必要干擾機率 • 網站設計須考慮多數人習慣與思考模式 • 網站須精心設計規劃，使呈現出具直覺性，容易接受訊息的內容 • The Medium is the Message -Marshall McLuhan • 訊息依靠媒體呈現、媒體依靠訊息溝通 • Stay hungry． Stay foolish -Steve Jobs • 學生想法與習慣持續改變，須不斷瞭解學生，改進網站內容，才能吸引並維持學生使用網站

  17. 參考網站 • 文化大學推廣部 http://www.sce.pccu.edu.tw/ • WebCT TKU http://webct.learning.tku.edu.tw/webct • 世新大學非同步遠距教學網 http://elearn.shu.edu.tw/ • 英文動畫文法 http://www.grammarfree.com.tw/tw/ • 英語傳教士 http://www.ep66.idv.tw/ • 顏色搭配 http://colorblender.com/

  18. Thank You for Paying Attention !

More Related