컴포넌트 기반 프레임워크를 위한 A/B 테스팅 UX

코딩에 익숙해지는 것은 디자이너에게 큰 이점이 될 수 있습니다. 결과적으로 많은 사람들이 엔지니어와 협업할 때 보다 효과적인 방법으로 코드를 사용하여 작업하는 방법(또는 최소한 어느 정도는 언어를 구사하는 방법)을 배웠습니다. 틀림없이 웹에서 가장 좋아하는 스크립팅 언어인 JavaScript에는 만들고 있는 프레임워크로 웹의 미래를 형성하는 강력한 커뮤니티가 있습니다.

구조와 기술적 제약으로 인해 Vue.js, React.js 및 Material UI와 같은 프레임워크는 강력한 디자인 시스템의 빌딩 블록 역할을 하기 때문에 디자이너가 고려해야 하는 중요합니다. 또한 코드 작동 방식을 아는 것은 A/B 테스트와 같은 개발 환경에서 데이터 기반 설계 기술을 촉진할 때 유용합니다.

개인을 정신 건강 전문가와 연결하기 위한 환자 관리 플랫폼을 만드는 스타트업을 위한 최근 프로젝트에서 우리는 많은 임상 고문에게 가능한 한 적은 마찰로 환자 계정을 설정하고 관리하는 것이 핵심이라는 것을 발견했습니다. 환자 프로필에 대한 직관적인 탐색 경험을 만드는 데 중점을 두는 것이 중요했으며, 환자에게 웰빙 활동을 생성, 편집 및 할당하기 위한 최적의 사용자 흐름을 설정하는 것도 중요했습니다.

기술 책임자와 프로젝트에 대해 논의한 결과 기본적으로 응용 프로그램이 매우 간단하다는 결론이 내려졌습니다. 임상의는 환자 프로필을 생성 및 편집하고 웰빙 활동 라이브러리를 보고 환자에게 수업을 할당하는 기능이 필요했습니다.

팀은 팝업 모달, 디스플레이 카드, 활성/비활성 버튼, 아코디언 목록, 일련의 성공 및 경고 알림과 같은 기본 요소를 활용하여 프로젝트 디자인을 Material UI 프레임워크에 맞추기로 결정했습니다. 기본 요소를 구성할 구성 요소가 정의되면 제품 팀은 응용 프로그램의 레이아웃에 대해 다양한 의견을 제시했습니다.

프로젝트의 UI 디자인에 대해 논의하는 동안 개발자는 기능 구성 요소와 디스플레이 구성 요소의 차이점과 기능 구성 요소가 애플리케이션 데이터의 흐름을 제어하는 ​​반면 디스플레이 구성 요소는 UI 및 레이아웃과 관련이 있는 방법을 설명했습니다.

간단히 말해서 디스플레이 구성 요소는 응용 프로그램의 시각적 언어를 정의하고 기능 구성 요소는 응용 프로그램에 생명을 불어넣는 데 도움이 됩니다 .

이 구조는 일반적으로 응용 프로그램의 논리 관리와 관련된 코드가 UI의 레이아웃을 제어하는 ​​파일과 별도의 파일로 분리되어 있기 때문에 디자이너에게 고유한 가능성을 제공합니다. 올바르게 수행되면 소프트웨어 설계에 대한 이러한 접근 방식은 테스트 중심 프로세스를 가능하게 하는 모듈식의 강력한 코드베이스 를 보장합니다.

최소한의 엔지니어링 노력으로 대체 레이아웃의 동일한 기능을 테스트할 수 있습니까? 대답은 "예"이며 프로세스 초기에 A/B 방식으로 완료되면 린 제품 개발 수명 주기로 구워집니다. (린 제품 개발은 워크플로, 관행, 기술 및 이 경우 제품을 점진적으로 개선한다는 비즈니스 철학인 일본의 카이젠 개념에서 파생된 것입니다.)

연쇄 창업가이자 작가인 Eric Ries는 그의 책 The Lean Startup 에서 린 제품 개발 라이프사이클에 대한 실용적인 가이드를 논의합니다. 이 방법은 명확한 가설로 제품을 구축하고 구축된 내용을 테스트하고 학습한 내용을 기반으로 반복하는 워크플로를 따릅니다.

