想從更好看變成更好用？先學會衡量交互成本！

王M爭：工作以來參與了很多次改版，從界面上來看，的確比之前的版本好看了很多。但是新版本上線后，收到了用戶的很多吐槽。界面改得亂七八糟，原來的東西都找不到了。其實這個反映了多數(shù)改版的一個通病——過于追求更美觀的界面，而非更流暢的操作流程。

怎么從「更好看」到「更好用」？我們可以從哪些維度去降低用戶的交互成本？其實在之前的文章中，我有寫過類似的問題。當時我的想法是：

• 減少用戶的操作次數(shù)；
• 降低單次操作成本；

后來發(fā)現(xiàn)這個結(jié)論存在漏洞，因為它建立在「交互成本必須在用戶產(chǎn)生具體的交互行為」的前提下。也就是說我僅僅考慮了操作A、操作B、操作C等的成本，而忽視了操作之間的成本。操作之間到底發(fā)生了什么？

操作反饋

用戶不去進行操作 B 的多數(shù)情況是不知道操作 A 已完結(jié)，所以每一個操作完成都要及時地通知用戶。這個我在之前的文章中已經(jīng)提過很多次了，為什么這里還要再炒下冷飯，是我發(fā)現(xiàn)不同的產(chǎn)品對于「操作」的理解存在差異。

1. 什么是操作

你去無人店購物，付款的流程是：掃描商品條形碼，系統(tǒng)獲知商品金額→把付款碼對準機器→輸入支付密碼→完成付款。可能你會覺得這樣可以了，在付款成功的時候，已經(jīng)提醒用戶付款成功了。

這里的問題在于，之前所有的操作提示都是通過柜臺的電腦屏幕展示給我的。通過閱讀這些提示，我知道首先把商品的條形碼對準掃碼機，點擊「確認商品」按鈕，然后把付款碼對準機器。我滿心期待著付款完成，但是電腦屏幕一直在轉(zhuǎn)圈 loading，過了好一會兒，我才發(fā)現(xiàn)原來還要（在手機上）輸入支付密碼。因為我的視線一直在電腦上，且手機屏幕是背對著我的，因此我沒有注意到要驗證支付密碼。這里電腦屏幕應該及時地提醒我去輸入支付密碼，而不是無謂的轉(zhuǎn)圈。

從上面這個例子，我們可以發(fā)現(xiàn)很多交互設計師并不是不知道給用戶操作反饋。只是對操作的理解過于寬泛，他只認為一整個付款流程是一個操作，掃碼付款的動作他都沒覺得這是一個操作，當然也不會想到給你提供反饋。

因此我們要細化操作，只要用戶在與產(chǎn)品交互過程中，需要注意力轉(zhuǎn)移的場景，我們都需要提醒用戶。上面這個問題就是當用戶的注意力需要發(fā)生轉(zhuǎn)移時（電腦端to手機端），產(chǎn)品并沒有提醒用戶。

2. 更合理的反饋方式

同樣的保存圖片的操作，都是通過 toast 提示用戶，但是左圖使用的橙紅色。橙紅色容易讓用戶聯(lián)想到失敗的狀態(tài)，所以這樣的設計容易讓用戶誤以為保存失敗。因此反饋設計應該力求讓用戶快速的獲取到你要表達的意思。

闡明層級關系

為什么我們會覺得有些產(chǎn)品難用？我們可以從新用戶和老用戶兩個角度來看這個問題。

1. 闡明不同元素之間的關系

大家還記得第一次學 PS 的場景嗎？是不是看到界面就暈了。

△ 其實這是Pr

用戶在進行實際操作前，需要對操作預期有一個清晰的認知。說白了，我得明白這個按鈕是什么，點了以后會發(fā)生什么，我才會去點。

新增收貨地址，為了方便操作，我們給用戶提供了直接復用通訊錄中的個人姓名和電話號碼的功能。我們可以看一下這兩款產(chǎn)品的界面設計：

