프론트엔드

[번역글]매력적인 웹 사이트를 디자인하는 방법

CyberI 2015. 6. 4. 14:25

멋진 웹사이트를 디자인하는 방법


커피 콩을 구매하는 것, 투자를 하는 것, 의사를 결정하는 것은 어떤 공통점이 있을까요? 그것은 모두 쇼핑의 형태라는 점입니다. 각각의 경우, 고객은 검색, 평가, 선택 범위 좁히기 등의 예상가능한 과정을 따릅니다. 만약 고객이 어떤 쇼핑의 과정을 따르는지 이해한다면, 적절한 장소에 적절한 메시지와 함께 상품을 디자인 할 수 있습니다. 그리고 이는 경쟁자를 제치고 당신의 상품을 선택하도록 하며, 더욱 중요하게는 고객에게 완벽히 딱 맞는 상품을 구축하도록 이끌어줄 것입니다.


구글 벤쳐에서는, '쇼핑 깔때기(shopping funnels)'가 디자인 작업에 있어서 비밀 무기가 되었습니다. 이를 블루 보틀 커피(Blue Bottle Coffee), 원 메디칼(One Medical), 서클 업(CircleUp)과 같은 다양한 스타트업에 사용했습니다. 우리는 고객이 하는 질문들과 그 순서를 알아낸 후, 그에 맞는 메시지와 기능을 디자인 합니다. 여기 훌륭한 디자인을 위한 로드맵이 되어줄 사업에 알맞은 쇼핑 깔때기를 만드는 방법이 있습니다.


사람들이 실제로 쇼핑하는 방법

저(원글의 저자; Michael Margolis)는 인터넷 회사가 파산한 직후, 월마트 사이트에서 연구원으로 취직했습니다. 그 후 몇 년 동안, 사람들이 가전제품에서 의류, 가구에서 약혼 반지까지 모든 물건을 어떻게 구매하게 되는지 연구하는 일을 맡게 되었습니다. '쇼핑 깔때기'라고 부르는 것을 모든 곳에서 관찰하기 시작했습니다. 구글 벤처에서 현재, 저는 종종 디자인 작업에 앞서 조사 작업을 수행합니다.

결과를 정리하는 가장 효율적이고 효과적인 방법이 쇼핑 깔때기의 형태에 있는 것으로 밝혀졌습니다. 구매 깔때기, 고객의 쇼핑 여정 그리고 결정 과정은 새로운 아이디어가 아닙니다. 그러나 구글 벤처는 의사를 찾거나 API를 고르는 것과 같이 사람들이 보통 쇼핑이라고 생각하지 않는 것에 이를 적용하였습니다. 어떤 종류의 쇼핑히던지 실제로는 결정의 연속에 관한 것입니다. 그리고 대부분의 쇼핑 깔때기는 보통은 5단계 이하로 아주 단순하다는 것을 알았습니다.

상품이나 서비스에 따라서, 쇼핑 깔때기의 상세는 상당히 다양할 것이지만, 소비자의 의사 결정과정에는 일반적인 패턴이 있다는 것을 눈치챘습니다. 그리고 이는 다음과 같습니다.


1. 발견: 옵션을 모으고 기준을 세운다

고객은 그들이 경쟁자의 상품을 검토하는 도중 당신의 상품을 처음 만날 것입니다. 그들은 다음과 같은 질문들을 할 것입니다. "무엇이 가능한가? 나의 요구와 기준은 무엇인가? 어떤 사이트가 정보를 위한 신뢰할만한 출처인가?" 

만약 고객이 상품에 대한 사전 경험이 별로 없으면, 고객은 우선 형세를 파악하고 용어를 배웁니다. 그리고 만약 전문가보다 초보자를 타겟으로 삼고 있다면, 그들이 고비를 넘을 수 있도록 도와줄 필요가 있을 것입니다. 중요한 상세정보를 맨 앞으로 가져오는 것은 그들이 평가 기준을 정하는 데에 도움을 줍니다.

