移動端使用者體驗設計:請不要讓我思考

嘉雷發表於2017-12-27

移動端使用者體驗設計:請不要讓我思考


這一陣看了Steve Krug的《DON’T MAKE ME THINK》一書,書中闡述的大部分都是Web端的可用性研究,移動端的篇幅非常少,而且章節裡作者講解的也不是很透徹,所以這裡我把我對於本書得到的相對於移動端相應的可用性思考分享給大家,希望能給大家以後的設計一些有用的啟發。

現在的產品設計越來越向互動體驗至上趨向了,單純美觀的UI介面設計已經大大滿足不了一個公司對移動端產品設計師的要求,專案想要上線之後取得一定成果(至少給下載了的使用者不會有再刪除的想法),就要迎合使用者的使用習慣,這裡我得出了三個滿足良好使用者體驗的移動端設計規則和其相對應的解決方案。

移動端使用者體驗設計:請不要讓我思考


規則1、去掉問號原則

讓頁面或螢幕不言而喻就像把商店佈置得光線良好:這樣會讓你的產品看起來更美好。
要知道,大多數使用者會花上比我們想象中少得多的時間來使用我們的產品,除非你的產品非常棒而且是必需品。

移動端使用者體驗設計:請不要讓我思考

人們都是有惰性的,你在設計很多介面或者互動的時候,腦袋中應該第一個映像就是自己的使用者很懶,它們不願意思考,不願意再在使用App這麼一件小事上再去花費更多的學習的精力,所以你作為設計師,要為他們竭力避免它,竭力避免讓使用者思考。

這一點其實很多人都知道,這些很簡單的使用者體驗的關注點其實大家心裡都明白,但是要怎麼做到它呢?這裡提供給大家兩個解決方案,只要你能滿足這兩點,你就能實現“去掉問號”,並大大的提高產品的可用性。


① 通過改變介面元素的外觀

那麼怎麼才能夠更好的幫助使用者掃描呢?用書裡作者的一句話說“如果你讓每一個頁面都不言而喻的話,那使用者只要看一眼就知道該怎麼用它了。”

不言而喻?這裡最簡單的方法就是通過改變按鈕的陰影,介面元素的標籤名稱、尺寸、顏色或者佈局,利用對比色等,讓整個頁面可以自我解釋,讓無論是任何一個人,看上一眼就明白了整個頁面的結構和自己接下來應該如何操作。

移動端使用者體驗設計:請不要讓我思考

② 更清晰的互動邏輯

請注意這裡使用的“清晰”字眼,並沒有用“少”,普遍大家都知道的道理是更少的互動邏輯,避免存在更深的互動層級,讓使用者迷失了位置,甚至有些公司的產品設計規則中明確規定了避免
5級以上的邏輯互動。

但是使用者迷失與否真的跟這些互動層級有絕對的關係嗎?並不一定!如果能保證每一次點選,每一次跳轉都清晰可見明確,那即使在3層以上的層級上,也不會讓使用者出現問號或焦慮感,使用者在使用App中對點選的動作要求其實並沒有那麼苛刻,如果你在更少的互動層級和較複雜的頁面結構 與 更多的互動層級和清晰的頁面結構 之間的取捨猶豫不決的時候,那麼果斷的選擇後者吧!

這裡作者貼心的給了我們一個疲勞值參考公式:

使用者 3 次無須思考的點選 = 使用者 1 次需要思考的點選 

即 4個結構簡單的頁面互動 約等於 2個結構複雜的頁面互動規則

移動端使用者體驗設計:請不要讓我思考


規則二、重視幼鵝效應

如果能通過在某種程度上打破一致性,而得到高度簡潔清楚的效果,那麼果斷選擇簡潔,即簡潔大於一致。
正如大部分人們使用新電器不會認真看說明書一樣,人們在使用軟體的時候也不會非常注意軟體裡面具體都有什麼內容,他們跟你不一樣(指產品的開發或設計人員),在海量的移動產品市場裡,使用者們有時候根本不會在乎產品的全部功能,他們大多數都在從AppStore下載之後適用階段只會快速掃描你的產品,然後找到可能幫助到他的功能,然後決定你們的產品是否有資格留在他的手機裡。

這就是一種幼鵝效應,即第一印象是絕對的一切。他們第一次使用你的產品(或者第一次使用迭代的2.0)將會快速的進行掃描,他需要的功能在什麼位置(尋找中)?需要的這塊功能可用性怎樣(找到了)?有沒有什麼新意(觀察中)?有沒有解決了他們的問題(思考中)?解決的效率是不是高效(結果得出)?(形成對產品的第一印象,通常也是最終印象)

這就是個典型的“錨”,讓使用者願不願意為你的產品後期一系列的服務買單,起很大的決定作用的是第一印象。所以1.0的專案產品做的越簡單越好,加班設計,速度開發,搶佔市場。這個觀點並不一定是正確的,除非非常必要,否則做好互動邏輯,做好可用性和產品使用者體驗是非常有必要的。

那麼產品給使用者良好的第一印象應該如何做好呢?這裡提供給大家三個解決方案進行參考。


① 簡潔!幫助使用者掃描,減少視覺負擔。

如果做不到讓進入你的移動端產品介面的時候眼前一亮,那麼至少做到關係明確簡介明瞭,那是非常有必要的。利用好親密性原則,即相關的區域分模組排布在介面之中,把頁面劃分成明確的區域。觀察底部導航欄解釋的是不是很清楚,最好是產品開發之前,拿到Axure做的Demo
給使用者群體做個測試,看他從點開啟動圖示到找到自己想要的功能用了多長時間,幾個步驟?如果測試結果很迷茫,那麼你應該好好考慮有沒有做到親密性原則或者圖示和文字的含義明不明確了?


