B2B 웹사이트를 위한 7가지 사용자 경험 디자인 모범 사례(+ 예제)

매력적인 B2B 웹사이트를 만들려면 보기 좋게 만들고 무엇을 하는지 설명하는 것보다 훨씬 더 많은 것이 필요합니다. 올바른 청중을 염두에 두고 콘텐츠를 작성하고 있는지 확인하기 위해 구매자 페르소나를 개발하고 싶습니다. 해당 청중이 귀하를 찾을 수 있도록 키워드 조사를 수행하고 싶습니다. 예, 사람들이 귀하의 웹 페이지를 탐색하고 결국에는 고객이 되기를 원할 정도로 매력적으로 보이게 만드는 것이 가장 중요합니다.

이 전체 프로세스의 북쪽 시작은 사용자 경험(또는 멋진 아이들이 부르는 UX)입니다. 이 권리를 얻으면 전투의 절반이 승리합니다. 그러나 정확히 무엇을 수반합니까? 기존 웹사이트에 좋은 UX가 있는지 어떻게 알 수 있습니까?

사용자 경험이란 무엇입니까?

사용자 경험은 방문자가 웹사이트와 상호 작용할 때 느끼는 방식입니다. 목표는 직관적이고 탐색하기 쉽고 독자에게 가치를 제공하는 사이트를 디자인하는 것입니다. 불만을 품고 경쟁자의 사이트로 이동하는 대신 사이트에 유지되도록 모든 단일 구성 요소가 있어야 합니다.

이론상으로는 아주 간단하게 들립니다. 실제로는 많은 계획, 테스트 및 수정이 필요합니다. 웹사이트를 디자인할 때 목록에 체크 표시를 하는 것은 또 다른 항목이 아닙니다. 실제로 근무일 전체를 사용하여 더 나은 UX를 구현하기 위한 아이디어를 제시하는 사용자 경험 전문가가 있습니다.

웹사이트를 처음부터 디자인하든 템플릿을 사용하든 모든 것은 사용자 경험을 염두에 두고 디자인해야 합니다.

UX가 B2B 웹사이트에 미치는 영향

사용자 경험은 웹사이트에서 가장 중요한 요소 중 하나입니다. 효과적으로 수행되면 다음과 같은 긍정적인 결과가 나타납니다.

낮은 이탈률

상당한 수의 웹사이트 방문자가 도착한 직후 사이트를 떠난다고 해서 모두가 서두르는 것은 아닙니다. 그것은 웹사이트가 바라는 것이 많다는 것을 의미합니다. 이는 더 빠른 로딩 시간, 더 나은 클릭 유도문안이 필요하거나 탐색하기 어렵기 때문일 수 있습니다. UX 전문가가 웹 사이트 감사를 수행하고 문제가 있는 위치를 식별하고 해결하도록 하면 이러한 모든 문제를 해결할 수 있습니다.

효과적인 구매자의 여정

모든 잠재 고객이 구매자의 여정에서 같은 위치에 있는 것은 아닙니다. 처음 웹사이트 방문자는 반복 고객과 완전히 다른 것을 찾고 있습니다. 그렇다면 웹사이트 디자이너는 무엇을 해야 할까요? 그들을 인도하십시오. 좋은 UX는 인식, 고려 및 결정 단계에 있는 방문자에게 맞춤화된 콘텐츠가 있음을 의미합니다. 스마트 콘텐츠를 제공하고 연구를 수행할 때 검색 엔진에 입력할 가능성이 있는 키워드를 사용하여 이를 수행할 수 있습니다.

더 높은 전환율

전환율은 단순한 판매가 아닙니다. 물론, 그것들이 가장 중요합니다. 그러나 모든 단일 웹사이트 상호작용이 판매로 끝날 것이라고 기대하는 것은 비현실적입니다. 효과적인 UX는 사용자 여정의 모든 단계를 고려하므로 사용자가 이메일 목록 가입, 블로그 구독, 웨비나 등록, 데모 요청, 전화 예약, 전화 걸기 등 원하는 모든 작업을 수행할 가능성이 높습니다. 구매. 이를 위해서는 효과적인 헤드라인, 매력적인 문구, 유용한 시각 자료, 강력한 클릭 유도문안이 필요합니다.

판매 주기 단축

B2B 웹사이트와 B2C 웹사이트의 차별화 요소 중 하나는 B2B 웹사이트가 훨씬 더 긴 판매 주기를 갖는 경향이 있다는 것입니다. 잠재 고객의 연구 프로세스가 더 길고 투자가 훨씬 더 많기 때문에 이것은 이해할 수 있습니다. 리드가 웹사이트를 처음 방문하는 동안 구매할 준비가 된 경우는 매우 드뭅니다. 그러나 사이트가 빠르게 로드되고 탐색하기 쉽고 필요한 모든 정보를 제공하고 계속 참여한다면 프로세스 속도를 높일 수 있습니다. 또 다른 핵심 요소는 방문자가 이메일 뉴스레터에 가입하도록 유도하는 웹사이트를 디자인하는 것입니다. 이렇게 하면 구매 준비가 될 때까지 해당 리드를 육성할 수 있습니다.

