iT邦幫忙

2026 iThome 鐵人賽

0
Modern Web

從 UI/UX 設計到前端實作:30 天打造專屬的任務學習計時器系列 第 32 篇

DAY 32 | UX優化:備份檔名時間戳與意見回饋管道

  • 分享至 

  • xImage
  •  

在開發部署完成並實際投入使用後,我在日常操作中發現了兩個可以持續優化使用者體驗(UX)的細節:

  1. 匯出檔案(CSV / JSON)的命名邏輯優化
  2. 新增使用者意見回饋管道

1. 備份檔名優化:加入精確時間戳記(Timestamp)

原先系統在匯出 CSV 報表與 JSON 備份檔時,檔名會加入「日期」作為標示。但在實際使用時發現,若在同一天內進行多次備份或下載,預設檔名會完全相同,只能依賴作業系統自動在檔名後方補上數字編號(例如 (1)、(2))。

時間一久,回頭查看這些備份時,有時候很難憑編號辨識哪一個才是最新的資料版本。為了提供更明確的識別,我決定在原本的日期格式外,進一步將「時間(時、分、秒)」融入檔名結構中。

調整前(僅包含日期)

同天多次下載時,檔名重複:
下載檔名調整前

調整後(加入時分秒時間戳記)

每個下載檔案都有加入更精細的時間標籤,檔案順序一目了然:
下載檔名調整後


新增意見回饋:輕量化管道選擇

雖然 TaskTimer 目前的功能已經能滿足我個人的使用情境與需求,但每個人的工作與學習習慣不同。如果能收到其他使用者的回饋與情境分享,或許能激發出更多有趣的想法,讓這個工具變得更完善,因此我想增加意見回饋的功能。

在規劃「意見回饋」功能時,我評估了兩種實作方式:

方案 1:使用原生的 HTML mailto: 標籤

透過標準的超連結觸發使用者裝置預設的郵件軟體(如 Gmail、Outlook、Apple Mail),並預先帶入郵件主旨與收件者:

<a
  href="mailto:aria@example.com?subject=TaskTimer%20意見回饋"
  class="btn btn-link btn-sm text-reset p-0 text-decoration-none"
  data-i18n="footerFeedbackBtn"
>
  意見回饋
</a>

方案 2:整合前端發信 API 服務(如 EmailJS)

EmailJS 是一個不需要撰寫後端程式碼(Serverless),就能直接從前端 JavaScript 發送 Email 的第三方託管服務。
它可以搭配 Modal 彈窗表單,讓使用者直接在網頁上填寫意見,並在背景透過 API 自動將內容寄送到指定信箱。

最終決策與考量

經過綜合評估,因為 TaskTimer 定位為極簡、免註冊的輕量化工具,且目前的意見回饋屬於「非高頻次」的收信需求。而且因為目前採用純原生 JavaScript(Vanilla JS)開發,金鑰的曝光風險比較高,因此最終選擇採用輕量且零維護成本的方案 A(mailto:)。這樣既能為想提供意見的使用者留下聯繫管道,又能維持網站本身的簡潔。


上一篇
DAY 31 | 東西擺整齊的療癒感!專案開發後的回頭重構與架構優化
下一篇
DAY 33|修正錯誤、提高效能,還看了一堆貓咪影片
系列文
從 UI/UX 設計到前端實作:30 天打造專屬的任務學習計時器 共 33 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言