대화형 제품 필터링을 성공적으로 구현하려면 잘 설계된 사용자 경험 디자인이 필요합니다.
시각적 디스플레이 요소
대화형 필터의 배치와 모양은 효과에 큰 영향을 미칩니다.
세로 레이아웃과 가로 레이아웃
세로 레이아웃과 가로 레이아웃을 설계할 때 고려해야 할 사항은 다음과 같습니다.
권장사항: 가로 방향의 세로로 간결한 디자인을 우선시합니다. 이렇게 하면 제품 결과가 스크롤 없이 보이는 부분 아래로 푸시될 위험을 최소화할 수 있습니다.
이유: 필터가 상단에 가로로 표시되면 제품 결과가 페이지 아래로 밀려나 즉각적인 제품 노출 가능성이 줄어들어 기능 비용이 증가할 수 있습니다. 또한 요소 간의 빈 공간을 최소화하면 웹페이지에 추가 제품 타일을 표시할 수 있는 공간이 추가됩니다.
긴 속성 처리
선택형 옵션이 긴 경우 (예: 브랜드 이름) 요소를 더 높게 만들므로 새 줄로 래핑하지 마세요. 대신 페이지에서 가로로 확장되도록 허용하고 측면 스크롤을 사용 설정하세요.
다음은 가로 스크롤 구현의 예입니다.
최적의 배치
제품 3~5개 행 뒤에 대화형 필터를 배치하는 것이 좋습니다. 이 방식을 사용하면 대화형 요소가 초기 제품 목록을 대체하지 않습니다.
이 배치에서 중요한 점은 대화 필터링 바가 최대한 세로로 간결해야 한다는 것입니다. 대화형 제품 필터링 기능이 눈에 띄는 위치에 있으면 제품 표시가 페이지 아래쪽으로 이동하여 즉시 표시되지 않을 수 있습니다. 쇼핑객에게 표시되는 제품 수가 적기 때문에 단점이 될 수 있습니다. 따라서 표시되는 제품은 최대한 관련성이 높아야 합니다.
측면 (세로) 대 상단 (가로): 제품 3~5열 뒤에 대화형 필터를 배치하는 것이 좋습니다. 이 방식을 사용하면 대화형 요소가 초기 제품 목록을 대체하지 않습니다.
강력한 고려 사항: 대화형 제품 필터링이 제품 선택을 좁히는 기본 방법이 되면 수동 필터 바를 완전히 최소화하거나 교체하는 것이 좋습니다. 이렇게 하면 제품 항목의 열을 하나 더 추가할 수 있습니다.
데스크톱 및 모바일
데스크톱 구현은 성공적인 것으로 입증되었지만 모바일에서는 결과가 일관되지 않고 전반적인 성능 향상도 낮은 것으로 나타났습니다. 모바일의 제한된 화면 크기로 인해 게재위치에 더 창의적이고 신중한 접근 방식이 필요합니다.
권장사항: 처음에는 모바일보다 데스크톱 구현에 우선순위를 두세요. 데스크톱의 더 큰 화면 크기를 사용하면 광고 소재 디자인의 유연성이 높아집니다. 모바일의 작은 화면으로 인해 개발자는 특정 요소에 우선순위를 지정해야 합니다.
피해야 할 사항: 채팅 창 인터페이스 대화형 필터를 채팅 창으로 구현하지 마세요. 이렇게 하면 사용자가 기본 웹 인터페이스에서 벗어나게 되며 개발자가 일반적으로 상당한 시간을 들여 최적화하는 의도된 웹 결제 흐름 디자인이 중단될 수 있습니다.
추가 모바일 고려사항
테스트와 관련해서도 모바일 웹과 앱을 별도로 취급해야 합니다. 모바일 앱 테스트는 본질적으로 수행하기 어렵지만 유연성이 더 높습니다. 모바일 웹은 테스트가 더 빠른 경우가 많지만 다양한 모바일 웹브라우저에 따라 다른 트레이드오프가 있습니다.
필터와의 사용자 상호작용
이 섹션에서는 대화형 제품 필터링을 구성하는 방법을 설명합니다. 정적이고 하드 코딩된 필터 요소를 동적 대화형 필터링으로 대체하여 화면 공간을 확보하고 더 타겟팅된 제품을 표시하는 것이 좋습니다. 출처와 관계없이 적용된 모든 필터는 제품 그리드를 전역적으로 업데이트할 수 있습니다.
후속 대화형 질문은 적용된 전체 필터에 맞춰 조정되며, 객관식 옵션이 모두 제공됩니다.
통합 전역 필터
쇼핑객은 대화형 필터와 적용된 나머지 필터 요소 모두와 상호작용할 수 있습니다. 프런트엔드 구현이 이 시나리오를 처리할 수 있어야 합니다.
통합 전역 필터에는 다음과 같은 특징이 있습니다.
- 전역 적용: 사용자가 페이지의 필터 요소(대화형 제품 필터 또는 정적 필터 요소)에서 선택하면 제품 그리드가 업데이트되어 모든 전역 필터가 적용된 결과가 표시되어야 합니다.
- 지능형 후속 조치: 사용자가 선택한 요소와 관계없이 적용된 전체 필터를 기반으로 다음 대화형 질문이 표시되어야 합니다. 예를 들어 쇼핑객이 대화형 요소에서
color필터를 선택하고 클래식 필터 요소에서size필터를 선택하는 경우 후속 대화형 질문에서 쇼핑객에게 원하는 사이즈를 묻지 않아야 합니다.
유형 필터
대화형 제품 필터링을 사용하면 사이트에서 객관식 선택을 모두 사용할 수 있습니다.
객관식
상거래를 위한 Vertex AI Search는 제품 카탈로그의 값 이름을 기반으로 최대 20개의 다중 선택 옵션을 표시할 수 있습니다. 옵션은 관련성이 가장 높은 선택사항의 정렬된 목록에 표시됩니다. 긴 브랜드 이름과 같은 긴 옵션을 사용하면 사용자가 새 행으로 래핑하는 대신 옆으로 스크롤할 수 있어 세로 방향의 간결성을 유지할 수 있습니다.
하드코딩된 요소 바꾸기
많은 상거래 검색 사이트 개발자는 수익을 가장 많이 창출하는 검색어를 위해 웹 인터페이스에 사전 빌드된 수동 카테고리 필터 구성요소를 사용합니다. 이러한 필터 구성요소는 일반적으로 비용이 많이 들고 제작하는 데 시간이 오래 걸리며 사용자와의 상호작용이 많지 않습니다.
그림 2. 하드코딩된 요소 표시의 예
- 권장사항: 대화형 필터링의 핵심 아이디어는 시각적 요소가 설계된 상위 몇 개의 질문뿐만 아니라 모든 제품에 이러한 동적 환경을 빠르게 배포할 수 있다는 것입니다. 따라서 대화형 필터링으로 대체하도록 설계된 요소를 식별하고 삭제하세요. 유사한 기능을 실행하는 필터 요소가 두 개 이상 있으면 안 됩니다. 이렇게 하면 화면에 더 많은 타겟팅 제품을 표시할 수 있습니다.
실험 아이디어
실험을 위한 몇 가지 아이디어는 다음과 같습니다.
- 제품 행 사이 배치: 제품 행 3~5개 뒤에 페이지 중간에 구성요소를 삽입합니다. 이 접근 방식을 사용하면 대화형 요소가 초기 제품 디스플레이를 크게 대체하지 않습니다.
- 플라이아웃 또는 팝업: 필터 질문이 포함된 대화상자 또는 플라이아웃 메뉴를 트리거하는 버튼을 사용합니다. 기존 필터 팝업과 통합할 수도 있고 플라이아웃을 별도의 요소로 만들 수도 있습니다.
- 고정 막대: 화면에 질문과 옵션을 표시하는 지속적인 막대입니다. 이 배너는 제품을 아래로 밀지 않고 제품 앞에 표시됩니다.
- 테스트 고려사항: 모바일과 데스크톱을 테스트할 때는 이러한 실험이 독립적으로 진행되는지 확인하세요. 기기별 쇼핑 행동은 크게 다르며, 한 기기에서 효과적인 시각적 구성요소가 다른 기기에서는 효과적이지 않을 수 있습니다.
데이터 수집 및 품질
Vertex AI 모델의 인텔리전스는 사용자 상호작용 데이터를 기반으로 빌드됩니다. 온보딩 프로세스에서는 2단계 접근 방식을 사용하여 데이터를 수집합니다.
1단계: 이전 이벤트로 초기 시작
모델은 이전 이벤트 데이터로 학습할 수 있습니다. 이전 이벤트 데이터는 처음에는 Google 환경으로 수집되므로 모델이 실시간 상호작용 데이터가 없는 새 프로젝트도 인식할 수 있습니다.
2단계: 실시간 쿼리 데이터로 전환
기능이 출시되고 이전에 캡처된 데이터를 수집하기 시작하면 Vertex AI는 실시간 쿼리 데이터 스트림을 사용하여 제공 모델을 개선합니다. 라이브 쿼리 데이터는 일반적으로 과거에 캡처된 이벤트 데이터보다 품질이 높습니다. 과거 이벤트에는 중요한 정보가 누락될 수 있기 때문입니다. 이렇게 하면 실시간 쿼리 데이터를 지속적인 최적화에 더 효과적으로 사용할 수 있습니다.