右圖的這一款產(chǎn)品，如果我們的入口只放在姓名那一欄，那么用戶就可能誤以為只復用了用戶姓名，沒有復用電話號碼。而我們真正記不住的不是姓名，是那一串電話號碼，這樣的設計可能影響用戶對這個功能的參與度。

同樣的一個點擊操作，因為位置的不同，導致用戶對其功能的作用范圍存在誤解。所以設計必須要闡明界面各個元素之間的層級關系，避免用戶產(chǎn)生誤解，降低用戶的學習成本。

2. 交互需要符合用戶的認知

對于一個老用戶來說，應該是熟能生巧了，為什么還覺得不好用呢？其實熟能生巧是一個偽命題，因為用戶每天不是只用你這一款產(chǎn)品。你采用了一種全新的交互方式，其他產(chǎn)品都沒用過，你覺得用戶肯定會喜歡。木秀于林，風必摧之。其他產(chǎn)品都沒用，說明用戶已經(jīng)習慣了舊有的交互樣式，你突然做了一個新的，必然導致學習成本的激增。用戶是很懶的，他們看不到遠方新的交互方式帶來的紅利，他們只能看到近處學習時間的增加。

舉個例子，同樣是關閉搜索頁，微視和秒拍是點擊右上角的「取消」，而抖音是點擊右上角的箭頭。抖音做成這樣右朝向的箭頭，提醒了用戶右滑也可以離開搜索頁。這樣的改動肯定是降低了用戶的交互成本，相較于點擊，滑動對于手指落點區(qū)域要求更低，手指隨便落在屏幕哪里，輕輕一劃就可以完成操作。而右上角的區(qū)域離界面核心區(qū)較遠，女性或者未成年用戶單手握持手機的情況，很難直接關閉微視和秒拍的搜索頁。

那么抖音的箭頭更好嗎？我存在異議。我為什么會注意到這個區(qū)別，正是因為我發(fā)現(xiàn)自己找不到離開抖音搜索頁的方法了。在用戶的固有認知中，如果我要離開當前的頁面，用戶的常見操作方式有：

• 點擊左上角「返回」圖標；
• 向左滑動；
• 向下滑動。

但是自從小程序開始興起后，一個新的關閉頁面手勢開始興起，那就是點擊右上角關閉圖標。可能會有人存在疑問，在左上角你能找到，怎么在右上角你就找不到了呢？

這是因為右上角的位置比較特殊，這里的操作一般都代表著一種「前進」的意向。例如，我要添加分享好友、新建地址和發(fā)表動態(tài)等。

而關閉當前頁正好代表著一種「后退」的意向。如果我們要用戶點擊右上角可以關閉當前頁，操作提示必須足夠的明顯。例如，怕圖標不達意，我們會直接寫上「取消」「關閉」等文字。

而抖音這次采用了右指向的箭頭，更加強化了「前進」的意向。不經(jīng)常用抖音的用戶以為點擊這個箭頭是進入一個新的頁面，而不是返回上一頁，這樣的設置明顯有悖于用戶長久以來的操作習慣。簡單的一個滑動操作，非常的簡單，但是用戶在操作之前需要克服長久以來的認知障礙。

再看下圖這是用戶編輯指紋密碼的界面，用戶修改完指紋名稱，需要點擊「保存/提交」按鈕。

但是這個頁面只有一個「刪除指紋」按鈕，用戶沒看清的情況下，很容易誤操作。其實在這里用戶修改完，點擊左上角直接返回就行了。為了給用戶減負，這里已經(jīng)自動保存，不需要額外的保存操作。但是這樣有悖于用戶日常的操作習慣，他怕直接返回的話，剛才修改的名稱沒有生效，減負可能反而造成了增負。

總結(jié)

以上就是我對用戶交互成本的一點分析和總結(jié)，如果您有不同的看法或者意見，歡迎留言或者加群討論。

歡迎關注作者的微信公眾號：「王M爭」