웹사이트 재설계를 고려하는 이유 – 팁 및 권장 사항

게시 됨: 2022-03-11

2018년입니다. 전 세계의 많은 사람들에게 새해는 새로운 시작을 의미합니다. 새로운 목표, 새로운 아이디어, 일부 기업의 경우 기존 웹사이트를 대체할 새로운 웹사이트 디자인.

웹사이트는 여러 가지 이유로 개편됩니다. 안타깝게도 많은 기업은 웹사이트를 새로 고쳐야 한다는 사실을 깨닫지 못하고 있습니다. 더 나쁜 시나리오에서는 경쟁 기업이 웹사이트를 개선하고 전환율을 높여 경쟁 우위를 확보할 수 있지만 귀하는 뒤처질 수 있습니다.

귀하의 웹사이트는 다음 중 하나에 해당합니까? 그렇다면 재설계가 필요할 때입니다!

  • 비즈니스에는 정체성이 있지만 웹사이트에는 이를 반영하지 않습니다.
  • 일부 링크가 끊어져 사용자가 전환 흐름에서 이탈합니다.
  • 사용자가 귀하와 의사 소통을 시도하고 있지만 어렵습니다.
  • 웹 사이트는 전반적으로 구식으로 느껴져 사용자에게 깊은 인상을 주지 않습니다.
  • 활용도가 떨어집니다. 사용자는 웹 사이트를 탐색하는 데 어려움을 겪고 있습니다.
  • UI가 혼란스럽고 일관성이 없습니다. 사용자는 계속 실수를 합니다.

이러한 문제를 해결하기 위해 수행할 수 있는 작업을 살펴보겠습니다.

웹사이트 개편이 필요한 구식 전자상거래 사이트
오랜 기간 새로 고침되지 않은 전자 상거래 사이트, 나이를 표시합니다.

웹사이트 빌더: 위험

신규 비즈니스는 Wix, Weebly 또는 Squarespace와 같은 단순한 웹사이트 빌더로 시작하는 경향이 있습니다. 이러한 도구는 간편한 드래그 앤 드롭 WYSIWYG("What you see is what you get") 편집기와 무료 호스팅을 사용하여 웹 사이트를 디자인하는 프로세스를 단순화하지만 이러한 도구는 웹 사이트를 군중에서 눈에 띄게 만들만큼 정교하지 않습니다.

새로운 비즈니스의 초기 단계에서 자금이 부족할 때 웹사이트 빌더를 사용하는 것이 이론적으로 합리적입니다. "호스팅 포함, 코드 필요 없음" 접근 방식은 기업이 너무 많은 시간과 비용을 들이지 않고도 온라인 입지를 구축하는 데 도움이 됩니다. 그러나 여기에는 여러 가지 숨겨진 위험 요소가 있습니다. 즉, 최악의 기회(예: 웹사이트에서 제공 범위를 확장해야 하는 경우)에 스스로를 드러내는 경향이 있는 위험 요소입니다.

웹사이트 빌더, Squarespace

웹 사이트 빌더를 사용하면 서비스가 제공하는 모든 기능으로 기능이 제한되며, 웹 사이트 설정에 대한 이러한 단순 접근 방식의 결과로 나중에 확장 기회가 심각하게 제한될 수 있습니다. 다음은 디자인 및 개발 비용을 줄이기 위해 웹사이트 빌더를 스스로 운영할 때 기업이 빠지는 함정의 예입니다.

전자 상거래 비즈니스는 웹 사이트 빌더(또는 무료 테마가 있는 CMS)를 사용합니다.클라이언트는 "안녕하세요. [비즈니스 이름]이고 여기 있습니다!"라고 말하는 한 페이지 웹사이트를 설정합니다.나중에 클라이언트는 그것이 불가능하다는 것을 깨닫기 위해 제품을 추가하기를 원합니다.

종종 기업은 웹사이트 요구 사항이 더 복잡해지면 어떤 일이 벌어질지 생각하지 않고 막다른 길에 갇히게 됩니다. 게다가 검색 엔진 최적화(SEO), SSL(순위 및 보안에 영향), 모바일 친화성(순위 및 전환에 영향)과 같은 중요한 요소가 무시될 수 있습니다.

