웹사이트의 디자인 감사를 수행하는 방법

웹사이트가 성장함에 따라 디자인이 다소 낡아 보일 수 있습니다. 디자인 트렌드는 지속적으로 발전하고 있으며 사이트를 현대적이고 '신선하게' 보이게 하려면 이러한 문제를 파악하는 것이 중요합니다. 또한 좋은 경험을 제공하기 위해 디자인의 모든 측면을 균일하게(사용 가능하게) 유지해야 합니다.

이러한 문제를 찾아 수정하는 가장 좋은 방법은 전체 웹사이트의 디자인 감사를 이용하는 것입니다. 이 기사에서는 이러한 감사가 무엇이며 어떻게 도움이 되는지 알려 드리겠습니다. 그런 다음 마지막으로 간단한 세 단계로 수행하는 방법을 보여주기 전에 작업을 수행하는 데 도움이 되는 몇 가지 도구에 대해 이야기하겠습니다. 일하러 가자!

설계 감사란 무엇이며 어떻게 도움이 됩니까?

디자인 감사는 앉아서 웹사이트나 회사의 시각적 브랜딩 요소를 검토하는 것입니다. 대부분의 경우 균일성을 원하지만 이 프로세스는 디자인이 여전히 신선해 보이는지 확인할 수 있는 훌륭한 기회이기도 합니다.

솔직히 말해서, "감사"라는 용어는 전체를 실제보다 훨씬 더 위협적으로 느끼게 합니다. 어쨌든 웹 사이트에 대한 정기적인 디자인 감사를 수행하면 몇 가지 이점이 있습니다. 예를 들어:

• 디자인을 확인할 수 있는 기회입니다. 디자인 트렌드가 스타일을 바꾸다 보면 시각적 요소가 약간 낡아 보일 수도 있습니다. 설계 감사는 현실 확인과 업그레이드 기회를 제공할 수 있습니다.
• 브랜딩을 검토하십시오. 대부분의 웹 사이트에는 로고, 태그 라인, 헤더 이미지 등과 같은 여러 시각적 요소를 기반으로 하는 자체 브랜딩이 있습니다. 시간이 지남에 따라 이러한 요소가 일치하지 않아 브랜드가 인식되는 방식에 영향을 줄 수 있습니다.
• 컨설팅 서비스로 제공할 수 있습니다. 성공적인 설계 감사를 수행한 경험이 있는 경우 다른 회사에 서비스를 마케팅하고 프로세스를 도울 수 있습니다. 많은 기업이 자신이 제공하는 이점을 인식하지 못하므로 필요하다고 확신시킬 수 있다면 기회는 무르익었습니다.

다른 웹사이트에 서비스를 제공하기 위해 실행하기 전에 모든 설계 감사의 기본 단계가 무엇인지 아는 것이 중요합니다. 상상할 수 있듯이, 그 과정에서 도움이 되는 몇 가지 도구가 필요하므로 몇 가지 주요 옵션을 확인해 보겠습니다.

웹사이트의 디자인 유용성을 감사하는 데 도움이 되는 3가지 도구

당신이 디자이너라면 당신의 삶을 더 쉽게 만들어줄 수 있는 수많은 도구가 온라인에 있다는 것을 알게 될 것입니다. 그러나 이 섹션에서는 사이트의 요소를 감사하고 디자인의 결함을 확인하는 데 도움이 되는 항목에만 초점을 맞추기로 했습니다. 그 중 세 가지를 살펴보겠습니다.

1. 크레이지 에그

Crazy Egg는 사이트에서 문제 영역을 찾는 데 중점을 둔 분석 도구입니다. 히트맵 기술을 사용하여 페이지에서 가장 많은 관심을 받고 있는 요소와 충분하지 않은 요소를 확인할 수 있습니다. 또한 사용자가 콘텐츠를 스크롤하고 있는지 확인하는 데 도움이 되는 기능도 포함되어 있습니다. Crazy Egg는 또한 방문자가 어디에서 왔는지에 대한 귀중한 데이터를 제공한 다음 이를 기반으로 행동을 분류합니다.

디자인 관점에서 볼 때 이러한 유형의 도구는 가장 도움이 필요한 디자인 영역에 집중할 수 있게 해주기 때문에 매우 중요합니다. 예를 들어 히트맵에서 중요한 CTA(클릭 유도문안)가 예상만큼 많은 관심을 받지 못하고 있는 것으로 나타나면 다음 설계 감사에서 분석의 우선 순위를 지정할 수 있습니다.

주요 특징들:

• 웹사이트에 히트맵을 구현합니다.
• 방문자가 페이지를 스크롤하는 거리를 추적하십시오.
• 트래픽 소스를 주시하고 이를 기반으로 사용자 데이터를 분류하십시오.

가격: 월 $9, 연간 지불 | 추가 정보

