brunch

라이킷 89 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX DAYS SEOUL Jun 05. 2022

가독성 - 최적의 길이

UX/UI

이 기사는 Baymard의 허가 아래 게재하고 있습니다.
(2022년 05월 10일의 기사입니다)

주요 내용

본문 텍스트의 최적 행 길이는 50–75자입니다.

더 짧거나 더 긴 행 길이는 가독성을 떨어뜨릴 수 있습니다.

우리의 대규모 테스트에 따르면 텍스트 행 길이가 종종 사용자가 제품 또는 서비스 설명을 읽을 때 어렵게 만드는 것으로 나타났습니다.

각 행에 적절한 양의 문자를 사용하는 것은 텍스트 가독성의 핵심입니다.

실제로 전자 상거래 UX 테스트에 따르면 긴 텍스트 줄은 일반적으로 사용자에게 위협적이고 압도적으로 인식됩니다.

결과적으로 지나치게 긴 텍스트 행에 직면한 사용자는 읽는 행위를 회피할 가능성이 더 높습니다.

또한 가독성이 떨어짐에 따라 더 많은 사용자가 제품이나 서비스의 이점을 완전히 이해하지 못하고 특정 제품이나 서비스가 자신의 요구를 충족시키지 못할 것이라고 결정할 것입니다.

이 기사에서는 다음에 대해 설명합니다.

텍스트 행 길이 및 가독성에 관한 일반 원칙

긴 텍스트 행이 전자 상거래 사용자에게 미치는 부정적 영향

전자 상거래 사이트 및 접근성 문제에 대한 최적의 텍스트 행 길이

1) 가독성에 관한 일반 원칙

다양한 행 길이는 궁극적으로 사이트 텍스트의 전반적인 가독성에 영향을 미칩니다. 각 행에 적절한 양의 문자를 사용하는 것은 텍스트 가독성의 핵심입니다.

실제로 텍스트 너비를 결정하는 것은 디자인일 뿐만 아니라 사용자가 텍스트를 쉽게 읽을 수 있는 능력도 중요한 요소여야 합니다.

20세기 중반 스위스 그래픽 디자이너인 Emil Ruder가 행 길이와 가독성에 대한 기본적인 탐구를 수행했습니다. Ruder는 본문 텍스트의 최적 행 길이는 공백을 포함하여 행당 50-60 자라고 결론지었습니다. 또 다른 곳에서는 최대 75자를 사용할 수 있다고 제안합니다.

잠시 동안 특정 숫자를 제외하고 이 범위를 위반하면 어떤 단점이 있을까요?

너무 넓음 : 행이 너무 길면 독자의 눈이 텍스트에 집중하는 데 어려움을 겪을 수 있습니다. 이는 선 길이가 선의 시작과 끝을 측정하기 어렵게 하기 때문입니다. 또한 큰 텍스트 블록에서 올바른 줄로 계속 진행하는 것이 어려울 수 있습니다.

너무 좁음 : 행이 너무 짧으면 눈이 너무 자주 뒤로 이동해야 하므로 독자의 리듬이 깨집니다. 너무 짧은 행은 또한 독자에게 스트레스를 주는 경향이 있어 현재 행을 끝내기 전에 다음 행에서 시작하게 만듭니다(따라서 잠재적으로 중요한 단어를 건너뛰게 됨).

잠재의식은 다음 행으로 넘어갈 때 활성화되는 것으로 나타났습니다. 모든 새 행의 시작 부분에 초점을 맞추지만 이 초점은 행이 지속되는 동안 점차 사라집니다 ("Typography", E. Ruder).

전자 상거래 테스트 중에 전자 상거래 사이트를 탐색하는 사용자를 위한 이러한 기본 가독성 수칙을 확인했습니다.

2) 지나치게 긴 텍스트 행이 전자상거래 사용자에게 미치는 부정적인 영향

이미지, 비디오, gif 및 기타 콘텐츠가 전자 상거래 사용자의 제품 및 서비스 평가 능력에 중요한 역할을 하지만 많은 사용자에게 텍스트는 의사 결정 과정에서 중요한 요소입니다.

물론 사이트 텍스트의 중요성은 고려 중인 제품 또는 서비스에 따라 크게 달라집니다. 전자 상거래에서 의류를 고려하는 사용자는 서비스 기능 및 이점을 주로 텍스트로 전하는 전자제품이나 디지털 상품을 고려하는 사용자에 비해 제품의 시각적 표현에 훨씬 더 많이 좌우될 가능성이 있습니다.

그러나 특정 제품에서 텍스트가 중요하지 않더라도 사이트의 경우 전체 텍스트가 항상 중요한 역할을 합니다. 예를 들어 FAQ UX 나 리뷰 또는 사용자가 체크아웃 UX를 탐색하려고 할 때 그렇습니다.

