關于“收貨地址”的二三事
文章對各大電商平臺的收貨地址進行了系列的對比分析,嘗試歸納出一套體驗較好、操作較快,認知明確的收貨地址流程。希望能夠本文對你有益。
說到關于收貨地址的一些操作,想必用戶和電商類的設計師都是非常熟悉的了,用戶下單過程中就會進行收貨地址選擇,若是想更改收貨地址時就需要進行編輯或者新增收貨地址。本著提供更好體驗以及設計提效的目的,我們從使用場景、操作效率、狀態認知等方面對比分析了各大電商平臺(天貓、京東、網易嚴選、蘇寧易購、米家有品)的收貨地址選擇、編輯、新增、管理等操作流程以及表現方式,歸納出一套體驗較好、操作較快,認知明確的收貨地址流程,方便以后設計復用。
訂單確認頁的收貨地址如何顯示?
天貓:系統無收貨地址時,會彈窗提示“你的收貨地址為空,是否添加新的收貨地址”,然后在彈窗內用“添加”按鈕引導用戶去添加收貨地址;系統有收貨地址時,為用戶自動選中默認收貨地址,但無默認地址標志;
京東:系統無收貨地址時,選擇收貨地址的地方用黑色加大字號“新建收貨地址”提示用戶去新建收貨地址;系統有收貨地址時,為用戶自動選中默認收貨地址,且默認地址有標識出來,讓用戶清楚我們是基于默認地址自動為其選中的;
網易嚴選:系統無收貨地址時,點擊提交訂單后直接進入【新建地址】頁面,新建完地址后保存回到【訂單確認】頁;系統有收貨地址時,為用戶自動選中默認收貨地址,且默認地址有標識出來;
蘇寧易購:系統無收貨地址時,會彈窗提示“您還沒有收貨地址,先去設置一下吧”,然后在彈窗內用“去設置”按鈕引導用戶去添加收貨地址(“去設置”沒有“添加”的指示性明確);系統有收貨地址時,為用戶自動選中默認收貨地址,但無默認地址標識;
米家有品:系統無收貨地址時,選擇收貨地址的地方用紅色字體“沒有地址信息,請點擊后添加地址”提示用戶去添加收貨地址;系統有收貨地址時,為用戶自動選中默認收貨地址,但無默認地址標識;
分析總結:
用戶第一次使用APP購物沒有收貨地址時,系統應積極引導用戶去新增地址,促進下單。京東、米家在選擇收貨地址處用文字提示,對用戶的提示和促進作用不夠強烈;網易嚴選是從購買直接跳轉至新增收貨地址頁面,這樣的跳轉給用戶有種突兀的感覺;天貓和蘇寧則是在訂單頁面用彈窗的形式告知用戶暫無收貨地址,且彈窗有按鈕引導用戶去新增地址,這樣既沒有直接跳轉那么突兀,而且提示的力度也恰如其分。
收貨地址列表頁
天貓:
京東:
網易嚴選:
蘇寧易購:
米家有品:
分析總結:
進入到此頁面,大多數情況說明用戶想更改自己的收貨地址:可能是給親朋好友臨時買個東西;可能是自己的常用住址或者個人信息發生了變化。針對這兩種場景,需要讓用戶新增收貨地址或者編輯現有收貨地址;在新增或編輯的時候提供“設為默認”的功能,方便用戶對地址的屬性進行定義,就無需到【管理收貨地址】頁去設置,這樣縮短了用戶的操作路徑,提升了用戶體驗。
另外,標記出當前所選地址和默認地址有助于用戶快速做出選擇;其次,京東左滑后可設為默認地址、蘇寧左滑后刪除單條收貨地址的操作與點擊收貨地址將其選為訂單確認頁的收貨地址的操作之間容易誤觸,而后者的優先級高,故建議不支持左滑后設為默認和刪除的操作;最后,將默認地址置頂顯示,其他地址依次按新建時間由近及遠排列,符合現有市場用戶的認知習慣。
新增/編輯收貨地址
天貓:
京東:
網易嚴選:
蘇寧易購:
米家有品:
分析總結:
新增或編輯收貨地址時,有“設為默認”選項能夠方便用戶對地址屬性的設定,增加用戶以后下單選地址的便捷性,同時提供收貨人信息的快捷選取入口,提高填寫收貨人信息的效率;從【選擇收貨地址】新增或編輯地址時,完成后用戶是想使用此地址進行下單的,所以在完成新增或編輯后應該給用戶“保存并使用”的選擇,減少用戶回到訂單確認頁的操作步驟,從【管理收貨地址】新增或編輯收貨地址時,用戶下一步操作意圖不明顯,所以新增或編輯后,給用戶“保存”按鈕,回到【管理收貨地址】讓用戶自行其他操作;編輯狀態下包含刪除操作,可以方便用戶操。
管理收貨地址
天貓:
京東:
網易嚴選:
蘇寧易購:
米家有品:
分析總結:
作為專門管理收貨地址的頁面,那么增、刪、改、查功能都得具備。而且為了縮短用戶使用路徑,在頁面空間允許的情況下,可以將“設為默認”、“編輯”、“刪除”全部展現出來;另外,用戶操作后是越快有反饋體驗會越好,所以,將某個地址設為默認后,應該在本頁面立即刷新,將此地址置頂顯示,同時,打上默認的標記,給用戶明確的狀態反饋。
通過以上的分析總結,歸納出以下一套體驗較好、操作較快,認知明確的通用收貨地址流程,當然,大家可以根據自己業務需求進行定制化設計,希望以下流程對大家有用。
作者:潘達,個人公眾號:潘達設計小站,歡迎勾搭
本文由 @潘達 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自PEXELS,基于CC0協議
樓主,最后一張圖有沒有清晰一點的? ??
有的,關注公眾號 “潘達設計小站” 私信我即可獲得最后一張圖的rp原型
是的呢,打磨細節真的很需要時間
為什么收貨地址管理頁面不做批量刪除操作呢?
emmmm,我覺得你這個提議非常棒
收貨地址刪除是一個低頻操作,不需要做批量功能。綜合考慮頁面的簡潔,砍掉批量功能更好。
?? 分析的蠻細,最基礎的其實是最難的
選擇收貨地址和管理收貨地址是否可以合二為一
是應該分開處理。同時地址的要考慮有效性,地址的有效性會變化,有效的地址因為數據補全、配送范圍等原因可能會變無效。
簡單來說,不合二為一的原因是兩個頁面的使用場景不一樣,所以在頁面上展示的信息應該有所區別 ??