2. 사용성도구

히트맵은 사용자의 행동을 이해하는 데 도움이 되는 강력한 도구이지만 사용자가 사이트와 상호 작용하는 방식을 단계별로 실제로 보는 것만큼 좋은 것은 없습니다. UsabilityTools를 사용하면 마우스 움직임, 양식 상호 작용 및 클릭을 포함하여 사용자가 사이트에서 취하는 모든 작업을 기록하여 이를 수행할 수 있습니다.

과도하게 들릴 수 있지만 사이트의 어떤 요소가 사용자를 끌어들이지 않는지 파악하는 데 어려움을 겪고 있다면 사용자를 식별할 수 있는 훌륭한 방법입니다. 또한 사용성 도구를 사용하면 방문자로부터 수집한 모든 데이터를 분류하여 빠른 분석을 할 수 있습니다.

주요 특징들:

• 사이트에서 사용자의 마우스 움직임, 클릭 및 양식 상호작용을 추적합니다.
• 쉽게 분석할 수 있도록 수집한 데이터를 세분화합니다.
• 팀의 모든 구성원과 쉽게 녹음을 공유할 수 있습니다.

가격: 월 $19 | 추가 정보

3. 사용성 허브

마지막으로 UsabilityHub가 있습니다. 이것은 약간 다릅니다. 여러 도구를 포함하는 플랫폼이며, 이 중 어느 것이든 설계 감사를 성공적으로 수행하는 데 도움이 될 수 있습니다.

여기에는 사용성을 측정하는 클릭 및 탐색 테스트와 함께 사용자가 사이트 디자인을 기억할 수 있는지 여부를 결정하는 5초 테스트가 포함됩니다. 마지막으로, 고객이 귀하의 디자인을 좋아하는지 여부와 그들이 보고 싶어하는 변경 사항을 결정하는 데 도움이 되는 대상 설문조사에 액세스할 수도 있습니다.

주요 특징들:

• 여러 테스트를 사용하여 사이트의 유용성과 디자인의 수용도를 측정합니다.
• 필요에 따라 원하는 테스트를 혼합하고 일치시키십시오.
• 가장 관심 있는 요소를 측정하도록 각 테스트를 사용자 지정합니다.

가격: 테스트 응답당 $2.50 | 추가 정보

웹사이트의 디자인 감사를 수행하는 방법(3단계)

사용할 수 있는 몇 가지 도구를 살펴보았으므로 이제 성공적인 설계 감사를 위한 단계에 대해 이야기할 차례입니다. 귀하의 웹사이트와 목표에 따라 우리가 논의한 모든 도구를 사용하지 않을 수도 있지만 그것은 귀하에게 달려 있습니다. 1단계로 넘어갑시다.

1단계: 모든 시각적 브랜딩 요소 수집

Instagram은 단순하지만 일관된 브랜딩이 있는 웹사이트의 좋은 예입니다.

디자인에 문제가 있는지 파악하기 전에 웹사이트의 모든 브랜딩 요소를 수집해야 합니다. 그렇게 하면 그들의 스타일 사이에 불협화음이 있는지 알아볼 수 있습니다.

이렇게 하면 조감도로 모든 주요 브랜딩 요소를 분석하고 함께 의미가 있는지 확인할 수 있습니다(다음 단계에서 설명할 내용). 요소를 함께 모으는 것이 불필요하게 들릴 수 있지만 전체 그림을 볼 때까지 디자인의 일부 결함이 명확하지 않을 수 있습니다.

수집해야 하는 요소와 관련하여 다음은 시작하는 데 도움이 되는 간단한 목록입니다.

• 모든 형식의 웹사이트 로고.
• 모든 배경 및 헤더 이미지.
• 사이트 전체에서 사용하는 모든 아이콘.
• 콘텐츠에 사용하는 모든 글꼴의 샘플입니다.
• 디자인 전반에 걸쳐 사용하는 색조의 색상 팔레트입니다.

지금은 이러한 요소를 가장 편한 형식으로 저장하는 것이 좋습니다. 쉽게 공유할 수 있도록 PDF를 만들거나 실제 사본을 팀에 전달할 수 있습니다. 컴파일 파일이나 문서가 준비되면 작업을 시작할 차례입니다.

2단계: 웹사이트의 시각적 요소 분석

Netflix의 브랜딩 전략은 간단하지만 일관성이 있습니다. 가능한 한 항상 로고를 사용합니다.

앞서 언급했듯이 2단계는 시각적 브랜딩 요소를 살펴보고 디자인에서 불일치나 결함을 찾는 것입니다.

