設計翻譯
北美電商龍頭 Shopify 的設計流程與內容
一個來自友善的內容策略師的問候
前言
這篇文章翻譯自在澳洲跟北美地區都非常普遍的電商後台產品 Shopify 。
在澳洲幾乎所有的網路商店都是採用 Shopify 的後台，不管在哪間 agency 工作幾乎都會都會接觸到，包括我工作的 NGV 的美術館 online-store 也是使用 Shopify 後台。客製化程度高、使用便利，使用者體驗相當優秀，也有很多與 Shopify 成為合作夥伴的網頁設計公司應運而生。
使用者體驗如此成功、成長迅速的平台，到底是如何做設計的呢？這篇文章是 Shopify UX 部門的內容策略專家 Biz Sanford 分享他們關於內容在設計流程裡的重要性，如果有興趣就繼續看下去吧！
本篇除封面插畫之內文及圖片，版權皆為作者 Biz Sanford 及 Shopify 所有。原文連結在建構一個產品時，有些人認為內容是最後的重點，頁面或畫面上的文字可以在發布之前寫出來就好。
但我們知道那不是最好的作法！周到、一致的介面內容是一個良好使用者體驗的核心。所以這裡有一些包含內容、我在設計過程中使用的方法。我們會從草圖的內容角色開始，以高真實度的模型來讓內容發光發亮。把你內容策略的帽子戴上——這是你如何在每個階段聰明的運用你的時間，運用語言去創造更好的經驗。
用文字打草稿
草稿是一個探索點子跟方向的好方法。這是關於紙上的東西、快速移動跟溝通概念。為了打好的草稿我們需要一些內容，文字是幫助使用者完成他們的任務不可或缺的，當你在打草稿時想著他們，你就能及早發現問題，而且幫助你稍後的流程跑得更快。
我發現你需要放進草稿裡最重要的內容是這些：
- 頁面跟區域的標題
- 關鍵動詞跟名詞
- 按鈕跟連結文字
使用明確、直達核心的術語，不要擔心它感覺太聰明或太輕浮。從讓整個團隊都能參與開始！工程師、設計師、內容策略師、專案經理、研究人員，跟你的支援團隊都用不同的字彙去討論他們的點子、還有形容一樣的經驗。這個分歧的意見（或是字）正是你這個階段所需要的重點。
把你試圖解決的問題，用高保真度的內容還原。如果你試著去搞懂一個更大的方向，你會需要了解每個區塊的內容應該如何運作、這些按鈕會帶你去哪裡、在下一頁你會找到哪些資訊。但用你的時間在草稿裡寫下每一個區塊的詳細描述還有點太早。
具體的選擇詞語，並且花時間考慮為什麼選擇某些術語，而不是其他的。不要用搜尋（search）當你實際上是要說篩選（filter)。儲存(save)跟提交(submit)或是發布(publish)是不一樣的。
如果你正在做一些更靜態的東西，例如一個行銷網頁、或是網站登陸頁，就可以在草圖中多放一些靜態內容。比如說，如果我不知道我將會在 Shopify 付款資訊頁 放上多少多少客戶福利，我就沒辦法在草稿上規劃佈局。我應該放上三個框還是四個呢？他們會佔用多少空間？他們需要配上對應的插畫嗎？除非我使用真正的內容，不然我沒辦法回答這些問題。
別擔心畫出沒辦法更改或是接觸的內容草稿，像是側邊的選單或是頁面上的元素都會保持原本的樣子。這可以幫助我們更專注於新的或是即將變化的區塊，而不會被超出範圍的區塊分散了注意力。
讓每個人都畫出自己的草稿，然後把想法呈現給團隊。這是一個很棒的時機，可以公開討論大家為何選擇這些用字。這個用語能反應使用者的想法、和他們使用的話嗎？
當你往線框稿(wireframe)或低真實度的模型(mockup)移動時，你就可以更理解內容、將它更好的發揮。就像 Google Ventures 的 John Zeratsky 在他的部落格文章寫的：「你不會在還沒探索幾種變化的情況下就決定佈局，所以在確定哪個方向是最好的之前，你應該多嘗試幾種文字的解決方案。」
用正確的內容量來畫線框稿
如果我們把草稿當成是設計的第一步，線框稿就是第二部囉。我們把大略的想法變得更具體，並且試著去解決畫草稿時發現的問題。
我發現先制定所有內容元素、以及決定他們的層級結構，真的對於我們畫出線框稿有很大的幫助。
制定內容元素
內容元素，我指的是頁面上的所有內容。你可以用像是 Mindmeister 之類的工具，把它們在表格上記下來，或是直接在 Sketch 檔案裡紀錄。
我發現把內容元素跟線框稿分開真的很有幫助，因為它：
- 記錄可能顯示在頁面上的所有發生事情，特別是因為通常在同一時間很少會出現全部的元素。
- 保持模型的實際性 — 我們不需要顯示所有可能的方案，或是所有可以在線框稿裡顯示的訊息。
- 幫助工程師了解哪些資訊會被包含在裡面。
- 建立不同內容元素之間的關係
- 確保我們不會忘記某個部份或略過一些事情。
比方說，這裡有一些可能出現在銀行 app 登陸頁的不同的內容元素：
確定內容層級結構
在你列出內容元素後，開始根據使用者的優先順序跟你的商業目標開始排列層級。這個練習可以確保你策略性的思考，為什麼要把某些元素放在其他元素之上，並且幫助你在制定佈局跟內容層級結構時，提供一個強而有力又合理的理由。
在低真實度的模型（mockups）中使用內容
當你進入低真實度的模型的階段，你應該用一些更詳細、更實際的內容。為可能發生的場景，寫下最好的內容，即使你知道他可能之後會被替換掉。把它想成是一個具體的初稿，我會使用真實的數據、就像真正日期、時間跟名字，這些能幫助人們直接了解功能，而不需要過度的解釋。
我們從來沒有在設計過程的任何階段使用 lorem ipsum。 如果我們的設計中沒有真正的文字，我們就不知道我們是不是正在解決正確的問題、無法從同事那邊獲得適當的反饋，而且使用者也無法測試任何內容。內容再決策時是很重要的，所以如果我們不使用真正的東西，最後就會試著去做出資訊錯誤的體驗。這些介面上的文字是幫助使用者了解功能不可或缺的一環，幫他們找到所需的功能，並且完成任務（在小螢幕上更是如此）！早點開始思考內容會給我們更多時間去獲取同事、使用者還有在不同選擇中進行演練。
我們常常使用我們很顯然不會出現在產品的字體（對不起啦 Comic Sans）這樣大家就可以確切的了解這上面切確的文字，還在工作進行中、我們還在尋找關於流程還有層次結構方面的反饋。
這應該不用特別提，但應該避免任何不當或不正式的佔位符號內容。 如果意外流出，可能會迅速損害使用者的信任。
集結所有上下文，你應該要對你在撰寫的內容感到自信。跟你的產品經理、工程師跟項目的專家談談。閱讀功能文件，如果你們公司有話（我真的很感謝 Shopify 支援中心 ）。最有詢問價值的一群人之一 —— 就是客戶支援團隊，好好利用他們的豐富知識。他們每天都會與客戶進行對話，他們知道客戶描述事物的字詞是什麼，他們有上千個能支援你的數據等著被分析。
當您準備好進入高真實度的模型、以及核心問題得到解決後，您會需要考慮端到端（end-to-end）體驗：
- 產品內所有的觸碰點
- 錯誤訊息
- 確認
- 線上使用者
不過低真實度還是意味著高品質的內容跟設計。
在高真實度的模型中拋光打亮你的內容吧
從內容策略專家的觀點來看，大部分的重大工作應該在這個階段完成。 如果您在進行高真實度的模型之前，略過了一些早期的活動，例如繪製所有內容元素或記錄所有可能的錯誤訊息，現在是時候進行了。
“最好的種樹時間是 20 年前。第二好的時間，是現在。”
- 中國諺語
在這個階段你要把所有內容的扭結都熨平解開，而不是在改變任何跟經驗有關係的基礎。在 Shopify ，內容跟設計完成後，前端工程師開發這個經驗後，我們的團隊會坐下來做我們所謂的拋光檢查。
我們會審查最終版本的產品，並且尋找任何需要進行微調的地方。從內容的觀點來看，我們會尋找不正確的標點符號、遺漏沒發現的舊版本內容，日期格式錯誤，跟任何其他沒有遵循設計系統的地方。
我們會在這個會議期間做筆記，跟前端工程師一起確保所有的資訊都是最新的。如果需要進行多次更改，我們會再做下一次拋光檢查。這有助於確定這個產品是高品質、而且讓自己也感到驕傲的。
讓它幫助你做設計
我正在根據每個正在進行的專案跟他的規模，不斷的調整這些技巧，而且我完全理解真實的世界絕對比這些按部就班的過程更麻煩！我們會來來回回修改，我們會為一些專案跳過某些步驟，在另一個專案我們會花更多時間在某個特定的詞彙。
我很有興趣聽聽看你怎麼想與如何做。你是如何將內容策略納入你的設計過程呢？你在每個階段的內容真實度跟目標是什麼？
如果這篇文章剛好對你有幫助的話，歡迎追蹤 Digital Sunday。在翻譯或設計上有任何建議，歡迎留言與我討論及分享喔！
