21가지 흔한 웹사이트 디자인 실수

[은구슬]

21가지 흔한 웹사이트 디자인 실수

웹사이트가 원하는 결과를 얻지 못하고 있다면, 아마도 디자인의 문제가 상당수일 것이다.

Studio 1 Design은 피해야 할 웹사이트 디자인 실수에 대해 다음과 같이 공유했다.

#1 구식 룩앤필

웹사이트는 타깃 고객에게 어필할 수 있어야 한다. 웹사이트가 몇 년 동안 업데이트되지 않아 구식처럼 보인다면 잠재 고객은

여전히 관련성이 있다고 생각하지 않을 수 있다. 더 나쁜 경우, 잠재고객은 웹사이트가 보이는 모습만큼 비즈니스도 좋다고

생각할 수 있다. 

#2: 가치를 먼저 제시하지 않음

방문자의 97%는 구매할 준비가 되어 있지 않는다. 사람들이 방금 웹사이트를 발견했다면 구매로 이어질 가능성은 거의 없다. 

따라서 바로 판매를 시도하는 대신 가치를 먼저 제시한다. 이는 리드 마그넷, 유용한 정보 또는 가치 제공으로 이어지는

콘텐츠의 형태가 될 수 있다. 

#3: 리드 마그넷 없음 

웹사이트 방문자의 70%는 재방문하지 않는다. 따라서 방문자가 웹사이트에 참여할 이유를 제공해야 한다.

 방문자가 관심을 갖는 것은 '자신에게 어떤 이득이 있는지'뿐으로 방문자가 여러분을 알고, 좋아하고, 신뢰해야 할 이유를

제공해야 한다. 체크리스트, 퀴즈, 다운로드 가능한 가이드, 비디오 시리즈, 챌린지, 무료 평가판, VIP 클럽 혜택 등을 제공,

냉담한 잠재 고객을 교육하여 여정을 돕는다. 무료 콘텐츠는 블로그 게시물, 무료 팟캐스트, 무료 동영상의 형태일 수도

있으며 이메일 주소를 캡처하는 것이 목표일 수도 있다. 

#4: 마케팅 퍼널이 없음

리드 마그넷을 확보하는 것은 시작에 불과하다.

아직 구매할 준비가 되지 않은 냉담한 잠재 고객을 확보하려면 시간이 지남에 따라 신뢰를 구축하도록 설계된 마케팅 퍼널이

필요하다. 마케팅 퍼널이 있는 비즈니스는 매출이 크게 증가할 가능성이 두 배나 높다. 

#5: '감사합니다' 페이지 제안 없음

누군가가 무료 리드 마그넷을 선택하면 대부분의 기업은 '무료 전자책을 다운로드해 주셔서 감사합니다'라는 간단한 페이지로 고객을 보낸다. 그러나 이러한 접근 방식은 잠재적으로 기회를 놓칠 수 있다. 잠재 고객은 방금 무료 제안에 '예'라고 답했으며 더 많은 것을 원할 수 있으므로 더 많은 것을 얻을 수 있도록 해야한다. '감사' 페이지에 웨비나, 설문조사, 무료 전략 세션, 기간 한정 혜택 등 다른 제안을 추가한다. 고객이 다음 제안을 받아들일 준비가 되어 있지 않거나 시간이 없을 수 있으므로 동일한 제안을 이메일로 보내야 한다.

#6: 충분한 사회적 증거를 보여주지 않음

사회적 증거는 사람들이 웹사이트에서 행동을 취하도록 영향을 미치는 가장 강력한 심리적 요소 중 하나이다.

사람들은 웹사이트의 주장에 회의적이며, 그 주장이 사실인지 확인하기 위해 다른 사람들을 찾는다. 따라서 기존 고객의 소셜

증거 추천글이나 사례 연구는 제품이나 서비스가 훌륭한 결과를 가져온다는 증거가 될 수 있다. 

▲서면 평가 ▲동영상 추천 ▲스토리 기반 사례 연구 ▲추천된 권위자(권위자와 함께 찍은 사진) ▲고객 리뷰 ▲고객 로고 

▲숫자 등이 웹사이트에 사회적 증거를 표시하는 방법이다.

