IT스터디/모바일 기획&UX 스터디

단순한 웹사이트 디자인을 위한 13가지 Check list

신소민 2020. 5. 27. 16:43

Why does design matter? 
It only takes 0.05 seconds for people to form an opinion about your website. Most of that design opinion is coming from the design.The design also impacts your conversions, credibility, and ultimately makes or breaks the success of your site. No website is perfect, but your goal should be to make your website as optimized as possible.

디지인이 왜 중요한가?
사람들이 당신의 웹사이트에 대한 의견을 형성하는데는 0.05초밖에 걸리지 않는다. 그 디자인은 의견 형성 분만 아니라 전환, 신뢰성에도 영향을 미치며, 궁극적으로는 사이트의 성공여부를 결정한다. 완벽한 사이트는 없지만, 우리의 목표는 웹사이트를 가능한 '최적화'하는 것이어야 한다. 

 

 

단순함, 너무 당연하지만 실천하기 가장 어려운 요소가 아닐까 싶다. 서비스에 있어서 기획, 개발, 마케팅 등 모든 프로세스가 정말 중요하지만, 결국에 소비자가 그 서비스를 판단하는 첫 인상은 '디자인'이다. 디자인이 단순해야할 설명하자면 끝도 없지만, 적어도 누구나 '단순함'에 대한 니즈가 있고, 공감대가 넓은 주제이지 않을까 싶다. 위의 기사에서는 단순한 웹사이트 디자인을 위한 체크리스트를 제시한다. 당연한 것을 놓치지 않기 위해 참고하면 좋을 것 같다. 

 

1. 텍스트를 최소화하라.

게시물을 작성하는 경우를 말하는 것이 아니다. 홈페이지와 랜딩페이지에는 최소한의 텍스트가 있어야한다. 방문자에게 제공하고싶은 수 많은 정부를 몇 개의 단어로 심플하게 말하는 법을 배워야한다. 

2. 말하지 말고 보여줘라. 

소비자가 제품을 매력적으로 느끼게 하는 데 긴 말은 필요없다. 오히려 시각이미지를 잘 활용하면 텍스트를 이용하는 것 보다 더 깊은 차원의 '설명'을 제공할 수 있다. 상품을 설명하지말고, 보여줘야하는 이유이다. 

 

3. 짧은 문장을 사용하라. 

당연한 이야기로, 짧은 문장은 읽기 쉽다. 방문자가 화면에 들어오자마자 텍스트 폭격을 받는다면, 시작할 시도조차 하지 않게된다. 아무리 좋은 콘텐츠도 잘 팔아야한다. 그러기 위해서는 쉬운, 짧은 문장을 사용해야햔다. 

 

4. 단락도 더 짧게

단락 나누기를 사용해, 새로운 정보로 각 단락을 시작해라. 니즈가 다를 방문자들이 웹사이트를 스크롤하는 경우, 어느 단락을 읽어야할 지 바로 알 수 있다. 불필요한 텍스트를 제거하는 것이 시작이다. 

 

5. CTA(call to action)를 명확하고 분명하게 한다. 

CTA는 묻혀서는 안된다. 크고, 대담하고, 강력해야 다음 소비자 행동에 영향을 미칠 수 있다. 효과적인 CTA버튼이 없으면 전환을 유도할 수 없다.

위의 사이트는 최소한의 텍스트로 명확한 메시지를 전달한다. 결과적으로, "무료가입"이라는 CTA가 명확하게 두드러진다. 실제로 Litmus는 둘 이상의 위치에 이 CTA를 배치한다. 

 

6. 친숙함으로 행동을 강화한다. 

메시지가 같다면, CTA도 동일해야한다.

단순함의 대명사, 애플은 이 원칙을 잘 따르고 있다. 화면에는 제한적인 텍스트가 사용된다. 그리고 각 제품에는

  • learn more
  • buy

두 가지의 옵션이 반복적으로 드러난다. That's it. 그리고 스크롤을 내리면 다른 추천제품에 대해서 동일한 위치에 동일한 CTA버튼이 놓인다. 이는 모든 제품에서 일괄적으로 사용된다. 친숙함을 이용해 행동을 강화하는 좋은 방법이다. 이는 CTA버튼 뿐만이 아니라 웹사이트의 다른 요소들에도 적용 가능하다. 

 

7. 네비게이션을 단순화하라. 

웹사이트 방문자가 사이트에서 원하는 것을 빠르게 찾지 못한다면, 금방 떠날 것이다.

대부분 웹사이트의 경우 대체재가 많기 때문에, 사용자는 복잡한 웹사이트를 탐색할 이유가 없다. 복잡한 디자인 말고, 표준형식을 고수하는 것이 도움이 된다. 예를 들어, 88%의 웹사이트는 상단에 기본 탐색 메뉴가 가로로 위치한다. 정확한 명분이 없는 한, 이 표준을 어길 이유는 없다. 메뉴의 옵션을 적을수록 좋다. 선택을 제한하는 것은 웹사이트의 전환을 엄청나게 높인다. 불필요한 메뉴 옵션을 제거하는 방법을 찾아야한다. 

 