전문가로서, 그것이 당신이 들어오는 곳입니다.

전문 디자이너는 이러한 중요한 고려 사항을 간과해서는 안 되며 장기적으로 시간과 비용을 절약할 수 있는 미래 지향적인 웹사이트를 만들어야 합니다.

요컨대, 최고의 웹사이트 재설계는 일어날 필요가 없는 것입니다.

웹사이트 빌더 대 디자이너 고용

전문 디자이너가 디자인한 웹사이트라도 너무 오래 방치하면 잡초가 자라기 시작할 수 있습니다. 비즈니스의 다른 측면에 초점을 맞추기 때문에 버전 2에 대한 로드맵이 나오지 않는 경우가 있습니다. 예를 들어 SSL과 같은 중요한 고려 사항이 당시에는 중요하지 않은 경우가 있었습니다. 어느 쪽이든, 모든 비즈니스는 특히 고객 문제가 있을 때 때때로 웹사이트를 재설계해야 합니다.

웹사이트를 재설계해야 하는 주요 이유와 이러한 이유로 웹사이트를 개편할 때 취해야 하는 전략에 대해 이야기해 보겠습니다.

새로운 웹사이트 디자인이 절실히 필요한 B2B 비즈니스
10년이 넘도록 리프레쉬 되지 않은 B2B 사이트, 세월이 흘렀다.

브랜딩(또는 리브랜딩)

리브랜딩은 일반적으로 새로운 웹사이트 디자인과 함께 제공됩니다. 그러나 이것은 새로운 로고 이상으로 확장되어야 합니다. 브랜딩은 청중과의 의사 소통에 관한 것이기 때문에 목소리 톤도 고려해야 합니다(웹사이트 카피, FAQ 섹션 또는 온라인 고객 지원 고려).

브랜딩은 비즈니스가 표현되기를 원하는 방식(예: 도움이 되는, 캐주얼한 또는 신뢰할 수 있는 것)이므로 웹사이트 재설계의 범위는 회사가 자신을 재창조하고자 하는 정도에 따라 다릅니다. 예를 들어 고객이 신뢰 문제를 겪고 있는 금융 기관은 신뢰할 수 있는 것처럼 보이고 들리는 브랜드 변경의 이점을 얻을 수 있습니다.

기존 브랜드를 개선하든 처음부터 새로운 브랜드를 만들든 관계없이 고려해야 할 사항은 다음과 같습니다.

  • 색상이 특정 느낌을 주나요?
  • 이미지/사진이 사용자에게 뭔가를 느끼게 합니까?
  • 전체적인 시각적 미학이 사용자를 만족시키는가?
  • 방문 페이지 문구가 매력적입니까?
  • FAQ 카피가 도움이 되었나요?
  • 전체적인 목소리 톤이 기업이 누구인지를 나타냅니까?
  • 웹사이트에 라이브 채팅과 같은 추가 기능이 필요합니까?

그리고 더 중요한 것은 웹사이트 재설계의 기반을 구축하는 데 사용할 수 있는 사용자/고객 조사가 있습니까? 그렇지 않은 경우 이것이 첫 번째 작업입니다.

Mozilla, 웹사이트 재설계 전후
Mozilla, 재설계 및 브랜드 변경 전후.

기능 확장

웹사이트 재설계는 일반적으로 새로운 기능에 대한 고객 요구가 있을 때 보증됩니다. 혁신적인 회사는 지속적으로 새로운 제품(온라인 및 오프라인 모두)을 구축하고 있으며 사용자가 해당 제품을 더 잘 경험할 수 있도록 하는 새로운 기능이 필요합니다. 반면 소규모 비즈니스는 블로그가 필요한 콘텐츠 마케팅으로 비즈니스를 확장하거나 전자 상거래 상점을 통해 수익을 창출하려고 할 수 있습니다. 어느 쪽이든, 재설계는 종종 작은 외관상의 변경과 브랜드 변경을 넘어섭니다.

