by
Oct 22. 2023
랜딩 페이지에서의 6가지 아이 스캐닝 패턴
서비스 기획자의 UX 라이팅 가이드
인트로
요즘 읽고 있는 책, 'UX 라이팅 교과서'를 참고하며 작성한 글이다. 목적은 앞선 글에서도 말했던 것처럼 학습과 공유.
이번 글에서 다룰 주제는 랜딩 페이지에서의 6가지 아이 스캐닝 패턴이다. 사용자가 웹/모바일에서 정보를 획득하기 위한 페이지에 진입했을 때 사용자의 시각 동작 패턴에 대한 것이다.
랜딩 페이지에 대한 패턴이 존재하는 것처럼, 검색 목록 페이지에 대한 아이 스캐닝 패턴도 존재한다. 이를 크게 두 개의 페이지로 구분한 이유는 사람이 정보획득을 위한 온라인에서의 행동이 크게 1) 검색과 2) 정착으로 나눌 수 있기 때문일 것이다.
이전 내용과 이어지는 것이니, 앞선 글을 읽고 이 글을 읽는 것을 추천한다.
그럼 이제 6가지 패턴이 어떤 것이 있는지 확인해 보자.
랜딩 페이지에서의
6가지 아이 스캐닝 패턴
F 패턴 (1/6)
ⓒ Nielsen Norman GroupF패턴이란?
위 사진은 2006년 Nielsen Norman Group에서 232명의 사용자를 대상으로 아이 스캐닝 패턴을 조사한 것이다. 사용자들의 시선이 많이 겹치는 곳일수록 열상을 띄도록 표현한 것인데, 컨텐츠를 보는 패턴이 영대문자 'F' 형태로 꽤나 일치하는 것을 볼 수 있다.
1. 사용자는 처음에 컨텐츠 영역의 맨 윗부분을 수평 이동하며 읽는다. (F 문자의 상단 막대)
2. 이후 사용자들은 페이지를 약간 아래로 이동한 다음, 이전에 이동한 것보다 더 짧은 영역을 수평 이동하며 컨텐츠를 읽는다. (F 문자의 중간 막대)
3. 마지막으로, 사용자는 컨텐츠의 왼편을 수직 이동하며 컨텐츠를 읽는다. (F 문자의 기둥)
사진을 보면 페이지 제목이나 글의 상단 부분을 읽다가 아래로 내려가면서 단락의 첫 번째 문장만 골라 읽고, 더 내려갈수록 읽는 양이 줄어드는 것을 확인할 수 있다. 이를 제목이나 목록, 진한 글자처럼 사용자의 시선을 유인할 만한 디자인적 장치가 없는 경우에 본능적으로 읽게 되는 패턴으로 해석할 수 있다.
어떻게 작성하면 좋을까?
F 패턴 웹디자인은 게시물이나 검색결과 페이지, 상품 판매 페이지, 서비스 소개 페이지 등 텍스트 중심의 페이지에 적합하다. 상단에 사용자에게 전달하고 싶은 핵심 내용을 배치하는 등 컨텐츠 배치의 우선순위를 선정하는 근거로 사용하는 것을 추천한다. 단, F 패턴이라고 2개의 가로 줄기만 있어야 한다는 것은 아니다.
레이어 케이크 패턴 (2/6)
ⓒ Nielsen Norman Group레이어 케이크 패턴이란?
사람들이 본문을 읽기 전에 단락의 소제목을 평행하게 훑어보게 됨으로써 발생하는 패턴이다. 예를 들어 제목만 일렬로 읽을 때 이런 모양의 스캐닝 패턴이 나온다.
이는 사용자들이 단락 안에서 헤매지 않게, 제목에 단락의 내용을 정확하게 담을 수 있는 기술이 필요하다. 즉, 높은 두괄식 작성 기술이 요구된다.
어떻게 작성하면 좋을까?
글의 제목 혹은 부제목이 페이지에서 시각적으로 두드러지게 내용을 잘 포함시켜야 한다. 효과적인 제목을 작성하는 방법은 1) 제목과 부제목을 일관되고 예측 가능하게 작성하는 것과 2) 제목과 부제목을 설명과 명확하게 구분하는 것, 그리고 3) 텍스트 효과(텍스트 데코레이션)를 이용하는 것이다.
또한 스크롤하지 않아도 한눈에 내용을 한눈에 파악을 할 수 있도록 1) 상단에 개요를 적거나 2) 왼쪽 사이드 바에 단락으로 이동 가능한 링크 목록을 달아주는 것도 좋다.
이를 통해 레이어 케이크 패턴을 유도하여 사용자가 자신이 필요로 하는 정보를 신속하게 찾고, 원하는 페이지에 랜딩 시킬 수 있게 유도할 수 있다.
스파티드 패턴 (3/6)
ⓒ Nielsen Norman Group스파티드 패턴이란?
사용자가 눈에 띄는 글자를 띄엄띄엄 골라 읽을 때 자주 보이는 스캐닝 패턴이다.
텍스트 데코레이션(볼드, 밑줄, 컬러 등)을 통해 시선을 끄는 문구에 시선이 집중된다.
어떻게 작성하면 좋을까?
기획 시 텍스트를 잘 선정하는 것이 중요하다. 그리고 중요한 단어를 본문 텍스트의 나머지 부분과 다르게 보이게 하고, 글머리표(불렛포인트 등)를 사용해 목록을 만드는 것이 좋다. 이 경우 F 패턴보다 약간 더 효과적일 수 있다.
커밋먼트 패턴 (4/6)
ⓒ Nielsen Norman Group커밋먼트 패턴이란?
커밋먼트Commitment란 '헌신'을 의미한다. 이름 그대로 사용자가 내용을 철저하고, 꼼꼼하게 읽는 스캐닝 패턴을 말한다.
이 패턴은 다른 패턴에 비해 사용자가 시간을 가장 많이 소비하는 패턴이다. 그래서 일반적인 스캐닝보다 더 많은 시간과 노력을 들이지만, 사용자가 내용을 가장 잘 이해할 수 있고 더 많은 정보를 모을 수 있는 기회를 준다.
이 패턴이 발생하는 것은 크게 두 가지 경우가 있다.
1. 사용자가 정확히 원하는(관심 있는) 컨텐츠인 경우
2. 사용자가 무엇을 읽어야 할지 불분명한 경우
어떻게 작성하면 좋을까?
믿고 신뢰할 수 있을 만한 정보를 사용하고, 브랜드에 대한 선호도(컨텐츠의 인지도 등)를 올리는 것이 커밋먼트 패턴을 유도하는데 유리하다. 단, 불분명하게 작성하는 것을 경계하자.
론 모어 패턴 (5/6)
론 모어 패턴이란?
론 모어는 잔디깎이 기계를 의미한다. 론 모어 스캐닝 패턴은 잔디깎이 기계처럼 한쪽에서 반대쪽으로 이동하고 그 자리에 돌아서 다시 반대편으로 이동하는 모습이기 때문이다.
일반적으로 도표나 셀 등을 통해 정보를 얻을 때 주로 발생하는 스캐닝 패턴인데, 사용자가 비교 테이블을 두 개 놓고, 다른 제품이나 서비스를 적극적으로 비교할 때 이 패턴을 보일 수 있다.
ⓒ Forms app어떻게 활용할 수 있을까?
제품/서비스/가격 비교 등을 빠르게 만들기 위해 도표로 제작하는 것이 좋다.
바이패싱 패턴 (6/6)
