基於組件的框架的 A/B 測試 UX

熟悉編碼對設計師大有裨益。 因此，許多人潛入並學習瞭如何使用代碼（或至少在某種程度上說它的語言）作為與工程師合作時更有效的一種方式。 JavaScript 可以說是 Web 最受歡迎的腳本語言，它擁有一個強大的社區，該社區正在通過它正在製作的框架塑造 Web 的未來。

由於它們的結構和技術限制，像 Vue.js、React.js 和 Material UI 這樣的框架對於設計師來說很重要，因為它們充當了健壯設計系統的構建塊。 此外，在 A/B 測試等開發環境中促進數據驅動的設計技術時，了解代碼的工作原理也很方便。

在最近為一家初創公司創建患者管理平台以將個人與心理健康專業人員聯繫起來的項目中，我們發現盡可能少地建立和管理患者賬戶對於我們的許多臨床顧問來說是關鍵。 專注於為患者資料創建直觀的瀏覽體驗至關重要，設置最佳用戶流程以創建、編輯和分配健康活動給患者也很重要。

與技術負責人討論該項目後，確定從根本上說，該應用程序非常簡單：臨床醫生需要能夠創建和編輯患者資料、查看健康活動庫以及為患者分配課程。

團隊決定將項目的設計與 Material UI 框架保持一致，利用彈出模式、顯示卡、活動/非活動按鈕、手風琴列表以及一系列成功和警告通知等基本元素。 一旦定義了構成基本元素的組件，產品團隊就對應用程序的佈局提出了不同的意見。

在討論項目的 UI 設計時，開發人員解釋了功能組件和顯示組件之間的區別，以及功能組件如何控制應用程序的數據流，而顯示組件與 UI 和佈局相關。

簡而言之，顯示組件定義了應用程序的視覺語言，而功能組件有助於將它們變為現實。

這種結構為設計人員提供了獨特的可能性，因為通常情況下，與管理應用程序邏輯相關的代碼被隔離到一個與控制 UI 佈局的文件分開的文件中。 如果做得正確，這種軟件設計方法可確保模塊化且健壯的代碼庫，從而實現測試驅動的流程。

是否可以以最少的工程工作量測試替代佈局中的相同功能？ 答案是“是的”，如果在流程早期使用 A/B 方法完成，它將融入精益產品開發生命週期。 （精益產品開發是從日本的 kaizen 概念衍生而來，這是一種對工作流程、實踐、技術以及（在這種情況下）產品進行漸進式改進的經營理念。）

連續創業者和作家 Eric Ries 在他的《精益創業》一書中討論了精益產品開發生命週期的實用指南。 該方法遵循以下工作流程：構建具有明確假設的產品、測試構建的內容並根據所學內容進行迭代。

精益創業方法

定義 A/B 測試方法

A/B 測試是任何經驗豐富的 UX 專業人員工具包的核心組件。 它在軟件開發生命週期中的作用是幫助提高應用程序的可用性。 結合熱圖數據，團隊可以深入了解用戶行為，尤其是在涉及應用程序流程中的摩擦點時。

在開始 A/B 測試之前，這裡有一些問題可以重點關注該過程：

• 在 UX 中如何使用 A/B 測試？
• 有哪些 A/B 分析方法可用？
• 為什麼在設計線框圖時設計 A/B 測試？
• 我們在測試什麼？

最常見的大規模 A/B 測試方法是拆分測試，它為實際用戶提供稍微不同版本的應用程序或網站。 拆分測試通常超出初創公司或小型企業的範圍和/或預算。 但是，除了大規模拆分測試之外，還有一些更易於訪問的替代方法，包括：面對面訪談、焦點小組和在線服務，將您連接到測試用戶網絡。

A/B 測試驅動設計

在線框圖製作過程中，從佈局和導航的角度考慮 A/B 測試的可能性非常重要。 顯示組件的簡單變化可以很容易地改變信息的呈現方式。 基於組件的框架讓您可以自由地試驗內容的組織方式，而無需重新設計產品的核心功能。