때로는 "기능"이 알려지지 않고 신비에 싸여 있습니다. 클라이언트는 무언가가 작동하지 않는다는 것을 알고 있지만(낮은 전환, 고객 불만족 등) 그 이유는 확실하지 않습니다. 때때로 이 기능은 실제로 몇 가지 UX 개선에 불과합니다. 제품 자체는 괜찮지만 기본적으로 웹사이트의 사용자 경험에 결함이 있습니다.

어쨌든 사용자를 더 잘 이해하려면 웹사이트 분석을 사용해야 합니다.

데이터로 재설계

브랜딩과 마찬가지로 UX도 사용자 조사에 의해 주도되어야 합니다. Google Analytics와 같은 웹사이트 분석 도구와 Hotjar 및 CrazyEgg와 같은 히트맵 도구는 재고가 필요할 수 있는 중요한 영역이나 누락되었을 수 있는 전체 기능을 식별하는 데 도움이 될 수 있습니다.

Analytics는 특정 웹페이지에서 얼마나 많은 시간을 소비하는지, 실제로 전환하는지 여부, 전환 흐름에서 이탈하는 위치, 사용한 기기 등 사용자에 대해 알아야 할 모든 것을 알려줍니다. 어디에서 왔는지, 사용자 인구 통계, 행동 흐름; 데이터의 양은 말 그대로 끝이 없습니다.

이 데이터는 웹사이트 재설계의 성공 여부를 측정하는 데 사용될 뿐만 아니라 UX 측면에서 웹사이트의 어떤 영역이 부족 한지 증명할 수 있습니다. 고객이 무엇이 크게 누락되었는지 아직 알지 못한다면 웹사이트 분석을 사용하여 개선에서 전체 제품 아이디어에 이르기까지 모든 것을 제안한 다음 재설계가 함께 보일 수 있는 로드맵을 제시할 수 있습니다. 웹사이트 재설계에는 계획이 필요합니다.

웹사이트 분석을 사용하지 않는 웹사이트를 다루는 경우 첫 번째 클릭 유도문안은 앞서 언급한 Google Analytics(영원히 무료로 제공되는 매우 상세한 보고서)를 설치하는 것입니다. Google Analytics를 사용하여 우려되는 영역을 식별했으면 설계 프로세스의 다음 단계는 사용성 테스트입니다. Hotjar 및 CrazyEgg와 같은 도구는 사용자가 클릭하는 위치를 정확히 보여주고 세션 재생을 통해 사용자가 웹사이트에서 어떻게 행동하는지 볼 수도 있습니다. Google 웹로그 분석으로 전환율이 낮은 웹페이지를 발견했다면 이러한 사용자 기록을 통해 그 이유 를 알 수 있습니다.

다른 모든 디자인 결정은 기껏해야 정보에 입각한 추측을 기반으로 합니다.

월별 세션 데이터 및 이탈률을 보여주는 Google Analytics 대시보드

조사가 끝나면 고객 여정 지도를 만들어 대다수 사용자가 전환하는 방식을 강조할 수 있습니다. 이것은 회사 전체에서 공유할 수 있는 다소 흥미로운 자산으로, 웹사이트 외부의 전환 흐름(소셜 미디어, 고객 서비스 등)에서 자신이 어떤 역할을 해야 하는지 전체 팀에 알립니다.

더 나은 방법은 고객이 분석에 익숙해지도록 도와줄 수 있으므로 고객이 성공 또는 실패를 측정하거나 미래 벤처에 대한 자체 사용자 조사를 수행할 수 있습니다. 클라이언트가 그 이후에 주도권을 잡을 수 있을 때 항상 승리합니다.

블로그 재설계

앞서 언급했듯이 초기 단계의 비즈니스는 도달 범위를 확장하기 위해 블로그를 시작하려고 합니다. 이 시나리오에서 웹 사이트는 방문자를 확보하기 시작했으며 회사는 이제 콘텐츠 마케팅을 통해 도달 범위를 더욱 확장할 준비가 되었다고 생각합니다.

어떤 경우에(또는 실제로 많은 경우에) 블로그는 회사가 가진 가장 큰 마케팅 자산입니다. 블로그는 기업이 브랜드를 강화하고, 사용자에게 업데이트 및 신제품을 알리고, 관련 콘텐츠로 대상 고객을 참여시킬 수 있는 기회를 제공합니다.

