提升移動(dòng)端產(chǎn)品易用性的6條建議

2017-5-16    用心設(shè)計(jì)

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



易用性維護(hù)(usability hygiene,筆者水平渣,找不到更好的翻譯)這一術(shù)語(yǔ)最早由谷歌提出,主要為了減少用戶使用過(guò)程中的挫敗感。在這篇文章中,我們來(lái)談?wù)勗谝苿?dòng)端產(chǎn)品易用性維護(hù)設(shè)計(jì)的時(shí)候,我們應(yīng)該注意的六個(gè)領(lǐng)域。


1、離線(斷網(wǎng))用戶體驗(yàn)


根據(jù)谷歌的一項(xiàng)調(diào)查,相對(duì)于移動(dòng)網(wǎng)站,34%的用戶在網(wǎng)絡(luò)狀況不佳的情況下更偏向于使用app。當(dāng)用戶打開(kāi)一款app時(shí),他們期望看到更多有用的內(nèi)容,他們不會(huì)管網(wǎng)絡(luò)狀況這一客觀條件。這個(gè)就意味著,在網(wǎng)絡(luò)狀況不佳或沒(méi)有數(shù)據(jù)網(wǎng)絡(luò)連接的情況下,app給用戶展示的內(nèi)容變得至關(guān)重要。簡(jiǎn)言之,如果用戶無(wú)法從我們的app中得到期望的內(nèi)容,那么就極有可能會(huì)使用競(jìng)爭(zhēng)者的產(chǎn)品。


下面我們來(lái)看看蘋(píng)果地圖(左)和谷歌地圖(右)的例子。谷歌地圖會(huì)記住你上次使用的位置,并且會(huì)保存很多細(xì)節(jié)。但是當(dāng)我們打開(kāi)蘋(píng)果地圖時(shí),卻是空空如也,沒(méi)有任何內(nèi)容(斷網(wǎng)情況下)。從這點(diǎn)上來(lái)說(shuō),蘋(píng)果地圖的離線用戶體驗(yàn)是比不上谷歌地圖的。


提升移動(dòng)端產(chǎn)品易用性的6條建議


2、跨平臺(tái)設(shè)計(jì)


好的界面設(shè)計(jì)可以極大的提升app用戶體驗(yàn),身為設(shè)計(jì)師,我們希望自己的產(chǎn)品可以在多個(gè)平臺(tái)(系統(tǒng))中發(fā)布,因?yàn)榭梢晕嗟挠脩?。但是每一個(gè)平臺(tái)都有著自己的視覺(jué)語(yǔ)言,有著其系統(tǒng)特有的交互模式,有著一套應(yīng)該遵循的設(shè)計(jì)規(guī)范和風(fēng)格。這些都是我們?cè)谶M(jìn)行產(chǎn)品跨平臺(tái)設(shè)計(jì)的時(shí)候應(yīng)該考慮的。一款iOS的app想要打入安卓市場(chǎng),在設(shè)計(jì)上就應(yīng)該做到“入鄉(xiāng)隨俗”。因?yàn)榘沧坑脩艨隙ㄒ呀?jīng)養(yǎng)成了與安卓系統(tǒng)相對(duì)應(yīng)的操作習(xí)慣。直接進(jìn)行1:1的復(fù)制固然省時(shí)省力,但是可能會(huì)引起與用戶習(xí)慣之間的沖突,用戶極有可能會(huì)拋棄你的產(chǎn)品。


例如,狀態(tài)欄和標(biāo)題,這兩個(gè)設(shè)計(jì)元素基本上每一個(gè)頁(yè)面都會(huì)有。在iOS和安卓中,這兩個(gè)元素的展示形式是不一樣的,雖然差異不是很大。(在安卓系統(tǒng)中,文本是Roboto字體,左對(duì)齊;而在iOS中,文本字體是San Francisco,居中對(duì)齊。)


提升移動(dòng)端產(chǎn)品易用性的6條建議


這種差異在按鈕和其他控件中同樣存在,單選按鈕、復(fù)選框、字段和開(kāi)關(guān)。在跨平臺(tái)設(shè)計(jì)過(guò)程中,我們要盡可能使用原生控件,減少用戶的陌生感。


提升移動(dòng)端產(chǎn)品易用性的6條建議


3、避免死胡同