與任何設計工作一樣，有效的 A/B 測試應遵循明確定義的方法。 首先，確定要測試的變量。 接下來，定義什麼是成功。 最後評估數據並確定下一步應該是什麼。

例如，在一種情況下，測試了佈局層次結構。 佈局 A 由兩列網格組成，其中患者列表組件位於屏幕左側，患者資料組件位於屏幕右側。 佈局 B 有一個單列患者列表，可以單擊進入患者的個人資料組件。

我們的第一個測試是為了清晰。 我們在採訪中詢問了臨床顧問，這兩種設計中哪一種感覺最有條理。 與內部假設相反，強烈表明單列網格是更直觀的設計解決方案。 我們的顧問認為，患者名單和個人資料在同一個顯示中的組合讓人感覺“忙碌”和“混亂”。 相比之下，用於描述單列網格佈局的詞語清晰而“乾淨”。

“組件盒模型”

對於這個 Web 應用程序，我們使用了 React，這是一個基於狀態管理和模塊化組件概念的框架。 React 是一個用於構建用戶界面的聲明式、高效且靈活的 JavaScript 庫。 它使您可以從稱為“組件”的小而孤立的代碼組成複雜的 UI。 在開發涉及開發人員和設計人員的產品時，這種模塊化轉化為靈活性。

我是在 HTML+CSS 盒子模型的啟發下理解這個框架的。 組件盒模型提供了一種組織方式，用於為應用程序創建構建塊。 它特別適合為快速發展的項目開發設計系統。

為了保持設計思維敏捷，可以遵循一套特別適合精益產品開發生命週期的設計原則。

• 第一個原則：將相似的上下文和動作分組。
• 第二個原則：讓信息架構協助簡化組件之間的“狀態”流。
• 第三條原則：設計可擴展的視覺系統，以簡化開發人員理解和實現設計的方式。

對相似上下文進行分組

考慮用戶的心理模型——根據他們的“使用環境”對相似的結果和行為進行分組。 考慮用戶是否需要在每個上下文中創建、讀取、更新和刪除項目，以及您是否需要為他們的操作提供任何反饋。 在為特定使用場景定義 A/B 測試時，請考慮佈局、如何訪問輸入和導航方法。

簡化“狀態”的交互流程

在 React 中，“狀態”流是指信息如何在整個應用程序中移動，組件如何幫助組織數據以及數據如何顯示。 通常，狀態從充當容器的功能組件流入顯示組件。 設計人員可以通過改變顯示組件的評估方式，預先概述功能組件如何改變應用程序的佈局，從而為 A/B 測試做準備。

開發穩健的設計系統

使用顯示組件為排版、按鈕、輸入、模式和卡片等視覺元素開發標準有助於為標準化設計語言提供構建塊。 強大的視覺系統可以靈活地讓 UX 設計人員和開發人員就線框圖中引用的組件保持一致。

概括

A/B 測試驅動設計的成功與產品和技術團隊之間的協同作用息息相關。 希望採用這種方法的設計人員應該準確了解測試的地點和方式。 花時間發展一個假設並確定你希望找到什麼。 不要分心。 堅持下去——很容易偏離你的方法。

這個過程永遠不會真正完成，並隨著產品的增長而發展。 採用測試驅動產品開發策略的設計人員應該利用在產品開發生命週期中出現的學習機會。

組件，就像設計系統一樣，是關於模塊化和模式的可重用性，而不是佈局或樣式。 從設計師的角度來看，通過 A/B 測試靈活地測試、改進和改進產品有助於開發更以用戶為中心的產品，從而最終取得更大的成功。

•••

進一步閱讀 Toptal 設計博客：

• 在 UX 設計中利用心智模型
• 面向大眾的 UX 測試：保持簡單且具有成本效益
• 移動可用性基本指南
• 用戶研究的價值
• 了解設計系統和模式