[인턴10] 3주차 - (1) 스캐닝 패턴과 UI 전략

 

 

프로젝트에서 화면 레이아웃 구성이나 컴포넌트 배치 등을 고민 중입니다.

사용자 입장에서 시선이동에 대한 피로를 줄이면서 이탈률을 낮추기 위한 화면 구성에 대해 공부하고 싶었습니다.

그래서 이번에는 스캐닝 패턴에 관한 외국 아티클을 읽고 정리해봤습니다.

 

---

 

Scannability란?

마케팅 전문가 David Zheng의 연구에 따르면 사용자dml 60%는 웹사이트 방문을 포기하거나 15초 이내로 떠난다고 합니다. 실제로 사용자는 모든 정보를 읽지 않고, 스캔 후 더 읽을지를 결정합니다. 이 특징을 활용하면 단기방문 고객을 장기고객으로 전환시킬 수 있습니다.

이 방법을 Scannability라고 합니다. Scannability는 사용자의 스캔을 쉽게 하는 레이아웃 접근방식입니다. 그리고사용자에게 가장 친화적인 인터페이스를 구성하는 중요한 요소입니다. 처음 방문자의 16%만 단어를 하나하나 읽고, 나머지 84%는 후킹요소(제목, 문장, 이미지, 애니메이션)을 스캔하고 깊게 읽어볼지 결정합니다.

 

 

The Benenfits of a Scannable Interface

스캔 가능성을 위해서는, 사용자 관점에서 다음 질문을 답하며 관찰해야합니다.

• 페이지 내용이 읽는 사람 관점에서 기대에 부합한지?
• 페이지의 메인 메세지가 짧은 시간에 이해하기 쉬운지?

 

 

스캔 가능성에 최적화된 페이지의 효율성

NNG(the Nielsen Norman Group)에 따르면 다음과 같습니다.

• 사용자의 작업완료 시간이 더 빨라짐
• 사용자가 콘텐츠가 자신에게 적합한지의 여부를 쉽게 정의
• 사용자가 기억 오류를 낮출 수 있음
• 사용자가 페이지 구조를 더 잘 이해할 수 있음
• 콘텐츠 품질과 신뢰에 대해 더 나은 평가를 내릴 수 있음
• 이탈률이 감소함
• 재방문율이 높아짐
• 검색엔진 최적화 SEO 개선이 가능함

 

 

The Power of User Habits in Scanning Patterns

사용자들의 시선 추적 패턴을 활용해, 우선순위 지정, 배치, 시각계층 구조를 설정하는데 효과를 만듦.

 

 

• F Pattern : 가장 일판적인 패턴으로, 눈은 읽을 떄와 같이 수평으로 움직이고, 그 다음 아래 내용으로 이동.
• Z Pattern : 정보가 균일하게 표시되고, 시각적 계층이 약한 웹페이지에서 주로 보임.
• Layer Cake Pattern : 사용자가 제목-부제목을 스캔할 떄, 해당 패턴에 따라 페이지에서 원하는 정보를 찾을 수 있는 위치를 빠르게 판단함.
• Spotted Pattern : 광고소재 제작시 참고하는 패턴. 큰 텍스트 덩어리를 건너 뛰고 시각적 구성요소인 모양/비율변칙을 스캔하여 특정 정보를 찾음.
• Marking Pattern : 스크롤하는 동안 한 곳에 시선을 고정하는 것. 모바일 UX에서 매우 일반적인 패턴
• Bypassing Pattern : 목록의 여러 줄의 텍스트가 모두 같은 단어로 시작하는 경우. 사용자는 의도로적으로 줄의 첫 단어를 건너 뜀.
• Commitment Pattern : 보기 드문 패턴으로, 사용자가 콘텐츠에 매우 관심있고, 모든 콘텐츠를 소비하려는 동기가 있을 때만 발생함.

 

 

 

Scannability 높이는 방법

• • 호흡공간 만들기 → 여백 만들기Negative 공간 활용하기

• 소제목을 사용하여 콘텐츠 요약
  • 사람들은 많은 양에 텍스트에 부정적 반응
  • 소제목 추가하기 : 긴 텍스트를 읽기 수월하게 만드는 법
    • 소제목을 작성할 때 요점을 유지하는것이 중요
    • 콘텐츠가 제공하는 핵심 메세지를 전달하기만 하면 됨.
• 글머리 기호 및 번호 매기기 목록 만들기
  • 사람의 뇌는 그룹화하려는 패턴을 보임
  • 사용자는 텍스트위주 보다는 글머리 기호 또는 번호 매기기 목록을 더 잘 이해
• 콘텐츠 시각화
  • 텍스트 + 이미지/그래픽 사용
  • 시각계층구조 개선
• CTA에 대한 적절한 강조 설정하기
  • 대부분의 디지털 경험은 사용자의 특정행동을 유도하는 목표
  • CTA를 콘텐츠와 가까이 배치 → 직관적인 이해를 위해
  • CTA의 비율, 색상 및 위치가 적절한지 여부를 테스트하는 효과적인 방법은
    • 최종 디자인을 일시적으로 회색조로 변환
    • CTA가 눈에 띄게 보이고 강조되어 있으면 스티키 UI가 잘 된 것

 

 

Scannability가 중요한 이유

• 스캔 가능한 콘텐츠를 만들어 단기 방문자가 오래 지속되는 사용자가 전환
• 스캔 가능한 콘텐츠는 최종 사용자에게 자신의 시간이 소중하다는 것을 보여줌
• 레이아웃 디자인을 간단히 살펴봄으로써 핵심 메세지를 이해할 수 있는 기회를 제공

 

---

 

Scannabiliy를 고려하며 팀회의를 진행해야겠습니다.

맞춤형 서비스를 위해서는 사용자의 시선이동 소요를 줄이고 좀 더 최적화된 인터페이스를 제공하는 것이 핵심이라고 생각합니다.

 

 

-출처 : https://www.toptal.com/designers/web/ui-design-best-practices