제품 구매 유발 상세페이지 디자인? 가독성 있는 블로그 꾸미기? 비법 공개!

네이버나 티스토리 블로그 스킨을 꾸미시나요? 스마트 스토어의 제품 상세페이지 디자인이 고민이신가요? 글의 가독성을 높이는 방법, 미적 감각이 돋보이는 블로그를 만드는 방법, 그리고 제품 구매로 연결되는 디자인까지 한번 알아봅시다.

 

 

 

 

스마트스토어 및 제품 상세페이지 디자인? 티스토리 네이버 블로그 꾸미기? 가독성 높이는 방법!

 

 

[🔨 잡동사니 정보 모음!!] - 네이버 아이디 여러 개 만들어 블로그와 메일 여러 개 개설하기

네이버 아이디 여러개 만들어 블로그와 메일 여러개 개설하기

 

 

 

네이버 블로그를 개설하기 위해 보다 보니 초반에 안내 창이 있더라고요. 그때 딱 들어온 아래와 같은 이미지. 뭔가 깔쌈하고 심플한 느낌인데요..

 

 

 

 

제품 구매 유발 상세페이지 디자인? 가독성 있는 블로그 꾸미기? 비법 공개!

 

 

 

 

"똑같이 블로그 꾸미기 해볼까? 어떤 스킨 혹은 상세페이지 디자인이 과연 사람들에게 미적으로 아름답게 보일까? 혹은 가독성이 좋을까?"와 같은 질문들이 생겼습니다. 저는 논문을 읽을 줄 아는 박사과정인데! 그냥 넘길 수 없죠?

 

오늘의 정답을 알려줄 특급 비기 논문을 소개합니다! 두둥 "Hall, R. H., & Hanna, P. (2004). The impact of web page text-background colour combinations on readability, retention, aesthetics and behavioural intention. Behaviour & information technology, 23(3), 183-195."... 무섭고 어렵죠...?

 

저도 처음 보는 학술지이긴 한데.. 그래도 나름 좋은 저널인 것 같습니다. 무엇보다도 해당 논문 인용 수가 580회 이더라고요...! 한번 정리해서 설명드리겠습니다.

 

 

 

Behaviour & information technology

 

 

 

 

해당 논문은 웹 페이지의 텍스트와 배경 색상에 따라
- 사람들이 정보를 읽고 기억하는 능력
- 웹 페이지 디자인을 얼마나 좋아하는지
- 웹 페이지에서 파생되는 행동 의도(Behavior Intention; 예: 제품 구매 또는 서비스 가입)에 얼마나 영향을 미치는가를 설명하는 논문이었습니다.

 

구체적으로 논문을 설명드리기 전에 문제를 내보겠습니다.

 

 

 

 

아래 4가지 옵션 중에서 어떤 옵션이 '가독성이 좋을까요?' 그리고 어떤 옵션의 '디자인이 가장 호평'을 받을까요?

 

 

1. 흰색 텍스트에 검은색 배경
2. 흰색 텍스트에 검은색 배경
3. 밝은 파란색 텍스트에 어두운 파란색 배경
4. 청록색(Cyan) 텍스트에 검은색 배경

 

 

 

 

 

가독성 좋은 배경 글자 색상...?

 

 

(논문에 있는 색상 코드를 그대로 사용해서 만들었습니다)

 

 

 

논문 저자들은 136명의 피험자들을 모았습니다. 그리고 사람들이 교육과 관련된 정보가 나와있는 웹 페이지와 제품 정보가 적혀 있는 두 상세 페이지를 살펴보게 했습니다.

 

물론, 사람에 따라서 페이지의 텍스트와 배경 색상을 다르게 설정했습니다. 어떤 사람들은 1번 옵션으로 다른 사람들은 4번으로 이런 식으로 위의 네 가지 색상 조합을 사용했지요.

다시 반복 설명드리면, 이 논문에서는 사람들이 글자와 배경 색에 따라서
(1) 가독성(readability): 정보를 얼마나 잘 읽고 기억할 수 있는지
(2) 미학적 (aesthetics): 웹 페이지 디자인이 얼마나 매력적인지
(3) 행동 의도 (behavioural intention): 웹 페이지에서 제품을 구매하는 행동으로 이어질 가능성이 높은지를 테스트 하였습니다.

 

 

결과가 궁금하시죠? 자 먼저,

