사양 시트의 가독성을 높이는 4가지 방법
Spec Sheets
이 기사는 Baymard의 허가 아래 게재하고 있습니다.
(2018년 3월 27일의 기사입니다)
제품 페이지의 사양 시트가 사양이 많은 제품을 고려하는 사용자, 특정 제품 유형에 대한 높은 수준의 지식을 가진 사용자, 동일한 제품 사이에서 결정하려는 사용자 모두에게 엄청난 도움 이 될 수 있음을 사용자 테스트를 통해 알 수 있었습니다.
그러나 많은 사이트에서 사용자의 효과적인 사용 능력을 방해하는 사양 시트의 설계로 인해 일관적인 어려움을 겪고 있음을 알 수 있습니다.
실제로 UX 벤치마크에 따르면 전자 상거래 사이트의 50%는 사용자가 읽기 어려운 사양 시트 디자인을 가지고 있습니다. 이렇게 하면 대부분의 사용자가 원하는 정보를 찾기 위해 더 열심히 노력해야 하는 반면 다른 사용자는 정보를 전혀 찾을 수 없게 되어 사용자가 포기하는 상황이 발생할 수 있습니다.
이 기사에서는 다음을 포함하여 제품 사양 시트 기독성과 관련된 제품 페이지 사용성 리서치의 4가지 테스트 결과에 대해 논의합니다.
사양을 의미론적 섹션으로 그룹화가 필요한 이유
사용자가 가장 중요한 사양에 집중하도록 돕는 방법
스타일링이 사양 시트 가독성을 향상하는 방법
대부분의 사양 시트에서 다중 열 형식을 피해야 하는 이유
1) 사양을 의미론적 섹션으로 그룹화해야 하는 이유
여러 피험자가 Lowe's에서 냉장고의 핵심 속성, 특히 크기 및 보증 정보에 대한 사양을 식별하는 데 문제가 있었습니다. 2열 사양 시트가 단순히 하나의 그룹화되지 않은 사양 목록이라는 점에 유의하십시오.
반면 Tesco는 사양을 섹션으로 분류하여 긴 사양 시트를 훨씬 쉽게 개요를 파악하고 사용자가 원하는 사양에 빠르게 액세스 할 수 있도록 합니다.
사용자에게 정리되지 않거나 그룹화되지 않은 제품 사양 시트가 표시되면 개요를 보고 특정 사양을 찾는 것이 매우 어려워집니다.
실제로 테스트하는 동안 상대적으로 짧은 사양 시트라도 "사양의 벽"으로 표시되면 읽을 수 없게 되었습니다. 이로 인해 사용자는 관련 사양과 구매 결정에 미치는 영향을 해석하는 데 시간을 소비하는 대신 관심 있는 사양을 찾는 데 더 많은 시간을 할애해야 합니다.
그러나 우리의 벤치마크에 따르면 전자 상거래 사이트의 23%는 사양을 섹션으로 의미론적으로 그룹화하지 않습니다.
중간 길이의 사양 시트(예: 20개 이상의 사양)는 사양을 각각 제목이 있는 관련 정보의 하위 섹션으로 그룹화해야 합니다.
그룹화 및 제목은 테스트에서 훨씬 더 빠르게 읽도록 표시되었지만 전체 사양 시트를 덜 위협적으로 만드는 이점도 있습니다 ("사양의 벽"을 허물어).
또한 사양 시트를 하위 섹션으로 그룹화하면 관련 사양이 항상 서로 가까이 표시되어 가독성이 더욱 향상됩니다. 예를 들어, "치수 및 중량" 하위 섹션에 제품의 치수 및 중량과 관련된 모든 사양을 포함하면 사용자가 사양 시트를 처음 탐색할 때 해당 콘텐츠에 빠르게 액세스 할 수 있습니다.
마지막으로 사양 그룹화 제목은 설명하는 제품 유형에 맞게 조정되어야 합니다. 사양 그룹 제목은 다양한 제품 유형 세트를 판매하는 사이트의 경우 판매되는 제품 유형에 따라 달라야 합니다(예: 냉장고 사양 시트의 제목은 드릴 사양 시트의 제목과 다름).
2) 사용자가 가장 중요한 제품 사양에 집중하도록 돕는 방법
Costco는 긴 사양 목록의 맨 위에 주요 사양에 대한 요약을 제공하지 않으므로 사용자가 가장 중요한 사양에 집중하기 어렵습니다.
Best Buy는 사양 시트 상단에 "주요 사양" 요약을 제공하며 가장 중요한 사양을 제공합니다. 또한 사양 그룹의 표시 순서는 일반적으로 사양의 인기도를 반영합니다.
제품 사양 시트에서 모든 정보의 중요성은 동일하지 않습니다. 대부분 제품에 따라 사용자가 찾는 몇 가지 중요한 사양이 있습니다.
사양 시트에서 가장 많이 찾는 정보는 분야에 따라 다르지만 제품 범주 내에서는 동일한 경우가 많습니다. 따라서 사양 그룹이 나열되는 순서를 최적화할 수 있기에 가장 많이 찾는 사양을 먼저 표시하면 효과적입니다.
두 개의 전체 뷰포트를 초과하는 사양 시트의 경우 주요 사양에 대한 요약을 추가로 제공해야 하는지 고려하십시오.
또한 두 개의 뷰포트보다 짧은 사양 시트는 핵심 사항에 대한 요약을 요구하지 않을 가능성이 높으며 대신 사양 하위 섹션의 우선순위가에만 의존할 수 있습니다.
이러한 이점에도 불구하고 사이트의 3% 만이 가장 중요한 제품 사양을 강조하기 위해 요약을 사용합니다.
3) 스타일링이 사양 시트 가독성을 향상하는 방법
Sears의 배경색은 섹션 간의 시각적 구분을 제공하지만 사용자가 사양 레이블과 각 값에 빠른 연결성을 가지는 데는 거의 도움이 되지 않습니다.
REI의 수직 및 수평 구분은 아이트래킹 테스트의 피험자가 관심 있는 사양 유형을 찾을 때까지 사양 레이블만 수직으로만 읽어도 간단히 구별을 하게 하고 수평 추적으로 넘어갈 수 있도록 합니다.
테스트 동안 수평 스타일이 없는 사양 시트가 사양 레이블의 관련 값으로 추적하는 것을 어렵게 만들었습니다. 둘 사이의 거리는 단순히 사용자가 스타일이 지정되지 않은 수평선을 추적하는 것을 불필요하게 어렵게 만들고 오류가 발생하기 쉽게 만듭니다. 특히 사양 시트에서 종종 사용되는 다소 작은 글꼴 크기를 고려할 때 더더욱 그렇습니다.
이것은 우리의 아이트래킹 테스트에서 관찰된 행동과 뚜렷한 대조를 이룹니다. 여기서 수평 음영을 사용하는 사이트에서 피험자는 사양 레이블을 다음과 연결할 때 수평선을 훨씬 더 빠르고 안정적으로 추적할 수 있었습니다.
배경색, 아이콘 및 선 은 모두 사양 시트에 적용하여 정보를 보다 쉽게 읽을 수 있는 기술입니다. 아이콘과 같은 일부 스타일 도구의 추가는 텍스트가 많은 지루한 목록에 생기를 불어넣거나 시각적인 흥미를 더할 수 있습니다.
우리의 벤치마크 데이터에 따르면 사이트의 23%는 사용자가 사양 시트를 읽고 해석하는 데 도움이 되는 시각 보조 도구를 사용하지 않고 있습니다.
4) 대부분의 사양표에서 다중 열 형식을 피해야 하는 이유
Grainger의 사양에 대한 두 개의 열은 사양 시트를 읽기 어렵게 만들고 일부 사용자는 비교 기능을 위한 내용으로 오인할 수 있습니다.
B&H Photo의 사양에 대한 단일 열 은 사용자가 사양을 탐색하는 데 도움이 되며 비교 기능에 대한 사양 시트를 잘못 해석할 가능성을 줄입니다.
테스트에서 2열 레이아웃은 1열 디자인과 비교할 때 피험자가 정보를 찾고 해석 하기가 훨씬 더 어려운 것으로 나타났습니다.
이것은 잘못된 해석을 하기 쉽기 때문에 일반적으로 피해야 하는 형식의 다중 열 레이아웃에 대한 일반적인 결과입니다.
사양 시트에 다중 열 형식을 사용할 때 가장 심각한 사용성 문제는 일부 사용자가 2열 사양 시트를 비교 시트로 완전히 잘못 해석하여 포함된 데이터를 거의 쓸모없게 만드는 것입니다. 즉, 사용자는 단일 냉장고의 사양을 보는 것과는 반대로 두 개의 서로 다른 냉장고의 사양을 보고 있다고 생각할 수 있습니다.
그러나 벤치마크에 따르면 사이트의 20%가 사양 시트에서 여러 열을 사용합니다.
수직 높이를 유지하기 위해 여러 열을 사용하는 대신 기본 상태에서 사양 시트의 일부를 분리하는 것을 고려하십시오.
Crutchfield 에는 사양의 의미론적 섹션으로 그룹화하고, 가독성을 위해 행 색상을 번갈아 사용하고, 단일 열 형식을 사용하는 가독성이 높은 사양 시트입니다.
본질적으로 제품 사양 시트는 텍스트가 많은 콘텐츠를 훑어봐야 하므로 쉽게 읽기 어려운 콘텐츠입니다. 사용자가 사양 시트를 최대한 효율적으로 사용할 수 있도록 하고 사용자가 사양 시트의 설계 결함으로 인해 제품을 포기하는 문제를 막기 위해
제목이 있는 관련 하위 섹션으로 사양 그룹화
가장 많이 살펴보는 사양을 상위에 요약하는 것을 고려하되 사양 시트의 전체에도 포함해야 합니다.
사용자가 사양 시트 레이블과 값을 연결하는 데 도움이 되도록 배경색, 아이콘 및 선을 사용합니다.
다중 열 형식을 피합니다.
마지막으로, 위의 4가지 항목 외에도 사양 시트 자체의 사양은 모든 제품에 걸쳐 균일하고 일관된 구조를 가져야 합니다.
가독성이 높은 제품 사양 시트가 있으면 사용자는 읽기 어려운 사양 시트를 해석하는 방법 대신 제품이 자신의 요구 사항을 충족하는지 평가하는 가장 중요한 것에 집중할 수 있습니다.
스펙이 많이 있는 다른 제품도 마찬가지지만 특히 조립식 컴퓨터나 노트북을 구입할 때 상품 상세정보에서 스펙 체크를 해 본 경험이 많이 있을 것입니다.
리터러시가 낮은 분들의 경우 처음에는 네이버 지식인이나 블로그 등을 찾아보는 등 호기롭게 도전하지만 CPU, 그래픽카드, OS, 코어, 메모리... 등등, 상세 스펙이 너무나 많은 데다 가독성도 떨어지기에 제풀에 지쳐 포기하거나 컴퓨터에 대해 잘 아는 컴퓨터 공학과(?) 친구나 지인에게 부탁했던 경험도 있을 것입니다.
이 기사에서 가독성을 높이기 위한 방법으로 4가지 제시하며 피해야 할 설계에 대해 설명하고 있는데 실제 사이트들을 살펴보면 피해야 할 내용을 그대로 시행하고 있는 사이트가 많이 존재한다는 것을 알 수 있습니다.
스펙 시트가 포함된 제품을 판매하는 서비스를 운영하고 있다면 단순히 제품 정보로서의 제공이 아닌 사용자 입장에 있어서 제시하고 있는 정보 설계가 과연 적절한지 검토해 볼 필요성이 있습니다.