#7: 권위를 표시하지 않음

사람들은 신뢰할 수 있는 전문가를 신뢰하므로 틈새 시장의 전문가임을 증명하기 위해 웹사이트에 자신의 권위를 표시해야

한다. 이는 헤드라인, 태그 라인, 무대에서 연설하거나 팀과 함께 현장에서 도구를 사용하는 이미지로 표시할 수 있다. 

박사, 저자, 연사 등과 같은 자격 증명을 표시한다. 또한 블로그 게시물, 팟캐스트, 동영상, 인포그래픽 등의 형태로 지식을

공개하는 것도 권위를 보여줄 수 있는 좋은 방법이다. 

#8: 동영상을 사용하지 않음

사람들은동영상을 시청하는 것을 좋아하므로 웹사이트에서 동영상을 활용하는 것이 좋다. 

특히 잠재 고객의 상황을 이해하고 문제에 대한 해결책을 제시하는 모습을 카메라에 직접 대면하여 이야기하는 동영상은

신뢰를 구축하는 강력한 방법이다. 동영상을 사용하여 고객의 이야기를 전달할 수도 있다. 고객의 평가와 사례 연구를

동영상에 담으면 부인할 수 없는 사실이기 때문에 서면 평가보다 훨씬 더 믿을 수 있다.

#9: 끔찍한 카피라이팅 

주인공은 고객이다. 비즈니스가 가이드이므로 카피라이팅에 이를 반영해야 한다. 

중소기업 소유주가 카피를 작성할 때 저지르는 가장 큰 실수 중 하나는 자신과 비즈니스에 대한 모든 것을 작성하는 것이다. 

냉담한 방문자가 처음에 관심을 갖는 것은 '그들에게 무엇이 있는가'이다. 그들은 당신이 그들의 문제에 대한 해결책이 있는지

알고 싶어한다. 카피라이팅의 목표는 방문자를 감정적으로 사로잡은 다음, 제안과 혜택을 설명하고, 주장을 뒷받침하고,

솔루션이 효과가 있다는 것을 보여줄 수 있는 과거 고객의 증거를 확보하는 것이다. 

#10: 'CTA'를 찾기가 어려움

명확한 '클릭 유도 문안'(CTA)을 통해 방문자가 웹사이트에서 다음에 무엇을 하길 원하는지 명확하게 안내해야 한다.

이상적으로는 CTA를 통해 방문자가 전환에 한 걸음 더 가까워지고 궁극적으로 판매 프로세스로 이어질 수 있다. 

버튼 색상이 사람들의 주의를 끌 수 있을 만큼 대비가 충분한지 확인한다. 주변에 여백을 추가하면 더 많은 관심을 끌 수 있다.

그런 다음 모든 페이지에 하나의 일관된 버튼 색상을 유지하여 방문자가 다음에 클릭해야 할 항목을 쉽게 알 수 있도록 한다.

또한 잠재 고객이 오퍼를 쉽게 찾을 수 있도록 모든 페이지에 CTA를 배치한다. 버튼을 누를 때 어떤 일이 일어날지 설명하는

문구를 CTA 버튼에 사용한다. 따라서 문의 양식에 제출이라고 쓰는 대신 문의 보내기라고 한다.

#11: 탐색하기 쉽지 않음 

방문자가 원하는 정보를 쉽게 찾을 수 있어야 한다.

웹사이트의 탐색 방식이 대부분의 사람들이 익숙한 방식과 너무 다르면 방문자가 사이트를 떠날 위험이 있다. 

웹사이트의 탐색 기능을 너무 창의적으로 만들려고 해서는 안된다. 웹사이트 상단에 배치하여 전통적인 방식을 유지한다. 

여러 카테고리를 제공하는 경우 왼쪽 탐색을 추가하여 제품을 쉽게 필터링할 수 있게 한다. 

#12: 디자인 요소의 계층 구조 없음

웹사이트 페이지 상단부터 하단까지 각 섹션은 이해하기 쉬워야 하며, 방문자가 다음 단계로 넘어가도록 유도할 수 있을 만큼