그런 후 고객이 경쟁자의 제품과 비교해서 당신의 상품을 어떻게 인지하는지 이해해야 합니다. 빠르고 영악한 사용자 조사를 함으로써 고객이 당신과 경쟁자의 사이트를 어떻게 보는지를 알 수 있습니다. 도메인에 어떤 종류의 이미지, 톤, 메시지, 시각적 디자인이 전문성과 신뢰의 적절한 수준을 표시하는지 알아내야 합니다.


2. 선택: 짧은 리스트를 만든다

그 다음, 고객은 초기 검사(initial screening)를 만족하는 옵션들을 선택합니다. 선택지를 한 번 걸러내면, 그들은 더욱 자세히 보기 시작합니다. 


3. 파고 든다: 각각의 상품을 파고든다

고객이 당신의 상품을 고려할만한 가치가 있다고 여기면, 그들은 상세한 부분을 파고 듭니다. "이 상품이나 서비스가 나의 기준을 만족하는가?" 고객이 그들이 중요하게 여기는 기준에 의거해서 옵션을 비교하고 걸러내기 편하게 해주어야 합니다. 여러분의 일은 어떤 상세 정보가 그들의 옵션을 좁히는 데 도움을 주는지 알아내고, 그 상세 정보를 아주 간단하게 만드는 것입니다.


4. 입증하다: 사람들이 뭐라고 하는가?

고객이 곧 구매 결정을 할 때 쯤, 그들은 외부의 확인이나 경고의 사인(red flag)을 찾습니다. "리뷰를 남긴 사람들은 뭐라고 하는가? 나의 친구들은 뭐라고 하는가?" 고객이 보고 있는 것을 보기 위해서 당신의 제품에 관한 리뷰를 찾아보십시오. 고객의 로고 혹은 제 3자의 리뷰, 평가, 추천글을 마케팅에 추가하는 것은 거대한 신뢰성 향상이 될 수 있습니다. 

iTunes는 각 영화 페이지에 바로 "썩은 토마토(Rotten Tomatoes; 영화 리뷰 웹사이트)"의 리뷰를 보여줍니다. 혹은 사이트나 관련된 포럼(Reddit이나 Stack Overflow와 같은)에 활발한 커뮤니티를 조성하여 잠재 고객을 안심시킵니다.


5. 시도한다: 실제로 어떤가?

많은 경우, 고객은 그들이 실제로 구매를 행하기 전에 제품이나 서비스를 시험해보고 싶어합니다. 조사를 해봄으로써, 그들은 이것이 그들에게 옳은 것인지를 결정할 수 있습니다. "나의 습관, 라이프 스타일, 내가 일을 하는 방식에 부합하는가?" 만약 고객이 시험삼아 사용해보는 것이 불가능하다면, 상품이 실제 생활에 어떻게 보이고 작동하는지에 관해 정확한 프리뷰를 제공할 수 있는 방법을 모색해야 합니다.

쇼핑 깔때기에 의한 디자인

구글 벤처는 모든 유형의 회사의 웹 사이트를 디자인할 때 쇼핑 깔때기를 사용해왔습니다. 예를 들어, 블루 보틀 커피(Blue Bottle Coffee)는 그들의 온라인 상점을 향상시켜서 카페의 훌륭한 접대에 더욱 잘 부합하기를 원했습니다. 그들의 쇼핑 깔때기는 고객이 어떻게 온라인 상에서 커피 콩 구매 결정을 내리는지를 정확하게 드러냈습니다. 

: 원산지보다 맛(taste)이 더 중요하다.


지금 그들의 웹 사이트에는, 커피의 맛을 선두에 내세우고 그들의 전문성을 드러내는 언어로 서술되어 있습니다. 




우리는 아주 다른 종류의 회사에 같은 로직을 적용했습니다. 원 메디칼(One Medical)은 미국 전체에 걸친 일부 도시들에 있는 주요 1차 진료 기관의 네트워크입니다. 그들은 새로운 의사를 찾기 위해 사이트에 방문하는 환자들이 더 많이 가입하기를 원했습니다. 디자인 작업을 위해서, 사람들이 어떻게 검색을 하고 의사를 고르는지 연구했습니다.

