一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
沒有結果
檢視所有結果
一塊設計 | apo design - 設計共筆部落格
沒有結果
檢視所有結果
Home UI / UX 設計

淺談 – 購物流程 基本需要什麼?

in UI / UX 設計
by Freya Lee
11 月 04,2020
4 min read

Table of Contents

Toggle
  • 連阿嬤都叫我幫她在網路上買東西
  • 1. 那個「購物車」
  • 2. 結帳頁面
  • 一、二、三 !購物流程是會分頁面與步驟
  • 咻~咻~!一頁式的購物流程
  • 結語

連阿嬤都叫我幫她在網路上買東西

想起某次帶著外婆去買外套,店面裡剛好沒有外婆的外套尺寸,熱情的服務員說著:「奶奶~我幫您調貨好嗎?」
外婆立刻回:「阿~免啦!我叫我孫上網買給偶就好啦~」

現今社會上,不論哪個年齡層的人,對網路購物應該多多少少有點概念或認識,就算真的有人沒上網買過商品,也一定知道網路購物有多麽方便
我想目前當今的網路使用者,大概8.9成以上都使有使用過「購物流程」,只是購買的體驗好與壞而已~

今天就來談,關於購物流程,到底有哪些東西吧!


1. 那個「購物車」

(與其說是購物車,我覺得以現實生活中的情境來說,更像購物籃XD)
購物網站基本,就是要能夠隨時隨地的在全站加入商品至 “購物車” 或是看到已放入 “購物車” 內的商品,現在越來越多購物車做得很精緻,在小小的畫面欄位中就包含了許多功能。例如:刪除、價格變動、活動訊息、商品內容選項、數量等等…

2. 結帳頁面

就是把購物車內的商品資訊,清楚展開的購買清單列表!


結帳頁面內容大致有

  • 購買商品資訊 (例如:所選時的數量、顏色、尺寸、規格、金額、庫存等等)
    • 這些欄位基本都要能夠調整,但也有些客製化商品的情況,在此處結帳時是不能修改的
  • 當下的優惠資訊 (例如:優惠活動的名稱、未滿優惠條件時的提示、贈品的資訊)
  • 刪除鈕
  • 商品小計與總計
  • 付款方式、優惠折扣輸入欄位或是選擇欄
  • 物流取貨方式、收件地址、收件人
  • 發票資訊(企業統一編號、無載具、自然人憑證、捐贈、手機載具、捐贈等等)
  • 最後訂單總計(把以上總計和所選的項目影響金額之資訊都詳列清楚)
  • 訂單送出按鈕!(進支付金流)

*以上項目的多寡會因販售的商品或是服務而略有不同,大家要記得了解需求再進行規劃設計喔!


一、二、三 !購物流程是會分頁面與步驟

這種類型的好處是,把確認購買商品和商品優惠活動 與 物流、地址、發票、收件人等選項。還有付款方式和總計金額等等各項重要項目分開,用步驟去區分當下該處理的資訊為哪些,讓使用者更明確清楚地填寫每一份資料,來確保此筆訂單的細節資訊與金額,但缺點就是相當耗時以及…如果突然想要更改上一步驟做的設定又要按返回上一頁,然後又會再跳出一些提示視窗等,過程比較反覆。
適用於「高單價商品、客製化商品、預約訂位類型服務、折扣優惠少…等等」

咻~咻~!一頁式的購物流程

從開始買東西買東西時,商品頁切來切去、照片滑來滑去…對於消費者視覺疲乏度已經夠高,更不要說一進來結帳頁面,還看到要什麼登入/註冊、繁瑣的流程步驟、寫不完的欄位,真的是會直接關掉頁面,不買了…如果可以在一頁清單列表中解決各項選擇,會相當節省時間。
適用於「追求快速結帳的電商、折扣與優惠複雜度高、非客製化商品皆適用」


結語

在設計購物流程時,讓正在衝動購物和結帳中的消費者們,讓他們快速專心的結帳完成,是我遇過最多客戶和業主的共同需求!(當然最主要還是要依照需求來進行啦,也不是說快就是好QwQ)

如果可以,在結帳的流程中~要盡量避免掉其他會跳轉到其他頁面的連結或按鈕,我也遇過想累積會員購買資訊,所以一開始就強制登入/註冊才能購買的流程,但通常使用者看到長長的登入表格或是註冊欄位,就會跳走了…在此都會跟客戶建議看是使用Open ID登入或是購買完成再讓使用者登入或註冊成會員。

不論是現在流行的,平台式樣板購物流程、或是客製化的購物流程,能夠讓客戶順利結帳買到東西或是預約到服務,老闆收到訂單也收到錢…就是好的購物流程!

之後來可以來談一些關於「保存消費者的購物資訊,以利後續行銷推廣」、「如何確保使用者填入的資料盡量正確、減少人工核對的麻煩」、「訂單成立以後回饋資訊傳遞」…等等

希望大家也可以與我分享一些,在設計過程中遇到的有趣事情XD

Tags: UIUX網頁設計購物流程
ShareShareShare
Freya Lee

Freya Lee

Visual Designer. 擅長解決流程體驗產生的設計問題

上一篇文章

如何抓準客戶的心,加速專案前進時間

下一篇文章

筆記|網格到底怎麼用?(二)

相關文章

近期 UI/UX 設計資源精選分享!

一塊特別企劃|近期 UI/UX 設計資源精選分享!

by Debby
5 月 02,2023

你平常有哪些關注的 UI/UX 部落格或 IG 以獲得最新設計靈感? 除了工作上要不斷地輸出設計想法,平日會從哪些地方輸入這些設計 Tips 或設計新知呢?本月...

工作五年後最大的轉變

一塊特別企劃|設計師/工程師工作五年後最大的轉變

by Judy Shyu
3 月 31,2023

這個企劃是透過每月一問六答,讓團隊成員能夠回應一些與設計職涯、設計工作內容相關的問題,加強彼此之間的交流和分享,也希望能藉此讓大家有更多闡述自己想法的機會! 那...

使用者經驗訪談,我所學到、獲得的。

使用者訪談,我所學到、獲得的。

by Debby
12 月 07,2022

這篇文章將分享我在接觸訪談前後,發現工作上的差異。 算是整理自己在這期間在實務上學習到的心得紀錄。(?)

Back to List

一塊特別企劃

一塊特別企劃|設計師問與答 Part2

一塊特別企劃|設計師問與答
連結至一塊設計 facebook 專頁

標籤

Adobe Xd (3) AI (1) B2B (1) COVID19 (1) designer (2) design tool (3) Figma (4) functional map (1) HTML (2) illustrator (1) UI (27) UX (19) web design (1) Wordpress (2) 一塊特別企劃 (8) 字體 (7) 專案管理 (1) 無障礙網站 (5) 產品設計 (2) 筆記 (4) 經驗分享 (31) 網頁設計 (21) 設計問答 Part 2 (10) 設計師問答 (1) 設計選書 (2) 課程心得 (1) 講座 (2) 購物流程 (1) 週年企劃 (5) 遠端工作 (2) 電子報 (1) 靈感 (6)
一塊設計 a piece of design

聯絡我們

任何合作或問題請洽:
info@apodesign.tw

  • 服務條款
  • 隱私權政策

Follow us

Copyright © 2020 apodesign.tw All Rights Reserved.

沒有結果
檢視所有結果
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書