Tag: e커머스

  • e커머스를 위한 전환율 최적화 가이드

    e커머스를 위한 전환율 최적화 가이드

    e커머스를 위한 전환율 최적화 가이드

    (참조 자료: How to Use Ecommerce Analytics for Better Conversions)

    전환율 최적화
    전환율 최적화

    e커머스 사이트를 운영하고 있다면 매출이 갈수록 떨어지고 있다면 어떻게 해야 할까요? 오늘은 전환율을 최적화하여 사이트의 매출을 올릴 수 있는 효과적인 방법들에 대해 소개하고자 합니다.

    안타깝게도 e커머스 기업들의 분석 기술 활용도는 대단히 낮은 상황입니다. e커머스 기업의 80%는 구글 애널리틱스 활용에서 아래와 같은 어려움을 겪고 있는 것으로 나타나고 있습니다.

    • 모든 e-커머스 기업 중 절반이 주요 전환 포인트를 트래킹하는 데 어려움을 겪고 있습니다.
    • 67%의 기업들은 이 데이터 트래킹에서 소셜미디어 부분을 통합하고 있지 않습니다.
    • 73%의 기업들은 뉴스레터 구독이나 새로운 등록 같은 작은 전환들은 트래킹하고 있지 않습니다.

    그러나 분석을 면밀히 모니터링하고 이해하면 문제를 해결하고 더 나은 결과를 얻을 수 있습니다.

    e 커머스 기업의 구글 애널리틱스 분석 특징

    e커머스 환경에서 분석이 무엇인지 구체적으로 정의하는데 도움이 될 것입니다. 기본적으로 고객 행동에 대한 자세한 정보를 제공하는 데이터들입니다.

    이 정의에 따르면 분석은 광범위한 요인을 포괄할 수 있으며 그 중 일부는 다음과 같습니다.

    • 어느 사이트에서 트래픽이 오고 있는지 (오가닉 검색, 소셜미디어, etc)
    • 고객이 특정 페이지에서 머무르는 시간
    • 고객이 페이지를 처음 보는 위치
    • 고객이 어떤 페이지 요소와 상호 작용하는지
    • 한 페이지의 이탈율
    • 페이지의 전환율(작은 전환이나 실제 구매 활동 모두)
    • 주어진 페이지에서의 사용자 이동
    • 트래픽을 유도하는 구체적인 키워드

    보시다시피 사이트에서 트래킹할 수 있는 데이터는 여러 가지가 있습니다.

    하지만 여기서는 e커머스 기업에게 가장 중요한 3가지 데이터에 중점을 두고 철저히 분석해보고자 합니다.

    • 버려진 장바구니 데이터
    • 랜딩 페이지 혹은 제품 페이지 데이터
    • 히트맵(Heatmap) 데이터

    버러진 장바구니 데이터와 그 처리 방법

    버려진 장바구니 데이터는 고객이 ‘지금 구매하기’ 혹은 ‘장바구니에 추가’ 버튼을 클릭하고 특정한 제품을 장바구니에 넣었을 때 생성됩니다. 이후 어떤 이유로든 고객들은 결제 과정에서 이를 진행하지 않고 도중에 이탈해 버리지요.

    통계적으로는 장바구니를 버린 고객 중 15%는 다시 돌아와서 다시 구매할 것이라고 하는데요, 때로는 그 비율이 30%에 이를때도 있습니다.

    애널리틱스에서 표기되는 장바구니 포기율이든, 퍼센테이지든 그것이 무엇이든 상관없이 뭐든 할 수 있다는 점만 기억하십시오.

    그 장바구니 포기한 사람들 중 일부를 다시 전환으로 완전히 돌리는 것을 결코 포기해서는 안 됩니다. 그저 이따금씩 관심을 두면 됩니다. 그러나 가장 좋은 방법은 결제 프로세스를 최적화하는 것입니다.

    아래는 결제 프로세스 최적화를 진행할 때 할 수 있는 몇 가지 사항들입니다.

    • 사이트의 신뢰성을 평가할 수 있는 인증 내용들을 눈에 잘 띄게 사이트에 삽입하십시오. 이것의 유무에 따라서 결제과정에서 최대 61%에 이르는 이탈율을 볼 수도 있습니다.
    • 결제 진행 시점에 맞춰서 특별 할인 혜택을 제공하여 전환을 완전히 완료하십시오.
    • 여러 사례 연구에 따르면 무료 배송 혜택이 전환을 높이는 것으로 나타나기 때문에 만약 무료 배송이라면 결제 과정에서 무료 배송이라는 문구가 잘 눈에 띄도록 배치하도록 합니다.

    위와 같은 선제적인 전략으로 장바구니 포기율을 0%까지 완전히 낮추지는 못합니다. 위의 내용 이외에도 장바구니 포기율을 낮추는 방법은 아래와 같습니다.

    • 장바구니를 포기한 고객의 29.9%는 다시 재구매 활동으로 이어질 수 있기 때문에 결제를 완료하지 못한 고객에게도 이후 팔로업 메일을 보냅니다.
    • 위와 같은 팔로업 메일에는 특별 할인 혜택이나 쿠폰을 함께 제공하여 전환율을 더욱 극대화하십시오.
    • 페이스북 픽셀을 사용하는 리마케팅 캠페인을 진행하여 사이트에서 장바구니를 포기한 고객들을 트래킹하고 페이스북에서 리마케팅하십시오.

    랜딩/제품 페이지 데이터 및 관련 작업

    분석을 통해 전환 및 매출 측면에서 상대적으로 실적이 저조한 페이지를 확인할 수 있습니다. 이는 장기적으로 사이트에 들어가는 비용이 증가하는 결과를 낳을 수 있습니다. 하지만 몇 가지 수정만으로 전환 유출과 매출이 감소하는 것을 막을 수 있습니다.

    특정 고객에게 부적절한 페이지 랜딩이나 제품 컨텐츠는 다양한 문제들의 결과로 볼 수 있는데요, 보기 힘든 CTA 버튼에서 페이지 목표, 또는 잘못 정의되었거나 명확하지 않은 사용자 흐름에 이르기까지 그 원인은 다양합니다. 다행히 좋은 소식은 이런 문제를 해결하는 것은 무척 간단하다는 것입니다.

    한 연구 조사에 따르면, 단순한 제품 설명보다는 잘 정리된 스토리텔링이 특징인 제품 페이지가 보다 높은 전환율을 보여준다고 합니다.

    한 와인 기업의 사례 연구에서는 풍부한 스토리텔링이 들어간 제품 페이지가 단순히 제품 설명만 들어간 제품 페이지보다 5% 더 높은 전환율을 보여주었다고 합니다.

    만약 제품 페이지 컨텐츠의 일부로 스토리텔링을 활용한다면 더 많은 사람들을 전환으로 유도할 수 있을 것입니다. 따라서 제품을 설명하기 위해 딱딱한 카피를 사용하는 대신에 제품에 대한 스토리로 고객을 참여시키세요.

    스크롤없이도 쉽게 볼 수 없는 부분에 잘 보이게 CTA 버튼을 넣는 것만큼 간단하면서도 랜딩 페이지 전환율에 긍정적인 영향을 끼치는 것도 없습니다.  워드프레스 기반의 새로운 게시물에 크고 보기 쉬운 CTA 버튼을 클릭하면 47%의 전환율 향상 효과를 보인다는 연구결과도 있습니다.

    히트맵 데이터와 관련 작업

    히트맵(Heatmap)은 특정 페이지에서의 사용자 행동을 표시하는 데 사용됩니다. 따라서 고객이 사이트의 특정 페이지에 관여하는 방식에 대한 가치있는 인사이트를 얻을 수 있습니다.

    이는 고객이 왜 CTA 버튼을 클릭하지 않았는지에 대한 이유를 알려주는데 결정적인 역할을 합니다. 어쩌면 긴 페이지로 인해 너무 오랫동안 아래로 스크롤해야 하기 때문에 포기했을 수도 있습니다. 또한 사용자가 목표를 완료하기 전에 페이지를 이탈했을 수도 있고, CTA 버튼이 나오기 전에 너무 많은 불필요한 링크로 인해 혼란스러워 했을 수도 있습니다.

    어쩄든 히트맵 데이터는 시각적이기 때문에 분석하기도 쉽습니다. 또한 구글 애널리틱스와 같은 통계 데이터를 많이 보지 않으려는 경우 이상적입니다. 히트맵의 장점은 직접 응답을 제공해주거나 적어도 수정해야 할 부분을 알려준다는 것입니다.

    한 사례 연구에서는 웹사이트의 히트맵을 보면 고객이 주로 페이지 왼쪽에 있는 콘텐츠와 CTA 버튼을 클릭하고 페이지의 아래 쪽으로 갈 수록 가늘어지는 결과가 볼 수 있습니다. 콘텐츠를 흡수하는 이른바 ‘F’형의 패턴은 e커머스 기업들에게 페이지의 왼쪽에 중요한 콘텐츠를 집중 배치시켜야 한다는 인사이트를 제공합니다.

    어느 UX 기관이 진행한 히트맵 연구 결과에 의하면 사용자는 Stock 이미지 같은 진부한 이미지는 모두 무시하고 실제 페이지와 관련된 이미지만 살펴보는 것으로 나타났습니다.

    이와 같은 연구 조사 결과는 제품 페이지에 관련 이미지만 넣는 것이 좋다는 것을 말해줍니다. 실제 제품과는 아무 의미없는 Stock 등에서 다운받은 다른 이미지들은 모두 제거해야 할 것입니다.

    최적화되고 다양하게 분류된 테스트가 진행한 또 다른 연구 조사 결과는 CTA 버튼의 크기, 색상 및 배치가 전환에 큰 영향을 준다는 사실도 보여주었습니다.

    3개의 CTA 문구가 삽입된 랜딩 페이지에서 가장 전환율이 높았던 CTA의 특징은 다음과 같았습니다.

    • 크기와 색상 때문에 가장 도드라져 보였습니다.
    • 가장 설득력있고 읽기 쉬운 문구였습니다.
    • 페이지에서의 주요 초점 중 하나였습니다.

    이 정보를 활용하면 사례 연구에서 CTA가 이러한 세 가지 특징을 공유하도록 하여 페이지 전환을 늘릴 수 있습니다.

    정확한 데이터는 항상 전환을 돕습니다.

    e커머스 사이트의 분석 데이터를 전환 수를 높이고 매출을 높이는 열쇠라고 생각하십시오. 그것을 자세히 살펴보면 돈이 계속 유출되는 것에서 보다 많은 수익을 만드는 것으로 비즈니스 성과를 향상시킬 수 있습니다.

    지금까지 한 번도 왜 특정 페이지가 성과가 좋았는지 그 이유에 대해서 알아본 적이 없다면 위와 같은 분석이 그 답이 될 수 있을 것입니다  처음에는 데이터를 모으는 것이 너무 많아 보일 수 있지만 조금만 최적화된 수정 작업을 한다면 이 데이터들은 여러분의 비즈니스를 성공으로 이끌 것입니다.

     

    *마케팅 자료 및 기타 상담 문의: parkmg85@hanmail.net 

    *취업 준비생 및 사회 초년생을 위한 소규모 그룹의 원데이 마케팅 코칭 수업을 진행하고 있습니다. 수강 신청 및 자세한 사항은 여기를 클릭하고 확인해주세요.

  • 2017년 웹 디자인 트렌드 10가지

    2017년 웹 디자인 트렌드 10가지

    2017년 웹 디자인 트렌드 10가지

    (참조 자료: 10 sensible web design trends for 2017)

    2017년 웹 디자인은 모든 사용자들의 요구를 충족해야 합니다. 브라우저가 구현할 수 있는 모든 것들을 과시하려는 유혹을 과감히 버리고 그 자리에 적절한 디자인에 대한 열정이 더해지면 됩니다. 가상현실(VR)이든 애니메이션 효과든 화려해보이는 웹 디자인을 생각하고 있다면 모두 지워버리세요. 2017년 웹 디자인 트렌드의 키워드는 바로 공리주의(utilitarianism) 관점에 관한 것입니다.

    오늘은 2017년 주목해야할 웹 디자인 트렌드 10가지를 소개하고자 합니다.

    1. 보다 줄어든 메뉴 옵션

    2016년에는 웹사이트의 기본 메뉴 갯수가 많이 줄어들어 적지 않은 e-커머스 사이트가 재설계되었습니다.  이러한 흐름은 2017년에도 더욱 가속화될 전망인데요. 이전에 기본적인 헤더 메뉴가 5~7개라면 올해에는 3~4개까지 줄어들 것입니다.

    이는 방문자들에게 어렵고 시간이 오래 걸리는 선택 과정을 쉽게 만들어 줄 것입니다.(참조 기사: Brand Commerce: Navigating through online customer indecision).

    아래 이케아의 리뉴얼 이전/후 모습은 이러한 특징을 보여줄 수 있는 매우 좋은 사례라 볼 수 있습니다.

    이케아 이전 웹사이트

    이케아 이전 웹사이트
    이케아 이전 웹사이트

    새로 설계한 이케아 웹사이트

    새로 설계한 이케아 웹사이트
    새로 설계한 이케아 웹사이트

    2. 굿바이, 햄버거

    흔히 햄버거 메뉴(Hambuger menu)라 불리우는 사이드바 메뉴는 기본적으로 클릭하기 전에는 사이드바 메뉴 자체와 하위 메뉴가 보이지 않은 상태입니다.

    모든 메뉴들을 화면에서 깔끔하게 가려주기 때문에 쾌적한 상태에서 콘텐츠를 소비할 수 있지만, 반면에 사용자가 다른 내용을 보기 위해서는 반드시 햄버거 메뉴를 열어야 하기 때문에 네비게이션 과정 중에서 어려움이 생길 수 밖에 없습니다. 그리고 소비자에겐 적응 기간이란 것은 없습니다. 첫 이미지에서 어려움을 느끼고 눈에서 멀어지게 되며 그 e-커머스 사이트 방문 자체도 줄어들 수 밖에 없을 것입니다.

    스트리밍 서비스인 Spotify는 이러한 이유로 자사의 앱에서 햄버거 메뉴를 삭제했습니다.

    햄버거 메뉴를 삭제한 Spotify
    햄버거 메뉴를 삭제한 Spotify

    3. 이중톤

    구글 이미지 검색에서 이중톤 사례(duotone examples)를 검색하면 수많은 예시 이미지를 확인할 수 있는데요, 아래 Capital One Labs 사례는 이 이중톤 효과를 적절히 사용하고 있습니다.

    여기서 이중톤은 혼잡스러운 웹사이트와 텅 비어있는 웹사이트 사이의 균형을 맞추는데 사용되는데요, 이와 동시에 키메시지와 네비게이션 메뉴에 대한 방문자의 주목을 유지하게 됩니다. 또한 높은 해상도의 화려한 배경 이미지나 여러 장의 이미지가 사용될 때, 전반적인 테마의 일관성을 유지하기 위해 이중톤을 사용하기도 합니다.

    이중톤 사례
    이중톤 사례

    4. 촉각 디자인

    지메일과 유튜브 등 구글의 다양한 서비스를 사용하다보면 ‘같은’ 플랫폼 안에 있다는 느낌을 받게 됩니다. 이것이 바로 구글이 발표한 디자인 가이드인 머티리얼 디자인(Material Design)인데요, 2017년에는 이러한 구글 가이드를 적용하려는 많은 웹디자이너를 만날 수 있을 것입니다.

    요약하자면 머티리얼 디자인은 최소한적인 요소만을 사용하는 플랫 디자인(콘텐츠에 추가적인 디자인이 들어가지 않은 평평하면서 굵고 색상이 풍부한 디자인)의 장점을 많이 가지고 있지만 질감과 빛에 따른 그림자 효과를 추가하여 사용자들이 홤면상에서 어떤 부분을 클릭해야 하는지 더욱 자세히 디자인한 것입니다. 때문에 표면과 가장자리가 구분되는 등 촉각적인 요소가 많이 들어가 있지요.

    이 디자인의 궁극적인 목표는 플랫폼과 디바이스 크기와 상관없이 통합된 경험을 제공하는 것입니다. 바로 UX에 관한 것이죠.

    여기 머티리얼 디자인 페이지에서 구글이 이 디자인을 제시하는 이유에 대해 자세히 살펴보거나 이를 활용하는 다양한 앱과 웹사이트 사례들을 이곳에서 확인하실 수 있습니다.

    촉각 디자인
    머티리얼 디자인

    5. 굿바이, 패럴렉스 스크롤링

    패럴렉스 스크롤링(Parallax scrolling)은 마우스 스크롤링할 때 스크롤 위치에 따라 배경 이미지나 오브젝트 이미지들이 시차를 두고 등장하여 다양한 효과를 더해주는 기법입니다.

    지난 2015년부터 웹 디자인 트렌드를 강타했던 이 디자인은 상대적으로 최근에는 적용 범위가 점차 줄어들고 있는데요, firewatchgame 사이트에 들어가보면 이 패럴렉스 효과를 매우 부분적으로만 사용하고 있는 것을 확인할 수 있습니다.

    또한 AlfredService 사이트에서는 이 효과가 아주 복잡하게 사용되고 있는 것을 볼 수 있는데요, 이 같은 사이트 중 상당수는 마우스의 위치가 페이지의 움직임과 정확히 일치하지 않는 지점에서 사용자들을 짜증나게 하는 스크롤잭킹(scrolljacking)을 유발합니다.

    이 같은 사용자 혼란을 제외하고도 패럴렉스 스크롤링의 단점은 로딩 시간이 길고, 사이트의 대부분이 그래픽으로 이루어졌기 때문에 SEO가 빈약하다는 것입니다.

    2016년에는 이러한 그래픽 경험이 수많은 웹사이트 사이에서 오디언스의 주목을 끌 수 있는 요소로 내다보았지만, 올해에는 오히려 패럴렉스 스크롤링의 이러한 번잡스러움 보다 실질적인 퍼포먼스에 집중해야 될 차례입니다.

    패럴렉스 스크롤링
    패럴렉스 스크롤링

    6. 의미있는 모션

    머티리얼 디자인의 원리 중 하나가 “모션 제공의 의미(motion provides meaning)’입니다. 패럴렉스 스크롤링 같은 애니메이션 효과를 고려해볼 수 있겠지만 여기 웹사이트와 앱에서의 모션을 향상시키는 요인이 있습니다.

    구글이 정의하길, “모션(Montion)이란 의미있고 적절하며 관심을 집중시키고 지속적이어야 한다”고 이야기 하는데요,  피드백은 명확하고 전환은 효율적이면서 일관적이어야 한다고 합니다.

    여기 구글 Android의 웹사이트를 보면 몇 가지 예시를 볼 수 있습니다.

    • 상단 메인 Carousel 헤더 배너에 있는 텍스트들이 휘어지는 방식
    • 전반적으로 Carousel 이미지 뷰어들이 완전히 한 바퀴를 도는 방식
    • 동적 메뉴(OS 디바이스) 선택 시, 이미지가 슬라이드 되는 방식

    그리고 2015년에 출시했지만 텀블러(Tumblr) 앱도 애니메이션 기반 머티리얼 디자인을 착용한 좋은 사례라 볼 수 있습니다.

    7. Stock 이미지는 이제 그만!

    현재 웹사이트 트렌드에서 고화질 이미지는 빠뜨릴 수 없는 매우 중요한 요소입니다. 특히 우리는 디지털 변환 과정을 겪고 있는 수많은 기업들이 대표성도 없고 창의성도 없는 일반적인 Stock 이미지를 사용하고 있는 것을 보고 있습니다.

    회사 웹사이트는 비즈니스 가치를 반영하여야 하며 그건 마켓에서 구매한 이미지로는 대체할 수 없는 것입니다.

    Stock 이미지
    Stock 이미지

    8. 적은 어플리케이션, 보다 많은 PWA

    PWA(Progressive Web Apps)는 인터넷이 끊긴 오프라인 환경에서도 브라우저 웹을 쓸 수 있는 기술입니다. HTML5와 고급 JavaScript 기술을 기반으로 하고 있는 이 기술은 웹 앱의 모든 중요 데이터를 캐싱하여 오프라인 상태에서도 빠르고 안정적으로 브라우징 경험을 즐길 수 있게  합니다. 웹 페이지이지만 푸시 알림 및 홈 스크린 아이콘 등 모바일 앱과 거의 동일한 기능을 제공하기 때문에 모바일 OS에 구애받지 않는 개발방식, 그리고 빠른 구동 속도가 특징입니다.

    만약 길이가 긴 앱 개발을 고려하고 있다면 PWA는 많은 이점을 가져다 줄 것입니다. 워싱턴 포스트를 비롯하여 에어 버린(Airberlin), 플립 카트(Flipkart) 등이 이 디자인을 사용하고 있습니다.

    적은 어플리케이션, 보다 많은 PWA
    적은 어플리케이션, 보다 많은 PWA

    9. 구글 글꼴

    2010년 구글은 오픈 소스 글꼴 라이브러리를 만들었는데요, 2016년에 머티리얼 디자인 연구를 계속 진행하면서 구글 폰트 서비스 또한 개편하였습니다.

    다양한 배경 색상에서의 빠르고 쉬운 글꼴 미리보기 기능을 지원하는 이 서비스는 머티리얼 디자인에 가장 적합해 보이는 글꼴들을 강조 표시해줍니다. 흥미롭게도 구글은 Noto라는 무료 글꼴을 개발하여 800개의 언어로 응집된 시각적 언어를 제공함으로써, 언어 설정을 변경하여도 연속성을 유지하도록 했습니다.

    아마도 2017년에는 더욱 더 많은 웹디자이너들이 구글 글꼴을 사용할 것으로 예상됩니다.

    구글 글꼴
    구글 글꼴

    10. 미니얼리즘

    사실 이 미니멀리즘(Minimalism)은 구글의 머티리얼 디자인을 포함하여 위에서 언급한 모든 트렌드들의 특징을 총칭합니다. 미니멀리즘은 결국 성능과 사용자 경험에 보다 중점을 두고 있는데요. 이러한 트렌드는 사용자들이 모든 콘텐츠들이 스크롤 없이 볼 수 있는 화면 위에 빽빽히 있을 거라 기대하지 않기 떄문에 모바일 화면에서 콘텐츠가 명확하게 보여야 할 뿐만 아니라 사용자들에게 스크롤링을 권장하는 반응형 웹사이트로 흐름이 이동하면서 시작되었습니다.

     

    *마케팅 자료 및 기타 상담 문의: parkmg85@hanmail.net 

    *취업 준비생 및 사회 초년생을 위한 소규모 그룹의 원데이 마케팅 코칭 수업을 진행하고 있습니다. 수강 신청 및 자세한 사항은 여기를 클릭하고 확인해주세요.