コンポーネントベースのフレームワークのUXのA/Bテスト

コーディングに精通することは、設計者にとって大きなメリットになります。 その結果、多くの人が、エンジニアとのコラボレーションをより効果的にする方法として、コードを操作する方法（または少なくともある程度その言語を話す方法）を学びました。 おそらくWebのお気に入りのスクリプト言語であるJavaScriptには、作成中のフレームワークを使用してWebの未来を形作る強力なコミュニティがあります。

構造と技術的な制約の結果として、Vue.js、React.js、Material UIなどのフレームワークは、堅牢な設計システムの構成要素として機能するため、設計者が検討することが重要です。 さらに、コードがどのように機能するかを知ることは、A/Bテストなどの開発環境でデータ駆動型の設計手法を促進するときにも役立ちます。

個人をメンタルヘルスの専門家に接続するための患者管理プラットフォームを作成するスタートアップの最近のプロジェクトでは、摩擦を最小限に抑えて患者アカウントを設定および管理することが、多くの臨床アドバイザーにとって重要であることがわかりました。 ウェルネスアクティビティを作成、編集、および患者に割り当てるための最適なユーザーフローを設定するのと同様に、患者プロファイルの直感的なブラウジングエクスペリエンスの作成に焦点を当てることは非常に重要でした。

プロジェクトについて技術リーダーと話し合った結果、基本的にアプリケーションは非常に単純であると判断されました。臨床医には、患者プロファイルの作成と編集、ウェルネスアクティビティのライブラリの表示、および患者へのレッスンの割り当てが必要でした。

チームは、ポップアップモーダル、ディスプレイカード、アクティブ/非アクティブボタン、アコーディオンリスト、一連の成功と警告の通知などの基本要素を利用して、プロジェクトの設計をマテリアルUIフレームワークに合わせることにしました。 基本要素を構成するコンポーネントが定義されると、製品チームはアプリケーションのレイアウトについてさまざまな意見を提供しました。

プロジェクトのUI設計についての議論の中で、開発者は、機能コンポーネントと表示コンポーネントの違い、および機能コンポーネントがアプリケーションのデータのフローを制御する方法と、表示コンポーネントがUIとレイアウトに関連する方法について説明しました。

簡単に言えば、表示コンポーネントはアプリケーションの視覚言語を定義し、機能コンポーネントはそれらを生き生きとさせるのに役立ちます。

通常、アプリケーションのロジックの管理に関連するコードは、UIのレイアウトを制御するファイルとは別のファイルに分離されるため、この構造は設計者に独自の可能性を提供します。 正しく行われると、ソフトウェア設計へのこのアプローチにより、テスト駆動プロセスを可能にするモジュール式で堅牢なコードベースが保証されます。

最小限のエンジニアリング作業で、代替レイアウトの同一の機能をテストできますか？ 答えは「はい」です。プロセスの早い段階でA/B方式を使用すると、無駄のない製品開発ライフサイクルに組み込まれます。 （リーン製品開発は、ワークフロー、プラクティス、テクニック、そしてこの場合は製品を段階的に改善するというビジネス哲学であるカイゼンの日本の概念から派生したものです。）

シリアルアントレプレナーであり著者でもあるEricRiesは、彼の著書The Lean Startupで、リーン製品開発ライフサイクルの実用的なガイドについて説明しています。 この方法は、明確な仮説を立てて製品を構築し、構築されたものをテストし、学習した内容に基づいて反復するワークフローに従います。

リーンスタートアップ方式

A/Bテストアプローチの定義

A / Bテストは、経験豊富なUXプロフェッショナルのツールキットのコアコンポーネントです。 ソフトウェア開発ライフサイクルにおけるその役割は、アプリケーションの使いやすさの向上を支援することです。 ヒートマッピングデータと組み合わせると、チームは、特にアプリケーションのフロー内の摩擦点に関して、ユーザーの行動に関する貴重な洞察を得ることができます。

A / Bテストを開始する前に、プロセスに焦点を当てるためのいくつかの質問があります。

• UXでA/Bテストはどのように使用されますか？
• A / B分析にはどのような方法がありますか？
• ワイヤーフレーミング中にA/Bテストを設計するのはなぜですか？
• 何をテストしていますか？

大規模なA/Bテストの最も一般的な方法は、わずかに異なるバージョンのアプリケーションまたはWebサイトをライブユーザーに提供する分割テストです。 分割テストは、多くの場合、新興企業や中小企業の範囲や予算の範囲外です。 ただし、よりアクセスしやすい大規模な分割テストの代替手段があります。これには、対面インタビュー、フォーカスグループ、およびテストユーザーのネットワークに接続するオンラインサービスが含まれます。

A/Bテスト駆動設計

ワイヤーフレーミングプロセスでは、レイアウトとナビゲーションの観点からA/Bテストの可能性を検討することが重要です。 表示コンポーネントの単純なバリエーションにより、情報の表示方法を簡単に変えることができます。 コンポーネントベースのフレームワークを使用すると、製品のコア機能を再設計することなく、コンテンツがどのように編成されているかを自由に試すことができます。

