先想一條路

網頁像展場,需要路標和回應

走進展場,你會想知道作品在哪裡、有什麼服務、怎麼聯絡。網站也是:漂亮的按鈕需要帶到對的地方,送出表單後也需要清楚回應。

下面是虛構的設計工作室範例。請依序看作品、看服務,再嘗試聯絡。表單只在這頁示範,不會傳送或儲存個人資料。

01 · 走一次看看

從作品走到聯絡

點選導覽進入不同內容。最後試試空白送出,再填上姓名;畫面會解釋下一步。

作品:山間咖啡

這是虛構包裝設計的教學示意,不是真實客戶案例。

目前位置:作品。接下來可以看服務。

02 · 導覽與內容

每個入口,先回答「會去哪裡?」

導覽像展場平面圖,幫訪客前往主要區域;手機選單讓較窄的畫面也能找到同樣的入口。不要因為放進選單就忘記測試能否展開與關閉。

分頁(Tabs)讓同一區域切換不同內容;展開內容(Accordion)讓訪客按標題查看或收起資訊。範例裡的「合作前需要準備什麼?」是原生展開內容。重點資訊不要藏得讓讀者找不到。

03 · 表單與回饋

讓人知道該填什麼,以及接下來發生什麼

欄位標籤要一直看得見;只把提示寫在輸入框內,開始輸入後可能就消失了。送出前告訴讀者哪些欄位必填,發生錯誤時說明哪裡需要修改。

真實表單還要提供送出中、完成與失敗的回饋,並確保鍵盤可以操作。示範中的「完成」只表示已走完練習,並沒有寄出訊息。

04 · 帶走一條路徑

寫出讀者的三步

  1. 他來這裡要找什麼?入口叫什麼?
  2. 看到內容後,下一步要去哪裡?
  3. 完成操作後,畫面會回應什麼?

文字不會送出或永久儲存,重整後還原。

回到互動練習 ↑

延伸閱讀

W3C:表單標籤及表單回饋。