린 스타트업 방법

A/B 테스트 접근 방식 정의

A/B 테스팅은 노련한 UX 전문가 툴킷의 핵심 구성 요소입니다. 소프트웨어 개발 수명 주기에서의 역할은 응용 프로그램의 사용성을 향상시키는 것입니다. 팀은 히트 매핑 데이터와 결합하여 특히 애플리케이션 흐름 내의 마찰 지점과 관련하여 사용자 행동에 대한 귀중한 통찰력을 얻을 수 있습니다.

A/B 테스트를 시작하기 전에 다음은 프로세스에 집중할 수 있는 몇 가지 질문입니다.

• A/B 테스팅은 UX에서 어떻게 사용됩니까?
• 어떤 A/B 분석 방법을 사용할 수 있습니까?
• 와이어프레이밍 중에 A/B 테스트를 설계하는 이유는 무엇입니까?
• 우리는 무엇을 위해 테스트하고 있습니까?

대규모 A/B 테스트의 가장 일반적인 방법은 실제 사용자에게 약간 다른 버전의 애플리케이션 또는 웹사이트를 제공하는 분할 테스트 입니다. 분할 테스트는 종종 시작 또는 소규모 비즈니스의 범위 및/또는 예산을 벗어납니다. 그러나 더 접근하기 쉬운 대규모 분할 테스트에 대한 대안이 있으며 여기에는 대면 인터뷰, 포커스 그룹, 테스트 사용자 네트워크에 연결하는 온라인 서비스가 포함됩니다.

A/B 테스트 주도 설계

와이어프레임 프로세스 동안 레이아웃 및 탐색 관점에서 A/B 테스트의 가능성을 고려하는 것이 중요합니다. 디스플레이 구성 요소의 간단한 변형은 정보 표시 방식을 쉽게 바꿀 수 있습니다. 구성 요소 기반 프레임워크를 사용하면 제품의 핵심 기능을 다시 설계하지 않고도 콘텐츠 구성 방식을 자유롭게 실험할 수 있습니다.

모든 설계 노력과 마찬가지로 효과적인 A/B 테스트는 명확하게 정의된 방법론을 따라야 합니다. 먼저 테스트할 변수를 결정합니다. 다음으로 무엇이 성공을 구성하는지 정의하십시오. 데이터를 평가하여 완료하고 다음 단계가 무엇인지 결정하십시오.

예를 들어, 한 경우에 레이아웃 계층이 테스트되었습니다. 레이아웃 A는 화면 왼쪽에 환자 목록 구성 요소가 있고 오른쪽에 환자 프로필 구성 요소가 있는 2열 그리드로 구성되었습니다. 레이아웃 B에는 환자의 프로필 구성 요소를 클릭할 수 있는 단일 열 환자 목록이 있습니다.

우리의 첫 번째 테스트는 명확성을 위한 것이었습니다. 우리는 인터뷰 세션에서 임상 고문에게 두 가지 디자인 중 어떤 것이 가장 조직적으로 느껴졌는지 물었습니다. 내부 가정과 달리 단일 열 그리드가 보다 직관적인 설계 솔루션으로 강력하게 표시되었습니다. 우리 고문들은 동일한 디스플레이에 있는 환자 목록과 프로필의 조합이 "바쁘고" "어수선"하다고 느꼈습니다. 대조적으로, 단일 열 그리드 레이아웃을 설명하는 데 사용된 단어는 명확하고 "깨끗합니다".

"컴포넌트 박스 모델"

이 웹 애플리케이션의 경우 상태 관리 및 모듈식 구성 요소 개념을 기반으로 하는 프레임워크인 React를 사용했습니다. React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. "컴포넌트"라고 하는 작고 격리된 코드 조각으로 복잡한 UI를 구성할 수 있습니다. 이러한 모듈성은 개발자와 디자이너가 모두 참여하는 제품을 작업할 때 유연성으로 이어집니다.