그렇긴 하지만, 이 시대에 독자의 시선을 진지하게 사로잡는 것은 정말 어려운 일입니다. 이 중 일부는 콘텐츠 자체에 달려 있지만 열악한 UX가 종종 원인이 되어 사용자가 뒤로 버튼을 누르고 대신 경쟁자를 시도하게 만듭니다.

슬프게도 그것이 무료 콘텐츠의 단점입니다. UX가 차선책이라면 사용자는 기꺼이 웹 페이지를 포기할 것입니다. 훌륭한 디자이너는 가독성과 가독성을 개선하고 시각적 산만함을 제거하고 전환율이 높은 지점에 CTA를 삽입하는 방법을 알고 있어야 합니다.

또한 디자이너는 웹사이트 분석을 사용하여 콘텐츠 UX를 개선하여 사용자가 읽기를 중단하는 위치이유 를 찾은 다음 이를 기반으로 데이터 기반 디자인 결정을 내려야 합니다. 새로운 기능에 CMS가 필요한 재설계에 접근할 때 다시 한 번 클라이언트가 나중에 쉽게 선택할 수 있도록 하는 것이 중요합니다.

전자상거래 재설계

전자 상거래 디자인은 UX에서 마스터하기 가장 까다로운 측면 중 하나이며 데이터 기반 디자인 경험이 풍부한 디자이너가 필요합니다. 다음 사항을 고려하십시오. 이 연구에 따르면 전자 상거래 매장은 평균 69.23%의 장바구니 포기율로 어려움을 겪고 있습니다. 미국과 유럽에서 전자 상거래에 7,380억 달러를 지출했지만 이 중 2,600억 달러는 더 나은 결제 흐름과 디자인을 통해 회수할 수 있었던 것으로 추정됩니다. 이커머스 스토어의 경우 체크아웃 흐름 가장 중요한 부분이며, 사용자가 이탈하는 부분을 파악할 수 있는 디자이너가 이를 개선할 수 있는 디자이너입니다.

고려해야 할 사항은 다음과 같습니다.

  • 웹사이트가 신뢰와 보안을 심어줍니까?
  • 웹사이트에 유효한 SSL 인증서가 있습니까?
  • 결제 양식은 레이블이 잘 지정되어 있고 사용하기 쉽습니까?
  • 입력 필드에 올바른 키보드 유형이 표시됩니까?
  • 사용자가 검색할 수 있습니까? 찾고 있는 것을 찾을 수 없습니까?
  • 사용자가 게스트로 체크아웃할 때 강제로 가입하도록 하고 있습니까?

eBay, 재설계 전후
eBay, 재설계 전후.

비즈니스 측면 처리

비즈니스의 일부 측면(예: 고객 지원)은 프로세스가 충분히 효율적이지 않은 경우 막대한 오버헤드를 가질 수 있으므로 Intercom 또는 Kayako와 같은 통합 서비스로 웹사이트를 업그레이드하면 사용자에게 더 나은 경험을 제공할 뿐만 아니라 기업이 고객 지원 비용을 절감하고 고객 지원 비용을 절감할 수 있습니다. 워크로드. 웹사이트 재설계에 접근할 때 클라이언트에게 팀/조직으로서 가장 큰 어려움이 무엇인지 물어보십시오.

반응형 디자인 및 사용성

간단히 말해서 반응형 웹사이트는 모바일에서 데스크톱에 이르기까지 거의 모든 화면 크기에 적응하는 웹사이트입니다. 모바일 트래픽은 2015년에 데스크톱 트래픽을 훨씬 능가했으며 Google은 검색 결과에서 모바일 친화적인 웹사이트를 선호하기 시작했습니다. 대부분의 웹사이트는 기술적으로 반응형이지만 거의 최적화되지 않은 웹사이트는 거의 없습니다.

