後台功能性介面的UX文案筆記

更新於 發佈於 閱讀時間約 6 分鐘

UX文案是設計師們操作情境很好的工具,可以減少用戶認知負擔,讓介面簡單易懂。但我看過許多後台介面的Placeholder文案似乎是亂寫的?

為什麼想寫這個題目?

比起光鮮亮麗的前台介面流程,一般營運管理介面(俗稱後台)經常淪為配角,常被認為是「有空再來談怎麼優化」,而所謂的後台優化常常意味著追加功能,而不是真的針對後台操作的使用體驗與操作加以改善。

但我們規劃網路產品的資訊架構設計時,後台操作邏輯以及流程是否善用,大大的影響前台是否資訊完美呈現。

這篇文章試著整理一些過去我們規劃網站或APP營運後台時,關於功能性介面文案與命名的一些想法,透過寫下自己目前的觀點,期望持續改善。

UX文案的應用情境

電腦沒有我們想像中聰明,至少,世上大多數網站/APP介面背後連結的電腦程式,都在靜靜等待人類的輸入,由你填寫一些選項、輸入一些指定的字詞,電腦程式才能協助你查詢或加工你所輸入的資訊,並且返回你預期的結果(開始祈禱)。

我們在 UX 設計階段要評估的事情,就是構思如何給予用戶引導,控制用戶期待,能輸入有限範圍的正確資訊,完成任務。

raw-image

▲如上圖,在幾乎沒有提示與環境資訊的情況下,正常用戶是無法預期這個輸入框能做些什麼事。

raw-image

▲接著我們把介面上唯一的按鈕換個文案「查詢」。

嘿!你是不是開始有點想法了?這是查詢?我可以查詢什麼?至少我不會將這個輸入框誤認為「購買」或「抽獎」對吧?

raw-image

▲接著這張圖我們在輸入框內一般稱為 Placeholder(佔位符、預留位置)的地方寫上一段文案,這段文案明確的提示用戶「不能隨意輸入任意的資訊,這個輸入框的查詢功能只針對公司行號的統一編號」。

要注意,我預設閱讀這篇文章的讀者你不用任何解釋就可以自己懂什麼是「公司行號的統一編號」,所以這段文案才具備介面功能的解釋效果。

但如果換個情境如下圖:

raw-image

▲如果你不知道什麼是「 SSCC 編碼」,這個介面的文案提示只會卡住你,讓你不知所措,無從自行推敲出答案。(因為大腦長期記憶沒有足夠的已知事實幫助推理,環境中的提示也不足)

這邊的認知心理學原則是:

人需要「先備知識」儲存於長期記憶區,才能在思考問題時提取。
raw-image

▲現在我們增加環境中的資訊,雖然我們不一定知道標題「物流棧板管理」精準的定義是指什麼物體或單位,但大腦已經開始運作進行猜測。

物流是很常見的字眼,所以這是快遞行業在使用的東西嗎?那棧板就是一塊一塊讓貨物放在上面的貨架囉?

資訊介面中的頁面標題、UI 區塊標題是用戶快速辨認功能的重要線索。

注意UX文案撰寫時引用的字詞來源類型

在這邊我們要停下來,分類一下 UX文案在撰寫時可能遇到的幾種字詞來源。

  1. 通用知識:你假設接受過正常國民教育以及電腦網路使用經驗的人都應該要知道的常識。例如「Wi-Fi」會認為是通用常識,但「IPV6」顯然不是。 「輸入身分證字號」是成人都能理解的用語,但「輸入 IMEI 碼」對我來說是冷知識。
  2. 專有名詞:如同上面舉例的「輸入 IMEI 碼」,這是手機硬體的編號,相當於手機的身分證字號,如果你記得你手機的 IMEI 碼,失竊或遺失時在警察局報案甚至可以提供這個編碼給警察。(但誰會去記啊?)無論如何,專有名詞至少是稍微 Google 一下就能查詢到的有標準定義的名詞。
  3. 業界用語:有些名詞只流通於特定產業,而且每間企業運用這個名詞時,定義還略有不同,這種情況最頭疼,務必要在資訊架構前的用戶訪談中釐清這種狀況。舉電商領域常見的 SKU 為例,一般理解為產品編號,這個名詞原文為「Stock Keeping Unit」,意思是最小庫存單位。例如你賣保健食品葉黃素,可能推出單罐30粒以及六罐禮盒裝,像這樣要算成兩個 SKU 編號,雖然後者只是將單罐產品裝入一個包裝中出售,但它包裝之後要被算為獨立庫存。但也有人不是這樣用 SKU,認為只需要一個 SKU 來計算,禮盒的銷售結果乘六就好(暈)。
  4. 特別文化的慣用語:有些平台或社群有自己的文化用語,但對於技術端來說都是差不多的東西,例如綜藝節目《偶像練習生》稱參與投票的觀眾叫「全民製作人」、在 LINE 裡面你所經營的會員叫「LINE 好友」、有的團購網站的會員稱為「團友」,但你問工程師這些名詞有差嗎?搞不好在資料庫裡面通通都叫 Member。

