웹은 항상 탐색에 관한 것이었습니다. 메뉴, 페이지 및 선형 정보 계층 구조가 지난 10년 동안 지배적인 디자인 프로토콜이었지만, 일체 포함 사용자가 정보를 찾고 상호 작용하는 방식을 근본적으로 변화시켰습니다. 필요한 것을 찾기 위해 여러 페이지를 클릭하는 대신, 이제 사람들은 자신의 특정 질문과 목표에 맞는 자연스러운 대화를 기대합니다.
에이전트 2,500개 배포 및 구축 후 에이전트 AI 800명의 고객을 위한 플랫폼을 구축한 Satisfi Labs는 이제 우리가 전파하는 바를 실천할 때라고 결정했습니다. 대화형 AI 우리의 전문 지식을 통해 자신의 웹사이트 경험. 우리는 최근 이러한 변화에 맞춰 전체 웹 사이트를 재설계하여 AI 챗봇 모서리 위젯으로 옮기는 대신 중앙에 위치합니다. 다음은 전통적인 웹 규칙을 여전히 존중하는 채팅 우선 웹사이트를 구축하면서 배운 내용입니다.
대화형 웹사이트를 디자인하는 방법
채팅을 메인 인터페이스로 시작하기
웹사이트 중앙에 채팅을 배치하기로 결정했을 때 기존의 채팅 방식에서 벗어나는 것에 대해 약간의 망설임이 있었습니다. 웹 디자인 패턴. 스케치를 시작한 후, 와이어프레임 그리고 프로토타이핑 피그마그러나 채팅 우선과 기존 웹 경험 간의 균형이 빠르게 형성되었습니다.
레이아웃 솔루션
저는 왼쪽에 탐색 기능이 있고 오른쪽에 채팅 경험이 있는 2열 디자인을 선택했습니다. 이 레이아웃을 통해 채팅은 필요할 때 기본 사이트 페이지로 원활하게 전환할 수 있습니다.
핵심은 챗봇을 이렇게 더 큰 형식으로 재구성하는 것이었습니다. 나는 긴밀히 협력했다. 제품 그리고 마케팅 팀은 모든 시각적 요소를 개선합니다. 페이지 테마 편집기 스튜디오와 같은 사용자 정의 도구를 사용하면 채팅을 사용자 정의하고 브랜드 업데이트를 쉽게 수행할 수 있습니다.
흐름용 인젝터 추가
우리는 미리 정의된 질문이나 요청을 챗봇에 삽입할 수 있는 기능을 갖춘 특별한 CTA를 만들었습니다. 우리는 사용자가 클래식 페이지를 탐색하는 동안 대화를 계속 이어갈 수 있도록 사이트 전체에 이러한 인젝터를 삽입했습니다.
예를 들어, 사례 연구 페이지에는 “이것이 귀하의 비즈니스에 어떻게 도움이 될까요?”라고 묻는 주입기가 있을 수 있습니다. 질문이 채팅에 나타나 대화 흐름을 유지합니다.
기술 설정
Webflow로 전환하는 것은 쉬운 결정이었습니다. 플랫폼의 시각적 빌더 및 완전한 액세스 HTML, CSS 그리고 자바스크립트 클래식 사이트 페이지 구축부터 사용자 정의 코드를 통한 챗봇 동작 조작까지 모든 것을 간단하게 만들었습니다.
또한 마케팅 팀이 Webflow에서 직접 새 블로그, 사례 연구 등을 쉽게 게시할 수 있도록 CMS 기반 페이지를 구축했습니다. 우리 팀은 라이브 스테이징 사이트를 통해 모든 것을 실시간으로 테스트할 수 있었습니다.
일반적인 설계 과제
그 과정에서 많은 문제 해결 장애물이 있었습니다. 가져오는 것 반응형 내비게이션 디자인 삶이 복잡한 것으로 판명되었습니다. Figma에서 다양한 탐색 개념과 배치를 프로토타입화한 후, 우리는 초기에 전통적인 상단 드롭다운 탐색 대신 사이트 왼쪽에 고정 탐색을 배치하기로 결정했습니다. 정적이고 항상 표시되는 탐색 기능을 사용하면 사용자가 채팅 사이트와 기존 사이트 페이지 사이를 쉽게 탐색할 수 있는 보다 원활한 사용자 환경이 만들어졌습니다. 모바일의 수직적 특성을 고려하여 우리는 화면 상단 드롭다운과 고유한 모바일 홈페이지를 사용하여 모바일 중단점에서 보다 전통적인 탐색을 유지하기로 결정하여 모바일 중단점에서 새로운 웹 사이트 디자인 레이아웃을 효과적으로 생성했습니다.
비전통적인 탐색 배치와 전체 페이지 채팅과 기존 사이트 페이지 간의 상호 작용으로 인해 사이트가 개발되는 동안 몇 가지 이상한 스크롤 동작이 발생했습니다. 채팅 인터페이스에서 클래식 사이트 페이지로의 전환을 미세 조정하려면 여러 번의 반복이 필요했습니다. Webflow 백엔드 전반에 걸쳐 시행착오를 거쳐 문제를 해결한 데스크톱 및 모바일 중단점의 레이아웃 사양을 조정할 수 있었고, 사용자가 데스크톱 마우스를 사용하든 휴대폰 터치스크린을 사용하든 더욱 원활한 스크롤 환경을 만들 수 있었습니다.
이러한 수정 사항과 문제 해결 장애물, 특히 클래식 사이트 인젝터 버튼이 채팅 사이트와 성공적으로 통신할 수 있게 해주는 미세 조정 코드와 같은 작은 승리는 매우 보람이 있었고 전체 프로세스에서 제가 가장 좋아하는 부분 중 하나가 되었습니다.
디자이너를 위한 실용적인 시사점
대화형 웹사이트 디자인 모범 사례
- 익숙한 탐색을 유지하세요.
- 눈에 띄게 채팅을 디자인하세요.
- 대화 브리지를 만듭니다.
- 상호 작용 흐름을 광범위하게 테스트합니다.
- 사용자 목표에 집중하세요.
1. 친숙한 내비게이션 유지
대화 요소를 도입하면서 표준 웹사이트 패턴을 유지하세요. 전환하는 동안 사용자에게는 친숙한 구조가 필요합니다. 우리는 왼쪽 탐색 방식을 사용하여 비전통적인 방법을 사용하는 것을 두려워하지 않았지만 전통적인 SaaS 클래식 사이트 경험이 채팅 사이트에서 항상 클릭만으로 표시되기를 원했습니다. 익숙하고 탐색하기 쉬운 UX를 유지하는 동시에 일부 규칙을 깨는 균형을 통해 새로운 종류의 웹 경험이 탄생했습니다.
2. 눈에 띄게 채팅을 디자인하세요
전체 페이지 채팅을 만들기 위해 전통적인 채팅 위젯에서 벗어나 시각적 UI와 기능적 UX 관점에서 디자인을 다시 생각하는 것을 의미했습니다. 단순히 기존 채팅을 확장하는 것이 아니라 타이포그래피, 여백, 간격부터 이미지 처리에 이르기까지 모든 것을 처음부터 다시 디자인했습니다. 인포그래픽, 설명 동영상, 넛지를 통해 채팅을 시각적이고 대화적으로 매력적으로 유지하는 것이 필수적이었습니다.
3. 대화 브리지 만들기
인젝터는 사이트에서 제가 가장 좋아하는 요소입니다. 채팅 페이지와 클래식 페이지 모두 인젝터를 사용하여 사용자가 두 경험에 모두 참여할 수 있도록 하는 사이트를 만들면 신규 사용자가 채팅 사이트 개념을 쉽게 이해할 수 있을 뿐만 아니라 두 사이트 간의 원활한 균형을 유지하는 데 도움이 됩니다. 이 “자신만의 모험을 선택하세요” 경험은 모든 유형의 사용자에게 적합합니다.
이 형식은 정보를 빠르고 직접적으로 원하는 사용자 또는 더 깊이 파고들어 최대한 많은 정보에 몰입하려는 사용자에게 적합합니다. 인젝터 또는 유사한 메커니즘은 사용자가 탐색에서 대화로 자연스럽게 전환하는 데 도움이 됩니다.
4. 상호 작용 흐름을 광범위하게 테스트
사용자가 채팅에 가져오는 자연스러운 질문과 함께 인젝터, 빠른 응답 버튼 및 대화형 넛지는 채팅 대화를 유도하는 데 상당한 역할을 합니다. 우리 팀은 사용자 경험에 중점을 두고 신규 사용자와 베테랑 사용자 모두가 탐색할 수 있는 다양한 대화 경로와 경험을 광범위하게 테스트했습니다.
5. 사용자 목표에 집중
Satisfi Labs의 고급 콘텐츠 스크래핑 기능을 사용하면 사용자에게 채팅 콘텐츠가 쉽게 넘쳐날 수 있습니다. 그러나 보다 직접적이고 의도적으로 정보를 큐레이팅함으로써 사용자가 원하는 정보를 제공하고 방문 시 설정한 목표를 달성할 수 있도록 돕고 있습니다. Chat은 단순히 정보를 제공하는 것보다 사용자가 특정 작업을 수행하는 데 도움을 줄 때 더 잘 작동합니다. 예를 들어, 우리는 사용자에게 특정 산업에 필요한 정보를 제공하거나 데모 요청을 시작합니다.
대화 사이트가 성공하는 이유
우리는 이러한 접근 방식이 스포츠 및 엔터테인먼트 장소, 관광지, 고등 교육 기관에서 특히 잘 작동하는 것을 확인했습니다. 팬, 방문객, 학생들이 “가장 가까운 화장실이 어디죠?”라는 다양한 상황별 질문을 가지고 도착하기 때문에 이러한 산업은 자연스럽게 대화 경험에 적합합니다. “경기는 몇 시에 시작해요?” “캠퍼스 투어는 언제 가능한가요?” “어떤 식사 옵션이 있나요?” 채팅 우선 인터페이스는 사용자가 여러 페이지를 탐색하도록 강요하는 것보다 이러한 다양성을 훨씬 더 효율적으로 처리할 수 있습니다.
이 접근 방식에는 복잡한 대화를 처리할 수 있는 채팅 기술도 필요합니다. 단순히 키워드를 미리 준비된 답변과 일치시키는 기본 FAQ 봇은 채팅을 기본 인터페이스로 만드는 것을 정당화할 만큼 충분한 가치를 제공하지 않습니다. 상황을 이해하고, 대화 기록을 기억하고, 사용자에게 다단계 프로세스를 안내하고, 적절한 경우 다른 상담원 및 팀 구성원에게 원활하게 전환할 수 있는 AI가 필요합니다.
대화형 AI가 더욱 정교해짐에 따라 더 많은 사이트에서 대화 중심 디자인을 실험하게 될 것입니다. 중요한 것은 특정 사용 사례와 사용자 요구 사항에 맞는 적절한 균형을 찾는 것입니다.
출처 : builtin.com