微文本和UX通信
1)什麼是微文本,為什麼需要它們
微文本(microcopy)是界面中的簡短上下文短語:字段簽名,提示,下載狀態,錯誤,確認,CTA按鈕,空白屏幕等。他們的任務是消除不確定性,加快動作並減輕認知負擔。良好的微文本:- 解釋「現在發生了什麼」和「接下來要做什麼」;
- 減少錯誤和支持;
- 增強轉換和信任。
2)基本原則
1.清晰>機智。沒有歧義和語。
2.上下文。我們在這裏和現在寫一些有用的東西。
3.簡潔。我們刪除多余的單詞而不犧牲意義。
4.主動動動詞和動詞。「保存」、「繼續」、「提交文檔」。
5.具體細節和地標。什麼,為什麼,如何修復,需要多長時間。
6.術語序列。一個術語是整個產品的一個含義。
7.品牌的聲音和情況的基調。友好,但沒有恐慌;在緊張的腳步-中立和冷靜。
8.可用性。易懂的語言,大聲朗讀,與屏幕閱讀器的兼容性。
9.本地化第一。字符串長度,數字,時間的設計令牌;避免文化依賴的笑話。
10.道德和責任。條件透明,期望誠實,沒有操縱。
3)微文本點圖
導航和CTA:項目名稱、按鈕、狀態失衡。
表格和KUS/註冊:標簽,播放器,掩碼,提示,inline驗證,錯誤,確認。
空狀態和「零」屏幕:這是什麼以及如何開始。
狀態和進度:下載、隊列、步驟、等待時間。
系統通知:敬酒,橫幅,pushi,電子郵件/inbox。
搜索和篩選:查詢示例、零結果、排序。
付款/結論:數據要求,時限,傭金,限額。
設置和安全:密碼,2FA,會話,風險差異。
介面協助:hints, tooltips, FAQ搭檔,幫助鏈接。
4)關鍵區域模式(帶示例)
4.1個CTA和動作標題
原則:按鈕=用戶動作+對象。
之前: 「確定」→之後:「保存更改」
之前: 「了解更多」→之後:「閱讀獎金規則」
前: 「發送」→後:「發送文檔」
好:簡短,具體來說,在地方。不好:抽象,開玩笑,模棱兩可。
4.2標簽和播放器
該標簽具有約束力;播放器是格式的示例。
之前:播放器「Ivan Ivanov」沒有標簽→之後:標簽「FIO」,播放器「Ivan Іvanov」。
格式化期望:"DD。MM。GGGG」,「Min。8個字符,1個數字"。
4.3入線驗證和錯誤
錯誤消息公式:不是+如何修復+(原因/限制)。
之前:"錯誤400" →之後:"日期格式不正確。使用DD。MM。GGGG"。
之前:"無法下載"→之後:"文件太大(最大10 MB)。選擇較小的文件"。
開口/鎖定:在旁邊添加「顯示要求」鏈接。
4.4個空狀態
目的:解釋價值並提出行動建議。
Template:"此處將是[結果/歷史],一旦您是[動作]。[步進按鈕]"。
例如:"你還沒有保存的付款方法。添加卡-這將加快付款速度。[添加地圖]"。
4.5下載、進度、等待
報告發生了什麼,需要多少:「我們檢查文件(最多2分鐘)」。
提供替代方案: 「您可以關閉窗口-我們將在一切準備就緒時通知。」
4.6零搜索結果
示例:"點播"live blackjack"沒有找到任何東西。嘗試「blackjack」或刪除「Ispert: X」過濾器。[重置過濾器]"。
4.7通知(敬酒/橫幅/pushi)
成功: "申請已寄出。我們將通過電子郵件報告決定。"
信息: 「必須驗證地址才能增加限制。」
註意:"會議在1分鐘後到期。延長?[延長][退出]"。
錯誤: "付款被銀行拒絕。嘗試另一種方法或聯系銀行。"
4.8付款、限額、期限
明確寫下傭金/截止日期: 「1.5%的傭金由提供商持有」,「支付-最多15分鐘。」
解釋失敗的原因: 「由於提供商的規則,您的區域無法使用該方法。」
4.9安全和敏感步驟
中性語氣,零笑話。
示例:"我們註意到新設備的登錄。 是你嗎?[是的,是我的[沒有]"。
5)語氣和風格: 根據情況進行調整
正常流動:友好,簡潔。
培訓/提振:支持和激勵。
壓力/錯誤/付款:中立,鎮定,具體。
法律/條款:正式透明,沒有營銷承諾。
- 使用:「請」,「準備就緒」,「不要擔心」,「檢查」。
- 我們避免:「oi」,「ups」,「hak」,「magy」,諷刺,輕描淡寫。
6)本地化和國際化
按行長書簽(DE/UK更長)。
數字/貨幣/日期-在本地格式化。
不要在幽默/隱喻中加密含義。
根據語言(每種情況的示例短語集)維護術語表和單數映射。
7)可用性(A11y)
錯誤和重要狀態是aria-live。
WCAG級別的對比和可讀性。
含義是標簽/aria-label,而不僅僅是placeholder。
圖標的文本等效項是:「刪除」,「隱藏密碼」。
制表順序=含義順序。
8)內容流程和設計系統
內容管道:簡要說明→草稿→ UX評論→執行/合規(如果需要)→本地化→測試→發布。
設計系統中的microcopy組件:- 狀態庫(成功/信息/註意/錯誤);
- 按字段類型劃分的錯誤模板;
- CTA名稱的海德;
- 單張地圖和詞匯表;
- 長度的「分配器」(狀態的最大值)。
- 文本驗證:將行存儲在代碼/組件旁邊,使用鍵和說明。
9)度量與實驗
主要指標:步驟轉換、CTR、CTA、完成時間、錯誤率(類型特殊)、NPS/CSAT(腳本)、主題支持呼叫頻率。
研究:UX訪談,可用性測試,大聲朗讀,眼睛跟蹤以檢測「盲點」,空狀態點擊圖分析。
A/B微量測試:一次測試一個語義因子(動詞動詞,時限細節,錯誤公式)。
10)反模式
關鍵步驟中的幽默("upsyk!付款錯誤)。
沒有動作對象的抽象CTA(「OK」,「Veter」)。
無翻譯的技術代碼(「Error 500」而不是「服務不可用」)。
播放器代替標簽。
隱藏的條件和不合理的期望(「即時」,當出現延遲時)。
沒有下一步的「零」空狀態。
被動承諾和非個人設計(「必須填寫」)。
11)短語模板(可以取和插入)
表格錯誤:- 「輸入+380格式的電話號碼……」
- "密碼太短。至少8個字符"
- "文件模糊了。下載更清晰的照片"
- "準備好了!我們將檢查文件(最多2分鐘)並發出通知"
- "已接受付款。收據已發送到電子郵件"
- "第一次補給後的操作歷史將在這裏出現。[補充]"
- "我們連接提供商……通常需要30秒"
- "我們阻止了從陌生地方進入的嘗試。如果是這樣,請在應用程序中確認"
12)支票單
在發布微文本之前:- 用戶接下來該怎麼做嗎?
- 是否有具體內容:格式,限制,時限,原因/後果?
- 術語是否與術語表相同?
- 語氣是否符合情況?
- 留言大聲朗讀,在320 px屏幕上?
- 可用性:標簽,aria屬性,焦點,對比度。
- 本地化選項(沒有文化陷阱)是否準備就緒?
- 消息解釋原因嗎?
- 提示修復?
- 不責怪用戶?
- 沒有透露多余的技術細節?
13)「之前/之後」示例"
1.付款被拒絕
之前: 「進行付款的錯誤」
之後: "付款被銀行拒絕。嘗試另一張卡或聯系銀行。委員會沒有註銷"
2.模棱兩可的按鈕
之前: 「繼續」(目前尚不清楚到底是什麼)
之後: 「轉到身份確認」
3.零搜索
之前: 「什麼也沒找到」
之後: "沒有發現"roulette live"。移除「僅限」過濾器或嘗試「roulette」。[重置過濾器]"
4.空錢包
之前: 「這裏是空的」
之後: "要開始,請掛卡或錢包。這將加速補充和支付。[添加付款方式]"
14)在雜貨店工作中嵌入微型
在設計與邏輯的同時規劃文本。
在存儲庫和設計系統中保持「行庫」。
在屏幕副本上設置文本測試階段。
記錄解決方案:為什麼選擇措辭,測試哪些假設。
簡短的spargalk
含義→行動→單詞。首先要做什麼,然後怎麼說。
一個屏幕是一個目標。Microtext服務於步進目標。
更多上下文-支持較少。按時和按情況解釋。
測試單詞的方式與UI相同。文本是界面的一部分,不是裝飾。