결과로 나타난 쇼핑 깔때기는 의사를 고를 때 첫번째 질문이 의사가 새로운 환자와 보험을 받아들일 것인지, 편리한 위치에 있는지, 선호하는 성별인지에 관련되어있다는 것을 밝혔습니다. 웹사이트 디자인을 위해서 원 메디칼은 그와 관련된 상세한 기준을 전면 중앙에 배치하여, 환자들이 여러 페이지에 걸쳐 살펴보지 않아도 되도록 하였습니다. 

일부 경우, 겉보기에 소수의 쇼핑 선택이 큰 파장 효과를 가질 수 있습니다. 서클업(CircleUp)은 투자자들이 작고, 빨리 성장하는 소비재 회사를 찾을 수 있는 거래 시장입니다. 길고 긴 잠재적인 투자처 리스트에 직면했을 때, 투자자들은 향후 심사에 메리트가 있는 회사인지 빨리 구분하고 싶어합니다. 

쇼핑 깔때기를 사용하여, 서클업은 투자자들의 쇼핑 과정에 디자인이 부합하도록 할 수 있었습니다. 왜냐하면 투자자들의 상품 자체에 큰 신경을 쓰기 때문에, 서클업은 회사 로고보다 실제 상품 사진을 브라우저에서 가장 눈에 띄는 특징으로 내세웠습니다. 그리고 투자자들이 각 회사에 대해 가장 신경쓰고 있을 세 가지 주요한 요소를 드러나게 하였습니다. 


 5가지 단계의 쇼핑 깔때기

1. 카테고리에서 최근 구매를 하거나 결정을 내린 쇼핑 경험이 있는 사람을 찾아라. 

2. 그들의 이야기를 들어라. 쇼핑 과정에 대한 이야기를 해달라고 요청하라. 그들이 과거의 경험에서 무엇을 좋아하고 무엇을 싫어했는가? 가능한것을 어떻게 알아냈는가? 

3. 그들이 쇼핑하는 것을 관찰하라. 그들의 이야기를 들은 후, 온라인에서 서비스를 쇼핑하는 것을 관찰하라. 어떤 정보가 가장 중요한가? 무엇을 놓쳤는가? 어떤 콘텐츠, 이미지, 메시지가 가장 반향이 있었는가? 왜 그런가?

4. 비교 대조하라. 참가자에게 몇 가지 상품에 대해 각 장단점을 서술하여 비교하고 대조해달라고 요청하라. 

5. 당신에게 맞는 깔때기를 그려라. 팀이 이해하기 쉽도록 당신만의 쇼핑 깔때기를 만들고, 간단한 다이어그램을 그려라. 


위에서 언급한 웹사이트를 들어가보면 각 디자인에서 잠재 고객이 그들의 질문에 올바른 순서로 빨리 대답하는 데에 도움을 주는 깔때기를 볼 수 있을 것입니다. 가장 좋은 쇼핑 깔때기는 고객의 인터뷰로부터 시작합니다. 인터뷰를 진행하는 것은 그렇게 어렵지 않고, 오랜 시간을 요구하지 않습니다. 

쇼핑 깔때기는 방문자가 상품과 어떻게 상호작용하는지에 관한 스토리를 생생하게 재현해야 합니다. 그들은 어디에서 오는가? 그들은 무엇을 비교하는가? 그들이 원하는 것을 당신이 가지고 있는지 아닌지 어떻게 판단할 것인가? 그들이 가장 먼저 찾게 될 정보는 무엇인가? 두번째는?  

쇼핑깔때기의 윤곽을 잡았다면, 작업에 적용시킬 시간입니다. 디자인을 체계화하고 고객이 자연스럽게 가지게 될 질문에 부합하는 정보를 정리하십시오. 사람들이 그들이 의사결정을 할 때 찾는 것을 알고 부합하는 디자인을 하는 것은 행복한 고객을 위한 레시피입니다. 


출처: http://www.fastcodesign.com/3045197/google-ventures-on-how-to-design-a-killer-website