蝦皮的購買清單再設計!輕鬆快速找到自己的訂單!

以啟發式評估分析改善結帳完找不到訂單的問題~

--

首先,不知道大家有沒有遇過這樣的問題呢?

在結帳完後點下『查看清單』,系統會自動跳入『購買清單』下的『待付款』列表,而其實有時結完帳的訂單會直接進入『待出貨』的列表中

在蝦皮逛著逛著,按下了結帳,然後想看看訂單…結果…

咦!我的訂單呢??怎麼會不見了 QAQ

待付款?待出貨?待收貨?不知道訂單處於何種狀態的我,一列列的點擊尋找著訂單

而最終在點擊到『待出貨』的列表後

在列表找到了訂單

並結束了這場鬧劇(。ì _ í。)

為什麼會出現這樣的問題呢?讓我們檢視一下蝦皮的架構吧!

訂單被有條理的分成了六類,卻沒有清單總覽,使得使用者須在此六大項分類尋找他的訂單…

原來在蝦皮的購買清單裡面,不存在所謂的訂單總覽,而是將訂單分成了六大類分開置放:必須先知道訂單目前的狀態(待付款、已付款…),才能去該分類找到那份訂單

那…問題來了,身為使用者的我們,怎麼知道現在訂單的狀態呀?或者說,我點進來看訂單有一半的目的就是想看訂單目前的狀態!怎麼反過來考我了呀?!

使用 Heuristic Evaluation 看看是出了什麼問題吧?

關於以上的瑕疵,其實可以用 Jakob Nielsen 提出的 10 Heuristic Evaluation 當中的兩個原則來解釋,分別是:

01 Visibility of Status
正確的顯示系統狀態在哪,讓使用者不會在當中迷路。

02 Recognition rather than Recall
讓使用者能夠辨別而非記憶。

從上面的例子來看不難發現蝦皮犯下了兩個小錯誤:
1. 沒有明確告知使用者點擊進入購買清單不是看到總覽而是直接進入未付款 訂單一覽
2. 使用者需要記憶每個訂單狀態而非告知使用者每個訂單狀態

改良與重新設計

就以上發現的問題作為主要的基礎,針對了蝦皮的購買清單進行了大大小小的優化…

  1. 蝦皮在其他頁面的有上角圖示皆為購物車與訊息,而在購買清單這裡卻顯得不一致,故更改其圖示
  2. 為改善以上提出的問題,將以篩選器的方式勾選欲顯示的項目(待付款、待出貨、待收貨…)。讓在預設情況下所有訂單能一同顯現
  3. 以往在查看每份訂單到底有多少數量商品時需要點擊商品進入下一個頁面查看;這裏採收合選單展開的方式少去一個跳轉頁面的步驟,便可以在同一頁面瀏覽多份訂單的詳細商品資訊
  4. 在每一份訂單的狀態列加入進度條的設計,圖像化流程狀態增加可讀性

概念補充

這裏的改善方針裡有額外使用了兩個 Heuristic Evaluation 的設計方法,分別是

03 Consistency 一致性

04 Flexibility and efficiency to use 增加使用的彈性與效率

總結

今天介紹的是運用 4 個 Heuristic Evaluation 原則去做分析改善蝦皮購物清單頁面的方法,而這其實只是一部分的原則方法。

Heuristic Evaluation 其實一共有十個原則可供設計參考與應用,在此因為沒有提及,故先暫時略過,但這些沒提到的也相當重要,建議大家也去看看喔!

--

--