Web交互設(shè)計優(yōu)化方案+check list

2017-3-29    用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里


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

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

這篇小文章關(guān)心的問題是:如果想對非娛樂導(dǎo)向產(chǎn)品已有的交互設(shè)計進(jìn)行優(yōu)化,我們需要從哪些方面遵從什么樣的原則?如何開始檢查現(xiàn)有的設(shè)計?如何確定優(yōu)化的優(yōu)先級?而不涉及新功能、產(chǎn)品的交互設(shè)計過程,娛樂導(dǎo)向產(chǎn)品的設(shè)計優(yōu)化,產(chǎn)品概念,功能層次的優(yōu)化,適合每一類型產(chǎn)品的提示具體的優(yōu)化方法。

一、需要優(yōu)化什么(注意事項)

設(shè)計原則的主要目的之一就是優(yōu)化用戶的產(chǎn)品體驗。對于生產(chǎn)工具和其他非娛樂導(dǎo)向的產(chǎn)品而言,這意味著將工作負(fù)荷降至。

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

Web交互設(shè)計優(yōu)化方案+check list

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

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

Web交互設(shè)計優(yōu)化方案+check list

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

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

Web交互設(shè)計優(yōu)化方案+check list

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

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

Web交互設(shè)計優(yōu)化方案+check list

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

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

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

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

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

易于識別/定位/閱讀
易于理解/學(xué)習(xí)/記憶
易于操作
優(yōu)化的最重要的目的,是讓產(chǎn)品更好用,使設(shè)計符合Jakob Nielsen的十條可用性準(zhǔn)則:
通過有效的反饋信息提供顯著的系統(tǒng)狀態(tài)
符合用戶的真實世界
用戶自由控制權(quán)
一致性和標(biāo)準(zhǔn)性
預(yù)防出錯
識別而不是回憶
靈活、便捷的使用
美觀,精簡的設(shè)計
協(xié)助用戶認(rèn)識,分析和改正錯誤
幫助和說明

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

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

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

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

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

是否采用了用戶熟悉或容易理解的結(jié)構(gòu)?
是否能識別當(dāng)前在網(wǎng)站中的位置?
是否能清晰表達(dá)頁面之間的結(jié)構(gòu)?
是否能快速回到首頁/主要頁面?
鏈接名稱與頁面名稱是否相對應(yīng)?
當(dāng)前頁面的結(jié)構(gòu)和布局是否清晰?

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

是否采用了用戶熟悉的界面元素和控件?
界面元素和控件的文字、位置、布局、分組、大小、顏色、形狀等是否合理、容易識別、一致?
界面元素/控件之間的關(guān)系是否表達(dá)正確?
主要操作/閱讀區(qū)域的視線是否流暢?
其他文本(稱謂、提示語、提供反饋)是否一致?

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

文字內(nèi)容的交流對象是用戶嗎?
語言是否簡潔、易懂、禮貌?
內(nèi)容表達(dá)的含義是否一致?
重要內(nèi)容是否處于顯著位置?
是否在需要時提供必要的信息?
是否有干擾視線和注意力的元素?

4.行為和互動Behavior and interaction

是否告知、引導(dǎo)用戶可以做什么?
是否告知需要進(jìn)行哪些步驟?
是否告知需要多少時間完成?
是否告知第一步做什么?
是否告知輸入/操作限制?
是否有必要的系統(tǒng)/用戶行為反饋?
是否允許必要的撤銷操作?
是否頁面上所有操作都必須由用戶完成?
是否已將操作步驟、點擊次數(shù)減至最少?
是否所有跳轉(zhuǎn)都是必須的(無法在當(dāng)前頁面呈現(xiàn))?

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

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

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

Web交互設(shè)計優(yōu)化方案+check list

五、小結(jié)

Considerations:為降低用戶的視覺負(fù)擔(dān)、認(rèn)知負(fù)擔(dān)、記憶負(fù)擔(dān)以及物理負(fù)擔(dān)而優(yōu)化設(shè)計
Goal:使設(shè)計易于識別/定位/閱讀,易于理解/學(xué)習(xí)/記憶,易于操作,符合可用性原則和產(chǎn)品目標(biāo)
Check list:交互設(shè)計快速檢查清單

Web交互設(shè)計優(yōu)化方案+check list

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

分享本文至:

日歷

鏈接

個人資料

存檔