這兩天看了一些 slideshare 的簡報, 都是針對提供 Content Creator 良好 user experience (UX) 使用經驗的內容。其中 Braun 的網誌將 Drupal 的編輯畫面與 Gmail 的 mail 撰寫畫面的設計做了比較, 主要是由他的演講影片下所濃縮的。 其中最重要的觀念是不論我們如何以技術工程師的角度來自許在建構網站的分份, 但是當我們建構了一個網站, 我們就已經是設計師了。而設計師本身就是必須負責提供良好的使用介面與環境。
建構了網站, 除了給一般訪客用戶 的一開始吸引人的版面, 瀏覽動線等的設計外, 接下來的就是內容了, Content is the king! 因此產生內容的網站編輯者, 編輯用戶 或是 content creater就是另一個網站服務的設計重點。
一般而言這些編輯用戶會是我們的註冊使用者, 或是授予編輯權限的 editor, 這是網站設計管理的第二目標客戶。 他們是誰? 就要看網站的主要服務與使用對象, 對於商務網站上會是更新產品的商品管理者, 客務服務代表; 在公司內網 intra-net 下的偕同工作網站, 則就是企業內的辦公室人員。對於空開討論類型的社群網站等, 那就是一般的註冊使用者了。
用戶的接受度是網站成功的要素, 有不斷更新的內容, 才會有持續性的訪客, 有良好的內容創作空間, 介面與動線設計, 才能激發編輯用戶產出更多更好的內容。
而其中關於如何提供給編輯用戶良好介面設計的原則與工具, 整理如下:
重點一:
提供給這些 Power User 更多的控制能力(權限) More Control , 這可以透過:
1. 提供方便的工具: 在編輯工具下的: Wysiwyg & 檔案方便上傳 (file upload) 的是已經成為必要的, 所以模組 wysiwyg, ckeditor, imce, imce_wysiwyg, 與 media 等模組就是基本的必備開放的工具。而更進一步提供多個檔案上傳的的 Plupload 模組 也是重要的工 具。
2. 必要時設定使用者可以直接將node 加入到 menu, 來開放在創作內容時, 加入到選單 (add to menu) 的功能, 讓發佈的流程更為順, 而可以在內容類型下, 設定該類型可以限定發佈的選單, 不但可減少選單項目, 也可避免過多的選擇。
3. 提供快速發佈各類媒體, 連結的簡便標籤 (short-code), 如使用 [video]檔案路徑/URL [/video] 來崁入影片; 這在wordpress 的模組發展者是設計的第一要點, 而在 Drupal 上相對的工具是以 Filter (篩選器)的模組方式提供的。
- 如提供方便的建立圖片連結與標題說明的 caption filter
- 提供方便的連結到各種影片來源的 video filter
- 將 Views 產生的頁面或區塊放到 node 下的 insert view,
- 可自行可至畫不同 filter 的 custom filter, flexfilter,
- 以及提供將其他的內容 node 加入到內容的 node embed 與 fielder
4. 方便設定各種 node 的發佈情境設定:
1. 設計內容類型時, 在增加欄位時, 對欄位提供輸入的說明,最好包含範例, 方便使用者知道主要的目的, 也可以減少不少資料不一致與錯誤的可能性
2. 自動存檔: 使用模組: autosave, 來避免因為電腦或網路問題而失去辛苦創作的內容, node edit protection 也是避免在編輯時不小心未存檔離開頁面而造成的損失。
3. 預設啟動所有內容類型下的版本控制, 這是 Drupal 預設的功能, 開啟 revision 可以提供恢復的功能, 是系統效能沒有太大的衝擊, 但對於編輯用戶卻有很好的比較與還原的效用。
4. 關掉內容類型下預覽, 來避免混淆, 有些用戶會以為預覽就是存檔了, 而造成悲慘的意外 , 可以使用 view_unpublished 模組來提供儲存後不發佈的預覽效果。
5. 有邏輯性的群組欄位/選單: 在瀏覽與選單上, 提供設定適當存取的設定, 較少的選項代表不同意混淆,
6. 模組 admin_menu_source 可以提供類似 admin_menu 的管理選單, 但可根據不同角色 role 來設定選項的權限
7. 而在群組的選單與欄位上可以使用 grouping 選單與欄位的模組: field_collection。
8. 隱藏不必要的功能/選項: 有時許多 node 的 新增/add, 編輯/edit 預設的進階功能並不常用, 但是卻放在版面佔住很大的空間。建議可以放在下拉區內,
9. 而針對"必要"的欄位則設定的為預設展開(如標題, 內容) ,
10. 而縮關非必要/選用項目 (版本控制, 日期, 回應設定) ,
- 針對個別內容在網站內不同的脈絡情境 (context) 中, 可以設定各種情境設定的context_node, 與
- 提供不同版面設定的範本挑選 (必須配合設計好不同的範本 template tpl.php 檔案的) template-picker, 並提供對這些範本名稱顯示修改的方式來更改名稱, 可對 create 選擇要套用的格式範本。
1. 設計內容類型時, 在增加欄位時, 對欄位提供輸入的說明,最好包含範例, 方便使用者知道主要的目的, 也可以減少不少資料不一致與錯誤的可能性
2. 自動存檔: 使用模組: autosave, 來避免因為電腦或網路問題而失去辛苦創作的內容, node edit protection 也是避免在編輯時不小心未存檔離開頁面而造成的損失。
3. 預設啟動所有內容類型下的版本控制, 這是 Drupal 預設的功能, 開啟 revision 可以提供恢復的功能, 是系統效能沒有太大的衝擊, 但對於編輯用戶卻有很好的比較與還原的效用。
4. 關掉內容類型下預覽, 來避免混淆, 有些用戶會以為預覽就是存檔了, 而造成悲慘的意外 , 可以使用 view_unpublished 模組來提供儲存後不發佈的預覽效果。
5. 有邏輯性的群組欄位/選單: 在瀏覽與選單上, 提供設定適當存取的設定, 較少的選項代表不同意混淆,
6. 模組 admin_menu_source 可以提供類似 admin_menu 的管理選單, 但可根據不同角色 role 來設定選項的權限
7. 而在群組的選單與欄位上可以使用 grouping 選單與欄位的模組: field_collection。
8. 隱藏不必要的功能/選項: 有時許多 node 的 新增/add, 編輯/edit 預設的進階功能並不常用, 但是卻放在版面佔住很大的空間。建議可以放在下拉區內,
9. 而針對"必要"的欄位則設定的為預設展開(如標題, 內容) ,
10. 而縮關非必要/選用項目 (版本控制, 日期, 回應設定) ,
- 甚至隱藏不太可能會使用的控制項目 (如 作者等)。可以使用以下的模組: 如 simplify, 可隱藏多個項目的 jammer 模組
- 可考慮針對編輯用戶提供編輯時專用版型, 畢竟在編輯時與瀏覽時的操作流程是不同的,因此可以考慮在外觀>版型設定時, 可以啟用"編輯內容時使用管理版型" 來簡單的提供編輯用戶編輯內容時不同的版型, Braun 建議使用兩欄式的 rubik 或是 另外安裝 ember responsive 版型, 在這篇文章上有建立7個管理者的選單,涵蓋了 Seven (Drupal 7 安裝時提供的), Rubik, Cube, Stanley, Shiny, Ember, Adminimal 等。
- 在儲存送出後隱藏 "儲存/Save" 的按鈕, 可避免重複送出的 hide submit 模組, 主要是讓用戶在儲存送出後, 顯示訊息, 並隱藏送出。
- 而模組: addanother 則是在儲存後可以繼續編輯下個內容, node_clone 則是可以複製現有的 node 來建立新的 node 都是可以方便大量輸入時使用。
- 另外為提供更好的選項輸入的方式, 如用 multiselect 模組提供多項目的選擇 (不一定都會使用 按下control的多選)
- 而使用 chosen 模組可以提供如 gmail 上收件人找尋貼上的模式來提示輸入使用者, 標籤, 或分類的用語等。
- 其他如提供使用者登入後直接進入最常用的頁面位置的可用 login_redirect 或是 rules 模組。
