[你WFH了嗎] 疫情下遠距打卡APP UX/UI設計分享

初版:以感應打卡機為靈感

1. 顯示現在時間(日/時/分/秒)

身為上班,每天趕在8點29分59秒之前快手抽卡感應的經驗,大家應該都有吧(笑),身為打卡系統的使用者,「分秒必爭」是打卡時的情緒也是直覺。所以設計時,我將時間定義為主要資訊,詳細呈現至日/時/分/秒的地步。

時間詳細到顯示時/分/秒

2. 綁定使用者key值

為了對原有資料庫進行資料拋接,打卡資料必須以多對一的方式對應實體感應卡的員工編號。因此初次使用時APP會要求使用者進行工號綁定,綁定時提示框會顯示對應的員工姓名,防止綁定錯誤。

身份一定要好好確認!否則用久了可是無法挽回的QQ

3. 捨棄查找、專注本質

因為是急件,所以應該注重需求的本質,盡量將功能收斂至最小可行性。討論途中,工程師曾提議在APP建立查找功能,但以使用者體驗來說,我覺得更在乎的會是當下的「一翻兩瞪眼」,「準時」是習以為常、「遲到」才會特別記得(但通常坐下來一小時也就忘了),多數人應該沒想過回頭看自己的打卡記錄,動機不大,所以這項提議就被reject掉了。

當然,後台會有完整的資料記錄,但就APP功能,我們只收斂在「日復一日」的打卡動作上。

介面我以一頁內能解決所有功能為目標,卡控必須先有上班資料才能按下班打卡。上下班打卡時間會在午夜12點重整歸零,跟著使用者迎接另一個工作天的到來。

終版:考量環境因素優化設計

1. 網路延遲可能造成爭議

第一版wireframe出來後,在工程師M的建議下,我將原本的時/分/秒設計拿掉,僅顯示日期。原因出在打卡瞬間不一定等於紀錄瞬間,如果在58秒打卡當下遇到網路卡頓,資料連線上時說不定已經超過上班時間,在「遲到」的責任歸屬上,很容易造成糾紛,因此拿掉不斷變動的秒數資訊,只在送出後才顯示秒數結果。

拿掉時/分/秒 減少因網速而造成的資料爭議

「我們不是在打造另一台感應打卡機!」

瞬間打醒了我,我們是在打造另一個紀錄員工出勤的解決方案,而不是將感應打卡機搬到APP上。

身為UX/UI設計師的我,竟然不小心也進入了這個誤區,果然還欠歷練啊~

2. 後台直接勾稽,免綁定

關於綁定的部分,從節省使用者步驟的角度切入,其實可以交由後台串接處理,後來工程師才跟我說,APP後台當初在建立時就已經有員工編號這個欄位,使用者用帳號密碼登入APP時就會知道身份,可以直接拋接資料。OK,那就果斷拿掉囉~

最後,讓我們看看Mockup吧!

--

--

“Make it simple, but significant.” Kait here, a product manager of carbon footprint verification and energy monitoring IoT system.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kait | 關於成為Product Manager

Kait | 關於成為Product Manager

“Make it simple, but significant.” Kait here, a product manager of carbon footprint verification and energy monitoring IoT system.