Q. 가독성을 높여, 기억력을 증진시킨 디자인은 무엇일까요?

두구 두구 정답은: "검은색 텍스트에 흰색 배경"이었습니다. 1번인데 맞추셨나요? 모두 쉽게 맞추셨을 것 같은데요, 이 조합이 텍스트와 배경 사이의 가장 큰 대비를 가지고 있었기 때문에 즉, 밝기 또는 어두움이 크게 달라서 가독성이 좋고 독자의 이해를 높인다고 설명합니다. 그다음으로 높은 옵션은 흰색 글자에 검정색 배경이었습니다. 가장 최악의 가독성을 보였던 것은 4번째 옵션이었습니다.

 

 

 

다음 문제!

Q. 어떤 디자인을 가장 매력적으로 생각했을까요?

정답은? 이번에는 두구 두구 바로 3번 옵션입니다! 하늘색 계열의 글씨와 진한 파란 배경이 상세페이지를 매력적으로 보이게 했네요. 네이버 블로그에서 알고 한 것인지는 모르겠으나, 초반에 보여드린 이미지가 매력적으로 보였다고 말씀드렸는데 이유가 있었네요 ㅎㅎ

그다음으로는 평균 기준으로 보면 4번 옵션 그리고 2번 옵션 마지막이 1번이었습니다. 가독성 제일 좋은 옵션이 가장 매력적이지 않은 디자인으로 뽑혔군요.

 

 

가장 궁금하실 문제!

Q. 제품 상세페이지의 경우 어떤 디자인이 제품의 구매 의도를 높일 수 있을까요?

정답은?! 바로 3번과 4번입니다. 3번이 평균은 더 높으니 매우 매력적인 옵션 하나만 뽑아라 하면 하늘색 글자에 파란색 배경이군요! (통계적으로는 차이가 없어 보입니다). 꼴찌는 흰색 글자에 검은색 배경이었습니다. 물론 설문 결과라는 한계는 있지만 참고해 볼 만하지요?

 

 

자 그럼..!

Q. 여러분의 블로그 혹은 제품 상세페이지에는 어떻게 해야 할까요?

만일 교육적인 내용이 담긴 블로그나 홈페이지를 만드신다면! 검정 글씨와 흰색 배경을 추천드립니다! 그리고 논문에서는 이렇게 "가독성"이 높은 페이지가 가장 "프로페셔널" 해 보였다고 합니다. 전문성을 내세우실 경우도 참고가 되시겠죠?

 

 

반대로 상업적인 제품 상세페이지나 홈페이지는 어떻게 해야 할까요? 이번에는 색상이 있는 디자인으로 가보세요! 다만 논문에서는 같은 계열의 색상(하늘색 글씨와 진한 파란 배경)으로 글씨와 배경을 두는 것이 더 사람들의 구매 행동을 올릴 수 있을 것이라 설명합니다.

 

재미가 있으셨나요?? 저는 전문성이 가장 중요한 직업이기에! 지금 보이는 블로그와 같이 검정 글씨와 흰색 배경을 두어 가독성도 높이고 프로페셔널해 보이는 두 마리 토끼를 잡아보려고 합니다 :)

 

 

 

이렇게 사회과학은 다양한 의사결정의 사항들에 큰 도움이 될 수 있습니다. 글을 읽고 계신 독자분들이 가지고 있는 고민이나 결정해야 하는 사항이 있으면 댓글을 남겨주세요! 사회과학 연구가 여러분에게 어떻게 도움을 드릴 수 있는지 같이 살펴보자고요!

 

 

 

 

[💟 심리학과 마케팅 이야기!] - 돈 걸고 금연하기! 과학적으로 담배 끊는 방법

돈 걸고 금연하기! 과학적으로 담배 끊는 방법

 

 

 

[💟 심리학과 마케팅 이야기!] - SNS와 커뮤니티를 하는 이유는? 성공하는 SNS의 특징! (Facebook, Twitter, Instagram, or Snapchat)

SNS와 커뮤니티를 하는 이유는? 성공하는 SNS의 특징! (Facebook, Twitter, Instagram, or Snapchat)

 

 

 

[📚 나를 위한 자기계발 지침! 사회과학서적] - 무기력증 극복! 번아웃 극복! 정말 효과적인 방법

무기력증 극복! 번아웃 극복! 정말 효과적인 방법