Chia Yi Lai

.Com system manage

ndc-system

.Com 架站平台的系統管理介面,它就像是 WordPress, Joomla! or Drupal 等內容管理系統(CMS),而且更簡單上手。

易使性(usability)至上

最高宗旨就是要讓使用者不經學習,很快就能上手,每個樣式都應該是為了更清楚、更方便使用。
減少使用者的點擊數、動作,有些功能是一連貫的動作,可透過程式幫使用者自動完成,減少使用者的動作。像是開啟某些物流功能後,可使用 javascript 讓後方的物流運費輸入框開啟並呈現 focus 的狀態,使用者可減少「將游標移到輸入框」、「再點擊輸入框」這 2 個動作,可以馬上輸入運費金額,就完成「開啟物流並設定金額」這個功能。
雖然這樣只幫助使用者減少了一點點時間,但整個系統可能有上百個功能,每個都能減少幾秒鐘,累積起來就能幫使用者省下好多時間,而且會使用起來輕鬆愉快,好用和不好用的介面,差距就很明顯了。

功能按鈕們有不同的屬性

  • 經常使用、變更之後可以輕易回復,不會造成傷害的功能。這樣的功能要放在最表層、明顯的地方,不費力就能使用。
  • 雖然可以回復,但不是那麼容易,這樣的按鈕可以加點顏色強調重要性,並避免使用者誤觸。
  • 無法再回復的動作,務必加上 comfirm 讓使用者確認是否執行。
  • 只有很少數的使用者會用到的進階功能,可以將它們放置到次層選單或設定裡,因為大多數的使用者並不需要它們,它們的存在反而讓使用者有太多選擇,而造成困擾。但也必需讓進階使用者清楚知道如何去找到它們。
  • 有些功能需要先執行某種動作後才能使用,這樣的功能按鈕可以先將它們隱藏,等使用者執行了前置動作後,再顯示出來。
  • 相同功能屬性也要有相同的樣式,並盡量整合相近的功能,可以有一致性也為了增加記憶性(memorability)。

多運用顏色和 icon

減少文字的使用,顏色和 icon 是跨語言隔閡的,例如將「背景」和「文字」的顏色設為相近的淺灰,來代表隱藏的內容;刪除或警告多使用紅色來顯示;綠色通行紅色禁止等等。

關於錯誤 About Error

  • 避免錯誤(Error prevention):不要讓使用者做錯了,再告訴他做錯了;要盡力想辦法讓使用者連做錯的可能都沒有。例:.Com 可以指定網站中的任何一個頁面成為首頁,原本的做法是在首頁點選「隱藏」按鈕時,系統會告知「指定首頁不可隱藏」,其實只要將首頁的隱藏按鈕移除,使用者就不可能會做錯了。
  • 回復錯誤的容易度:無法避免的操作錯誤,要讓使用者知道如何回復,難以回復的操作要增加其操作困難度(使用 comfirm 或紅色的警告標誌等等)。
  • 珍惜初體驗:身為開發者,因為對自已的系統太熟悉了,所以難以察覺哪個地方容易造成使用者操作錯誤;所以還沒用過的人第一次使用時的經驗,要特別珍惜與聆聽,因為他們會看到開發者看不到的地方。

名不正則言不順;言不順則事不成。

決定用哪一個名詞很重要,尤其當使用者只能透過文字來理解這是什麼樣的功能時。一般世俗上對這名詞的認知是什麼?最廣為人知的說法是什麼?是否有更精簡表達此功能的話語?如果太簡潔是不是會產生混淆?有時候差之毫釐,失之千里。

「正名」這件事在所有事情上都非常重要,如果連最基本的名稱定義都不謹慎處理,接下來的所有流程、後續,恐怕都會走偏了。

Ajax, notice, current, active

因為 ajax 的技術運用越來越廣泛,取代了原本 reload 大家習慣「畫面更新」的感覺。這時可多多善用 notice 提醒功能,讓使用者清楚目前在什麼樣的狀況,什麼東西改變了。還有目前選中了什麼項目(current)、什麼東西正在作用(active),要加上與一般狀態有明顯區隔的樣式。

讓使用者明確地知道:目前身在網站的何處、做了什麼事、接下來的動作會產生什麼結果、什麼東西改變了。

.Com CMS sample

ndc-admin-1 ndc-admin-2 ndc-admin-3 ndc-admin-4 ndc-admin-5
keyboard_arrow_up