고객 유지 증가

새로운 고객을 확보하는 것은 기존 고객을 유지하는 것보다 훨씬 더 비쌉니다. 웹사이트 디자인을 통해 고객이 계속해서 더 많은 것을 찾을 수 있도록 하는 방법은 여러 가지가 있습니다. 사이트와의 상호 작용을 즐겁게 만들기 위해 모든 것을 제어할 수 있습니다. 빠르게 로드되는지 확인합니다. 반응형 디자인을 구현합니다. 기본 결제 기능을 포함합니다. 고객 포털을 만들어 프로젝트 및/또는 주문 상태를 확인할 수 있습니다. 그들이 당신에게 연락할 수 있는 여러 가지 방법을 포함하십시오. 실시간 채팅을 사용하여 질문에 대한 빠른 답변을 얻을 수 있습니다. 이러한 모든 요소는 고객을 만족시키고 계속해서 비즈니스 수익을 창출할 것입니다.

사용자 경험(UX) 디자인이란 무엇입니까?

사용자 경험 디자인 프로세스에는 웹사이트 방문자가 필요로 하는 모든 것을 고려하고 사이트 전체의 각 기능과 배치를 최적화하는 과정이 수반됩니다. 위에 나열된 모든 기능의 목록을 만들고 무작위로 추가할 수 없습니다.

UX 디자인은 각 요소를 컨텍스트에 배치합니다. 웹 방문자가 주어진 순간에 하는 일과 관련된 모든 것을 만듭니다. 실용적인 것 외에도 이 프로세스에는 순전히 재미있거나 재미있는 요소를 추가하는 것도 포함될 수 있습니다. 핵심은 잠재 고객과 고객이 머물고 싶은 환경을 만드는 것입니다.

UX 디자인 프로세스는 웹사이트 프로젝트마다 다를 수 있지만 공통 분모는 다음과 같습니다.

• 광범위한 시장 조사 수행
• 구매자 페르소나 개발
• 와이어프레임 생성
• 도구, 튜토리얼, 3D 경험 또는 인포그래픽과 같은 유용한 기능 제공
• UX 쿼드런트 모델의 모든 영역을 포괄하도록 보장(아래 설명 참조)
• A/B 테스트

UX 사분면 모델

UX 디자이너는 사용자 경험을 최적화하기 위해 모인 4가지 영역의 전문가입니다.

경험 전략(ExS)

ExS는 UX의 주요 우산입니다. 여기에서 비즈니스 솔루션에 대한 세부 정보와 긍정적인 경험을 결합할 수 있습니다. 찾기 쉽고 이해하기 쉬운 제품 설명을 제공하는 것이 그 예입니다.

인터랙션 디자인(IxD)

인터랙션 디자인은 클릭 유도문안 버튼, 도구, 퀴즈, 페이지 전환 등 웹사이트의 인터랙티브 요소를 의미합니다. 이는 웹사이트 방문자를 안내하고 전환율을 높이는 데 중요한 요소입니다.

사용자 조사(UR)

UR은 웹 사용자가 자신의 행동과 피드백을 기반으로 원하는 것과 선호하는 것을 조사하는 것입니다. 이러한 유형의 정보를 찾기 위해 사용성을 테스트하고 설문 조사를 배포하거나 직접 질문을 할 수도 있습니다(이메일, 소셜 미디어 또는 사용자와 상호 작용할 때마다).

​​정보 아키텍처(IA)

정보 아키텍처는 웹 사이트의 구조를 나타냅니다. 하위 페이지 및 해당 계층 구조와 함께 탐색 모음별로 모든 것이 구성되는 방식입니다. 탐색하기 쉬운 방식으로 모든 것을 함께 모으는 작업이 포함됩니다.

웹사이트를 디자인할 때 4가지 요소를 모두 고려하면 최적의 UX의 모든 기반을 다룹니다.

열악한 사용자 경험의 징후

너무 오래된 웹 사이트가 있으며 방문하는 모든 사람이 열악한 UX 요소를 볼 수 있습니다. 이미지 없음, 링크 없음, 끊어진 링크, 콘텐츠가 거의 없는 많은 페이지, 다이얼을 사용하는 것처럼 느리게 로드되는 이미지 - 최대 인터넷 연결. 요컨대, 90년대 후반/2000년대 초반에 만들어진 것처럼 보이거나 느껴지는 모든 것입니다.

