不同知覺偏好類型對操作介面之需求

經本研究之各項資料分析與歸納，「視覺型」與「聽覺型」知覺偏好之使用 者，分別提出數位學習網站介面設計各 16 項使用需求々而針對「故宮 e 學園-中國繪畫學習」課程網站操作介面設計，「視覺型」使用者提出 12 項應改進之建 議，「聽覺型」使用者則提出 11 項應改進之建議。透過不同知覺偏好使用者之需 求分析與改進建議，找出網站介面設計上的缺失，進行模擬網站之操作介面修正 與改進。

「視覺型」使用者對數位學習網站操作介面之需求分析〆

1. 網站內文字所使用的字型、格式、大小的需具備有一致性的。

2. 網站內避免使用超過七個字以上的標題。

3. 使用文字對圖像或照片進行說明，以增加辨識度。

4. 照片與圖像的編排要避免超出螢幕的視窗畫面。

5. 網站上的元件需整齊排列，讓頁面顯得簡潔。

6. 網站內不使用彈跳視窗，避免造成干擾。

7. 多媒體設計需相容於一般電腦系統，方便順利播放。

8. 網站內需避免重複出現的內容。

9. 將網站內相同的功能或元件設計成同一類型。

10. 網站應具備可輕易關閉網頁的按鈕設計。

11. 連結其他應用程式、檔案前，需給予使用者清楚的提示。

12. 網站操作方式必頇是容易記憶，能輕易操作的。

131

13. 網站介面設計，應讓使用者操作起來是愉快的。

14. 網站應不同需求的使用者設計不同的操作介面。

15. 網站的介面功能應能讓使用者快速完成任務。

16. 應讓使用者願意再度使用這個網站。

「視覺型」使用者對「故宮 e 學園-中國繪畫學習」課程網站操作介面設計 應改進之建議〆

1. 使用時無法快速的連結到網站中想去的頁面。

2. 未能使用不同顏色顯示已點選和未點選的連結狀態。

3. 在連結其他應用程式，如 PDF 檔案，未能前清楚告知使用者。

4. 應避免使用深奧難懂的語詞，部分語詞與英文名稱不易了解。

5. 回首頁與主選單按鍵標示不清，就整體畫面而言按鍵過小。

6. 首頁進入課程按鍵過小且標示不清，以色條方式顯示，不易辨識。

7. 課程開啟下載速度過慢，且每次皆需反覆執行。

8. 圖片解析度不佳，且於畫面比例上也太小，不利觀看。

9. 選單色彩設計，使用時產生不適感。

10. 部分字型顏色太暗，字體過小或與背景顏色過於相近。

11. 課程人物配音，撥放速度過快，會跟不上課程進度。

12. 遊戲內容過於單調，可增加遊戲趣味性提高使用樂趣，或新增「再玩一 次」選項。

「聽覺型」使用者對數位學習網站操作介面之需求分析〆

132

1. 將網頁的主要導覽區置於較明顯的位置，方便辨識。

2. 網站導覽區中使用圖示區以分出不同功能。

3. 網站內的按鈕、圖示等物件，應與使用者真實生活中的知識相符合。

4. 網站頁面使用一致性色彩設計。

5. 網站中每個頁面的版型採一致的編排方式。

6. 按鈕或選單，必頇能清楚呈它的現功能或連結。

7. 網站避免使用深奧難懂的語句。

8. 多媒體設計需相容於一般電腦系統，方便順利播放。

9. 網站內的多媒體動畫需設計退出或關閉的選項。

10. 網站內需避免重複出現的內容。

11. 網站重要的內容，應設計成不頇捲動頁面的情況下便可呈現出來。

12. 網站應具備可輕易關閉網頁的按鈕設計。

13. 連結其他應用程式，如 PDF 檔案，在連結前清楚告知使用者。

14. 網站有具備良好的互動介面設計。

15. 網站的介面功能應能讓使用者快速完成任務。

16. 網站應不同需求的使用者設計不同的操作介面。

「聽覺型」使用者對「故宮 e 學園-中國繪畫學習」課程網站操作介面設計 應改進之建議〆

1. 網站未能在明顯的版面位置顯示「故宮 e 學園」的名稱與標誌。

133

2. 使用時無法快速的連結到網站中想去的頁面。

3. 在網站點選連結後會開啟新的視窗。

4. 應避免使用深奧難懂的語詞，部分語詞與英文名稱不易了解。

5. 首頁進入課程按鍵過小且標示不清，以色條方式顯示，不易辨識。

6. 課程開啟下載速度過慢，且每次皆需反覆執行。

7. 圖片解析度不佳，且於畫面比例上也太小，不利觀看。

8. 整體網站按鍵選項過多，所在位置也不在明顯。

9. 遊戲內容過於單調，可增加遊戲趣味性提高使用樂趣，或新增「再玩一 次」選項。

10. 部分字型顏色太暗，字體過小或與背景顏色過於相近。

11. 背景配樂缺乏變化，所有課程皆使用相同背景音樂，單調乏味。

依不同知覺偏好受詴者所提之改進建議，進行網站操作介面設計內容修正，

「故宮 e 學園-中國繪畫學習」課程，在網站階層上主要分為登入首頁介面、主 要課程介面與輔助選單新視窗介面等三個階層，以下將就此三個部分提出介面修 正與改善建議。

在課程首頁之課程名稱標示為「中國繪畫」與「故宮 e 學園」網站首頁所標 示之課程名稱「中國繪畫學習」不同，且字體過小，在字型顏色上也與背景顏色 過於相近，不易閱讀，在視覺傳達上有清晰性與一致性的缺點々而左側之課程選 單按鍵，僅以 4 個色塊標示，透過使用者操作測詴發現在視覺傳達上有易辨性之 問題，而在介面操作上則讓使用者有易用性的困擾，如圖 6-1 所示。

134

圖 6-1 首頁介面改善建議

在圖 6-2 模擬介面中將課程名稱正名為「中國繪畫學習」，字型色彩則採取 較明亮白色與背景作區隔，課程選單部分則採用文字說明與數字提示課程單元的 方式，改善易辨性與易用性設計上的缺失，讓使用者可以在視覺直觀上，輕易辨 識色塊所要提供的課程連結。

圖 6-2 首頁介面修正示意圖

在課程主選單頁面下方為主要操作介面，由左至右分別為單位資訊區、輔助 選單區、課程控制區及課程選單區，其中背景色彩以炫光方式呈現，對整體介面 在視覺傳達上產生嚴重干擾，輔助選單區字型顏色與大小都有清晰性問題，而以 開啟新頁面的網頁呈現方式則影響介面易用性功能，而開啟 PDF 檔案之前，也

135

未能事先提醒使用者，會讓使用者對網站亯賴度產生質疑，課程控制區之按鈕元 件設計，在介面提示性與視覺傳達易辨性設計上，干擾使用者，如圖 6-3 所示。

圖 6-3 課程介面改善建議

在圖 6-4 模擬介面中操作介面之背景取消過度炫光部分，顏色上仍採漸層方 式呈現，輔助選單區字型放大，色彩選用上與背景色彩產生區隔，藉以提高視覺 設計上的清晰性，而點選滑鼠後，內容則呈現在上方的課程展演區內，不再開啟 新視窗（如圖 6-5），而全文閱讀之按鈕選項，則在點選開啟 PDF 檔前，給予使 用者文字提示々在課程控制區部分，則將按鍵設計為能與使用者生活知識相結合 之圖示按鈕，以改善介面提示性與易辨性問題。

圖 6-4 課程介面修正示意圖

136

圖 6-5 輔助選單新視窗修正示意圖