Web交互設(shè)計(jì)優(yōu)化的簡(jiǎn)易check list

0 評(píng)論 5786 瀏覽 26 收藏 9 分鐘

“優(yōu)化已有產(chǎn)品的體驗(yàn)”,這是用戶體驗(yàn)相關(guān)崗位職責(zé)中常見(jiàn)的描述。我們的產(chǎn)品常常是在快速的迭代過(guò)程中不斷完善的,就像孩子生下來(lái)需要養(yǎng)育才能長(zhǎng)大一樣,優(yōu)化已有功能/產(chǎn)品,和設(shè)計(jì)新功能/產(chǎn)品同樣重要,不可偏廢。

但是,相比實(shí)現(xiàn)新功能,已有功能的優(yōu)化總是顯得沒(méi)有那么緊迫而且很零散,導(dǎo)致了迭代優(yōu)化的計(jì)劃總是被歸入“重要不緊急”甚至是“不重要不緊急”的象限,變成了東一棒子西一榔錘的買賣。我們可以通過(guò)可用性測(cè)試來(lái)發(fā)現(xiàn)問(wèn)題,但是測(cè)試往往受到時(shí)間、用戶邀約、場(chǎng)地和設(shè)備等條件的限制,可能無(wú)法進(jìn)行。更多時(shí)候,設(shè)計(jì)師需要根據(jù)一定的原則(例如可用性準(zhǔn)則)進(jìn)行走查,以快速地發(fā)現(xiàn)并解決問(wèn)題。

這篇小文章關(guān)心的問(wèn)題是:如果想對(duì)非娛樂(lè)導(dǎo)向產(chǎn)品已有的交互設(shè)計(jì)進(jìn)行優(yōu)化,我們

  • 需要從哪些方面考慮
  • 遵從什么樣的原則
  • 如何開(kāi)始檢查現(xiàn)有的設(shè)計(jì)
  • 如何確定優(yōu)化的優(yōu)先級(jí)

而不涉及:

  • 新功能/產(chǎn)品的交互設(shè)計(jì)過(guò)程
  • 娛樂(lè)導(dǎo)向產(chǎn)品的設(shè)計(jì)優(yōu)化
  • 產(chǎn)品概念、功能層次的優(yōu)化
  • 適合每一類型產(chǎn)品的tips
  • 具體的優(yōu)化方法

一、需要優(yōu)化什么 (Considerations)

“設(shè)計(jì)原則的主要目的之一就是優(yōu)化用戶的產(chǎn)品體驗(yàn)。對(duì)于生產(chǎn)工具和其他非娛樂(lè)導(dǎo)向的產(chǎn)品而言,這意味著將工作負(fù)荷降至最低?!薄督换ピO(shè)計(jì)精髓》

行為和界面層面的設(shè)計(jì)原則告訴我們,應(yīng)該為降低用戶的工作負(fù)荷而設(shè)計(jì)。但是我們常常不夠貼心,不知不覺(jué)就對(duì)用戶設(shè)下了種種考驗(yàn),讓他們抓狂:

1.視覺(jué)負(fù)擔(dān) visual work

  • 需要分解布局
  • 需要區(qū)分內(nèi)容層次
  • 需要區(qū)分視覺(jué)元素
  • 需要努力定位目標(biāo)信息
  • 需要識(shí)別閱讀起點(diǎn)
  • 需要經(jīng)常變換視線
  • 視覺(jué)流被干擾、打斷

2.認(rèn)知負(fù)擔(dān) cognitive work

  • 需要理解不熟悉的概念和模式
  • 需要理解冗長(zhǎng)、生澀的文本內(nèi)容
  • 需要理解混亂的結(jié)構(gòu)和布局
  • 需要理解模棱兩可的操作
  • 需要猜測(cè)系統(tǒng)狀態(tài)、行為、結(jié)果

3.記憶負(fù)擔(dān) memory work

  • 需要記住對(duì)象的各種屬性(名字、位置、大小、顏色)
  • 需要記住對(duì)象的關(guān)聯(lián)
  • 需要記住操作的命令、步驟、結(jié)果
  • 需要記住以往的操作

4.物理負(fù)擔(dān) physical work

  • 需要長(zhǎng)距離移動(dòng)鼠標(biāo)
  • 需要進(jìn)行(多次)點(diǎn)擊
  • 需要執(zhí)行不同的鼠標(biāo)手勢(shì)
  • 需要多種操作組合
  • 需要切換輸入模式
  • 需要進(jìn)出不同的頁(yè)面/區(qū)域
  • 需要長(zhǎng)時(shí)間等待

二、優(yōu)化目標(biāo) (Goal)

仔細(xì)檢查已有的設(shè)計(jì),或多或少總是能發(fā)現(xiàn)問(wèn)題。在解決問(wèn)題之前,我們應(yīng)該清楚要往什么方向進(jìn)行優(yōu)化:

1.基于可用性的目標(biāo)

  • 易于識(shí)別/定位/閱讀
  • 易于理解/學(xué)習(xí)/記憶
  • 易于操作

優(yōu)化的最重要的目的,是讓產(chǎn)品更好用,使設(shè)計(jì)符合Jakob Nielsen的十條可用性準(zhǔn)則:

  1. 通過(guò)有效的反饋信息提供顯著的系統(tǒng)狀態(tài)
  2. 符合用戶的真實(shí)世界
  3. 用戶自由控制權(quán)
  4. 一致性和標(biāo)準(zhǔn)性
  5. 預(yù)防出錯(cuò)
  6. 識(shí)別而不是回憶
  7. 靈活、便捷的使用
  8. 美觀,精簡(jiǎn)的設(shè)計(jì)
  9. 協(xié)助用戶認(rèn)識(shí),分析和改正錯(cuò)誤
  10. 幫助和說(shuō)明