Square이라는 사이트다. 디자인은 super clear하다. 메뉴 옵션은 꼭 필요한 선택으로 제한되어있다. 홈 버튼은 로고로 대체되었다. 이런 유형의 디자인은 사용자가 탐색 중 혼란을 겪는 것이 거의 불가능하다. 

단, 전자상거래 사이트 등 많은 옵션이 있어야 하는 경우 검색 창을 가시적으로 추가해 탐색 과정을 단순화할 수 있다. 

 

8. 웹사이트의 디자인을 모바일에 최적화하라. 

Alexa의 통계에 따르면, 상위 웹사이트의 80%가 모바일 장치에 최적화되어있다. 모바일 브라우징이 새로운 표준이 되고있기 때문. 따라서 웹사이트는 되도록이면 반응형인 것이 좋다. 모바일에 최적화된 웹사이트는 사용자 경험에 필수적일 뿐만아니라 SEO(검색엔진최적화)의 측면에서도 중요하다. 

 

9. SEO(검색엔진최적화) 우선순위 지정

모모든 것은 SEO로 돌아와야한다. 모든 인터넷 경험의 93%는 검색엔진에서 시작한다. 

비지지스를 위한 SEO우선순위이다. On-site optimization은 2위를 차지한다. 이는 웹디자인과 관련된 요소이다. 이를 위해서, XML사이트 맵을 작성하는 것이 도움이 된다. 이를 통해 검색 엔진 크롤러가 웹사이트의 콘텐츠를 보다 쉽게 분석할 수 있다. 잘 짜여진 사이트맵은 SEO순위에 영향을 미칠 수 있다. 즉, 당연한 이야기로, 사이트를 디자인할 때는 아키텍쳐에도 논리적 구조가 있어야한다. 

 

10. 페이지 로딩 속도를 모니터링한다. 

페이지 로딩 속도가 웹 디자인과 어떤 연관성이 있냐고 하면, 답은 '모두' 이다. 

물론, 로딩 시간은 웹사이트 호스팅, 서버, 트래픽 등과 관련이 있다. 맞다. 하지만 디자인에 따라 로딩 시간 역시 영향받는다. 이미지, 비디오, 기타 미디어파일 등을 추가할 때마다 로딩시간에 영향을 받는 식이다. 

로딩시간이 느려지면 이탈률이 높아진다. 이를 무시할 수는 없다. 

40%의 사람들은 로드하는 데 3초이상 걸리는 웹사이트를 포기한다. 웹디자인에 로딩과 관련된 요소들을 해결하기 위해서는 아래와 같은 작업을 수행할 수 있다.

구글의 Page Speed Insight도구를 활용하면 웹사이트 디자인은 변경할 때마다 로드되는 시간을 모니터링할 수 있다. 

 

11. 브랜딩 전략에 맞는 색 구성을 선택한다. 

웹사이트에서의 색상은 생각보다 중요하다. 연구결과에 따르면, 제품은 90초 이내로 판단된다. 색상은 브랜드 인지도를 80%까지 높일 수 있다. 스타벅스가 이를 잘 활용하는 예시이다. 

 

초록색 컬러 스킴을 사용했다. 이 디자인은 로고와 브랜드와 일치하여 브랜드와의 연관성을 강화한다. 일관성은 언제나 중요하다. 

 

12. 지속적으로 A/B테스트를 실행한다. 

완벽한 웹사이트는 없다. 하지만 디자인을 향상시킬 수 있는 방법은 언제나 있다. 따라서 A/B테스트를 지속적으로 실시해야한다. 몇 가지 테스트 디자인 요소는 다음과 같다. 

  • CTA버튼 위치 테스트 
  • CTA버튼 색상 테스트
  • CTA사본 테스트
  • 사이트에 사용중인 이미지 테스트
  • 화면에서 텍스트의 단어 변형 테스트
  • 네비게이션 바의 크기 테스트

A/B테스트를 시작하기 전에 알아야할 모든 것

 

13. 리스트 기호를 사용한다. 

사용자는 bullet point가 있는 포맷을 선호한다. 보기 쉽기 때문. 

 

결론

  1. 모든 웹사이트는 개선의 여지가 있다.

  2. 한 번에 하지 마라. 어딘가에서 시작하면 된다. 

  3. 모든 체크리스트 의견은 리서치와 통계에 기반한다. 

 

 

 

13 Website Design Best Practices for 2020 – Quick Sprout

Our content is reader-supported, which means if you click on some of our links in this post that we may earn a commission.

www.quicksprout.com

*모든 글은 위 기사의 번역에 기반합니다.