設計網頁或開發使用者介面有很多「眉角」,可能在文字大小、顏色或按鈕形狀稍作調整就會有完全不同的效果,對於追求完美的設計師來說會找一群人進行 AB 測試(A/B Testing),比較兩種或多種設計中最好的表現結果,而這通常能在最短時間達到最佳的正確性,例如,在購物流程可以準確點選要加入購物車的商品,或是在查詢、註冊或加入訂閱時按下正確選項,可別小看這些設計細節,有時候一點點微小差異就足以造成相當大的影響。

但要進行 AB 測試並不是一件容易的事,如果你想知道在不同設計上使用者會直覺點選那一個項目,可以透過本文要介紹的免費工具快速做到。

接下來要推薦的「One Click Test」是一個很有用的免費服務,能夠收集在某個畫面中使用者會點選那個位置、平均時間、最短時間、耗費最久的時間和測試次數等資訊,只要將呈現的畫面擷圖上傳,透過 One Click Test 可以產生兩個鏈結,分別是:測試頁面和結果頁面鏈結,只要將網址傳給受測者就能快速獲取結果。

One Click Test 讓這一切過程變得非常簡單,不用註冊或登入帳號,操作方式也很直覺,開發者表示未來還可能會增加行動裝置的受測介面,總之是一個相當有趣的服務。

網站名稱:One Click Test
網站鏈結:https://oneclicktest.com/

使用教學

STEP 1

開啟 One Click Test 網站,只需要填寫兩個欄位,分別是要顯示的圖片網址、給受測者訊息,訊息部分可以使用中文,不會產生亂碼。

因為受測圖片必須是圖片的直接連結網址,建議透過 Imgur 圖片空間上傳圖片,上傳後於圖片上方點選右鍵、複製圖片位址就能獲取圖片直接連結,再回到 One Click Test 貼上使用。

圖片大小部分建議使用 1024 或 1440 寬度。

STEP 2

One Click Test 會產生兩段網址,分別是:

  • Test page for users: 給受試者的測試網址。
  • Results page for you: 查看測試結果的結果頁面網址。

STEP 3

開啟受測者網址,會先顯示預先設定好的訊息,按下 I’m ready! Go! 開始測試。

上傳的介面圖片會顯示於 One Click Test 網頁,依照前面提示點選你認為最適當的位置。

STEP 4

透過受測結果頁面可以看到目前經歷過幾次測試,以及大家會點選的位置,如果顏色不夠清楚還能切換其他的色彩。

最上方會顯示平均點擊秒數、最快秒數、最長秒數、進行測試次數,如此一來就知道這個設計是否夠直覺,使用者有沒有可能點選錯誤位置。

若要進行 AB 測試,或比較幾種設計那一個效果比較好,可以建立幾個不同的測試鏈結,讓使用者一個一個受測來獲取最終結果,應該就更能判斷出何者效果最佳。

值得一試的三個理由:

  1. 上傳介面圖片、設定提示訊息後產生測試用網址
  2. 收集使用者點選圖片中的位置和反應時間
  3. 可進行 AB 測試找出最佳介面設計