結語

確認我們在撰寫 UX 文案時使用的字詞語感很重要,最重要的是當它展現在用戶面前時,可以精準的限縮用戶的認知範圍,讓用戶不用花太多腦力思考,就能從腦袋中提取下一步動作。

為了避免文章落落長,這篇文章就先討論基本字詞的運用原則,我預計另外整理一篇文章做一些範例討論。

補充認知心理學的觀點

  1. 人偏好使用記憶而非思考來指引行動。
  2. 工作記憶有限,所以當工作記憶太擁擠時,思考變得更為困難。
  3. 所有長期記憶中的訊息都存在於意識之外,直到被需要,這才進入工作記憶中,成為意識。
  4. 人類的記憶會模糊,記憶分為「逐字」與「概念」,例如 FBI 是很精確的逐字記憶。但老婆去年的生日只是大致記得的概念。(其實我忘光了)
  5. 提示線索的效力,取決於與用戶意圖的連結有多強烈,以及在回憶時是否具備足夠的突顯性來吸引注意。
  6. 用戶會產生預期,藉此預測接下來會發生的事。當我們提供預期中的事物,就會滿足用戶對於「預測正確」的需求,進而產生愉悅感。.

相關文章:

留言
avatar-img
留言分享你的想法!
avatar-img
獸群之心 / Soking的沙龍
82會員
47內容數
以一個資深網路產品設計師的眼光,討論網路思維、產品思維以及心理學如何幫助我們了解這個世界。
2023/06/02
其實在與客戶開顧問會議的時候,我常常會勸客戶不要輕易發動用戶研究,而是應該回歸到基本的問題定義,那就是我們現在希望解決產品發展過程的什麼問題? 我想透過這篇文章來思考整理,我對於用戶研究在什麼時機發動,對於產品服務的發展會是更明確的效益與用途。 從商業發展的角度來看,我通常會以這幾點作評估基礎...
2023/06/02
其實在與客戶開顧問會議的時候,我常常會勸客戶不要輕易發動用戶研究,而是應該回歸到基本的問題定義,那就是我們現在希望解決產品發展過程的什麼問題? 我想透過這篇文章來思考整理,我對於用戶研究在什麼時機發動,對於產品服務的發展會是更明確的效益與用途。 從商業發展的角度來看,我通常會以這幾點作評估基礎...
2023/05/26
前陣子我在回顧過去幾年合作過的企業,重新思考他們是在什麼情況下察覺自己需要尋找外部的體驗設計團隊協助,希望透過這篇文章疏理自己的觀點,也分享給你。 ​我發現可以用三個問題作為分析的角度,來評估這個議題...
2023/05/26
前陣子我在回顧過去幾年合作過的企業,重新思考他們是在什麼情況下察覺自己需要尋找外部的體驗設計團隊協助,希望透過這篇文章疏理自己的觀點,也分享給你。 ​我發現可以用三個問題作為分析的角度,來評估這個議題...
2023/05/21
先前在訓練我們家的新人 UX 設計師如何帶領客戶進行設計思考工作坊,這對我來說也是一個新鮮的嘗試,引導別人如何進行工作坊引導,這在語言與概念上有著遞迴的樂趣。 觀察我們家新人如何出包,與他一起覆盤的過程,也讓我建構了「原來這些概念需要特別提醒」的 Tips,因此本文想跟你分享我的觀察。
2023/05/21
先前在訓練我們家的新人 UX 設計師如何帶領客戶進行設計思考工作坊,這對我來說也是一個新鮮的嘗試,引導別人如何進行工作坊引導,這在語言與概念上有著遞迴的樂趣。 觀察我們家新人如何出包,與他一起覆盤的過程,也讓我建構了「原來這些概念需要特別提醒」的 Tips,因此本文想跟你分享我的觀察。
看更多
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
重點摘要: 6 月繼續維持基準利率不變,強調維持高利率主因為關稅 點陣圖表現略為鷹派,收斂 2026、2027 年降息預期 SEP 連續 2 季下修 GDP、上修通膨預測值 --- 1.繼續維持利率不變,強調需要維持高利率是因為關稅: 聯準會 (Fed) 召開 6 月利率會議
Thumbnail
重點摘要: 6 月繼續維持基準利率不變,強調維持高利率主因為關稅 點陣圖表現略為鷹派,收斂 2026、2027 年降息預期 SEP 連續 2 季下修 GDP、上修通膨預測值 --- 1.繼續維持利率不變,強調需要維持高利率是因為關稅: 聯準會 (Fed) 召開 6 月利率會議
Thumbnail
React 表單驗證是一種技術與使用者體驗的設計,讓使用者能夠即時檢查輸入的資料並修正,提升使用者的使用體驗,並確保資料的正確性。
Thumbnail
React 表單驗證是一種技術與使用者體驗的設計,讓使用者能夠即時檢查輸入的資料並修正,提升使用者的使用體驗,並確保資料的正確性。
Thumbnail
其實要為專案建立操作介面的方式很多,除了網頁之外,還能另外寫個專門的手機 APP 連線,或是乾脆升級算法,讓我們能隨口喊一聲「嘿OO!」就搞定,不過⋯
Thumbnail
其實要為專案建立操作介面的方式很多,除了網頁之外,還能另外寫個專門的手機 APP 連線,或是乾脆升級算法,讓我們能隨口喊一聲「嘿OO!」就搞定,不過⋯
Thumbnail
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
Thumbnail
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
Thumbnail
常見的下拉式選單怎麼做?資料驗證又是什麼?資料驗證是個「驗證資料是否符合某條件的機制」,我們通常會用它來避免別人輸入無效的值,減少錯誤的發生。來看看吧!
Thumbnail
常見的下拉式選單怎麼做?資料驗證又是什麼?資料驗證是個「驗證資料是否符合某條件的機制」,我們通常會用它來避免別人輸入無效的值,減少錯誤的發生。來看看吧!
Thumbnail
「Feedback 回饋」是最直接面向使用者的一種元件分類,最常被拿來討論「這個功能友不友善」,這篇會整理常見的回饋元件,包含:模態(警示 Alert、工具提示 Tooltip、通知 Notification、流程 Progress)、非模態(互動元件 Modal、對話 Dialog)。
Thumbnail
「Feedback 回饋」是最直接面向使用者的一種元件分類,最常被拿來討論「這個功能友不友善」,這篇會整理常見的回饋元件,包含:模態(警示 Alert、工具提示 Tooltip、通知 Notification、流程 Progress)、非模態(互動元件 Modal、對話 Dialog)。
Thumbnail
會加入這個外掛的原因是因為,這個外掛會在內容上加上「目錄」的功能,因為加入目錄的關係,讓使用者可以一目了然清楚自己想要看的位置區塊,避免在整個網頁上花太多時間在搜尋自己想要的資訊。簡單來講,就是幫助消費者使用體驗,而使用目錄,也會讓SEO更加分唷! 👉所以方格子也會有所謂的章節目錄唷!
Thumbnail
會加入這個外掛的原因是因為,這個外掛會在內容上加上「目錄」的功能,因為加入目錄的關係,讓使用者可以一目了然清楚自己想要看的位置區塊,避免在整個網頁上花太多時間在搜尋自己想要的資訊。簡單來講,就是幫助消費者使用體驗,而使用目錄,也會讓SEO更加分唷! 👉所以方格子也會有所謂的章節目錄唷!
Thumbnail
之前一直沒有寫相關的作業心得筆記,一方面是覺得很熟練難度不高所以就很懶惰...但進入到學期2-2後,光是S2的製作電影清單,突然感覺難度一下提升超級多,很多內容不是一次兩次就能夠記起來且熟悉,而且邏輯程式方面的量也上升到百行才發現真的很難一下吸收,所以決定開始來寫學習、作業、技術相關筆記來加深自己的
Thumbnail
之前一直沒有寫相關的作業心得筆記,一方面是覺得很熟練難度不高所以就很懶惰...但進入到學期2-2後,光是S2的製作電影清單,突然感覺難度一下提升超級多,很多內容不是一次兩次就能夠記起來且熟悉,而且邏輯程式方面的量也上升到百行才發現真的很難一下吸收,所以決定開始來寫學習、作業、技術相關筆記來加深自己的
Thumbnail
一開始接觸網頁開發的時候,可能會常常在切版時遇到一些奇奇怪怪的問題:版面總是無法貼齊,左右參差不齊;圖片或是版型變形,但都找不到問題,又或者是技術跟不上設計稿,怎麼切怎麼亂。 會有這樣的狀況主要是⋯⋯
Thumbnail
一開始接觸網頁開發的時候,可能會常常在切版時遇到一些奇奇怪怪的問題:版面總是無法貼齊,左右參差不齊;圖片或是版型變形,但都找不到問題,又或者是技術跟不上設計稿,怎麼切怎麼亂。 會有這樣的狀況主要是⋯⋯
Thumbnail
輸入畫面 為什麼要做驗證? 因為作為設計者,永遠不該預設使用者會乖乖照設計者的意思輸入。
Thumbnail
輸入畫面 為什麼要做驗證? 因為作為設計者,永遠不該預設使用者會乖乖照設計者的意思輸入。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News