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