시선을 사로잡아야 한다.(스크롤하기, 버튼 클릭하기, 동영상 시청하기 등) 불필요한 요소를 제거하고 나머지 요소를 페이지에 신중하게 배치하여 메시지를 강화하고 제안을 명확하게 전달하면 이를 달성할 수 있습다. 특히 훌륭한 사용자 경험과 디자인을 위해서는 군더더기가 적을수록 좋다. 페이지가 너무 많은 내용으로 어수선하면 방문자에게 압도적인 느낌을 주고 사이트를 떠날 수 있으므로 처음에는 작은 약속만 하면 된다는 점을 기억하고 명확성에 집중해야 한다.

#13: 스톡 이미지가 너무 많음

많은 비즈니스가 싸구려 스톡 사진을 사용하여 웹사이트를 촌스럽고 진부하게 만든다.

가능한 비즈니스 고유의 이미지를 사용하거나 사진작가를 고용하여 자신과 비즈니스와 관련된 사진을 촬영한다.

촬영한 비즈니스 사진은 유명 브랜드가 될 수 있는 브랜드를 구축하는 데 도움이 된다. 

스톡 이미지를 사용하는 경우 최소한 브랜드에 더 가깝고 비즈니스에 고유하도록 맞춤 설정해야 한다.

#14: 이미지 슬라이더 사용

슬라이더에서 움직이는 이미지는 시선을 사로잡는 화려하고 흥미로운 방법처럼 보일 수 있지만 실제로는 전환을 감소시킬 가능성이 높다. ▲ 눈은 움직임에 반응하기 때문에 중요한 내용, 즉 각 배너의 단어를 놓칠 수 있고 가독성을 떨어뜨린다. 페이지에서 다른 내용을 읽으려고 할 때 주의가 산만핸다. 방문자는 첫 번째 이미지의 단어를 읽고 있을 수 있으므로 다음 이미지로 바뀌면 짜증이 난다. 슬라이더는 단일 이미지보다 로드하는 데 훨씬 오래 걸리므로 방문자를 짜증나게 하고 이탈률을 높일 수 있다. 슬라이더를 로드하는 데 시간이 오래 걸리기 때문에 자연 검색 결과의 순위가 낮아진다. 따라서 전환율이 가장 높은 제품을 표시하고 보너스로 오퍼에 가치를 더한다.

#15: 시차 효과가 너무 많음 

'이미지 슬라이더'와 비슷한 이유로 시차 효과는 보기에 좋을 수 있지만 산만하고 과도하게 사용하면 전환율을 떨어뜨릴 수 있다. 따라서 움직이는 효과를 최소한으로 유지하거나 아예 사용하지 않는 것이 좋다. 웹사이트에 시차 효과가 많을수록 속도가 느려진다. 모바일 디바이스는 시차 효과를 제대로 읽지 못하는 경우가 많으며 일부 효과는 모바일 디바이스에서 볼 수 없다.

#16: 검색창 없음

검색창의 역할은 방문자가 웹사이트의 제품이나 콘텐츠로 빠르게 이동할 수 있도록 돕는 것이다. 검색 기능이 없으면 방문자가 콘텐츠를 검색하고 있지만 빠르게 찾을 수 없으므로 웹사이트를 떠날 위험이 있다. 웹사이트 헤더의 상단 탐색 근처에 검색창/검색 기능을 추가하면 방문자의 시간을 크게 절약할 수 있다. 사이트 내 검색을 간편하게 처리하면 방문자의 스트레스를 줄여 매출 증대로 이어질 수 있다. 검색창이 있으면 웹사이트가 모든 검색어를 기록할 수 있으므로 가장 인기 있는 검색어를 중심으로 향후 콘텐츠를 제작할 수 있도는 좋은 데이터가 된다.

#17: 누수 지점