② 視覺層次 遠遠大於 介面美觀

如果要在美觀性與層次抉擇,設計師請果斷選擇層次感,設計一個介面結構,最重要的就是幫助使用者思考,尤其是主頁,哪些是最重要的,哪些是類似的,哪些僅僅是起到提示作用的。都要一眼上去一目瞭然。越重要的越凸顯,相關聯的結構要巢狀。這點在iOS10新的設計中體現尤為明顯,iOS10的設計裡大標題,超級加粗的字型甚至很不美觀。弱化UI,只為凸顯內容,精簡精簡再精簡的介面,這些都是為了更好的輸出視覺層級,說白了就是為了讓使用者更好的掃描介面,不管新的風格是不是一個正確的嘗試,但是它的方向是絕對沒有錯誤的,以後的產品視覺方向,也絕對是從 讓使用者看到你想給他看到的 到 讓使用者看到他自己最想看到 中轉變。

層次感的設計落地也很簡單,記住
  1. 需要明顯的越要明顯(有時候你覺得凸出的已經夠了,其實還遠遠不夠)
  2. 降低視覺噪點(使用者第一時間不需要的全部篩掉,用最簡單有趣的圖示和精煉的文字表達最全的內容)
  3. 時刻關注好親密性原則

移動端使用者體驗設計:請不要讓我思考

③ 不要試圖挑戰習慣

移動端十年的發展,已經形成了自己的操作習慣,這些都是得到大家(使用者們)認可的,所以如果沒有非常好的理由,請不要去挑戰這些習慣,如果你還不知道這些習慣有哪些,請參考最新的IOS和安卓的設計規範。



規則三、保證導航清晰

如果人們在你的軟體裡找不到方向,那麼他們不會再使用你的軟體了。

移動端使用者體驗設計:請不要讓我思考

導航的重要性無與倫比,使用者的迷失是非常可怕的,這就是為什麼幾乎所有的App都會放上Tab Bar,一款產品的好與壞,最關鍵的不是使用者體驗,不是介面的設計,而是互動邏輯(產品的互動設計師是多麼重要啊)。互動邏輯決定了可用性,它是需要重視等級最高的使用者體驗。移動裝置螢幕寸土寸金,我們不可能一直在下面放上導航欄告訴使用者你在哪裡(這樣做也會顯得很傻),所以良好的互動和必要的提示資訊就替代成為了我們移動端設計最重要的麵包屑導航,幫助使用者可以找到自己的方向,而不是一生氣直接按到手機主桌面強制關掉了你的軟體程式。

關於互動設計,繪製你的原型圖的時候,怎麼做才能讓使用者使用的時候,在腦中出現一個聲音告訴他這個軟體是可靠的呢?這裡我提供三個解決方案(也是需要注意的地方)。


① 正確的跳轉和命名

移動端的 Navigation Bar 一般都在頁面的最上面,並在旁邊有回到上一級頁面的返回鍵,這個Bar 上的名稱字號大小粗細除了要保證一致性原則,即每一個頁面的樣式都一樣,而且要有合適的命名。點選了一個地方,就要跳轉到的相應的頁面,這個頁面的名字要與你點選的地方有非常明顯的關聯。而且值得一提的是,有時候通過反覆的互動動效,對於讓使用者明白介面的元素、內容資訊或關聯的介面,從哪裡來的到哪裡去的 也會有意想不到的幫助。

其次,返回鍵的跳轉不要傻乎乎的只是返回到上一個頁面,想想你是使用者操作到了這裡,點選了返回鍵,你要返回到哪裡,幫使用者省略掉不必要的返回介面。有助於提高可用性,避免使用者迷失和降低操作的煩躁心裡。而且要注意,儘量在每一個需要返回的介面都要有返回鍵的設定,即便它並不是那麼重要。


② 必要的封裝和假提示

一些操作提交伺服器等待時間較長,或者手機後臺計算非常複雜,需要使用者等待的時候,如果可以避免的話,封裝掉它,即不讓使用者知道真實的狀況,軟體的計算和提交操作在後臺進行,前端設計的時候不要設計loading或者進度條,讓使用者直接進行他接下來要進行的操作,而不是陪著伺服器或者手機的計算速度傻等。

反之,一些非常重要的操作,但是不需要使用者等待的時候,你反而應該做出loading和進度條,讓使用者等待一會, 並給出明確的成功提示和返回掉所有小操作回到主頁面的按鈕,這些不僅僅是提高使用者操作性和安全感的設計,也更是軟體給使用者的隱形導航。


③ 子頁面區別於上級頁面

不要讓所有的頁面的結構都長的一模一樣,要有明顯區分的地方就要有明顯的區別。



尾聲:可用性與層級的抉擇

最後還是那句話,如果你需要幾個頁面中放上很多的東西,在互動層級上與可用性之間進行抉擇的時候,請記住:
管理螢幕空間的挑戰不應該以犧牲可用性為代價。

互動層級多幾個並沒有想象中的那麼壞,人們並不反對多點幾下,只要每一次點選都不要需要太多思考就可以。忘掉那些所謂的規則吧,多研究研究使用者,即使我們是設計師,也需要研究市場,畢竟我們所設計的一切都是為我們的使用者服務的,我們的設計並不在乎他們喜歡怎樣的方式,只要他們不討厭就可以了。

好了,這裡是全部的web設計《DON’T MAKE ME THINK  點石成金》關於移動端的思考,書的前半部分所強調的使用者體驗可用性研究可以移植到移動端的部分幾乎全在這裡,後半部分是關於產品可用性測試的,這裡就不再贅述了。


感謝您的觀看,如果對我的分享有什麼見解的話,歡迎在評論區留言。

移動端使用者體驗設計:請不要讓我思考



相關文章