그러나 텍스트가 행의 길이로 인해 읽기 어려울 때 사용자는 텍스트에 읽으려는 의지가 낮아지거나 효율적으로 읽는 데 어려움을 겪습니다.

❌ "여기에는 너무 길어서 무엇이 도움이 될지 짐작조차 할 수 없습니다." Mahalo의 이 사용자는 긴 설명 단락을 소화하기 어렵다는 것을 알았습니다.

❌ "전체를 읽는 것이 조금 어렵습니다. 이 모든 자료를 읽을 정도로 좋아하는 팬이 아닙니다." Vrbo에서 임대 부동산을 쇼핑하는 이 사용자는 고려 중인 부동산에 대한 긴 "회사 소개" 섹션에 대해 불평했습니다. 긴 텍스트 행은 사용자가 읽기를 두려워하고 낙담시킵니다.

실제로 테스트 중에 사용자가 긴 텍스트 행이 포함된 페이지에 다다르면 즉시 이전 페이지로 돌아가는 것을 관찰했습니다.

우리가 관찰한 다른 사용자는 마지못해 텍스트를 읽기로 결정하지만 전체 텍스트를 읽는 데 실패하고 제품이나 서비스에 대한 완전한 이해 없이 페이지를 떠나는 경우가 많습니다.

어느 쪽이든 긴 행의 텍스트는 사용자가 제품이나 서비스에 대한 더 많은 정보를 수집하는 데 방해가 됩니다.

3) 전자 상거래 사이트 및 접근성 문제를 위한 최적의 텍스트 행 길이

지나치게 긴 행으로 인해 발생하는 문제를 고려할 때 가독성을 높이는 이상적인 행 길이는 무엇일까요?

WCAG(Web Accessibility Initiative) 지침 1.4.8에 따르면 모든 사용자가 액세스 할 수 있으려면 텍스트 행은 80자 이하 여야 합니다 (텍스트가 중국어, 일본어 또는 한국어인 경우 40자 이하여야 함).

당사의 접근성 리서치 및 기타 일반 전자 상거래 리서치는 사용자가 매우 긴 텍스트 행(예: 100자 이상)을 탐색하려고 할 때 피로감을 느끼는 것으로 관찰되었기 때문에 이 지침을 지원합니다.

행 길이가 80자를 초과하지 않도록 하려면 글꼴 기준 길이를 max-width 사용하여 CSS 속성을 설정할 수 있습니다.

⭕️ Bose의 사용자는 "기능 하이라이트"로 구성되고 가독성을 지원하는 라인 길이를 가진 Bluetooth 스피커에 대한 제품 설명을 쉽게 탐색할 수 있음을 발견했습니다.

⭕️ “방수 여부를 확인하고 싶었고… '물에 담그지 마십시오'라고 표시되어 있었습니다. 알아두면 도움이 될 것 같았어요.” B&H Photo의 스피커 제품 설명 에는 텍스트 블록과 글머리 기호 목록이 포함된 읽기 쉬운 형식으로 스피커의 기능이 설명되어 있습니다. 모바일 UX의 경우 세로 모드의 좁은 표시 영역으로 인해 행 길이가 문제가 될 가능성이 적지만 디자인이 텍스트 줄을 80자로 유지하는 것을 지원하지 않는 경우 가로 모드에서 행 길이가 문제가 될 수 있습니다.

또한 글머리 기호 목록과 함께 텍스트 블록을 사용하면 행을 나누는 데 도움이 될 수 있으며 기능 강조 표시로 제품 페이지를 구성할 수 있습니다.

Bose의 사용자는 제품 설명 텍스트에 의존하여 스피커의 크기를 감지했습니다. 이미지는 온라인에서 제품을 고려하는 사용자에게 중요하지만 모든 것을 알리기에는 부족하다는 것을 알 수 있습니다. 이러한 경우 텍스트가 효과적인 대체 역할을 할 수 있도록 가독성을 지원하는 것이 중요합니다.

사용자에게 80자 이하의 행 길이를 제공하는 것은 사이트에서 더 읽기 쉬운 텍스트를 위한 한 단계입니다.

또한 접근성 표준을 준수하려면 텍스트 스타일을 다음과 같이 설정할 수 있습니다.

줄 높이(즉, 텍스트 줄 사이의 간격): 1.5em(즉, 글꼴 크기의 1.5배)

단락 간격: 2em

단어 간격: 0.16em

문자 간격(즉, 추적): 0.12em

가독성을 높이기 위해 행 길이를 설정함으로써 사이트는 사용자 가 제품 및 서비스에 대해 더 많이 배우도록 권장합니다. 테스트에서 알 수 있듯이 일반적으로 사용자 관심이 증가하고 사용자가 제품 또는 서비스를 구매하기로 결정할 가능성이 높아집니다.

(번역 - Hyunmin Kim)