UX細節設計思路——必經流程簡化

編輯導語:當可以預判用户可能的一系列操作時,交互設計上應該將這系列流程做簡化處理,即必經流程簡化。本文作者對這個設計思路進行了分析,一起來看一下吧。

UX細節設計思路——必經流程簡化

優秀UX細節創新設計讓用户感到方便、貼心、可靠、安全、愉悦。UX細節創新設計並非都來自一剎那的靈光乍現, 創新能力也不是少數人只可意會不可言傳的一種天賦,優秀的UX細節創新設計其實有章可循,創新能力是可以通過後天培養提升的,更多內容可參閲《偉大的小細節》一書。

本文分享技巧——必經流程簡化。

必經流程簡化的設計思路:當可以預判用户可能的一系列操作時,交互設計上應該將這系列流程做簡化處理。

這種簡化包含兩種類型:

  1. 剔除可預見用户操作中不必要的操作流程
  2. 合併可預見用户操作中必操作的流程

簡單行之有效的辦法就是操作流程記錄法,記錄下不同場景用户達成某一項目標的完整流程,在流程各節點中尋找可以判斷用户意圖的節點,跳過不必要的流程,或者合併必要流程。

操作記錄法設計產品Tips:

  • 畫出完整流程圖,不僅有助於察覺可以優化的地方,嚴謹的流程分析也是發現設計漏洞的重要手段。
  • 不要侷限於自身產品流程設計,用户完成一項功能可能需要在不同的網站和App中切換操作,要將這些操作也納入設計範圍。
01 設計講解 – 登錄註冊

註冊/登錄是網站、手機App必備的基本功能。隨着移動互聯網的普及,為防止惡意註冊賬户,許多網站、手機App在註冊時都會使用手機號作為賬户,並需要通過短信驗證才可生效。

為了省掉用户手動輸入短信驗證碼的麻煩,一些App提供了獲取驗證短信並自動填寫短信驗證碼的功能,如日韓、東南亞非常流行的聊天軟件LINE。

目前國內的一些App也支持這樣的功能,如“愛鮮蜂”。愛鮮蜂是一個較為特別的案例,本文以愛鮮蜂為例進行講解。

UX細節設計思路——必經流程簡化

LINE獲取到驗證短信後會自動填寫短信驗證碼:

UX細節設計思路——必經流程簡化

愛鮮蜂註冊頁面及MIUI短信提示框

第二張截圖的主體是愛鮮蜂的註冊界面,當輸入手機號點擊獲取驗證碼後,愛鮮蜂會讀取短信,並將短信中的驗證碼自動填寫到驗證碼輸入框中;而界面的頂部則是MIUI的短信提示框,它也根據短信內容判斷出這是一條短信驗證碼,點擊右邊複製按鈕,即可複製驗證碼,直接粘貼至驗證碼輸入框內即可。

單純站在愛鮮蜂註冊功能的設計者的角度,一個完整的註冊流程只需要包含如下環節:

乍一看並沒有可以優化的空間,這裏先闡明功能實現的設計思維與需求解決設計思維的區別,前者只要求功能設計運轉正常合理即可,而後者除了需要完成前者所需要實現的功能外,還需有代入感,把自己當成用户,設計時就不能只侷限於自己所提供的服務了。

基於需求解決的設計思維,一個完整、順利的註冊流程應該是:在輸入手機號與填寫驗證碼之間,用户還會需要切換到短信功能、記住驗證碼或者複製驗證碼、返回到“愛鮮蜂”App 中,然後才是輸入或粘貼驗證碼。

UX細節設計思路——必經流程簡化

流程中,切換到短信功能、記住驗證碼或者複製驗證碼、返回到“愛鮮蜂”App中、輸入或粘貼驗證碼是用户必須要做的事情,此時為了優化用户體驗,技術人員可以用技術手段,幫用户完成這部分操作(讀取手機短信內容、識別短信中的驗證碼、複製驗證碼並粘貼到驗證碼輸入框中)。

那我們再往前思考,既然自動幫用户填寫好驗證碼,為什麼不直接幫助用户完成驗證並登錄呢?可以先思考幾分鐘再看後面的內容。

UX細節設計思路——必經流程簡化

除了為用户帶來方便的細節設計能力外,嚴謹是比此類細節創新更重要的品質,之所以不能設計成填寫手機號便可自動登錄,主要原因有以下兩點:

  1. 不是所有設備都能成功獲取到讀取短信權限(比如用户設置了不允許App獲取自己的短信信息),一旦短信獲取失敗,而用户又無法手動填寫,那麼整個註冊流程便卡住了,無法繼續下去,這將是嚴重的設計錯誤。
  2. 用户註冊時並不一定使用當前手機,即用其他手機接收驗證短信, 或者正在使用iTouch、iPad等根本就無法接收短信的設備進行註冊,同樣會導致整個註冊流程無法繼續。

