火星售票系統
選擇票區UI 設計

Backgound

Project Background

由於專案時間緊湊,PM 決策由RD先架網站,完成後再由設計師優化。其中,透過第一場活動後 PM 整理的回饋去優化。



Role: 在購票流程 4 步驟中負責 - 1 選擇票區頁面的 UI 優化。

Challenge

RD 先行產生的介面問題:


1. 整體介面資訊較分散,容易遺漏選項。


2. 活動場次於前頁已選擇過,此頁無自動帶入資訊,又為必選項目,漏選時會造成不必要阻擋。


3. 選擇票區對「如何下一步操作-選區」不夠直覺;Mobile 版本只有座位圖選區,無表單選區,在複雜的座位圖不容易點選。的 User都能成功註冊及登入。

Solution

針對 Challenge,主要優化項目 :

1. 整體介面資訊依操作步驟分2區域。


2. 活動場次分為多場及單場2種判斷顯示。


3. 選擇區域預設「已選擇」其中一區;Mobile 版本應增加表單選區,輔助複雜不易點選的座位圖。

Mock up-Website

Mock up-Mobile

(1) 與網頁不同處在於「選擇區域」以頁籤的形式呈現,兩種選區方式:表單選區、座位圖選區。
(2) 考量有些座位圖繪更複雜、更難點選,所以在Moblie 版表單選區優先為第一個標籤內容。