2.基于產(chǎn)品的目標(biāo)

需要根據(jù)不同產(chǎn)品進(jìn)行定義。例如,對(duì)于快速注冊(cè)流程的優(yōu)化,目的是讓用戶用最方便完成注冊(cè)進(jìn)入目標(biāo)頁(yè)面,優(yōu)化目標(biāo)可能是最小化輸入、最短等待時(shí)間等。

三、快速檢查清單 (Check list)

為了達(dá)到優(yōu)化的目標(biāo),整理了一個(gè)簡(jiǎn)易的checklist(pdf版本下載鏈接請(qǐng)見(jiàn)文末),方便在走查時(shí)對(duì)架構(gòu)、布局、內(nèi)容、行為四個(gè)方面對(duì)照檢查:

1.架構(gòu)和導(dǎo)航Architecture and navigation

¨? 是否采用了用戶熟悉或容易理解的結(jié)構(gòu)?

¨? 是否能識(shí)別當(dāng)前在網(wǎng)站中的位置?

¨? 是否能清晰表達(dá)頁(yè)面之間的結(jié)構(gòu)?

¨? 是否能快速回到首頁(yè)/主要頁(yè)面?

¨? 鏈接名稱與頁(yè)面名稱是否相對(duì)應(yīng)?

¨? 當(dāng)前頁(yè)面的結(jié)構(gòu)和布局是否清晰?

2.布局和設(shè)計(jì)Layout and design

¨? 是否采用了用戶熟悉的界面元素和控件?

¨? 界面元素和控件的文字、位置、布局、分組、大小、顏色、形狀等是否合理、容易識(shí)別、一致?

¨? 界面元素/控件之間的關(guān)系是否表達(dá)正確?

¨? 主要操作/閱讀區(qū)域的視線是否流暢?

¨? 其他文本(稱謂、提示語(yǔ)、提供反饋)是否一致?

3.內(nèi)容和可讀性Content and readability

¨? 文字內(nèi)容的交流對(duì)象是用戶嗎?

¨? 語(yǔ)言是否簡(jiǎn)潔、易懂、禮貌?

¨? 內(nèi)容表達(dá)的含義是否一致?

¨? 重要內(nèi)容是否處于顯著位置?

¨? 是否在需要時(shí)提供必要的信息?

¨? 是否有干擾視線和注意力的元素?

4.行為和互動(dòng)Behavior and interaction

¨? 是否告知、引導(dǎo)用戶可以做什么?

¨? 是否告知需要進(jìn)行哪些步驟?

¨? 是否告知需要多少時(shí)間完成?

¨? 是否告知第一步做什么?

¨? 是否告知輸入/操作限制?

¨? 是否有必要的系統(tǒng)/用戶行為反饋?

¨? 是否允許必要的撤銷操作?

¨? 是否頁(yè)面上所有操作都必須由用戶完成?

¨? 是否已將操作步驟、點(diǎn)擊次數(shù)減至最少?

¨? 是否所有跳轉(zhuǎn)都是必須的(無(wú)法在當(dāng)前頁(yè)面呈現(xiàn))?

以上只是一個(gè)不完全的清單,同學(xué)們可以根據(jù)自己的實(shí)踐經(jīng)驗(yàn)修改,也可以參考更全面、權(quán)威的可用性測(cè)試檢查表,如普渡大學(xué)可用性測(cè)試檢查列表。

四、確定優(yōu)先級(jí) (Priority)

當(dāng)我們通過(guò)checklist將需要優(yōu)化的問(wèn)題篩選出來(lái)以后,可以根據(jù)問(wèn)題的嚴(yán)重性和解決的問(wèn)題的成本(時(shí)間、人力等)來(lái)綜合考慮問(wèn)題的優(yōu)先級(jí),例如,問(wèn)題嚴(yán)重性得分高而且優(yōu)化成本低的問(wèn)題,應(yīng)該優(yōu)先解決。

五、小結(jié)

Considerations:為降低用戶的視覺(jué)負(fù)擔(dān)、認(rèn)知負(fù)擔(dān)、記憶負(fù)擔(dān)以及物理負(fù)擔(dān)而優(yōu)化設(shè)計(jì)

Goal:使設(shè)計(jì)易于識(shí)別/定位/閱讀,易于理解/學(xué)習(xí)/記憶,易于操作,符合可用性原則和產(chǎn)品目標(biāo)

Check list:交互設(shè)計(jì)快速檢查清單v1 ?PDF版本 ?Download

交互設(shè)計(jì)快速檢查清單V1

View more documents from j Lin.

Priority:根據(jù)問(wèn)題的嚴(yán)重性和成本綜合考慮,優(yōu)先解決嚴(yán)重且成本低的問(wèn)題。

Reference

  1. 《About Face3:交互設(shè)計(jì)精髓》
  2. 《人機(jī)交互:以用戶為中心的設(shè)計(jì)和評(píng)估》
  3. Ten Usability Heuristics
  4. Purdue Usability Testing Questionnaire

來(lái)源:http://uedc.163.com/4308.html

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!