27 아이트래킹
아이트래킹이란?
아이트래킹(Eye tracking)은 사람의 눈동자가 자연스럽게 움직이는 패턴을 측정하여 인지과학, 마케팅, 인간-컴퓨터 상호작용, 의학 등 다양한 분야에서 응용되고 있는 기술입니다.
웹디자인에서 아이트래킹은 사용자 경험(User Experience)을 향상시키기 위한 분석 도구로 많이 활용됩니다. 사용자가 웹사이트에서 어디를 먼저 ��는지, 어느 부분에서 더 집중하는지, 어떤 링���를 가장 많이 클릭하는지 등을 측정하여 사용자 중심의 디자인을 구축하는 데 큰 도움이 됩니다.
아이트래킹을 이용하여 웹디자인을 평가할 때 가장 많이 사용되는 지표는 **“Heatmap(히트맵)“**입니다. 이는 사용자가 웹사이트에서 어느 부분에서 가장 많이 시선을 머무르는지를 색상으로 표현한 것입니다.
아이트래킹을 활용한 디자인 트렌드
- 사용자 주의 집중 영역 강화 : 주요 콘텐츠를 시선이 집중되는 영역에 배치
- “F” 자 패턴 및 “Z” 자 패턴 디자인 : 시선 패턴에 근거한 웹디자인
- 다크 모드 적용 디자인 : 밝은 배경의 글자를 읽을 때 눈의 피로가 빠르게 쌓이는 점을 반영
- 레이어드 콘텐츠 구성 : 의미 있는 정보에 빠르게 접근할 수 있도록 구성
- 수평 스크롤 : 눈동자 이동에 따라 최적화된 수평 스크롤 활용
F패턴
정보
F패턴은 블록 단위의 콘텐츠를 읽기에 가장 보편적인 스캐닝 패턴입니다. NNGroup eyetracking study에 의해 대중화되었으며, 200명의 사용자가 수천 개의 웹 사이트를 볼 때 스캔하는 동작이 상당히 일관성이 있음이 밝혀졌습니다.
스캔 행태는 알파벳 F자와 비슷했으며, 다음과 같은 세 가지 구성요소가 있었습니다:
- 사용자는 처음 웹 진입 시 콘텐츠 영역의 상단 부분에서 가로로 이동합니다. (F의 상단 막대)
- 화면 왼쪽을 세로로 스캔하며 관심 지점을 찾고, 이전보다 짧은 두 번째 수평 움직임을 보입니다. (F의 하단 막대)
- 마지막으로, 콘텐츠의 왼쪽을 세로로 스캔합니다.
- 빨간색: 가장 많이 본 영역
- 노란색: 그보다 시선이 적게 머문 영역
- 파란색: 가장 적게 본 영역
- 회색: 시선이 거의 머물지 않은 영역
F패턴 장점
시각적 계층 구조가 좋은 디자인을 만들 수 있습니다.
F패턴을 언제 사용하면 좋을까?
블로그 및 뉴스 사이트와 같이 텍스트가 많은 웹 사이트에 적합합니다.
F패턴 단점
단조로울 수 있습니다. 반복적이고 유사한 콘텐츠로 인해 사용자가 쉽게 지루해질 수 있으므로, 스캔 영역 내에 하나의 불일치하는 요소를 추가해 사용자의 참여를 유지하도록 합니다.
Z패턴
Z패턴을 언제 사용하면 좋을까?
Z패턴 스캔은 텍스트가 중앙에 있지 않은 페이지에서 발생합니다. 최소한의 정보와 몇 가지 주요 요소로 이루어진 단순한 디자인에 적합합니다.
Z패턴을 어떻게 사용하면 좋을까?
페이지에 문자 Z를 그려두고, 적절한 요소의 배치를 통해 사람들이 가장 중요한 정보를 먼저 보게 만들면 됩니다.
- 1번 : 유저의 출발점. 로고를 주로 이곳에 배치합니다.
- 2번 : 유저가 보고 싶은 항목을 Z의 상단을 따라 배치합니다. 버튼을 밝고 화려하게 만들어 사용자가 Z 패턴을 따라가도록 안내합니다.
- 3번 : CTA를 설명합니다. 혜택이나 기타 유용한 정보를 제공합니다.
- 4번 : 결승선이며 CTA를 유도하기 이상적인 장소입니다.
Zig-Zag 패턴