웹사이트로 트래픽을 유도할 때는 사람들이 불필요하게 사이트 밖으로 유출되지 않도록 웹사이트에 계속 머물 수 있도록 설계해야 한다. 소셜 미디어의 목적은 웹사이트가 비즈니스의 허브이자 서비스를 제공하는 곳이기 때문에 웹사이트로 트래픽을 유도하는 것다. 따라서 웹사이트에 소셜 미디어 버튼, 특히 스크롤 위에 소셜 미디어 버튼을 두지 않는다. 로고를 표시하여 소셜 플랫폼을 광고하는 것뿐이다.방문자가 소셜 미디어 버튼을 클릭하면 소셜 미디어로 유출되어 이탈하여 다시는 웹사이트로 돌아오지 않을 가능성이 높다. 랜딩 페이지로 유료 트래픽을 전송하는 데 투자했다면 해당 페이지에 유출 지점이 없어야 한다. 따라서 소셜 미디어 링크를 붙이지 말고 유튜브 동영상을 사용하지 않는다. 동영상 끝에 '다른 사람의 동영상'이 표시되는 것을 막을 수 있다. 결제 페이지에서 모든 내비게이션을 제거하고 구매를 위한 하나의 CTA만 제공한다. 외부 링크가 필요한 블로그 게시물이나 기타 콘텐츠가 있는 경우 링크가 새 탭에서 열리도록 하여 방문자의 웹 브라우저에서 웹 페이지가 계속 열려 있도록 한다.

#18: 소셜 상호 작용 없음

소셜 미디어를 사용하여 콘텐츠를 홍보하고 방송하는 경우 웹 사이트 방문자가 웹 페이지에서 콘텐츠에 댓글을 달 수 있도록 허용한다. 모든 웹사이트에는 방문자가 선호하는 소셜 미디어 플랫폼으로 콘텐츠를 공유할 수 있는 기능이 있어야 한다. 많은 무료 플러그인이 이를 지원한다. 웹 페이지에 댓글과 공유가 많을수록 관련 검색어에서 구글 순위가 높아진다.

#19: 연락처 정보를 찾기 어려움

얼마나 많은 웹사이트가 방문자가 연락하기 어렵게 만드는지 놀라울 정도이다. 어떤 웹사이트는 연락처 페이지나 연락처 전화번호조차 없다. 웹사이트의 관련 페이지에 판매를 지원할 수 있는 전화번호를 넣는 것이 좋다. 특히 "BUY NOW" 버튼 근처에 배치하는 것이 효과적이다. 구매자가 결제 과정에서 문제가 발생하면 신속하게 연락할 수 있으므로 안심하고 구매할 수 있다. 웹사이트에 이메일 주소를 넣지 않는다. 스팸 봇을 끌어들여 많은 정크 이메일을 수신하게 된다. 대신 찾기 쉬운 문의 양식을 만든다. 또한 웹 사이트에서 실시간 채팅을 사용하여 문의 및 고객 이의 제기에 답변할 수 있도록 하는 것이 좋다.

#20: No custom 404 page

대부분의 404 페이지에는 단순히 찾고 있는 페이지가 존재하지 않는다는 메시지가 표시된다. 사람들이 404 페이지로 이동하는 것은 매우 흔한 일이므로 사람들이 올바른 경로로 돌아갈 수 있도록 설계해야 한다. 따라서 404 페이지에 검색 상자를 배치하고 제품 또는 서비스로 연결되는 링크, 리드 마그넷, 콘텐츠 카테고리, 연락처 페이지 등으로 연결되는 링크가 있는 정션 박스를 배치한다. 또한 브랜드 개성을 살짝 드러내는 것도 좋다. 사람들이 404 페이지에 도착하면 좌절감을 느낄 가능성이 높으므로 디자인에 약간 건방진 느낌을 주어 분위기를 밝게 하고 재미있거나 기발한 이미지로 약간의 코미디를 주입할 수 있다.

#21: 모바일용으로 설계되지 않음

구글이 데스크톱 버전보다 모바일 버전을 기준으로 웹사이트 순위를 매긴다고 발표했으므로 모바일 기기에서 웹사이트가 빠르게 로드되도록 하는 것이 목표이다. 시차 효과, 큰 이미지 등 판매에 도움이 되지 않는 불필요한 디자인 요소는 모두 제거한다. 카테고리를 아코디언으로 교체하여 확장 가능한 단일 카테고리 버튼으로 압축한다. CTA를 고정 상단 탐색 또는 고정 바닥글 탐색에 배치하여 페이지를 스크롤하는 동안 항상 볼 수 있도록 한다.

출처 Studio 1 Design

[박영란(근정)]