UX細節設計思路——必經流程簡化
編輯導語:當可以預判用戶可能的一系列操作時,交互設計上應該將這系列流程做簡化處理,即必經流程簡化。本文作者對這個設計思路進行了分析,一起來看一下吧。
優秀UX細節創新設計讓用戶感到方便、貼心、可靠、安全、愉悅。UX細節創新設計并非都來自一剎那的靈光乍現, 創新能力也不是少數人只可意會不可言傳的一種天賦,優秀的UX細節創新設計其實有章可循,創新能力是可以通過后天培養提升的,更多內容可參閱《偉大的小細節》一書。
本文分享技巧——必經流程簡化。
必經流程簡化的設計思路:當可以預判用戶可能的一系列操作時,交互設計上應該將這系列流程做簡化處理。
這種簡化包含兩種類型:
- 剔除可預見用戶操作中不必要的操作流程
- 合并可預見用戶操作中必操作的流程
簡單行之有效的辦法就是操作流程記錄法,記錄下不同場景用戶達成某一項目標的完整流程,在流程各節點中尋找可以判斷用戶意圖的節點,跳過不必要的流程,或者合并必要流程。
操作記錄法設計產品Tips:
- 畫出完整流程圖,不僅有助于察覺可以優化的地方,嚴謹的流程分析也是發現設計漏洞的重要手段。
- 不要局限于自身產品流程設計,用戶完成一項功能可能需要在不同的網站和App中切換操作,要將這些操作也納入設計范圍。
01 設計講解 – 登錄注冊
注冊/登錄是網站、手機App必備的基本功能。隨著移動互聯網的普及,為防止惡意注冊賬戶,許多網站、手機App在注冊時都會使用手機號作為賬戶,并需要通過短信驗證才可生效。
為了省掉用戶手動輸入短信驗證碼的麻煩,一些App提供了獲取驗證短信并自動填寫短信驗證碼的功能,如日韓、東南亞非常流行的聊天軟件LINE。
目前國內的一些App也支持這樣的功能,如“愛鮮蜂”。愛鮮蜂是一個較為特別的案例,本文以愛鮮蜂為例進行講解。
LINE獲取到驗證短信后會自動填寫短信驗證碼:
愛鮮蜂注冊頁面及MIUI短信提示框
第二張截圖的主體是愛鮮蜂的注冊界面,當輸入手機號點擊獲取驗證碼后,愛鮮蜂會讀取短信,并將短信中的驗證碼自動填寫到驗證碼輸入框中;而界面的頂部則是MIUI的短信提示框,它也根據短信內容判斷出這是一條短信驗證碼,點擊右邊復制按鈕,即可復制驗證碼,直接粘貼至驗證碼輸入框內即可。
單純站在愛鮮蜂注冊功能的設計者的角度,一個完整的注冊流程只需要包含如下環節:
乍一看并沒有可以優化的空間,這里先闡明功能實現的設計思維與需求解決設計思維的區別,前者只要求功能設計運轉正常合理即可,而后者除了需要完成前者所需要實現的功能外,還需有代入感,把自己當成用戶,設計時就不能只局限于自己所提供的服務了。
基于需求解決的設計思維,一個完整、順利的注冊流程應該是:在輸入手機號與填寫驗證碼之間,用戶還會需要切換到短信功能、記住驗證碼或者復制驗證碼、返回到“愛鮮蜂”App 中,然后才是輸入或粘貼驗證碼。
流程中,切換到短信功能、記住驗證碼或者復制驗證碼、返回到“愛鮮蜂”App中、輸入或粘貼驗證碼是用戶必須要做的事情,此時為了優化用戶體驗,技術人員可以用技術手段,幫用戶完成這部分操作(讀取手機短信內容、識別短信中的驗證碼、復制驗證碼并粘貼到驗證碼輸入框中)。
那我們再往前思考,既然自動幫用戶填寫好驗證碼,為什么不直接幫助用戶完成驗證并登錄呢?可以先思考幾分鐘再看后面的內容。
除了為用戶帶來方便的細節設計能力外,嚴謹是比此類細節創新更重要的品質,之所以不能設計成填寫手機號便可自動登錄,主要原因有以下兩點:
- 不是所有設備都能成功獲取到讀取短信權限(比如用戶設置了不允許App獲取自己的短信信息),一旦短信獲取失敗,而用戶又無法手動填寫,那么整個注冊流程便卡住了,無法繼續下去,這將是嚴重的設計錯誤。
- 用戶注冊時并不一定使用當前手機,即用其他手機接收驗證短信, 或者正在使用iTouch、iPad等根本就無法接收短信的設備進行注冊,同樣會導致整個注冊流程無法繼續。
當然,如果能夠妥善處理好這些問題,一鍵注冊登錄也未嘗不是一個優秀的細節設計。
02 設計案例
1. MIUI
前面愛鮮蜂注冊頁面頂部的短信提示框同樣是基于用戶的行為預判的優秀細節設計,MIUI系統能夠識別收到的短信是不是驗證短信,如果是驗證短信,則短信提示框右側提供一個復制驗證碼的按鈕,用戶點擊該按鈕,MIUI會提取短信中的驗證碼復制到手機的剪貼板中,并提示:MIUI已經幫您復制好短信驗證碼,直接粘貼即可。
這樣用戶就不必切換至短信功能中閱讀或復制驗證碼,在當前操作界面中即可完成驗證碼的復制、粘貼。
MIUI收到短信驗證碼后提供復制驗證碼按鈕
2. 搜狗輸入法
正常情況下,各類括號(如大括號、小括號、中括號)、書名號、引號等標點符號都是成對出現的,既然必然成對出現,那輸入正括號后,自動輸入反括號,并將光標跳回到括號間,這樣輸入既方便,也能防止忘記輸入反括號。搜狗輸入法就這么機智地干了!
使用搜狗輸入法輸入正括號后,會自動補全反括號,并將光標跳轉至括號之間。
3. Google
必經流程簡化的另外一種情況是必要流程合并。當一位設計師需要按照黃金比例設計一個作品時,正常的流程是:打開搜索引擎>搜索黃金比例>找到有黃金比例具體數值的網頁>點擊去復制黃金比例數值>切換到計算器計算所需要的對應數值(雅虎、必應、NAVER及國內各大搜索引擎皆可體驗)。
Google 對此作了體驗優化,當用戶使用Google搜索“Golden Ratio(黃金比例)” 時,搜索結果會彈出一個計算器,搜索結果中直接展示黃金比例數值,如果需要計算,就直接繼續操作吧!
分析起來,Google先是幫助用戶直接將所需要的黃金比例數據提取出來,省去用戶一個個網頁去查找的煩惱。而后是考慮到了用戶可能會使用該數值進行計算,又直接提供了一個計算器,方便用戶直接計算。
更進一步,Google將兩者合并到一個界面中,用戶可能只需要一個黃金比例數值,并不受影響啊,不是么!
在Google中搜索“Golden Ratio(黃金比例)”
4. 淘寶
同樣也是必要流程合并的細節創新,這個細節創新多少有點兒無奈— App出于商業和安全性的考慮,微信屏蔽了手機淘寶App的分享鏈接,從手機淘寶并不能直接分享鏈接給微信好友。
于是手機淘寶創造性地發明了“淘口令”??珊芏嘤脩暨€是習慣使用截圖給好友分享商品,可收到截圖的微信朋友可就有點麻煩了,想要訪問這個商品,要么要求好友重新發淘口令,要么根據截圖內容去淘寶搜索,不論怎樣,都是一件挺麻煩的事情。
當手機淘寶發現用戶使用手機淘寶對商品詳情頁進行截圖時,會彈出一個對話框出來告訴你“已經為您生成淘口令”,用戶可以選擇將截屏和淘口令一并發給好友,這樣就避免了好友再次詢問淘口令或者使用截圖內容去搜索的麻煩。
手機淘寶App商品詳情頁界面
5. Waymate.de
http://Waymate.de是德國一家專門做旅行路線規劃的網站,當使用 Waymate.de 搜索一個行程時,加載過程中會顯示計劃時間目的地的天氣狀況,提供給用戶參考,如果用戶正好需要查詢,則省去再查詢天氣的操作,即便用戶并不需要這一信息,對用戶的操作也無任何影響。
Waymate.de行程加載頁面
作者:文哲,微信公眾號:偉大的小細節,《偉大的小細節》作者。
本文由 @Stanley 原創發布于人人都是產品經理,未經許可,禁止轉載
題圖來自 Unsplash,基于 CC0 協議
真的很心動了,自動識別括號,還有一鍵識別手機號和短信驗證登錄,完全解放雙手呀
這些設計大家會逐漸習以為常,最早這么設計的還是很了不起的
確實有些流程沒有必要那么的復雜,太復雜對用戶的使用感也不好
是的, 流程能跑通是可用, 流程能跑通且簡單是好用。