인터넷 사용자의 57%가 제대로 디자인되지 않은 모바일 웹사이트가 있는 비즈니스를 추천하지 않을 것이라고 말했기 때문에 반응형 디자인은 큰 문제이며 디자이너는 "모든 것을 적합하게 만드는" 것보다 훨씬 더 많은 일을 해야 합니다. 고려해야 할 사항은 다음과 같습니다.

  • 탭 타겟이 충분히 큰가요(높이 44px 이상)?
  • 탭 대상은 엄지손가락으로 접근할 수 있습니까, 아니면 손이 닿지 않는 곳에 있습니까?
  • 모바일 웹사이트는 단순함을 위해 "잘려져 있습니까"?
  • 웹사이트가 3G 연결에서 빠르게 로드됩니까?
  • 전반적으로 모바일 사용성을 어떻게 평가하시겠습니까?

오래된 저작권 고지 및 끊어진 링크

어떤 사람들은 이것을 사소한 것으로 생각할 수도 있지만(상대적으로는 그렇습니다), 오래된 저작권 표시, 깨진 링크 및 철자 오류는 웹사이트가 중단되었거나 약간의 주의만 기울였음을 나타냅니다. 이러한 정보는 사용자가 구독 중인 서비스가 지속적으로 개선되고 있음을 알고 싶어하기 때문에 SaaS 회사에 특히 중요합니다(사용자가 웹 사이트 바닥글의 저작권 표시를 보고 마지막으로 업데이트된 시간을 확인하는 것은 정상입니다). 일반적으로 말해서, 오래된 웹사이트는 사용자가 더 이상 활성 상태인지 궁금해하게 만들 것입니다.

저작권 날짜가 매우 오래된 웹사이트

이러한 문제를 해결하는 것은 매우 쉽기 때문에 "최우선"으로 고려하십시오.

특히 깨진 링크의 경우 내 링크 확인과 같은 무료 Chrome 확장 프로그램을 사용하여 웹 페이지에서 깨진 링크를 찾거나 Grammarly를 사용하여 철자 오류를 식별할 수 있습니다.

기술 요구 사항

HubSpot에 따르면 방문자의 82%가 안전하지 않은 사이트를 포기합니다.

기술 요구 사항은 사용자가 사용하지 않는 기능입니다. 그럼에도 불구하고 사용자에게 과감한 영향을 미칠 수 있습니다. 예를 들어, 전자 상거래 상점에 필요한 보안 계층인 SSL(모든 웹사이트에 권장됨)은 고객에게 민감한 데이터가 안전하다는 것을 알려줍니다.

SSL 보안이 있거나 없는 전자상거래 웹사이트

프론트엔드 및 백엔드 코드 개선은 웹사이트를 더 빠르게(또는 최소한 더 빠르게 느끼도록 ) 만들 것이며, 디자인 자체의 단순함이 거기에서 큰 역할을 합니다(단순한 디자인 = 적은 코드). 재설계 중인 웹사이트의 경우 이를 무시하고 싶지 않을 것입니다.

결론

디자인은 문제를 해결하는 것 입니다. 클라이언트는 디자이너가 어떻게 삶을 더 쉽게 만들 수 있는지 또는 비즈니스 수익을 어떻게 높일 수 있는지 알고 싶어합니다.

기술 목록은 클라이언트가 해당 디자이너를 고용해야 하는 이유를 알려주지 않습니다. 디자이너는 고객의 비즈니스에 웹사이트 재설계가 필요한 이유 를 전달하고 최종 결과가 무엇을 얻을 수 있는지 강조하여 고객에게 훌륭한 서비스를 제공할 것입니다.

  • 그들의 브랜드가 조금 오래 되었습니까?
  • UI가 사용자에게 혼란을 일으키고 있습니까?
  • UX로 인해 사용자가 전환 흐름에서 이탈합니까?
  • 사용성(모바일 또는 기타)으로 인해 사용자가 뒤로 버튼을 누르나요?
  • 모든 계정에서 끔찍하게 보입니까?
  • 웹사이트 개선이 비즈니스에 어떤 도움이 됩니까?

재설계가 필요한 것이 무엇인지 알고 고객도 이를 알고 있다면 재설계를 위한 로드맵에는 이미 훌륭한 기반과 측정 가능한 목표가 있습니다.

• • •

Toptal Design 블로그에 대한 추가 정보:

  • 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
  • 제품 디자인에서 인간 중심 디자인의 중요성
  • 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
  • 모바일 인터페이스에 대한 경험적 원리
  • 예측적 디자인: 마법 같은 사용자 경험을 만드는 방법