當然,如果能夠妥善處理好這些問題,一鍵註冊登錄也未嘗不是一個優秀的細節設計。

02 設計案例1. MIUI

前面愛鮮蜂註冊頁面頂部的短信提示框同樣是基於用户的行為預判的優秀細節設計,MIUI系統能夠識別收到的短信是不是驗證短信,如果是驗證短信,則短信提示框右側提供一個複製驗證碼的按鈕,用户點擊該按鈕,MIUI會提取短信中的驗證碼複製到手機的剪貼板中,並提示:MIUI已經幫您複製好短信驗證碼,直接粘貼即可。

這樣用户就不必切換至短信功能中閲讀或複製驗證碼,在當前操作界面中即可完成驗證碼的複製、粘貼。

UX細節設計思路——必經流程簡化

MIUI收到短信驗證碼後提供複製驗證碼按鈕

2. 搜狗輸入法

正常情況下,各類括號(如大括號、小括號、中括號)、書名號、引號等標點符號都是成對出現的,既然必然成對出現,那輸入正括號後,自動輸入反括號,並將光標跳回到括號間,這樣輸入既方便,也能防止忘記輸入反括號。搜狗輸入法就這麼機智地幹了!

UX細節設計思路——必經流程簡化

使用搜狗輸入法輸入正括號後,會自動補全反括號,並將光標跳轉至括號之間。

3. Google

必經流程簡化的另外一種情況是必要流程合併。當一位設計師需要按照黃金比例設計一個作品時,正常的流程是:打開搜索引擎>搜索黃金比例>找到有黃金比例具體數值的網頁>點擊去複製黃金比例數值>切換到計算器計算所需要的對應數值(雅虎、必應、NAVER及國內各大搜索引擎皆可體驗)。

Google 對此作了體驗優化,當用户使用Google搜索“Golden Ratio(黃金比例)” 時,搜索結果會彈出一個計算器,搜索結果中直接展示黃金比例數值,如果需要計算,就直接繼續操作吧!

分析起來,Google先是幫助用户直接將所需要的黃金比例數據提取出來,省去用户一個個網頁去查找的煩惱。而後是考慮到了用户可能會使用該數值進行計算,又直接提供了一個計算器,方便用户直接計算。

更進一步,Google將兩者合併到一個界面中,用户可能只需要一個黃金比例數值,並不受影響啊,不是麼!

UX細節設計思路——必經流程簡化

在Google中搜索“Golden Ratio(黃金比例)”

4. 淘寶

同樣也是必要流程合併的細節創新,這個細節創新多少有點兒無奈— App出於商業和安全性的考慮,微信屏蔽了手機淘寶App的分享鏈接,從手機淘寶並不能直接分享鏈接給微信好友。

於是手機淘寶創造性地發明了“淘口令”。可很多用户還是習慣使用截圖給好友分享商品,可收到截圖的微信朋友可就有點麻煩了,想要訪問這個商品,要麼要求好友重新發淘口令,要麼根據截圖內容去淘寶搜索,不論怎樣,都是一件挺麻煩的事情。

當手機淘寶發現用户使用手機淘寶對商品詳情頁進行截圖時,會彈出一個對話框出來告訴你“已經為您生成淘口令”,用户可以選擇將截屏和淘口令一併發給好友,這樣就避免了好友再次詢問淘口令或者使用截圖內容去搜索的麻煩。

UX細節設計思路——必經流程簡化
UX細節設計思路——必經流程簡化

手機淘寶App商品詳情頁界面

5. Waymate.de

http://Waymate.de是德國一家專門做旅行路線規劃的網站,當使用 Waymate.de 搜索一個行程時,加載過程中會顯示計劃時間目的地的天氣狀況,提供給用户參考,如果用户正好需要查詢,則省去再查詢天氣的操作,即便用户並不需要這一信息,對用户的操作也無任何影響。

UX細節設計思路——必經流程簡化

Waymate.de行程加載頁面

作者:文哲,微信公眾號:偉大的小細節,《偉大的小細節》作者。

本文由 @Stanley 原創發佈於人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基於 CC0 協議

版權聲明:本文源自 網絡, 於,由 楠木軒 整理發佈,共 2986 字。

轉載請註明: UX細節設計思路——必經流程簡化 - 楠木軒