Digital Marketing Curation

Tag: 사용자경험

  • 2021년 최고의 웹사이트 디자인 9가지

    2021년 최고의 웹사이트 디자인 9가지

    2021년 최고의 웹사이트 디자인 9가지

    (참조 자료: The 9 Best Website Design Trends of 2021)

    2021년 최고의 웹사이트 디자인
    2021년 최고의 웹사이트 디자인

    코로나19가 발병한 2020년 이후는 많은 비즈니스들이 힘든 시기를 겪고 있습니다. 이러한 상황에서도 어떤 기업은 비교적 남는 시간을 활용하여 장기적으로 비즈니스에게 유용한 기술들을 배우는데 투자했습니다.

    여러 연구 결과를 바탕으로 많은 사람들이 웹사이트 디자인에 이미 적용되어 있거나, 향후 추가될 새로운 기술과 트렌드를 접목하는데 많은 시간을 보냈습니다. 이러한 웹사이트 디자인들은 널리 알져져 있습니다. 생존하고자 하는 비즈니스에게 잘 구축된 웹사이트가 얼마나 영향력있고 필수적인지는 아무리 강조해도 모자람이 없을 것입니다.

    현재, 이전에는 현대적이거나 혁신적이라고 여겨졌던 모든 디자인 요소와 기능들은 시대에 뒤떨어진 것으로 인식될 가능성이 높습니다. 이는 최근 최근 업계의 발전 속도를 보여주기도 합니다.

    웹사이트의 디자인은 방문자가 오래 머무르고 콘텐츠를 적절하게 소비할 수 있게 하는 주요한 요인 중 하나입니다.

    많은 이들이 웹사이트 디자인을 어떻게 개선할 수 있을지 고민하고 있습니다. 따라서 본 글에서는 2021년 트렌드를 정의할 수 있는 웹사이트 디자인 몇 가지를 소개하고자 합니다. 이러한 트렌드를 적용하게 되면 확실이 웹사이트 디자인을 향상시켜 타깃 잠재 고객들의 관심을 더욱 사로잡을 수 있을 것입니다.

    또한 작은 기업이든, 이미 숙련된 큰 기업이든 상관없이 매출 향상에 도움이 될 수 있는 웹사이트 디자인적 팁들도 함께 소개하도록 하겠습니다.

    1. 전체 페이지 헤더(Full-Page Headers)

    전체 페이지 헤더
    전체 페이지 헤더

    웹사이트에서 방문자들이 웹사이트의 헤더 이미지를 한 눈에 볼 수 있기 때문에 비즈니스에 대한 이미지를 구축할 때 반드시 고려해야 할 요소입니다. 이 전체 페이지 헤더는 내년에도 계속 이어나갈 매력적인 웹사이트 디자인 트렌드입니다.

    대부분의 웹사이트는 다른 탭과 웹페이지에서 왼쪽 상단에 정보를 넣는 편입니다. 모든 정보를 웹사이트 왼쪽에 배치하는 이유는 방문자들이 보통 왼쪽에 배치되는 콘텐츠에 자연스럽게 끌리기 때문입니다. 이것이 왜 중요한 정보들이 웹사이트 왼쪽에 배치되는 이유입니다.

    웹사이트에 대한 방문자들의 생생하고 흥미로운 인식을 받기 위해 헤더 이미지에 비즈니스에 대한 컬러풀한 이미지와 정보를 포함시키는 것이 좋습니다.

    2. 패럴렉스 스크롤 효과(Parallax Scroll Effect)

    패럴렉스 스크롤 효과
    패럴렉스 스크롤 효과

    패럴렉스 스크롤 효과가 수 년간 유행하고 있습니다. 이 패럴렉스 스크롤 효과는 웹사이트의 배경을 스크롤할 때 배경보다 느리게 이동할 수 있도록 하는 웹사이트 디자인 기법입니다. 패럴렉스 스크롤 효과 전략을 통해 3D 효과는 깊이를 더하여 웹사이트를 스크롤할 때 방문자의 브라우징 경험에서 더 높은 매력을 보여줍니다.

    이러한 효과를 웹사이트에 추가하면 방문자들에게 스크롤할 때 보다 새롭고 독특한 경험을 제공합니다. 그럼에도 불구하고 페럴렉스 스크롤 효과를 적용하는 것이 중요합니다. 그렇지 않으면 부정적인 결과가 우세할 할 것입니다. 제대로 구현되지 않으면 방문자들이 중요한 정보로부터 주의가 산만해질 수 있기 때문입니다.

    또한 패럴렉스 스크롤 효과가 서로 균형을 이루도록 합니다. 이 외에도, 이 효과가 불편하다고 생각하는 사용자를 위해 패럴렉스 스크롤 효과를 꺼두는 옵션을 포함할 수 있습니다.

    3. 수평 스크롤(Horizontal Scrolling)

    수평 스크롤
    수평 스크롤

    패럴렉스 스크롤 효과와 유사하게 디자이너들도 수평 스크롤 실험을 시작했습니다. 이것은 웹사이트를 묘사하는 다른 방식이며, 방문자들이 평소와는 다른 것을 얻는 새로운 방법입니다. 그러나 수평 스크롤을 구현하는 디자이너는 방문자들이 웹사이트를 쉽게 탐색할 수 있도록 옵션과 네비게이션을 유지합니다.

    수평 스크롤을 적용할 때 디자이너는 콘텐츠의 명확한 시각적 표현을 추가하여 방문자들이 쉽게 탐색하기 어렵게 만드는 호버 뒤에 단서가 숨겨지지 않도록 하는 것이 이상적입니다.

    수평 스크롤이 매력적으로 보이고 웹사이트에 독특한 터치를 더하지만 긍정적인 영향을 주기 위해서는 각각의 중요한 측면을 염두에 두는 것이 중요합니다.

    4. 멀티미디어 경험(Multimedia Experiences)

    많은 사람들이 빠른 인터넷에서 접속하는 것이 보편화된 요즘 같은 최첨단 기술 세계에서는 멀티미디어와 웹 경험을 어디에서나 디스플레이될 수 있습니다.

    텍스트, 영상, 오디오와 같은 시각적 요소를 함께 사용하여 타깃 사용자에게 최고의 사용자 경험을 제공할 수 있습니다. 그러나 최신 연구들은 모션과 오디오를 조합해서라도 단순성을 유지하ㄴ 것이 지나치게 복잡한 내용보다 훨씬 더 큰 영향을 미친다는 것을 보여주었습니다.

    때때로 너무 많은 효과를 한꺼번에 사용하는 것은 방문자들이 보거나 이해하기에는 너무 산만하거나 압도적일 수 있습니다. 따라서 디스크립션(Description) 텍스트에 이미지에 대한 대체 텍스트(Alternative text)를 포함하는 등 콘텐츠의 접근성을 극대화하기 위해 다양한 미디어 포맷을 신중하게 사용하는 것이 중요합니다.

    예를 들어, 단순히 영상 또는 모션 콘텐츠를 자동으로 재생하는 대신 사용자가 원하는 대로 콘텐츠를 재생하고 일시중지할 수 있는 ‘재생’ 버튼을 제공하는 것이 이상적입니다. 멀티미디어로부터 효과적이고 접근하기 쉬운 결과를 얻기 위해서는 다양한 요소들을 적절하게 다루어야 합니다.

    5. 삽화(Illustrations)

    삽화
    삽화

    단순히 어린이들만 만화 일러스트를 즐긴다는 생각은 확실히 잘못된 생각입니다. 모든 연령대에 걸쳐 많은 사람들이 일러스트에 매료되어 있습니다. 마찬가지로 웹사이트에 게시되면 모든 연령대에서 관심을 나타내는 것으로 나왔습니다. 만화 일러스트가 유행한지는 꽤 되었습니다.

    만화 일러스트는 브랜드/비즈니스의 재미와 흥겨운 부분을 관련성있게 만들어야 하기 때문에, 많은 창의력을 요하는 어려운 작업이기도 합니다.

    웹사이트에 만화 일러스트를 넣을 때는 디자이너들이 만화 캐릭터에 능숙하게 작업을 하면서 방문자들이 웹사이트를 계속 볼 수 있도록 하는 단편 소설을 그리는 것이 중요합니다.

    6. UI/UX에 포커스(Focus on UI/UX)

    웹사이트를 디자인하기 전에, 마케터는 타깃 잠재 고객들을 염두에 둘 필요가 있습니다. 이렇게 하면 사이트에 있는 사용자가 쉽게 액세스할 수 있는 웹사이트를 개발할 수 있습니다. 또한 불필요한 것으로 판명되는 부분들을 추가하는 걸 피할 수 있습니다.

    또한 웹사이트가 로딩되는데 너무 많은 시간이 걸리지 않도록 하는 것이 중요합니다. 또한 웹사이트가 활성화되기 전에 오작동이나 오류를 확인하고 처리하세요. 웹사이트의 모든 수정 사항들이 스마트폰에 최적화되었는지 확인하는 것이 중요합니다.

    어떤 사람들이 그들의 웹사이트가 반응형 웹인지 아닌지 확인하는 것을 잊기도 하는데, 이는 사이트의 성공에 있어서 대단히 중요한 요소 중 하나입니다. 웹사이트가 완벽하게 작동하고 데스크톱 및 모바일 사용자 모두에게 최적화되어야 합니다. 이는 바로 UI/UX 디자인에 주의를 기울여야 한다는 의미입니다.

    7. 스크롤 카드(Scrolling Cards)

    스크롤 카드
    스크롤 카드

    스크롤 카드 형태로 디스플레이되는 웹사이트에 디자이너들이 추가하는 요소입니다. 이러한 표현은 웹사이트에 독특한 감성을 더해주며, 요즘 유행하는 특성이기도 합니다.

    하지만, 카드 레이아웃은 오래된 특성 중 하나로 여겨집니다. 하지만 스크롤 카드에 이미지와 그래픽 표현을 추가함으로써 웹사이트를 방문자들에게 더욱 매력적으로 보이게 만들 수 있습니다.

    8. 오디오 표현(Audio Representations)

    오디오 표현을 추가하는 것은 온라인에서 브랜드를 가장 잘 표현하는 새로운 방법으로 사용될 수 있습니다. 이 밖에도 시각 장애인을 위해 웹 접근 장벽도 없앨 수 있습니다. 이는 굳이 텍스트를 읽는 것보다는 오디오로 듣는 것을 선호하는 모든 사람들에게도 큰 도움이 되기 때문에 웹사이트 디자인에 오디오를 통합하는 것은 매우 중요한 특성이 됩니다.

    여러 웹사이트들에서 이 기능을 더하는 것이 추세가 되고 있으며 대부분의 웹사이트에서 볼 수 있는 기능과는 확실히 다릅니다.

    9. 맞춤 커서(Custom Cursors)

    커서는 방문자들이 웹사이트에 도착하면 보게되는 가장 중요한 요소 중 하나입니다. 커서가 눈에 띄는 만큼, 몇 년 동안은 크게 신경쓰지 않았습니다. 이는 웹 디자인에서 가장 중요하면서도 동시에 간과되는 측면이기도 합니다.

    비록 대부분의 사람들이 웹사이트에서 기본적인 구식 화살표 커서에 만족하고 있지만, 만약 웹사이트에서 이 작고 관련성 높은 요소를 성공적으로 바꿀 수 있다면, 이는 웹사이트의 성공을 보여주는 가장 중요한 성과 중 하나가 될 것입니다.

    최근에는 각자 각기 다른 유형의 커서를 가지고 있는 웹사이트를 만날 수 있을 것입니다. 이런 다양한 맞춤화는 사용자가 시각적 표현을 할 때 색상 또는 그래픽의 변경에 따라 바뀝니다. 이러한 사소한 업데이트는 웹사이트의 전체적인 경험을 향상시킬 수 있는 중요한 역할을 할 것입니다.

    결론

    거의 매년 웹디자인에 새로운 트렌드가 생겨나고 마케터들은 그에 따라 보다 많은 잠재 고객들을 웹사이트로 이끌기 위해 노력하고 있습니다. 그러나 디자인과 트렌드는 끊임없이 변화하고 있어 디자이너들은 지속적으로 품질을 유지해야 합니다.

    잠재 고객들은 언제나 현란하고 화려한 것만을 찾는 건 아닙니다. 대신 사람들은 비즈니스 스타일에 맞춰 고유하고 독특한 경험을 제공하는 웹사이트를 방문하고 있습니다.

    위에서 언급한 내용들과 함께 최신 트렌드와 디자인이 포함된 웹사이트를 구축하고, 높은 품질의 유저 경험을 선사해야 합니다. 또한 웹사이트가 언제 생겼든 상관없이 지속적으로 업데이트를 하여 유저 경험을 지속적으로 향상시켜야 합니다.

     

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

     

     

  • E-커머스의 매출 향상을 위해 지금 즉시 실행할 수 있는 2가지 방법

    E-커머스의 매출 향상을 위해 지금 즉시 실행할 수 있는 2가지 방법

    E-커머스의 매출 향상을 위해 지금 즉시 실행할 수 있는 2가지 방법

    (참조 자료: 2 Things To Do Right Now to Increase Sales on Your eCommerce Site)

    아무리 온라인을 통해 제품을 파는 기능을 완벽히 마스터하였어도, e-커머스 사이트의 CRO를 지속적으로 개선시키지 않는다면, 이는 매출 하락에도 큰 영향을 줄 것입니다.

    CRO는 무엇인가 

    E-커머스의 성공은 일반적으로 아래 2가지 요소에 의해 결정됩니다.

    • 잘 작동되는 e-커머스 사이트
    • 높은 트래픽

    CRO, 즉 전환율 최적화(Conversion Rate Optimization)는 여러분이 가지고 있는 방문자 수를 더욱 극대화하기 위해 그 기초 토대를 닦는 것입니다. 본질적으로 이는 현재 e-커머스 사이트가 받고 있는 일정 규모의 방문자 트래픽에서 얼마나 많은 구매를 끌어오게 만드느냐에 관한 것입니다.

    여기 이를 위해 가장 널리 알려진 방법 2가지를 소개합니다.

    1. 사용자 경험을 고려하세요.

    e-커머스 성공의 핵심은 바로 사용자 경험(UX)입니다. 방문자가 웹사이트에 처음 방문했을 때의 몇 초간의 느낌은 온라인 쇼핑 여행에서의 첫 번째 단계입니다.

    전환율 극대화에 초점을 두고 홈페이지를 정리하는 것은 사용자 경험을 개선시킬 수 있는 방법 중 하나입니다. 강렬한 문구를 사용하고 페이지를 보다 비주얼스럽게 만들어 방문자들을 주목하게 만듭니다. 또한 단순하고 깔끔한 디자인은 방문자로 하여금 혼란스럽지 않고 마케터들이 원하는 액션을 명확히 이들에게 요청할 것입니다.

    어느 한 e-커머스 기업의 사례를 살펴 봅시다. 그들은 제품 비교 페이지에 아래와 같은 기술을 활용하여 40.81%의 매출 증가를 달성했습니다. 도대체 무슨 일이 있었던 것일까요?

    • 셀링 포인트(Selling Point)의 가독성을 높이기 위해 보다 비주얼적으로 재구성
    • 제품 기능에 대한 자세한 설명 추가
    • CTA 링크 수를 최소화
    • 공백 공간이 주는 페이지의 미학 활용

    만약 여러분의 페이지가 쿠폰 제공, 많은 링크, 혹은 하나 이상의 CTA를 담고 있다면, 이들을 정리하지 않는다면 판매에서 많은 손실을 얻을 수 있을 것입니다. 제품 페이지에 머물고 있는 방문자는 구매 확률이 보다 높습니다.  그러기 때문에 무언가를 장바구니에 추가하면서 방문자들을 방해하지 마시기 바랍니다.

    2. 제품 페이지에 초점을 맞춰라.

    물론 홈페이지를 최적화하는 것은 매우 중요합니다. 그러나 만약 방문자가 제품 페이지에 바로 접속하게 된다면 어떨까요? 제품 페이지를 최적화하는 것은 너무나 중요합니다. 이들 페이지 역시 랜딩 페이지로 여긴다면 전환율 상승 효과를 얻을 수 있을 것입니다.

    여러분의 목표는 장바구니에 제품을 추가하는 방문자들이 증가하는 것입니다. 제품 페이지는 오로지 하나의 CTA만 담아야 하며 그것은 ‘장바구니 담기’ 이여야 할 것입니다.

    버튼은 최대한 크게 만들며, 상단에 위치해야 하고, 비주얼적으로 방문자의 주목을 끌 수 있을 만큼 돋보여야만 합니다. 결코 다른 CTA 버튼이나 혜택 제공, 디자인 요소들로 메인 CTA와 혼동되어 방문자들을 혼란스럽게 하지 마세요.

    결론

    지속적으로 모든 시점에서 e-커머스 사이트 방문자들을 설득하지 않는다면 CRO 작업을 충실히 하고 있는 다른 사이트에 고객들을 빼앗길 것입니다.

    1. 사용자 경험(UX) 향상을 위해 홈페이지 정리
    2. 랜딩페이지와 마찬가지로 제품 페이지의 CRO 작업

    e-커머스 시장에서 살아남고 싶다면 CRO를 단순한 기능적인 요소로 생각할 뿐만 아니라 여러분의 게임 안에 이를 포함시키세요.

     

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

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

  • 2016 전환율 최적화 5가지 방법

    2016 전환율 최적화 5가지 방법

    \2016 전환율 최적화 5가지 방법

    (참조 자료: 5 Advanced Conversion Rate Optimization Tips For 2016)

    2016 전환율 최적화 5가지 방법
    2016 전환율 최적화 5가지 방법

    이 글을 읽고 있는 마케터 여러분 중 대부분이 웹사이트 트래픽 증대를 위해 다양한 마케팅 활동을 해왔을 텐데요, 아무리 웹사이트에 많은 방문자가 방문하였다하더라도 전환, 판매나 혹은 비즈니스 성장이 없다면 아무것도 일어나지 않는 것과 같습니다. 과연 무엇이 잘못된걸까요?

    고객들이 랜딩 페이지에 방문하였을 때 여러분들은 아래와 같은 액션을 요청할 수 있을 것입니다.

    • 뉴스 레터 구독을 위한 이메일 주소 입력
    • 구매 상담을 위한 연락처 남기기
    • 제품 관련 백서 다운로드
    • 구매하기

    그것이 무엇이든 방문자가 웹페이지에서 마케터가 의도한 액션을 하였을 때, 이를 전환(Conversion)했다고 말합니다. 불행하게도 많은 트래픽을 얻는 것이 반드시 전환이 많다는 것을 의미하는 건 아닙니다. 이것이 바로 CRO(Convension Rate Optimatization) 전략, 즉 전환율 최적화가 필요한 이유이지요.

    전환율 최적화는 방문자수 대비 가능한 한 많은 전환을 끌어올 수 있게 랜딩 페이지를 최적화하는 작업입니다. 가능한 한 최대한 많은 데이터를 모으고, 다른 전환이 잘 이루어지는 웹사이트들을 연구하고, 여기서 얻은 인사이트를 바탕으로 여러분의 웹사이트의 내용을 바꾸는 일련의 과정이 모두 여기에 해당됩니다.

    2016년 현재, CRO 전략을 위한 가장 효과적이고 최신 팁 5가지를 지금부터 소개합니다.

    1. 웹사이트 트래픽 데이터 수집 및 분석

    현재 웹사이트가 어떠한 상태인지 정확히 알기 전에는 어떠한 것도 하지 마십시오. 이를 위해 구글 애널리틱스 등 애널리틱스 프로그램을 활용하여 트래픽 데이터를 면밀히 분석해야 합니다. 이를 통해 여러분은 향후 마케팅 활동에 대한 인사이트를 얻게 될 것입니다.

    전환율 최적화를 위한 트래픽 분석
    ㄴ 전환율 최적화를 위한 트래픽 분석

    이러한 분석 활동은 어떤 사람들이 웹사이트를 방문하는지, 주로 언제 방문하는지, 또 어떤 디바이스를 통해 많이 접속하는지 등 다양한 데이터를 알려줍니다. 지금은 이러한 정보를 아는 것이 그 어느 때보다 중요합니다. 사람들이 다양한 데스크톱 뿐만 아니라 모바일, 태블릿 등 멀티 디바이스를 사용하고 있기 때문이죠. 그러기 때문에 전환율 최적화 작업에 있어서, 각기 다른 곳에 있는 사용자 행동이나 활동을 정확히 이해하고 최적화 작업이 필요한 곳을 명확히 타깃하여 작업을 진행해야 할 것입니다.

    페이지 별 명확한 데이터를 갖게 되었을 때, 여러분은 전환이 많은 페이지나 전환이 낮은 페이지, 그리고 그 중간에 있는 페이지로 세분화하여 최적화 작업을 진행할 수 있을 것입니다. 뿐만 아니라 모바일에서의 트래픽이 높은 페이지와 데스크톱에서의 트래픽이 높은 페이지 등으로 각가 세분화할 수 있다면 여러분은 모바일 트래픽이 많으면서 성과도 높은 페이지로부터 전환율 최적화 아이디어를 얻어 동일하게 모바일 트래픽은 높지만 성과는 낮은 페이지에 적용할 수 있습니다.

    만약 비교할 만한 랜딩 페이지가 없다면, 더 많은 모바일 사용자가 방문하는 페이지가 있는지 없는지 아는 것 만으로도 전환율 최적화를 위한 출발점을 제시해 줄 것입니다.

    여러분은 또한 이 애널리틱스 데이터를 방문자들이 어느 지점에서 웹사이트를 이탈하는지 파악하는 데 사용할 수 있을 것입니다. 누군가가 웹사이트를 방문하고 다른 페이지로 넘어가고 나서 바로 이탈을 했다면 무엇이 문제였는지 신속하게 조사할 필요가 있습니다. 해당 페이지가 사람들이 이탈하게끔 만들고 있다는 것을 알게 되면서 전환율 최적화 작업은 시작됩니다.

    2. 작은 전환을 무시하지 마세요.

    전환율 최적화 작업에서 단순히 판매와 같은 큰 전환에만 초점을 맞추는 것은 매우 근시안적인 해석입니다. 물론 구매나 회원 가입 등에서 많은 전환이 일어나는 것은 매우 중요합니다. 그러나 소셜미디어 클릭이나 공유와 같은 작은 전환들 역시 결국 최종적으로 이러한 큰 전한에 영향을 끼치는 요소들입니다. 여러분이 만약 이러한 작은 전환들을 무시한다면 궁극적으로 큰 전환에 좋지 않은 영향을 끼치게 될 것입니다.

    아래는 CRO 전략에서 눈여겨 보아야 하는 작은 전환들의 몇 가지 예시입니다.

    • 무료 체험판 다운로드
    • 자세한 제품 설명을 보기 위한 링크 클릭
    • 비디오 보기
    • 콘텐츠 좋아요 및 공유
    • 이메일 뉴스레터 구독
    • 소셜미디어 아이콘 클릭 및 팔로우

    위와 같은 작은 전환을 한 두 개 정도 실행하는 고객들은 더 큰 전환으로 넘어갈 가능성이 더욱 커지게 됩니다.

    이것은 여러분의 웹사이트를 고객들이 실제로 고급 초콜릿을 판매하는 실제 오프라인 매장처럼 느껴지게 도와줄 것입니다. 물론 여러분 역시 웹사이트 방문자를 마치 실제 매장 앞에 걸어가던 중 찰나의 순간 매장을 둘러보고 매력을 느껴 문을 열고 매장을 들어와 구매까지 하는 오프라인 고객처럼 여겨야 할 것입니다.

    물론 신중하고 천천히 접근을 하는 고객도 있겠지요. 첫 방문에선 단지 둘러보기만 할 수도 있습니다. 그리고 점원에게 몇 가지 질문을 던지고 관련 브로셔를 들고 나갈 것입니다. 나중에 또 다시 방문해서 무료 샘플을 요청할 수도 있겠지요. 결과론적으로 이와 같은 방문자 한명 한명을 모두 케어하고 작은 전환을 하나씩 유도한다면 결국엔 구매에까지 이르게 될 것입니다.

    이것이 바로 전환율 최적화에서 작은 전환을 무시하지 말아야 하는 이유이고, 이 같은 작은 전환 시에, 사용자 환경을 쾌적하게 만드는 데 모든 노력을 기울여야 할 것입니다.

    3. 웹사이트 내 사용자 행동 모니터링

    이것은 여러분이 고객에 대해 수집해야 할 2번째 데이터 유형입니다. 웹사이트 방문자의 행동 분석 데이터이며, 구글 애널리틱스에서 제공하는 고객 데이터와는 조금 다른 유형의 인사이트를 제공합니다.

    웹사이트를 방문한 고객이 어떤 행동을 하고 있는지, 이를 위해 행동 분석 소프트웨어는 아래와 같은 열 지도 툴을 활용하게 됩니다.

    웹사이트 내 사용자 행동 모니터링
    웹사이트 내 사용자 행동 모니터링

    예를 들면, 방문자들이 많은 스크롤을 필요로 하는 웹페이지에서 스크롤을 중지하고 떠나게 되면 행동 분석 소프트웨어는 여러분에게 방문자들이 웹페이지 어느 지점에서 스크롤을 멈추고 떠났는지 알려줄 것입니다. 또한 방문자가 해당 페이지에 있는 정보를 읽기 위해 얼마만큼의 시간 동안 머물렀는지에 대한 정보도 각 위치별로 알 수도 있습니다. 심지어 유저가 어느 지점에서 마우스 포인터를 가리켰는지도 있습니다. 이것은 방문자들이 어떤 내용에 관심이 많았는지 알려주는 좋은 지표가 될 수 있습니다.

    4. 방문자에게 개인화된 경험 제공

    여러분은 이미 그 동안 개발해온 다양한 고객 페르소나에 따른 콘텐츠를 만들어 왔을 것입니다. 문제는 이 다음이죠. 웹사이트도 이같은 다양한 고객 페르소나에 따라 각기 다른 사용자 경험을 제공하고 있나요? 하나의 사이즈는 모든 콘텐츠에서 활용될 수 없습니다. 웹사이트 역시 마찬가지입니다.

    방문자에게 개인화된 경험 제공
    방문자에게 개인화된 경험 제공

    웹디자이너들이 만들고 있는 시작 페이지는 사용자에게 그들에게 가장 적합한 환경을 선택할 수 있게 해야 합니다. 예를 들어 어린 아이들을 위한 미술 도구를 판매하고 있다고 가정하면, 여러분의 웹사이트 방문자는 부모, 유치원이나 학교 선생님, 그리고 아이들 스스로가 될 수 있을 것입니다. 그들에게 모두 동일한 사용자 경험을 제공하는 것이 과연 맞을까요? 물론 아니겠지요.

    방문자들에게 그들이 누군지, 무엇을 원하는지 물어보십시오. 그런 다음, 그들이 진정으로 원하는 경험으로 그들을 직접 인도하세요.

    5. 트렌드를 무시하지 마라

    방문자가 웹사이트의 디자인을 보고 첫 인상을 갖게 되는 건 매우 찰나의 순간에 결정됩니다. 여러분이 아무리 좋은 인상을 심어주고 싶어도 방문자들은 많은 시간을 할애해주지 않습니다.

    이것은 단지 여러분이 좋은 디자인과 사용자 경험을 제공하는 것 뿐만 아니라  방문자들이 웹사이트 방문 즉시 매력적인 경험을 받아갈 수 있게 노력해야 한다는 것을 의미합니다.

    이를 위해, 여러분은 사용자 의도에 맞춰 가장 인기있는 최신 디자인 트렌드를 유지할 필요가 있습니다. 특정 트렌드는 호불호가 가릴 수 있는 반면에, 대중적으로 인기있는 디자인은 많은 사람들에게 거부감없이 다가갈 수 있기 때문이죠.

    물론 항상 새로운 것을 쫒아야 한다는 것을 의미하는 건 아닙니다. 다만 전반적인 전락 수립에 있어서 이러한 최신 트렌드가 사람들의 기대와 주목을 끌어올 수 있다는 점은 염두하고 있어야 합니다. 어떠한 변화없이 지속적으로 사람들의 관심을 끌지 못한다면 전환율 역시 떨어지게 될 것입니다.

    아래 사이트는 방문자들의 시선을 끌기 위해 패럴렉스 스크롤링(parallax scrolling) 기반의 에니메이션 형태의 디자인을 적용한 사례입니다. 최근 국내에서도 이러한 형태의 웹디자인을 적용한 사이트들이 많이 나오고 있지요.

    트렌드를 무시하지 마라
    트렌드를 무시하지 마라

    최신 웹 디자인 트렌드를 단지 플래시로만 이루어진 일시적인 유행으로만 여기지 마세요. 그것들은 보다 향상된 사용자 경험, 높은 전환율, 매끄러운 웹 구동 경험 등 높은성과를 끌어왔던 디자인이기 때문에 유명해진 것입니다. 이러한 트렌드가 결국엔 디자인 표준이 되는 것이지요.

    우선 방문자 입장에서 웹사이트를 살펴보세요. 그리고 아래와 같은 질문을 스스로에게 던져보시기 바랍니다.

    • 어떤 정보를 찾기 어려웠나?
    • 방문자에게 어떤 기능이 가장 많이 수행되길 요구되어지나? 방문자들을 그 기능을 쉽게 할 수 있나?
    • 페이지에 더해진 시각적인 요소가 사용자 경험을 해치고 있진 않은가?
    • 우리 웹사이트에 있는 기술이 다른 웹사이트에서도 구현된 것을 본 적이 있는가?

    위의 질문을 던지고 그에 대한 답이 나왔다면 이젠 여러분의 웹사이트에 구현할 수 있는 디자인을 파악하고 이를 적용할 차례입니다. 이후 A/B 테스트를 통해 수정을 반복한다면 전환율 향상을 이룰 수 있을 것입니다.

     

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

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

  • 혁신적인 사용자 경험(UX)의 E-커머스 21가지 사례

    혁신적인 사용자 경험(UX)의 E-커머스 21가지 사례

    혁신적인 사용자 경험(UX)의 E-커머스 21가지 사례

    (참고자료: 21 examples of user experience innovation in ecommerce)

    지난 10년 동안 E-커머스 분야는 놀라운 수준의 혁신을 거듭해오고 왔고 그 변화와 성장의 속도는 갈수록 점점 더 가속화되고 있는데요, 소비자는 물론, 디지털 마케터들에게도 무척 흥미로운 시대임에는 분명합니다.

    그 이유가 무엇일까요? E-커머스 시장은 무척 성숙 단계에 들어선데다 디지털 마케터들은 더욱 똑똑해졌고 민첩해졌습니다. 여기에 사용자 경험(User Experience)을 향상시켜주는 HTML5, CSS3, jQuery 와 같은 새로운 기술들도 한몫 했습니다.

    하지만 먼저 여기 몇 가지 단서가 있습니다.하나는 아무리 좋은 요소들을 가지고 있다하더라도 단 하나라도 심각한 저해요소가 있다면 다른 좋은 것들을 상쇄시킬 수 있습니다. 상품 설명 페이지에서 빠진 부분이 있다거나, 검색창 내 글꼴이 매우 작고 흐릿하거나, 사용성 문제에 심각한 오류가 있다든지 말입니다.

    두 번째, E-커머스를 거론할 떄는 데이터를 빼놓을 수 없습니다. 마케터는 끊임없이 테스트를 반복하고 측정 및 분석을 해야 하고, 이러한 케이스 스터디를 연구하는 것은 이러한 데이터 분석이 기반으로 이루어져야 합니다. 그러기 때문에 하나의 케이스 스터디를 가지고 자신의 브랜드에 그대로 적용하는 것은 위험할 수 있습니다. 그리고 어쩌면 새로운 것을 적용하는 것은 이와 같이 위험하고 쉽지 않은 결정일 수 있습니다.

    위의 모든 활동들을 지원하면서 동시에 무언가 새로운 것을 찾아 적용하는 것은 더더욱 어렵고 위험이 큰 결정입니다. 기존의 E-커머스 원리가 적용되지 않을 수도 있고, 잘 작동하지 않을 수도 있습니다. 그럼에도 불구하고 새로운 것을 끊임없이 갈망하며 혁신을 도모하는 작업은 계속 장려되어야 하는 일입니다.

    이러한 새로운 도전을 시도하는 21가지 E-커머스(하나는 모바일 앱) 사례를 소개하고자 합니다. 사용자 경험(UX)에 대한 이들 기업의 접근방식은 주목할만 합니다. 스크린샷을 클릭하면서 직접 체험해보세요.

    1. Jack Jones

    잭존스(Jack Jones)의 사용자 경험
    잭존스(Jack Jones)의 사용자 경험

    클러스트링(Clustering)은 E-커머스 업계의 뜨거운 핫 이슈 중 하나입니다. 개별적인 제품보다는 전체적인 코디 의상에 포커스를 하는 것은 스마트한 머천다이징(smart merchandising) 기법 중 하나입니다. 게다가 보다 많은 주문을 끌어오는데에 도움이 될 수도 있습니다. 이렇게 잭존스는 방문자들이 여러가지의 의상들을 코디해보고 비교하는데 있어서 좋은 아이디어를 보여주고 있습니다.

    2. Folks

    폭스(Folks)의 사용자 경험
    폭스(Folks)의 사용자 경험

     

    동적 / 애니메이션 효과가 있는 웹사이트 배경은 2014년 웹 디자인 트렌드 중 하나이기도 합니다. 그리고 최근에는 이러한 E-커머스 사례를 몇몇 확인할 수 있었습니다. 폭스는 홈페이지를 방문하면 최근 출시된 신제품이나 프로모션 소식보다는 미국 서부 로드트립( Road trip)을 연상케 하는 애니메이션을 보여주는 식의 특이한 접근방식을 취하고 있는데요,

    보통 E-커머스 상식에서는 도저히 이해할 수 없는 접근 방식이지만 거기에는 방문자로 하여금 즉각적으로 기분을 즐겁고 신나게 하는 무언가가 있습니다. 사이트를 방문한 순간 로드트립의 체험에서 빠져나오지 못하게 하는 묘한 매력이 있습니다.

    3. Bonarium

    Bonarium의 사용자 경험
    Bonarium의 사용자 경험

    드롭다운 메뉴는 제품들을 묘사하는 작은 드로잉 이미지와 네비게이션 레이블을 포함하고 있습니다. 또한 ‘Try Me’ 기능은 위 이미지와 같이 믹스매치(Mix and Match)가 가능한 툴로 실제 오프라인 매장 드레스룸에서 제품을 코디하여 입어보는 듯한 경험을 제공합니다. 정말 즐기지 않기가 어려운 E-커머스 경험이지요.

    4. Two Socks

    Two Socks의 사용자 경험
    Two Socks의 사용자 경험

    우선 카테고리 영역에서 화려한 프리젠테이션을 감상해보십시오. Bonarium처럼 Two Socks는 네비게이션 기능을 위해 단순히 텍스트를 사용하지 않았습니다. 비록 상품 페이지가 주요 정보에서 후순위로 조금 아래에 위치해 있지만 전반적으로 사용자 인터페이스(UI)에 디테일하게 신경을 많이 쓴 것을 확인할 수 있습니다. 예를 들어 자신의 발 사이즈를 명시하지 않았을 경우, 메시지가 뜨면서 간단하게 발 사이즈를 입력할 수 있는 필드가 깜빡거리는 빨간색으로 강조되어 표시되어집니다.

    또한 Two Socks는 양말을 사야하지만 쇼핑할 시간이 없는 사람들을 위해 귀여운 ‘비상(PULL)’ 도구를 갖추고 있는데요, 롤렛 게임 방식으로 가장 인기 있는 양말의 조합을 선택하여 고르게 합니다. 정말이지 혁신적인 기능이지요.

    5. Robstep

    Robstep의 사용자 경험
    Robstep의 사용자 경험

    고화질의 제품 샷, 색상 선택 기능, 그리고 핫스팟처럼 표시되는 네이비게이션 / 발견 툴이 갖춰진 홈페이지.

    6. MACK

    MACK의 사용자 경험
    MACK의 사용자 경험

    이 이상의 번들링(bundling) 쇼핑 경험은 없을 것 입니다. 오른쪽 상단에 상단 바에 룸(Room) / 제품(Product) 보기 버튼이 있어 제품 정보를 별도로 보거나 이미 한 방에 인테리어가 되어진 다양한 제품들을 한 번에 볼 수 있게 합니다. 룸 보기 내에서 방 안에 있는 제품 위에 커서를 대면 해당 제품의 정보를 확인할 수 있습니다. 브라우저 모드에서 방문한 쇼핑객에게는 매우 혁신적이고 색다른 체험이지요. 위에서 말한 것과 같이 번들판매 효과가 높아지는 것은 물론입니다.

    7. Soulland

    Soulland의 사용자 경험
    Soulland의 사용자 경험

    제품 설명 페이지 마다 들어가 있는 수많은 영상들로 사이트가 꽉 차있습니다. 물론 무겁고 어수선해보일 수 있지만, 적절한 밸런스를 유지하고 있고 제품 영상으로 인해 쇼핑경험의 현실감을 높였습니다.

    8. Protest

    Protest의 사용자 경험
    Protest의 사용자 경험

    Protest의 아이디어인 lookbook은 풀 스크린의 이미지로 더 자세한 제품 정보를 얻기 위해 오른쪽 메뉴에서 슬라이드 형식으로 제품 페이지가 제공되며 다른 제품을 보기 위해서는 스크롤 혹은 왼쪽에 위치한 네비게이션 바로 또다른 풀 스크린 사이즈의 제품 이미지를 확인할 수 있게 합니다.

    그리고 아주 마이크로한 UX이기는 하지만 상하의 다른 lookbook에 이동할 수 있도록 커서의 위치에 따라 마우스 표시가 바뀝니다.

    9. Vertty

     

    Vertty의 사용자 경험
    Vertty의 사용자 경험

    Vertty는 여러 장의 삼각형의 타올을 이어붙인 듯한 모양으로 비치타올을 재탄생시킨 매력적인 브랜드입니다. 

    Vertty의 홈페이지는 방문자가 마음에 드는 색상을 선택할 수 있도록 회전 목마 형태의 초기 랜딩 페이지를 제공합니다. 일반적인 제품 페이지에서 할 수 있는 것 처럼 선택된 제품 이미지와 ‘get yours’ 버튼으로 원하는 비치 타올 색상으로 바로 다시 바꾸거나 구입할 수 있습니다.

    10. Bellroy

    Bellroy의 사용자 경험
    Bellroy의 사용자 경험

    Bellroy의 ‘Slim Your Wallet’ 캠페인에는 매력적인 부분이 매우 많습니다. 믹스매치된 아름다운 타이포그래피(typography), 아이콘 기반의 네비게이션 기능, 지갑 두께의 변화를 드라마틱하게 비주얼로 보여주는 식의 기능을 구현하는 재생 슬라이더 등 말이지요. 이 모든 것들이 제품 판매 과정에서 방문자로 하여금 이 사이트가 사랑스럽게 보여지게 합니다.

    11. House Of Fraser

    House Of Fraser의 사용자 경험
    House Of Fraser의 사용자 경험

    House of Fraser의 웹사이트가 새로 개선된 점은 많은 것들을 잘 수행하면서 쇼핑객들이 자신에게 적합한 것을 찾는 것을 도와줌으로써 반품을 최소화하시키는 True Fit 툴을 사용하게 할 수 있게 된 점입니다. 스마트한 기술과 동적인 콘텐츠가 이를 완성시켰지요.

    12. Amazon

    아마존 앱의 사용자 경험
    아마존 앱의 사용자 경험

    아마존 모바일 앱을 통해 장바구니에 제품을 담으면 진동이 울리게 됩니다.

    13. Currys

    Currys의 사용자 경험
    Currys의 사용자 경험

    검색창에서 작은 마이크 아이콘을 확인할 수 있습니다. 이 뜻은? 그렇습니다… Currys와 함께 E-커머스 업계에도 음성 검색이 지원되기 시작했습니다.

    14.  Barbour의 크리스마스 사이트 사용자 경험

    Barbour의 크리스마스 사이트 사용자 경험
    Barbour의 크리스마스 사이트 사용자 경험

     

    사이트 내 애니메이션 효과를 보셨나요? 활활 타오르는 불, 눈송이, 스크롤의 움직임에 따라 사이트의 배경 및 오브젝트가 시간차를 두고 면하는 기술인 시차 스크롤링(parallax scrolling), 뛰어다니는 개, 영상 속에서 나오는 다양한 핫스팟 지점과 울새(robins)… 이 귀여운 울새를 사랑하지 않을 이 누가 있을까요?

    15. Sinstar

    Sinstar의 사용자 경험
    Sinstar의 사용자 경험

    여기 lookbook과 핫스팟으로 구성된 또 하나의 온라인 의류 쇼핑몰이 있습니다.

    16. Colette Malouf

    Colette Malouf의 사용자 경험
    Colette Malouf의 사용자 경험

    고화질의 제품 이미지에 포커스하되, 제품 이미지 위에 커서를 올려놓을 때마다 호버(Hover) 스타일로 흐릿해진 제품 위에 텍스트로 상세한 제품 정보가 뜨는 매우 깔끔하고 직관적인 E-커머스.

    17. Fiorly

    Fiorly의 사용자 경험
    Fiorly의 사용자 경험

    브랜드, 제품, 소비자와 관한 수많은 레이저 절삭기 콘텐츠를 갖춘 이 사이트는 매우 깨끗한 이미지에 포커스하고 있습니다. 다른 21가지 사례 중 가장 혁신적인 사례는 아니지만 확실히 제품의 종류와 성격에 적합한 느낌을 만들고 있습니다. 특히 보석 공예 전문가가 나온 영상은 소비자들에게 이 제품이 어떠한지 가장 잘 표현해주고 있습니다.

    18. Greats

    Greats의 사용자 경험
    Greats의 사용자 경험

    신발의 모양을 입체적으로 살펴볼 수 있게 신발을 회전시킬 수 있습니다.

    19. KitchenAid

    KitchenAid의 사용자 경험
    KitchenAid의 사용자 경험

    KitchenAid는 자동완성 기능을 포함한 매우 훌륭한 제안 검색 기능을 제공하고 있습니다. 물론 이것은 KitchenAid 만의 고유한 기술은 아닙니다. 그렇지만 그 동안 정말 많은 리테일 업체들이 이러한 서비스를 도입하려 노력하지 않았던 것은 분명합니다.

    20. Noon

    Noon의 사용자 경험
    Noon의 사용자 경험

    단순히 이미지만으로 사이트내 모든 커뮤니케이션과 스토리를 완성하는 초울트라급의 이미지 위주의 접근 방식을 보여주고 있습니다.

    21. Kershaw Knives

    Kershaw Knives의 사용자 경험
    Kershaw Knives의 사용자 경험

    Kershaw Knives는 매우 뛰어난 사용감을 자랑하는 E-커머스입니다. 제품을 고르는 복잡하고 많은 생각을 심플한 네비게이션 및 특징에 따른 필터링 기능으로 없애주고 있습니다. 그 뿐만 아니라 사이트 이곳저곳 매우 디테일한 요소들을 많이 찾아볼 수 있습니다.

     

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

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