互動設計中的“所見即所得”原則
互動設計中的“所見即所得”原則
“所見即所得”原則我記得在之前的文章中就提到過，但是沒有詳細說明。最近在體驗一些產品時，發現很多互動設計上的坑都可以歸納到“所見非所得”上。
所見非所得
我們可以首先來看一下“所見非所得”的案例：上週寄件去北京，在填寫收件人資訊時候，發現了一個“智慧填寫”的功能很有意思。所謂“智慧填寫”就是OCR識別技術，系統可以識別圖片上的地址。例如，你的收件人地址正好是身份證上的住址，那麼你就可以上傳身份證照片，系統直接識別照片上的地址而不需要手動去輸入。
使用者具體的操作流程是：
1 拍攝/上傳照片；
點選“上傳圖片”按鈕，使用者可以選擇拍攝或者上傳相簿裡的照片，框選合適的識別區域；
2 系統識別並展示結果；
系統會自動識別圖片中的地址資訊，並且在輸入框中展示，如果有識別錯誤的地方，使用者可以手動編輯修改；
3 使用者確認；
使用者對地址資訊確認無誤了，點選“智慧填寫”按鈕，輸入框裡的地址資訊會自動回填到位址列；
瞭解了大致流程，我們來看一下兩款競品。產品A和B都提供了“智慧填寫”的功能，但是在互動設計上存在差異。產品A，當用戶上傳完圖片才會出現“智慧填寫”按鈕；產品B是全程展示“智慧填寫”按鈕的。我個人更加偏愛產品A的處理模式，因為當用戶都沒有上傳圖片時，給使用者展示“智慧填寫”按鈕是沒有任何意義的，這裡的“智慧填寫”雖然可見但是不可得，使用者也不能點選。當然有人會說，雖然不可點選，但是展示了也沒什麼問題吧？當然有問題，它會給使用者帶來兩個痛點：
1） 增加了使用者的學習成本；
對於新使用者來說，產品A肯定更加容易上手。因為新使用者一進入這個頁面，只能看到上傳圖片的按鈕，使用者明白了我首先要上傳圖片。產品B是直接一股腦的把所有選項展示出來，使用者不知道這些選項之間的聯絡和操作順序。
2） 阻斷正常操作流程；
給使用者展示了他們本不應該看到的元素，可能會阻斷正常的操作流程。使用者如果還沒上傳圖片，就點選“智慧填寫”按鈕會直接報錯，“所傳引數不能為空”，使用者哪裡看懂這是什麼意思。
之前在火車站取票，前面排隊的大嬸跟我說她的票取不了。我湊過去一看，發現她沒有關閉購買保險的彈框。因為這個彈框沒有蓋住底部“確認列印”按鈕，使用者誤以為還是可以點選的，導致無法正常完成取票流程。
瞭解到這些痛點，那麼如何才能在互動設計上實現“所見即所得”原則呢？我總結了兩個方法：限制和就近。
限制原則
瞭解限制原則，我們需要回答兩個問題：
1）為什麼要限制？
因為多才要限制，多會帶來哪些壞處？內容多，使用者處理不過來；選項多，使用者挑花了眼；時間多，優惠券沒有有限期限制使用者懶得用。
2）限制什麼？
限制使用者與介面互動的觸點。還是以智慧填寫為例，當前介面有三個觸點： 上傳圖片按鈕、輸入框、智慧填寫按鈕 。這三個觸點分別對應著步驟一、步驟二和步驟三。如果我們在步驟一的階段給使用者提供了步驟三的觸點，保不齊會有使用者嘗試去互動，這樣的無效操作會觸發報錯場景。所以 當用戶處於一個線性的操作流程中，根據使用者所處的階段，分析使用者可能進行互動操作，提供互動觸點，保證使用者看到的觸點都是可互動的。
罔顧使用者的操作階段，一股腦的把所有觸點都提供給使用者。設計師倒是很省心，但是使用者卻會很糟心，他們需要花時間去判斷和分析每一個觸點的作用以及它們之間可能存在的聯絡。這個工作應該由我們代勞，我們來分析使用者處於不同階段所需要的功能觸點。
舉個知乎的例子，知乎有一個“向知友提問”的功能。但是這個按鈕只會在使用者滑動搜尋結果頁3屏後才會出現，因為滑動了3屏，我們可以猜測使用者對當前的搜尋結果不滿意，引導使用者去提問。
當然限制原則不僅僅是限制互動觸點，還可以應用到產品邏輯中，幫助使用者解決很多問題。我曾經遇到過一個場景，公司上線了一款優惠券，使用者點選“立即領取”按鈕即可領取。但是有些使用者會被風控判定為了風險等級過高，導致領取失敗。對於這個報錯文案，我們改了好幾版，但是每次都會收到使用者的投訴。我們無法直接告訴使用者，你是因為風險等級過高導致無法領取，因為使用者風險等級過高是因為開通了某項業務。當時開通的時候，我們並未告知開通後會被判定為高風險使用者。所以為了不必要的麻煩，最好的辦法就是進行判斷前置，如果判斷使用者為高風險使用者那麼就直接不展示該優惠券。
就近原則
從上面的闡述中，我們可以發現“所見即所得”原則最根本的目的是為了節省使用者的操作時間，提升產品易用性。廣義的操作時間還應該包括了使用者對於反饋的感知時間，因為只有充分理解系統反饋的資訊才能進行進一步的操作。如何幫助使用者快速的消化反饋的資訊呢？因為反饋是系統對於使用者操作的迴應，那麼我們可以讓操作和反饋儘量的貼近一點，這就是就近原則。就近原則可以分為兩類：位置就近和形式就近。
1） 位置就近
所見即所得，這裡的“所見”即代表著使用者的視線，而 使用者的視線總是停留在上一個互動觸點附近。
例如，還是寄件的場景，要填寫發件人資訊，我懶得重新填寫一遍地址，正好看到輸入框右邊有一個附近地址的功能。我點了一下，沒有反應，又點了幾下才發現底部出現了一個“附近地址”的列表。這裡的互動觸點是“附近地址”的文字連結，我的視線也是停留在附近，沒有注意到下拉列表已經出現在底部。 操作和反饋完全不在同一視覺區域。
2）形式就近
形式就近，這裡的形式特指反饋形式。目前最通用的反饋方式是彈框，彈框的弊端也就恰恰在於它的“通用”上。所有型別的反饋都可以用彈框來承載，使用者無法立刻感知到彈框所傳遞內容是什麼。既然反饋是系統對於使用者操作的迴應，而使用者操作又是一個個互動觸點所觸發的。如果我們可以 通過改變觸點自身形態的變化來完成資訊的傳遞，使用者感知起來會更加容易。
舉個例子，使用者在輸入登入密碼的時候，其觸點是輸入框。當用戶密碼輸入錯誤的時候，我們可以通過抖動輸入框的方式告知使用者輸入錯誤，這裡抖動是現實生活中“搖頭”的對映，我們都知道搖頭代表著否定的意思，使用者不用看到彈框上的“密碼錯誤”幾個字也能明白密碼輸錯了。
總結
以上就是我對互動設計中“所見即所得”原則的總結和分析，如果你有不同的意見和看法，歡迎留言或者加群討論。
微信公眾號： 王M爭