[사용성] 사람들이 페이지를 F자 모양으로 대충 훑어 보게 하지 않으려면 어떻게 해야 할까?

2017년 11월 14일

개념, 사용성

이 글은 사용성 연구 기업인 닐슨 앤 노먼 그룹의 카라 퍼니스(Kara Pernice)가 쓴 “웹을 읽을 때 나타나는 F모양 패턴: 오해와 (모바일에서도) 여전한 연관성”을 요약한 것이다.

닐슨 앤 노먼 그룹의 연구중 가장 많이 인용된 것이 F 모양 읽기 패턴이다. 잘 이해하고 인용한 경우도 많았지만 오해되는 경우도 많았다. 11년만에 다시 다루면서 좀더 명확히 하겠다.

늘 F 패턴이 나타나는 건 아니다. 다른 패턴도 많다.
사용자와 사업자에게 F 패턴이 좋은 게 아니다.
좋은 설계로 F 패턴을 막을 수 있다.

아래 이미지는 2006년 제이콥 닐슨이 처음 수행한 연구에서 나타난 F 패턴을 보여 준다. 45명 이상의 눈동자 추적 연구 결과다.

F모양 패턴

내용의 윗부분을 가로로 읽는다. F의 가로획에 해당한다.
좀더 내려가서 다시 한 번 가로로 읽는다. F의 두 번째, 짧은 가로획에 해당한다.
마지막엔 세로로 읽는다. 천천히 체계적으로 하는 경우도 있고, 빨리 드문드문 보는 경우도 있다. F의 줄기에 해당한다.

완벽한 F모양으로만 나타난다고 생각하진 마라.

또, F 모양은 내용 영역에 나타나는 규칙이다. 예를 들면, 내비게이션 영역에서 F 모양으로 탐색하진 않는다.

F 모양 패턴은 오늘날에도 유효하다. 데스크톱과 모바일 모두에서 말이다. 기술보다는 인간 행동에 좌우되는 오래 가는 UX 발견의 전형적인 예다.

최근엔 아랍어처럼 오른쪽부터 읽는 언어권에 대한 연구도 진행했는데, 뒤집은 F 패턴이 발견됐다.

훑기 패턴에 F 패턴만 있는 게 아니다

F 패턴으로만 훑어 본다는 오해가 있는데 아니다. 겹 케이크(Layer-cake) 패턴, 점점이(Spotted) 패턴, 한 곳 고정(Marking) 패턴, 지나치는(Bypassing) 패턴, 집중(commitment) 패턴이 있다.

집중 패턴은 모든 글을 꼼꼼히 보는 걸 말한다. 위 패턴들에 대한 설명은 원문에 있다.

F 패턴으로 보는 이유

3가지로 말할 수 있다.

글은 많은데 서식이 없거나, 거의 없는 경우. 예를 들면 글은 엄청 많고 강조, 목록, 부제나 소제목 같은 것들은 없는 경우.
사용자가 페이지 탐색에서 효율성을 최우선하는 경우
내용 전체를 읽을 동기나 흥미가 사용자에게 없는 경우

사실 2,3번은 전체 웹에서 사용자의 행동을 설명해 주는 요소다. 사람들은 최대한 효율적으로 정보를 찾기를 원한다.

사용자는 수년간의 독서 경험을 통해 앞부분에 중요 정보가 있을 것이라고 교육받아 왔을 것이고, 따라서 전체 글의 앞부분과 문장의 첫 한두 단어만 보게 되는 것이다.

1번이 우리가 개선할 수 있는 부분이다. 작가와 디자이너가 사용자가 찾는 것을 서식으로 강조해 실마리를 줘야 한다. 그렇지 않으면 F 패턴이 기본이다.

F 모양은 사용자와 사업자에게 모두 나쁘다

당연한 말이지만, F 모양 부분에 늘 중요 정보가 놓여 있다고 장담할 수 없다. 특히 모바일 시대에 반응형 웹디자인 기법을 사용하면, 앞부분에 오는 단어는 스크린 사이즈에 따라 달라진다. 즉, 사람들이 F 모양 패턴으로 읽는다는 것은, 중요 정보가 오른쪽에 놓인 경우 사람들이 못 보고 지나칠 확률이 높아진다는 것을 의미한다.

사용자에게 F 모양 패턴이 좋지 않다면, 사용자들은 왜 그 패턴을 유지하는 것일까? 최대 효율을 추구한다는 관점에서 보면 한 사이트를 꼼꼼히 보는 건 효율이 나쁘기 때문이다. 사용자는 우리 웹사이트에서만 정보를 찾는 게 아니다. 전체 웹에서 정보를 찾는 것이고, 우리 웹은 수많은 사이트중 하나일 뿐이다. 우리 사이트는 백사장으로 치면 모래 알갱이에 불과하다. 흔히 사용자들은 여러 사이트를 동시에 띄워 놓고 정보를 탐색한다.

F모양 패턴에 대한 해결책

글에서 우선순위를 드러나게 하고, 적절한 서식을 매기자. 아래는 간단한 팁들이다.

가장 중요한 정보는 첫 두 문단에.
제목과 부제, 소제목을 사용하라. 중요해 보이게 서식을 주고, 잘 보이게 하자.
제목과 부제, 소제목에 정보를 담아라. 앞 두 단어만 보면 요점을 파악할 수 있게 해야 한다.
관련된 내용을 시각적으로 묶어라. 외곽선이나 배경색 같은 걸로 말이다.
중요 단어나 문장에 강조 서식을 써라.
링크에는 일반 텍스트와는 다른 서식을 적용하고, 링크 텍스트는 ‘가기’ 같은 걸로 하지 말고 정보를 담은 것으로 해라. 웹을 소리로 탐색하는 시각 장애인에게도 도움이 된다.
목록이나 순서가 있는 내용에는 글 머리 기호나 숫자를 사용하자.
필요 없는 내용은 날리자.