디자인은 (물론) 여러 면에서 주관적이지만 웹사이트의 스타일을 개선할 수 없다는 의미는 아닙니다. 예를 들어, 모든 비즈니스는 일관된 디자인 스타일을 제시해야 고객이 이 스타일에 익숙해지고 이를 제품과 연관시킬 수 있습니다. 웹사이트에서도 마찬가지입니다. 로고, 콘텐츠 및 이미지는 모두 동일한 스타일을 공유하고 일관성을 유지해야 합니다.

웹사이트의 시각적 요소가 다음과 같은 측면에서 목표를 달성할 수 있도록 몇 가지 간단한 팁을 살펴보겠습니다.

• 로고가 모든 페이지에서 일관되게 유지되는지 확인하고 그렇지 않은 경우 필요한 경우 교체합니다.
• 배경 이미지가 비슷한 스타일을 공유하는지 확인하여 페이지와 섹션 간의 전환이 거슬리지 않도록 합니다. 틀에 맞지 않는 이미지를 찾으면 변경하십시오.
• 아이콘이 유사한 스타일을 공유하는지 확인하고 그렇지 않은 경우 Font Awesome Icons(Divi와 통합할 수 있음)와 같은 단일 제품군의 대안으로 교체해 보십시오.

지금까지 우리는 온라인 요소에 대해서만 이야기했지만 디자인 감사는 오프라인 시각적 요소도 포함할 수 있고 해야 한다는 점을 명심하십시오. 비즈니스에 물리적 상대가 있는 경우 손에 넣을 수 있는 모든 브랜딩 항목(예: 브로셔, 티셔츠, 전화 카드)을 수집하고 1단계와 2단계를 반복해야 합니다.

3단계: 웹사이트를 위한 디자인 표준 매뉴얼 만들기

Urban Outfitter의 브랜드 가이드라인 매뉴얼은 브랜드를 독특하게 만드는 요소에 대해 설명합니다.

이제 미래를 계획할 때입니다. 이를 수행하는 가장 좋은 방법 중 하나는 사이트의 향후 디자인 변경에 대한 규칙 모음을 만드는 것입니다(디자인 표준 매뉴얼이라고도 함).

이 문서의 목적은 앞으로 디자인 작업을 세세하게 관리하지 않고도 아웃소싱할 수 있도록 하는 것입니다. 또한 웹 사이트가 성장함에 따라 작업 팀에 더 많은 구성원을 추가할 수 있습니다. 표준 매뉴얼은 시각적 브랜딩을 더 잘 이해하는 데 도움이 될 수 있습니다. 사실, 이것은 많은 일류 기업들이 참여하는 현명한 관행입니다.

매뉴얼에 어떤 유형의 규칙을 포함해야 하는지에 대해 시작하기 위해 몇 가지 아이디어를 살펴보겠습니다.

• 로고와 그 변형을 사용하는 방법에 대한 지침을 포함하십시오(이는 일반적인 관행이기도 합니다).
• 기고자가 사이트에서 사용해야 하는 이미지 유형의 예와 이를 표시하는 방법 및 피해야 하는 콘텐츠 유형에 대한 규칙을 첨부합니다.
• 사용 가능한 옵션이 두 개 이상인 경우 웹사이트 전체에서 사용해야 하는 글꼴과 해당 글꼴을 사용해야 하는 상황에 대해 논의합니다.
• 디자인에 사용하려는 버튼, 아이콘 및 기타 유사한 요소 유형의 예를 제공합니다.

두 가지 설계 표준 매뉴얼이 동일할 수 없다는 점을 명심하십시오. 웹사이트에서 사용하는 요소에 따라, 그리고 오프라인 브랜딩에 대해 이야기하려는 경우 더 많은 규칙을 추가해야 할 것입니다. 그러나 이 설정을 조기에 설정하면 향후 설계 감사가 보다 원활하게 진행될 뿐만 아니라 팀에 새로 추가되는 사람을 더 빨리 교육하는 데 도움이 됩니다.

결론

시간이 지남에 따라 대부분의 웹사이트에서 디자인과 관련하여 수정이 필요한 것이 정상입니다. 예를 들어, 일부 요소는 시각적으로 서로 잘 어울리지 않을 수 있지만 전체 디자인 감사를 주기적으로 수행하지 않고는 이를 발견하기 어려울 수 있습니다. 또한 이렇게 하면 방문자가 앞으로도 계속해서 귀하의 사이트에서 훌륭한 경험을 할 수 있습니다.

다음은 웹사이트에 대한 디자인 감사를 수행하는 세 가지 기본 단계입니다.

1. 모든 온라인 및 오프라인 시각적 브랜딩 요소를 수집합니다.
2. 수집한 요소를 분석합니다.
3. 귀하의 웹사이트에 대한 디자인 표준 매뉴얼을 만드십시오.

웹사이트에 대한 성공적인 디자인 감사를 수행하는 방법에 대해 질문이 있습니까? 아래 댓글 섹션에서 문의하세요!

Darko 1981/Shutterstock.com의 기사 축소판 이미지