안녕하세요, 한국 셀러의 아마존 운영을 돕는 국내 유일 비주얼 마케팅 전략 컨설팅 회사 엠티풀입니다.
홈페이지는 브랜드에 대한 소개와 함께 고객이 원하는 서비스를 탐색하고 필요한 것을 찾을 수 있도록 해주는 툴이라고 할 수 있습니다. 홈페이지의 목표가 제품을 판매하는 것이든 이메일 가입자를 확보하는 것이든, 고객들에게 확실히 눈도장을 찍고 여러분의 의도대로 방문객을 유도할 수 있도록 하는 방향으로 홈페이지를 발전시켜야 할 것입니다.
홈페이지를 디자인하는 것에 정답은 없습니다. 하지만 홈페이지를 기획할 때 유의해야 할 몇 가지 중요한 요소들을 소개하고자 합니다.
홈페이지 디자인 시작에 앞서 유념해야 할 사항들
저희 클라이언트 분들을 보면 홈페이지 디자인에 앞서 굉장히 막막해하시는 경우가 많습니다. 그리고 여러 가지 옵션 중에서 어떤 것이 최선의 선택인지 많은 고민들을 하시죠. 이렇게 막막하고 어떤 방향으로 나아갈지 확신이 서지 않으실 경우, 다음과 같은 질문들을 스스로에게 던져보세요. 결정을 내리는 데 도움이 될 수 있을 것입니다.
- 방문자가 홈페이지에서 무엇을 하기를 원합니까? (예: 구매, 이메일 가입 등)
- 이 작업을 수행하는 것이 얼마나 간단합니까?
- 목표 달성을 위해 몇 단계가 있습니까?
- 다음 단계로 진행하려면 얼마나 많은 정보가 필요합니까?
- 제거 가능한 단계가 있습니까?
방문객들은 때때로 확실한 목표를 갖고 홈페이지를 방문하지만 그렇지 않은 경우도 있습니다. 이 두 가지 경우의 방문객들을 모두 염두에 두고 여러분의 목표 달성을 이룰 수 있도록 홈페이지를 디자인해야 합니다. 특정 결과를 찾는 방문객들을 수용하고, 그렇지 않은 방문객의 관심까지도 유도하는 홈페이지가 좋은 홈페이지라 할 수 있습니다.
홈페이지 디자인에서 어떤 결과를 기대할 수 있죠?
평균적으로 방문객은 홈페이지에서 10-20초 정도를 소비합니다. 이것이 디자인 관점에서 의미하는 바는 방문객이 자신의 목표를 위해 최상의 경로를 신속하게 선택할 수 있도록 명확한 흐름을 설계해야 한다는 것입니다. 이렇게 방문객이 신속한 결정을 내릴 수 있도록 하지 않은 경우, 방문객은 의사 결정을 회피하게 되는 경우가 대부분입니다. 심리학적으로도 사람들은 너무 오래 걸리는 의사 결정 사항은 회피하는 경향이 있다고 하죠.
홈페이지에 있어 ‘의사 결정 회피’란, 페이지를 종료하거나, 뒤로가기 버튼을 눌러 수신 거부하는 것을 의미합니다. 이를 방지하려면 홈페이지의 첫 번째 작업은 잠재 고객들이 홈페이지에 계속 머무르도록 잡아두는 것입니다.
이를 위해서는 다음과 같은 홈페이지의 요소들과 그 역할을 이해하는 것이 중요합니다.
1. Above-the-fold 콘텐츠
‘Above-the-fold’ 콘텐츠란, 홈페이지에서 방문자가 스크롤하기 전에 보여지는 부분을 일컫습니다. 즉 홈페이지의 메인화면이라고 할 수 있죠. 방문자가 사이트에 방문했을 때 처음 마주하게 되는 바로 그 화면!
이 부분에 어떤 콘텐츠를 담을지, 또 홈페이지의 다른 부분들과 어떻게 부합해야 하는지를 고려할 때, 방문자가 사이트를 처음 방문했을 때 취해야 할 행동, 우선적으로 필요한 정보 및 그들의 결정을 용이하게 도울 수 있도록 하는 방법들을 중점적으로 고민해야 합니다.
Ritual이라는 브랜드의 홈페이지를 예로 들어보겠습니다. Ritual은 종합 비타민 제품을 유일한 제품으로 판매합니다. 궁극적인 목표인 잠재 고객들의 주력 제품 구매를 위해 밝은 컬러의 제품 중심 이미지와 함께 명확한 Call-to-action으로 ‘Above-the-fold’를 채웠습니다.
이 홈페이지에서 방문객은 두 가지의 결정을 빠르게 할 수 있습니다.
- 제품 살펴보기
- 또는 스크롤하여 더 많은 정보 살펴보기
대부분의 웹사이트 헤더는 관심을 끄는 헤드라인, 설득력있는 부제 및 매혹적인 비주얼로 방문자들이 머무르도록 하고 브랜드에 대해 친숙하도록 유도합니다.
브랜드에 익숙치 않은 방문객의 관심을 유도하는 방법으로는 할인행사 및 프로모션 등을 알리는 배너를 위에 띄우는 방법도 있습니다.
2. 명확한 네비게이션
웹페이지에서 네비게이션은 방문자가 스스로 어느 페이지로 이동할 수 있고, 현재 어느 페이지에 위치해 있는지 알 수 있게 해주는 요소를 일컫습니다. 즉, 웹사이트의 ‘표지판’같은 역할을 한다고 생각하시면 이해하기 쉽습니다. 이러한 웹 네비게이션은 단순하면 단순할수록 명확해집니다.
여러 유형과 여러 경우의 방문자를 고려하고 수용해야 한다는 앞의 설명과 모순되는 것처럼 느끼실 수 있겠지만, 역시 앞서 언급했듯이, 사람들이 얼마나 빨리 페이지를 이동하는지 고려한다면 그 중요성을 느끼실 겁니다.
웹 네비게이션은 방문자에게 가장 우선순위의 경로를 지정하고, 가능한 한 간단해야 합니다. 너무 많은 옵션이 있는 사이트는 방문객들이 복잡하고 압도적으로 느껴질 수 있어 방문율이 떨어지거나 방문객이 잘못된 길로 빠질 가능성이 높습니다. 가장 좋은 방법은 왼쪽에서 오른쪽 순서로 가장 중요한 페이지를 나열하는 것입니다.
제품 및 컬렉션이 많은 경우 홈페이지 탐색 메뉴의 주요 최상위 컬렉션에 집중하고 '메가 메뉴'또는 드롭 다운 메뉴를 사용하여 하위 탐색을 만듭니다. 하위 탐색 기능은 너무 많은 옵션을 사용하여 고객을 압도하지 않고도 쉽게 탐색할 수 있도록 제품과 페이지를 정리할 수 있는 훌륭한 방법입니다.
예를 들어, J.Crew라는 브랜드의 홈페이지를 살펴보겠습니다. 광대한 제품과 컬렉션들을 잘 정리된 드롭다운 메뉴와 메가 메뉴를 사용하여 최소한의 탐색으로 쉽게 원하는 곳으로 이동할 수 있도록 하였습니다.
방문객들의 관심을 사기에 큰 역할을 하지는 않지만 꼭 필요한 페이지들이 있습니다. 바로 회사 소개라던지, 문의하기 등의 페이지들입니다. 이러한 페이지들은 웹 Footer에 추가해 두어 반드시 필요한 사용자들이 찾아올 수 있도록 하는 것이 좋습니다.
3. 눈길을 끄는 이미지
방문객들의 ‘의사 결정 회피'를 유발하는 요인에는 네비게이션 외에도 다른 모든 요소들에게도 적용됩니다. 홈페이지를 디자인할 때 사용자 주의적 시선에서 바라보면 어떤 것들이 중요한지 판단하는데 도움이 될 것입니다.
제품이나 컬렉션을 홍보할 때 웹사이트의 비주얼, 즉 시각적 디자인은 방문자의 관심을 끌기 위함이 목표라는 것을 잊어서는 안 됩니다.
앞서 설명한 ‘Above-the-fold’ 즉 메인 페이지에서 어떻게 여러분의 제품과 컬렉션을 비주얼적으로 표현할 수 있는지 그 방법들을 몇 가지 알아보겠습니다.
텍스트 오버레이가 있는 이미지
눈길을 사로잡는 강력한 이미지 위에 직관적인 카피와 CTA [Call-to-action] 버튼. 많이 접해본 친숙한 스타일이실 겁니다. 주력 제품, 혹은 시즌별 이벤트 등을 어필하고 방문객들이 바로 해당 페이지로 찾아갈 수 있는 것이 장점입니다.
슬라이드쇼
다양한 카테고리와 제품군이 있는 경우, 슬라이드쇼를 사용하는 것이 좋습니다. 다양한 이미지들을 사용하여 어필하는 방법인만큼 고퀄리티의 이미지 작업 및 선정이 중요합니다. 또한, 우선순위 혹은 중요도가 높은 슬라이드부터 정렬하는 것이 좋습니다. 방문객이 다른 페이지로 이동하기 전에 오랫동안 머무르지 않기 때문에 약 3개의 슬라이드 정도로 제한하며, 너무 오랜 시간 멈춰있지 않고 자동으로 다음 슬라이드로 넘어가도록 설정하시는 것을 추천합니다.
비디오
소비자들에게 친숙하지 않은 제품일 경우, 제품의 사진이나 프로모션보다는 제품에 대한 설명이 우선적으로 필요할 것입니다. 장황한 설명 필요 없이 잘 찍은 비디오 하나면 방문객들의 관심을 유도하기에 충분할 것입니다.
Bottle Cutting Inc.라는 브랜드를 예를 들어 보겠습니다. 방문객들에게 낯선 제품이기에 비디오 데모를 메인 페이지에 두어 관심을 유발합니다.
홈페이지에 사용되는 이미지 혹은 비디오들은 홈페이지, 나아가 브랜드의 전체적인 인상을 좌지우지하는 중요한 요소입니다. 저품질, 저화질의 이미지들은 브랜드와 제품의 품질에도 좋지 않은 인상을 남길 수 있으니 반드시 신중하게 선택하시길 바랍니다.
4. 명확한 CTA [Call-to-action]
CTA는 Call To Action의 약자로 ‘사용자의 반응을 유도하는 요소'를 뜻하는 마케팅 용어입니다. 모바일이나 웹사이트에서 흔히 볼 수 있는 배너나 링크, 버튼 등이 이에 해당됩니다. 예를 들면, ‘지금 보러 가기', ‘예약하기', ‘가입하기', ‘다운로드' 등의 버튼들 본 적 있으시죠? 이들 모두 CTA에 해당합니다.
이 CTA의 문안과 링크는 직관적이며 방문객이 찾고자 하는 결과를 위한 다음 단계와 일치해야 합니다. 또한, 주변 디자인과 뚜렷이 구별되어야 신속하게 발견하고 다음 움직임을 취할 수 있겠죠?
Casetify 홈페이지로 예를 들어 보겠습니다. 여기서 메인의 각각의 슬라이드는 각기 다른 문안의 CTA버튼을 사용하고 있습니다. 또한 전체적인 웹페이지의 디자인과 이미지들 사이에서 대비되도록 눈에 띄는 빨간색을 사용하여 방문객이 길을 잃지 않고 제갈길을 가도록 도와주죠.
지금까지 [브랜드의 첫인상 홈페이지. 홈페이지 디자인 시 유념해야 할 요소들 체크! - 1편]을 소개하였습니다.
다음 2편에서 더욱 유용한 체크 요소들에 대해 설명하도록 하겠습니다.
👇엠티풀 이전 글 보기
2019/04/19 - [아마존] - 2019년 아마존 랭킹 알고리즘 A9 파헤치기 - 1편
2019/04/22 - [아마존] - 아마존 전환율을 향상하는 팁!
2019/04/25 - [아마존] - 아마존 상위 랭킹을 위한 리스팅 이미지 제작 팁 - 1편
2019/04/16 - [아마존] - 2019년 아마존 랭킹 알고리즘 A9 파헤치기 - 2편
2019/04/30 - [아마존] - 아마존 광고 정복하기, 2019 PPC 전략 - 1편
2019/04/30 - [아마존] - 아마존 광고 정복하기, 2019 PPC 전략 - 2편
-
*이 글은 엠티풀 컨설턴시의 경험과 창작으로 이루어진 글과 해외 및 아마존 공식 자료를 참조하여 작성되었습니다.
https://www.shopify.com/blog/homepage-design
-
*엠티풀 컨설턴시의 모든 이미지와 콘텐츠는 법적으로 그 권리를 보장받고 있는 고유의 자산입니다. 엠티풀 컨설턴시가 게시한 이미지와 콘텐츠를 허가 없이 자신의 사이트, 카페, 블로그 등 불특정 다수에게 노출되는 포털사이트에 불펌, 화면 캡처 등 일련의 무단 도용 행위가 발견될 경우 정식 절차를 통해 게시물 삭제처리가 이루어짐을 고지합니다.
'해외오픈마켓 & 크라우드펀딩' 카테고리의 다른 글
| [크라우드펀딩] 해외 CROWDFUNDING 과정 한 눈에 보기 (0) | 2019.05.23 |
|---|---|
| eBay 한눈에 이해하기 (0) | 2019.05.22 |
| 디지털 마케터가 알아야 할 2019년 해외 마케팅 트렌드 8가지 (0) | 2019.05.20 |
| 브랜드의 첫인상 홈페이지. 홈페이지 디자인시 유념해야 할 요소들 체크! - 2편 (0) | 2019.05.14 |
| 엠티풀디자인 아마존 및 해외펀딩 비주얼 전략 컨설턴시 (0) | 2019.04.29 |