그러나 더 현대적으로 보이는 웹사이트는 여전히 좋지 않은 사용자 경험을 제공할 수 있습니다. 웹사이트 감사를 실시하여 다음 중 귀하에게 해당되는지 확인하십시오.

느린 로딩 시간

대부분의 사람들은 모기처럼 주의집중력이 있습니다. 이를 즉각적인 만족이라는 기존 문화와 결합하면 웹 사이트가 2초 이내에 로드되지 않으면 사람들이 떠날 것입니다.

모바일 최적화 없음

업무를 위해 책상에 앉아 있지 않을 때 대부분의 사람들은 휴대전화로 온라인에 접속합니다. 웹 사이트는 데스크톱에서 빠르게 로드되고 보기 좋게 보일 수 있지만 작은 화면에서 읽거나 탐색하기 어려운 경우 잠재 고객은 떠날 것입니다.

혼란스러운 탐색

웹사이트는 직관적이어야 합니다. 너무 많은 메뉴 옵션, 각 웹페이지의 일관되지 않은 디자인, 나머지 텍스트와 동일한 색상의 클릭 가능한 링크 및/또는 모호한 클릭 유도문안은 방문자를 좌절하게 만듭니다.

모호한 행동 유도

CTA라고 하면 짧고 행동 지향적이어야 합니다. 또한 독자는 클릭했을 때 어떤 일이 일어날지 정확히 알아야 합니다. 여기를 클릭 하는 것은 eBook 다운로드 또는 통화 예약 만큼 효과적이지 않습니다.

높은 이탈률

웹사이트 측정항목을 볼 때 이탈률이 가장 높은 페이지는 무엇입니까? 그리고 그 이유는 무엇입니까? 그것이 랜딩 페이지이고 작성 후 떠나기 때문이라면 당신은 황금입니다. 그러나 홈페이지, 제품/서비스 페이지 또는 블로그로 인해 사람들이 몇 초 만에 웹사이트를 떠나게 되면 혼란스럽거나 압도되거나 지루해집니다.

낮은 전환율

또한 사람들이 원하는 조치를 취하는 빈도에 주의를 기울여야 합니다. 대부분 무시되는 CTA 버튼은 해당 버튼에 대해 변경해야 함을 나타냅니다. 이것은 텍스트, 크기 또는 색상일 수 있습니다.

UX 디자인 팁 및 모범 사례

이 시점에서 좋은 사용자 경험 모범 사례를 구성하는 요소에 대해 잘 알고 있어야 합니다. 그러나 명확성을 위해 다음은 반드시 구현하고 싶은 7가지 모범 사례입니다.

1. 빠른 로딩 시간

앞서 언급했듯이 빠른 로딩 시간이 중요합니다. 독자는 사이트가 빠르게 로드되지 않는 한 사이트에서 다른 어떤 것도 볼 수 없습니다. 귀하의 것을 확인하려면 Google PageSpeed ​​Insights 또는 Pingdom과 같은 도구를 사용하십시오.

2. 간단한 탐색 모음

웹사이트의 어떤 것도 압도적이어서는 안 됩니다. 탐색 모음은 페이지에서 페이지로 쉽게 이동할 수 있어야 하며 간단해야 합니다. 너무 많은 옵션(또는 너무 많은 옵션이 포함된 너무 많은 드롭다운)을 추가하는 것은 혼란스럽고 열악한 UX의 전형적인 예입니다.

3. 빵 부스러기

이동 경로를 사용하면 웹 사이트 방문자가 특정 페이지로 쉽게 돌아갈 수 있습니다. 이 용어는 사용자가 사이트에서 현재 위치를 볼 수 있는 보조 탐색을 나타냅니다. 이는 탐색 모음에 드롭다운 메뉴가 있는 웹 사이트에 대한 좋은 방법입니다. 일련의 수평 링크로 나타납니다.

아래 예에서 Bed, Bath & Beyond 웹사이트에 많은 페이지가 있음에도 불구하고 커피 이미지는 Kitchen 탭에서 찾을 수 있는 Coffee & Tea 메뉴 옵션에서 찾을 수 있음을 알 수 있습니다. 그리고 우리는 이것을 빵 부스러기 덕분에 한 눈에 볼 수 있습니다.

출처: Bed, Bad & Beyond

4. 유용한 콘텐츠