用戶體驗(yàn)設(shè)計(jì)實(shí)際上就是用戶流程設(shè)計(jì)。流暢的用戶體驗(yàn)是一環(huán)環(huán)緊緊相扣,用戶不斷的“前進(jìn)”來(lái)完成目標(biāo)任務(wù)。用戶希望自己可以一路順風(fēng)的到達(dá)目的地,所以要避免在用戶“前進(jìn)”的道路上出現(xiàn)死胡同。這類頁(yè)面會(huì)讓用戶感到困惑,進(jìn)而引起沮喪感,甚至?xí)鹫`操作。為了避免死胡同頁(yè)面的出現(xiàn),我們至少要告訴用戶兩件事情:


何地(where):這是一個(gè)什么頁(yè)面,告知用戶當(dāng)前的位置,解釋原因。(頁(yè)面為什么報(bào)錯(cuò)了?商品列表為什么加載不出來(lái)?)


怎么做(how):接下來(lái)可以干什么,以及將會(huì)出現(xiàn)的情況。(檢查網(wǎng)絡(luò)連接情況或者重新登錄)


Modspot是一款類似于instagram的照片分享應(yīng)用,我們看看下面這張圖片。


左圖為新用戶首次打開(kāi)Modspot時(shí)的頁(yè)面。頁(yè)面到底怎么了?No post是因?yàn)槲抑案揪蜎](méi)有上傳還是網(wǎng)絡(luò)原因加載不出來(lái)?我到底應(yīng)該怎么辦?這樣的設(shè)計(jì)英氣了用戶的恐慌。再看我把提示信息處理過(guò)的右圖?,F(xiàn)在我們來(lái)感受一下兩張圖片的差別。


提升移動(dòng)端產(chǎn)品易用性的6條建議


我們可以很明顯的看出來(lái),左邊的界面讓用戶陷入一個(gè)“死胡同”。新用戶面對(duì)這樣的一個(gè)界面根本不知道應(yīng)該怎么辦,會(huì)給他們留下一個(gè)較壞的第一印象。


4、不要把網(wǎng)站的體驗(yàn)復(fù)制到應(yīng)用程序上


移動(dòng)端和PC端的交互模式和界面元素是不一樣的。當(dāng)網(wǎng)頁(yè)的設(shè)計(jì)直接移植到在APP就會(huì)顯得很奇怪,這并不是因?yàn)槟睦锍鲥e(cuò)了,而是用戶對(duì)于網(wǎng)頁(yè)和的APP期望是不同的。舉個(gè)例子:比如帶下劃線的鏈接。你應(yīng)該避免去使用帶下劃線鏈接的文字,這屬于網(wǎng)頁(yè)而不是APP(移動(dòng)應(yīng)用使用按鈕不使用鏈接)。


提升移動(dòng)端產(chǎn)品易用性的6條建議


上面的案例是關(guān)于TD銀行iOS端應(yīng)用的登錄頁(yè)面。它明顯看起來(lái)像是手機(jī)網(wǎng)頁(yè)的設(shè)計(jì)而非一款app。其實(shí)事實(shí)上,他們只是把網(wǎng)頁(yè)代碼復(fù)制上去后封裝成應(yīng)用程序:鏈接是帶下劃線的,甚至在界面上還有版權(quán)聲明!


5、不要打斷用戶


沒(méi)有人希望自己被打斷,特別是正當(dāng)自己在做一件很重要的事情的時(shí)候被一些雞毛蒜皮的小事打斷。道理我們都懂,可是還是有很多app在用戶進(jìn)行重要操作的時(shí)候跳出各種無(wú)用的彈框打斷他們。


提升移動(dòng)端產(chǎn)品易用性的6條建議


當(dāng)然不是所有的彈框都是沒(méi)用的,比如這種評(píng)分和提意見(jiàn)的彈框還是很重要的。因?yàn)檫@是我們獲取用戶反饋的重要渠道,對(duì)于此類不得不用的彈框我們要注意推送時(shí)機(jī)。比如在用戶剛使用不久的情況下,他們對(duì)這款產(chǎn)品還不太熟悉,就突然收到這樣一個(gè)評(píng)分請(qǐng)求,會(huì)給用戶帶來(lái)很不好的第一印象。即使用戶愿意評(píng)價(jià),我們得到的反饋也是沒(méi)有什么價(jià)值的。


提升移動(dòng)端產(chǎn)品易用性的6條建議


當(dāng)用戶使用了一段時(shí)間后,找一個(gè)最少被干擾的時(shí)間給用戶發(fā)送彈框。Clear是iOS的一個(gè)任務(wù)管理app。當(dāng)用戶完成所有既定的任務(wù)后,他們會(huì)收到一個(gè)打分的彈框。這就是一個(gè)很好的時(shí)間點(diǎn),因?yàn)橛脩舸藭r(shí)剛剛完成任務(wù),有一種成功的滿足感,他們更愿意對(duì)產(chǎn)品進(jìn)行評(píng)分。


6、將用戶留在APP中


永遠(yuǎn)不要讓用戶離開(kāi)app。如果你的app缺少特定的功能和內(nèi)容,嘗試使用內(nèi)置瀏覽器而不是調(diào)用手機(jī)里安裝的瀏覽器。原因很簡(jiǎn)單,用戶出去以后就不會(huì)回來(lái)了。


提升移動(dòng)端產(chǎn)品易用性的6條建議


當(dāng)然在一些特殊情況下,用戶必須離開(kāi)app,那么我們也應(yīng)該給用戶一個(gè)返回的路徑。


提升移動(dòng)端產(chǎn)品易用性的6條建議


總結(jié)


設(shè)計(jì)是一個(gè)每天都會(huì)有新理論,新知識(shí)涌現(xiàn)出來(lái)的一個(gè)行業(yè)。希望這篇文章關(guān)于移動(dòng)端產(chǎn)品易用性的闡述會(huì)對(duì)你將來(lái)的工作提供幫助。


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


分享本文至:

日歷

鏈接

個(gè)人資料

存檔