HTML+CSS 상자 모델에서 영감을 받아 이 프레임워크를 이해하게 되었습니다. Component Box Model 은 애플리케이션을 위한 빌딩 블록을 생성하기 위한 조직적 양식을 제공합니다. 빠르게 발전하는 프로젝트를 위한 설계 시스템을 개발하는 데 특히 적합합니다.

민첩한 디자인 사고를 유지하기 위해 린 제품 개발 라이프사이클에 특히 적합한 일련의 디자인 원칙을 따를 수 있습니다.

• 첫 번째 원칙: 유사한 컨텍스트와 작업을 그룹화합니다 .
• 두 번째 원칙: 정보 아키텍처가 구성 요소 간의 "상태" 흐름을 단순화하는 데 도움이 되도록 합니다.
• 세 번째 원칙: 개발자가 디자인을 이해하고 구현하는 방법을 간소화하기 위해 확장 가능한 시각적 시스템 을 디자인합니다.

유사한 컨텍스트 그룹화

사용자의 멘탈 모델을 고려하여 "사용 컨텍스트"를 기반으로 유사한 결과 및 작업을 그룹화합니다. 사용자가 각 컨텍스트 내에서 항목을 생성, 읽기, 업데이트 및 삭제해야 하는지 여부와 사용자의 작업에 대한 피드백을 제공해야 하는지 여부를 고려하십시오. 특정 사용 시나리오에 대한 A/B 테스트를 정의할 때 레이아웃, 입력에 액세스하는 방법 및 탐색 방법을 고려하십시오.

"상태"의 상호 작용 흐름 단순화

React에서 "상태"의 흐름은 정보가 애플리케이션 전체에서 이동하는 방식, 구성 요소가 데이터를 구성하는 데 도움이 되는 방식 및 데이터가 표시되는 방식을 나타냅니다. 일반적으로 상태는 컨테이너 역할을 하는 기능 구성 요소에서 디스플레이 구성 요소로 흐릅니다. 설계자는 디스플레이 구성 요소가 평가되는 방식을 변경하여 기능 구성 요소가 응용 프로그램의 레이아웃을 변경하는 방법을 미리 설명하여 A/B 테스트를 준비할 수 있습니다.

견고한 설계 시스템 개발

디스플레이 구성 요소를 사용하여 타이포그래피, 버튼, 입력, 모달 및 카드와 같은 시각적 요소에 대한 표준을 개발하면 표준화된 디자인 언어를 위한 빌딩 블록을 제공하는 데 도움이 됩니다. 강력한 비주얼 시스템은 UX 디자이너와 개발자가 와이어프레임 내에서 참조되는 구성 요소에 대해 동일한 페이지를 유지하도록 하는 유연성을 가지고 있습니다.

요약

A/B 테스트 주도 설계의 성공은 제품 팀과 기술 팀 간의 시너지 효과와 관련이 있습니다. 이 방법을 채택하려는 설계자는 테스트 위치 와 방법 에 대해 정확해야 합니다. 시간을 할애하여 가설을 세우고 알아내고자 하는 것을 결정하십시오. 산만하지 마십시오. 그것에 충실하십시오. 방법에서 벗어나는 것은 매우 쉽습니다.

이 프로세스는 결코 완료되지 않으며 제품이 성장함에 따라 진화합니다. 테스트 주도 제품 개발 전략을 사용하는 설계자는 제품 개발 수명 주기 전반에 걸쳐 발생하는 학습 기회를 활용해야 합니다.

디자인 시스템과 마찬가지로 구성 요소는 레이아웃이나 스타일이 아니라 모듈성과 패턴의 재사용성에 관한 것입니다. 디자이너의 관점에서 A/B 테스트를 통해 제품을 테스트, 개선 및 개선할 수 있는 유연성은 사용자 중심의 제품을 개발하는 데 도움이 될 수 있으며, 이는 궁극적으로 더 큰 성공으로 이어집니다.

•••

Toptal Design 블로그에 대한 추가 정보:

• UX 디자인에서 정신 모델 활용
• 대중을 위한 UX 테스트: 간단하고 비용 효율적으로 유지
• 모바일 사용성을 위한 기본 가이드
• 사용자 연구의 가치
• 디자인 시스템 및 패턴 이해하기