他の設計努力と同様に、効果的なA/Bテストは明確に定義された方法論に従う必要があります。 まず、テストする変数を決定します。 次に、成功を構成するものを定義します。 データを評価して終了し、次のステップを決定します。

たとえば、あるケースでは、レイアウト階層がテストされました。 レイアウトAは、画面の左側に患者リストコンポーネントがあり、右側に患者プロファイルコンポーネントがある2列のグリッドで構成されていました。 レイアウトBには、患者のプロファイルコンポーネントにクリックスルーする単一列の患者リストがありました。

私たちの最初のテストは明確にするためでした。 インタビューセッションで臨床アドバイザーに、2つのデザインのどちらが最も整理されていると感じたかを尋ねました。 内部の仮定に反して、単一列のグリッドは、より直感的な設計ソリューションであることが強く示されました。 私たちのアドバイザーは、同じディスプレイでの患者リストとプロファイルの組み合わせが「忙しい」と「雑然とした」と感じたと感じました。 対照的に、単一列のグリッドレイアウトを説明するために使用される言葉は、明確で「クリーン」でした。

「コンポーネントボックスモデル」

このWebアプリケーションでは、状態管理とモジュラーコンポーネントの概念に基づくフレームワークであるReactを使用しました。 Reactは、ユーザーインターフェイスを構築するための宣言型で効率的かつ柔軟なJavaScriptライブラリです。 これにより、「コンポーネント」と呼ばれる小さな分離されたコードから複雑なUIを作成できます。 このモジュール性は、開発者と設計者の両方が関与する製品で作業する場合の柔軟性につながります。

HTML + CSSボックスモデルからインスピレーションを得て、このフレームワークを理解するようになりました。 コンポーネントボックスモデルは、アプリケーションのビルディングブロックを作成するための組織的なモダリティを提供します。 これは、急速に進化するプロジェクトの設計システムの開発に特に適しています。

デザイン思考をアジャイルに保つために、無駄のない製品開発ライフサイクルに特に適した一連のデザイン原則に従うことができます。

• 最初の原則：同様のコンテキストとアクションをグループ化します。
• 2番目の原則：情報アーキテクチャがコンポーネント間の「状態」の流れを単純化するのを支援するようにします。
• 3番目の原則：開発者が設計を理解して実装する方法を合理化するために、スケーラブルなビジュアルシステムを設計します。

類似のコンテキストのグループ化

ユーザーのメンタルモデルを検討します。ユーザーの「使用状況」に基づいて、同様の結果とアクションをグループ化します。 ユーザーが各コンテキスト内でアイテムを作成、読み取り、更新、削除する必要があるかどうか、およびユーザーのアクションに対するフィードバックを提供する必要があるかどうかを検討してください。 特定の使用シナリオのA/Bテストを定義するときは、レイアウト、入力へのアクセス方法、およびナビゲーション方法を考慮してください。

「状態」の相互作用フローを簡素化する

Reactでは、「状態」の流れとは、情報がアプリケーション全体でどのように移動するか、コンポーネントがデータの整理にどのように役立つか、およびデータがどのように表示されるかを指します。 通常、状態は、コンテナーとして機能する機能コンポーネントからディスプレイコンポーネントに流れ込みます。 設計者は、ディスプレイコンポーネントの評価方法を変更することで、機能コンポーネントがアプリケーションのレイアウトをどのように変更できるかを先制的に概説することで、A/Bテストの準備をすることができます。

堅牢な設計システムを開発する

表示コンポーネントを使用して、タイポグラフィ、ボタン、入力、モーダル、カードなどの視覚要素の標準を開発すると、標準化されたデザイン言語の構成要素を提供するのに役立ちます。 堅牢なビジュアルシステムには、ワイヤーフレーム内で参照されるコンポーネントについてUXデザイナーと開発者を同じページに保つ柔軟性があります。

概要

A / Bテスト駆動型設計の成功は、製品チームと技術チーム間の相乗効果に関係しています。 この方法を採用しようとしている設計者は、どこでどのようにテストするかについて正確である必要があります。 仮説を立て、何を見つけたいかを判断するために時間を費やしてください。 気を散らさないでください。 それに固執してください—あなたの方法から離れることは非常に簡単です。

このプロセスは実際に終了することはなく、製品が成長するにつれて進化します。 テスト駆動型の製品開発戦略を採用している設計者は、製品の開発ライフサイクル全体で発生する学習の機会を利用する必要があります。

コンポーネントは、デザインシステムと同様に、レイアウトやスタイルではなく、モジュール性とパターンの再利用性に関するものです。 設計者の観点からは、A / Bテストを使用して製品をテスト、改良、および改善する柔軟性は、よりユーザー中心の製品の開発に役立ち、最終的には製品の成功につながります。

•••

Toptal Designブログでさらに読む：

• UXデザインにおけるメンタルモデルの活用
• 大衆向けのUXテスト：シンプルで費用対効果の高いものに保つ
• モバイルユーザビリティの基本ガイド
• ユーザー調査の価値
• デザインシステムとパターンを理解する