Ttrain index  

 - Ttrain首頁 -

 


這是我們第一個改善設計的作品,以台鐵火車時刻查詢系統訂票作業系統為參考網站。

藉由使用習慣的觀察、網站操作動線和使用流程來重新規劃與排版設計。

 

 

火車時刻查詢  

 

 

在原本的火車時刻查詢系統中,除了選擇地區和車站外,還有可以輸入車站名稱與選擇主要城市的車站。

當初在設計規劃這些功能欄位時,一定是有其存在的意義,例如選擇地區和選擇車站就是一種分類整合。

輸入車站名稱是為了快速方便找到結果,點選主要縣市車站的名稱可能是大地標比較好認。

智慧型手機與平板的出現,不只改變了使用體驗、操作流程也加深了我們的設計思考。

 

 

火車訂票系統  

 

 

在Ttrain首頁,加入訂票系統中的單程票和來回票的選擇,作為訂票和查詢的判別基準。

選擇完單程票或是來回票,接著選擇地區與車站,不提供太多的選擇條件,太多的選擇反而讓人困惑。

選擇地區即包含了台北地區、台中地區、台南地區、高雄地區、集集線...等等,維持原本路線的分類方式。

選擇車站即是選擇地區後,系統會列出該地區的車站,例如台中地區的車站有台中、大慶、烏日...等車站。

選擇車種的部分,原功能有所有車種、對號列車、非對號列車。

對於我這種搞不清楚什麼是對號列車、什麼是非對號列車的人來說(現在我有搞懂了),

選擇"所有車種"是最快也是最直接的事情,就通通列出來吧。

如果剛好可以配合到搭火車的時間,那自強號、莒光號、區間車只是一種乘車工具的選擇參考。

選擇乘車日期,點選左右箭頭,可查詢的日期為一個月半,依據台鐵提供的開放資料為主。

選擇搭乘時間,原網站可以從00:00 到 23:59之間查詢,Ttrain只提供搭乘時間全日查詢,不另外提供區段時間的選擇。

選擇日期的操作方式,灰色方框標示著今天的日期,藍綠色的圓圖示為"選擇回程日期",深藍色的圓圖示為"選擇去程日期"。

選擇單程票時就只會出現深藍色的圓圖示,而選擇來回票時會出現兩種顏色的圓圖示。

在選擇來回票的操作中,點選第一個日期為深藍色圓圖示,點選第二個日期為藍綠色圓圖示。

如果選錯日期怎麼辦,那就請再點選做下方的"重新選擇日期",用這樣的方式除了程式判斷簡單,操作上也很單純。

這個想法來於我們小時候寫作業時常常反覆做的一件是"寫錯字了,那就用橡皮擦,擦掉重寫就好了" (好熟悉阿~)。

 

 

Ttrain search

  - 來回票 火車時刻查詢頁面 -

 

 

接著進入來回票時刻查詢頁面,一樣以藍綠色代表回程,深藍色代表去程,將主要到達的縣市用字體的大小表示,讓視覺瀏覽能馬上被注意。

目的縣市、去回程日期與車站均以同色系表現,此外比較特別的是我們結合了天氣預告,只要是來回日期在一星期內,都可以串接氣象局提供的天氣資料。

如果能事先知道當地的天氣好壞,對於外出的旅客是個很貼心的提醒,如果是好天氣就可以先準備防曬用品或衣帽,下雨天的話就可以先準備雨具。

 

 

火車時刻查詢結果  

 

 

在原網站的火車時刻查詢結果中,提供了豐富的乘車資訊,但文字配色是比較雜亂一些。

經過反覆的思考和討論後,將必要的資訊欄位篩選出來,有開車時間、抵達時間、行駛時間、車種、車次、經由的路線(山線、海線)、備註說明、票價。

開車時間、抵達時間、行駛時間是乘客最想知道的資訊,因此排列順序為優先,接著才是車種(自強號、莒光號、區間車...等等)、車次(數字編號)。

版面的文字排版使用黑灰色系與字體粗細來表示重要性,而備註說明的內容使用icon圖示,並放在右上角的位置當作資訊參考。

訂票的部分,如果該列車已經額滿即顯示X,代表無法訂票。但這部分是否能做到資料即時回傳,也必須看看台鐵是否願意開放API。

 

 

Ttrain passenger  

  - 來回票 乘客資訊頁面 -

 

 

選擇完來回的時間後,需要請乘客確認預定資訊、選擇訂票張數、車票售價與總金額。

接著就是和原訂票作業系統一樣,需要填寫身分證自號與驗證碼,Ttrain會將訂購資訊回傳給台鐵資料庫。

 

 

Ttrain booking  

- 來回票 訂票成功頁面 -

 

 

最後終於訂票成功啦!!! 頁面會顯示來回程取票代碼與相關取票方式。

關於取消訂票和網路付款的方式,目前都是外連到台鐵訂票系統網站做取消訂票和網路付款。

原本是想要設計線上刷卡的頁面來進行網路付款,但這一部分系統是台鐵委託金流系統商協助。

所以有一點小頭痛,不知道金流系統商願不願意開放API來讓我串接阿~~

除了來回程訂票流程,單程票的訂票流程也是大同小異,相關的頁面如下:

 

 

Ttrain single_search  

 - 單程票 火車時刻查詢頁面 -

 

 

Ttrain single_passenger  

- 單程票 乘客資訊頁面 -

 

 

Ttrain single_booking  

 - 單程票 訂票成功頁面 -

 

 

 

目前都還是設計稿,到真的上線使用還需要一段時間和努力,有興趣的朋友可以到這個網站 CIMTD最新消息頁面公告頁面,網站的按鈕部分都可以點點看。

改善設計不是為了減少而減少,我們希望經由文字與排版方式在使用流程與認知回饋上提供更直覺的使用者體驗,用簡單的方式讓生活充滿著更好更友善的設計環境。

 

 -  台灣公車動態路線查詢 | CIMTD 改善設計  -

 

arrow
arrow

    索尼 發表在 痞客邦 留言(2) 人氣()