옛날 옛적에는 웹사이트에 키워드를 넣으면 Google에서 순위를 매기는 데 충분했습니다. 더 이상은 아닙니다. 그 전술은 SERP에 대한 귀하의 위치를 ​​개선하지 않습니다. 또한 고객 중심적이어야 합니다. 이것은 단지 당신을 잘 보이게 하기 위한 것이 아닙니다. 이것은 사용자의 고충을 해결하고 문제를 극복하도록 돕는 것입니다. 그렇게 하세요. 블로그, eBook 및 백서와 같은 교육 콘텐츠를 제공합니다. 인포그래픽 및 비디오 자습서와 같이 따라하기 쉬운 단계로 프로세스를 설명합니다. 그들의 질문에 답하십시오. 가치를 제공합니다. 이렇게 하면 사용자가 계속 다시 방문하여 콘텐츠를 공유하고 더 많은 비즈니스를 추천할 수 있습니다.

5. 공백

공백은 말 그대로 단락과 페이지 섹션 사이의 빈 영역입니다. 많은 공백을 포함하면 사이트를 깨끗하고 읽기 쉽게 유지합니다. 애플과 아마존을 생각해보자. 당신은 당신의 관심을 끌기 위해 경쟁하는 많은 소음이 없습니다. 이렇게 하면 원하는 것을 훨씬 쉽게 찾을 수 있습니다.

6. 웹 페이지 간의 일관성

사람들이 솔루션을 찾기 위해 귀하의 사이트를 방문하고 있습니다. 따라서 사이트에서 항목을 찾는 방법을 신속하게 파악할 수 있어야 합니다. 그리고 일단 그렇게 하면 현재 페이지에 관계없이 직관적으로 계속 그렇게 하기를 원합니다. 따라서 레이아웃을 일관성 있게 유지하여 독자가 가능한 한 쉽게 읽을 수 있도록 하십시오.

7. 귀하에게 연락할 수 있는 다양한 방법

시장 조사의 일부에는 대상 고객이 귀하와 의사 소통하는 방법을 찾는 것이 포함됩니다. 세대, 직무 또는 선호도에 따라 이메일, 전화 통화 또는 실시간 채팅이 포함될 수 있습니다. 상위 2개를 선택하고 구현합니다. 실시간 채팅은 실시간으로 빠른 답변을 얻는 데 좋습니다.

UX 디자인 예시

이제 이러한 요소 중 일부가 실제로 작동하는지 보기 위해 UX를 올바르게 수행하고 있는 비즈니스를 살펴보겠습니다.

허브스팟

물론 HubSpot으로 시작합니다. 깨끗하고 많은 공백이 있으며 주의를 끌고 클릭할 때 무슨 일이 일어날지 정확히 알려주는 행동 유도 버튼이 있으며 라이브 채팅 도구를 사용하여 쉽게 빠른 답변을 얻을 수 있습니다.

페이지 아래로 내려가면 단순한 카드 디자인으로 원하는 허브를 쉽게 찾을 수 있습니다. 각 짧은 설명 바로 아래에 가장 인기 있는 기능을 나열하면 콘텐츠를 스캔할 수 있고 쉽게 이해할 수 있습니다.

사과

평소와 같이 Apple은 거의 모든 면에서 선두를 달리고 있으며 웹사이트의 UX로 무대를 장식합니다. 여백은 어디에나 있다. 방해가 없습니다. 원하는 제품 유형을 찾으려면 상단의 아이콘을 클릭하십시오. 또는 이미 컬트 추종자의 일부이고 돈을 전달할 준비가 된 경우 구매를 클릭하십시오.

그러나 아직 지갑을 열 준비가 되지 않았다면 유용한 비교 차트를 제공하여 조사 과정을 쉽게 만듭니다. 필요한 정보를 얻기 위해 50개의 탭을 열거나 페이지에서 페이지로 이동할 필요가 없습니다. 모든 것이 가능한 한 쉽고 간단합니다.

에어비앤비

에어비앤비는 어디를 가든지 아주 간단하게 숙소를 찾을 수 있게 해줍니다. 사실, 어디로 가는지 모르더라도 그들은 당신이 좋아할 장소를 찾는 데 도움을 줄 것입니다. 그들의 홈페이지에는 희소한 텍스트가 있지만 장소를 찾거나 호스트가 되기 위해 어디로 가야 하는지 정확히 알고 있습니다.

또한 여행 중 해야 할 일이나 고향에 머물면서 경험할 수 있는 경험 등 웹사이트 방문자에게 유용한 콘텐츠를 제공합니다.

사용자가 자신의 부동산 임대를 고려하고 있지만 여전히 질문이 있는 경우 사이트에서 해당 답변을 정말 쉽게 찾을 수 있습니다.

사용자 경험을 제공하는 것은 고객 중심이 되는 것입니다. 무엇이 그들을 더 쉽게 만들까요? 더 즐거운? 더 매력적? 그런 다음 각 요소를 확장하여 웹사이트를 찾은 것에 대해 흥분을 느끼게 합니다. 그리고 일단 그렇게 하면 그들은 그것에 대해 아는 모든 사람에게 말할 것입니다.