SPARKFUL
閲覧しようとしているページの翻訳が完了していません。現在対応中のため、もうしばらくお待ちください!

Blog

Insights from the SPARKFUL teams

表單就像溫柔的店員

Wei-Fan Chenexperience-design
name

本文有大量圖檔遺失,我們正在努力恢復中了!

表單應該就像個溫柔又有禮貌的店員。想像你走進一間超級市場,走過兩旁堆滿商品的走道之後,左轉右轉,看到你想買的果醬並且挑選了兩罐放在購物袋中。終於你走向結帳櫃檯,一個笑容甜美的收銀人員對溫柔的問好,並接過你手中的果醬,告訴你價錢,幫你包裝,然後找給你零錢和發票並且愉快的說再見。

現在你來到一個購物網站,在首頁看到許多特價商品,你點選了食品的分類選項,來到果醬的分類。稍微看了一下果醬的介紹文章,然後點擊滑鼠把果醬放到購物車中,並點選結帳:結果出現的是一個冷淡又死氣沈沈的表單(Form)。

表單絕對是網站中使用者和系統互動的最主要的元素,網站透過表單向使用者提出問題,使用者則透過表單向網站表達他的想法。標單又可以細分成三種元素:說明目的的標籤、提供回應的輸入方塊或選單,以及提交表單的按鈕。表單的設計就可以想像成一個稱職的店員,他的服務應該要符合下面幾個項目:

  1. 標籤要清楚:標籤就像是店員的問候語和問題,應該要有禮貌、清楚、簡單而且容易理解。

清楚的標籤標示

  1. 仔細決定表單項目:絕對不要問一些不該問、或是不需要問得問題。例如:在不需要手機號碼的情況下,要求使用者輸入手機號碼。這種冒犯隱私的行為,是很容易招致網路使用者厭惡的。

  2. 標示清楚:標籤應該將「一定要輸入」的項目標示清楚。如果一個表單有十個需要輸入的項目,其中有三個一定要輸入,那麼就應該將「*」或其他符號標記在一定要輸入的標籤的旁邊(標記在輸入框旁邊不容易閱讀),反之亦然。

  3. 清楚提示的輸入框:提供使用者輸入的輸入框的大小應該要經過設計來符合所需要輸入的資料,輸入地址的方框應該要比輸入名字的方框要長一些。輸入電話號碼的方框應該適當的分成區碼和號碼兩隔,讓使用者透過輸入框的大小就可以了解所需要輸入的格式。

清楚提示的輸入框

  1. 常用的預設值:表單在一些常用的項目上,應該要填好許多使用者常用的預設值,讓使用者不用一隔一隔慢慢的填寫。如果你的表單是使用者每天都要使用的,那預設值則可以大幅增加使用效率。

  2. 提供良好的限制:如果有一個輸入數值的方格,而輸入的數值有大小限制,則可以考慮改用滑桿或旋扭取代。如果一定要採用輸入框,則至少把數值的限制標示清楚,避免在使用者輸入錯誤之後才跳出錯誤的對話框。

  3. 不要預設寄送廣告信:許多表單的最後都有一個選項:「我要收取 xxxx 網站的廣告信件。」相信我,九成的使用者都不喜歡你預設這個選項給他們。當個有禮貌的店員,不要強迫推銷,讓使用者決定自己喜歡的東西吧!

  4. 千萬不要隨便清除輸入的資料:這是表單最容易讓使用者生氣的一個問題了!許多網站的表單寫完並按下提交之後,畫面上跳出了輸入錯誤,然後就還我們一個空白全新的表單。這簡直就像是 Alan Cooper 說的:「就好像我寫錯一個字,然後店員就把整張紙揉成一團丟在我臉上一樣。」


Reference

Photo by Leon Dewiwje on Unsplash

Wei-Fan Chen
Wei-Fan Chen
CEO / SPARKFUL and Fourdesire
喜歡開發與創作各種有意義且有目的的遊戲以改變社會。 《玩心設計》作者、偶爾寫部落客與擔任講師。樂於參與大學和行業活動,興趣涵蓋遊戲設計、遊戲理論、行為設計、人機介面和交互設計。熱衷於雲端運算,同時也是一個活躍的獨立遊戲開發者 🎉
divider
関連記事
name

如何為產品注入玩心?Fourdesire 遊戲化設計的五個心法

Sammy 是 Fourdesire 的助理製作人,在 2017 年底加入 Fourdesire 後,開始參與遊戲化產品設計,目前負責經營《記帳城市》以及研發新產品。這篇文章會有這幾年在 Fourdesire 參與產品設計的正面和側面觀察,一...もっと記事を読む
name

配樂與音效,在互動作品中該扮演什麼角色?

多數影像的配樂與音效都是在作品完成之後,再交給配樂師進行後製,或許你會說這是專業分工和業界流程,亦可以減少修改的問題,那如果配樂、音效與作品同時開始進行製作呢?3 月 6 日(三)以「配樂與音效在作品製作上,該扮...もっと記事を読む
name

接案還是創作?李百罡:「滿足他人也是一種能力。」

3 月 6 日(三)由 FourdesireU 主辦的「配樂與音效在作品製作上,該扮演什麼樣的角色?」講座,邀請到製作獨立遊戲《返校》配樂與原聲帶的作曲家張衞帆,以及 App《Walkr》、《記帳城市》配樂音效製作人李百罡...もっと記事を読む