F패턴과 Z패턴
(출처 : [F-Shaped Pattern for Reading Content]와 [Z-Shaped Pattern For Reading Web Content]의 기사를 번역 및 가공한 콘텐츠입니다.)
모든 사용자는 사이트를 자세히 확인하지 않습니다.
그들은 읽지 않고 스캔합니다.
스캐닝이란 사용자가 항상 웹사이트의 모든 구석구석을 읽지 않고, 무언가가 눈에 들어올 때만 본다는 것을 의미합니다.
사이트를 디자인할 때 F나 Z패턴을 사용하면 사람들이 읽게 해야 하는 정보의 위치를 제어할 수 있습니다.
사용자의 눈이 따라갈 올바른 정보의 길을 만들려면 눈이 정보를 처리하는 방법을 이해해야 합니다.
이 기사에서는 Z와 F 패턴을 사용하여 웹 디자인에서 시각적 계층 구조를 디자인하는 이론과 실제를 설명합니다.
F패턴은 무엇이며 어느 때 좋을까?
F패턴은 블록 단위의 콘텐츠를 읽기에 가장 보편적인 스캐닝 패턴입니다.
F패턴은 빠르게 읽는데 그 장점이 있습니다. F패턴을 사용하면 단 몇 초 만에 눈이 놀라운 속도로 웹사이트를 스캔할 수 있습니다.
이 패턴은 NNGroup eyetracking study에 의해 대중화되었는데 200명의 사용자가 수천 개의 웹 사이트를 볼 때 유저가 사이트를 스캔하는 동작을 추적하였고, 그 결과 사이트를 스캔하는 행태가 상당히 일관성이 있음이 밝혀졌습니다.
이 스캔 행태는 알파벳 F자와 비슷했으며, 다음과 같은 세 가지 구성요소가 있었습니다.
사용자는 처음 웹 진입 시 일반적으로 콘텐츠 영역의 상단 부분에서 가로로 이동합니다. 이 초기 요소는 F의 상단 막대를 형성합니다
그런 다음 화면 왼쪽을 세로로 스캔하며 단락의 초기 문장에서 관심 지점을 찾고, 흥미로운 것을 발견했을 때 이전보다 짧은 두 번째 수평 움직임을 보입니다. 이 행동은 F의 하단 막대를 형성합니다.
마지막으로, 사용자는 콘텐츠의 왼쪽을 세로로 스캔합니다.
유저는 왼쪽 상단에서 콘텐츠를 스캔하기 시작해 수평으로 내려간 다음, 다음 줄로 내려가서 관심 있는 것을 찾을 때까지 그 행동을 똑같이 반복합니다.
NNGroup은 eye-tracking studies에서 사용자(왼쪽에서 오른쪽으로 읽는 문화권의 사용자)가 일반적으로 문자 F 또는 E와 같은 패턴으로 내용 블록을 스캔한다는 것을 찾아냈습니다.
사용자가 가장 많이 본 영역은 빨간색으로 표시되고 노란색 영역은 그보다 시선이 적게 머물렀으며, 파란색 영역이 가장 적게 본 영역입니다. 회색 영역은 시선이 거의 머물지 않았습니다.
하지만 사용자의 스캔 패턴이 매번 정확하게 F패턴의 세 부분으로 구성되는 것은 아닙니다.
유저가 좋아하는 것을 찾으면 정상적으로 읽기 시작하여 수평선을 형성합니다.
F패턴을 왜 활용해야 하나?
F패턴을 사용하면 사람들이 쉽게 스캔할 수 있는 시각적 계층 구조가 좋은 디자인을 만들 수 있습니다.
F 자 모양의 레이아웃은 왼쪽에서 오른쪽으로 글을 읽는 문화를 가진 사람들에게 편안하게 느껴집니다. 평생 동안 왼쪽에서 오른쪽으로, 위에서 아래로 콘텐츠를 읽었기 때문입니다.
F패턴을 언제 사용하면 좋을까?
F 패턴은 블로그 및 뉴스 사이트와 같이 텍스트가 많은 웹 사이트를 위한 레이아웃입니다.
특히 텍스트가 있는 많은 내용을 담고 있는 사이트의 경우 사용자는 자연스러운 스캔 형식에 따라 설계된 레이아웃을 통해 더 좋은 웹사이트 경험을 유도할 수 있습니다.
CNN은 F패턴의 레이아웃을 사용합니다F패턴을 어떻게 사용하면 좋을까?
F 패턴을 사용하면 디자이너가 콘텐츠를 더 잘 제어할 수 있습니다.
콘텐츠의 우선순위를 정한다
페이지를 디자인하기 전에 가장 중요한 요소와 중요하지 않은 요소의 우선순위를 정합니다.
우선순위를 정하고 나면 올바른 인터렉션을 위해 중요한 내용을 패턴의 '핫스팟'에 간단히 배치할 수 있습니다.
초기 기대치를 설정한다
처음 두 단락이 가장 중요합니다. 사이트 (또는 페이지)의 목적을 신속하게 전달하기 위해 가장 중요한 콘텐츠를 페이지 상단 가까이에 배치합니다.
유저는 일반적으로 헤더 전체를 가로로 읽으므로 내비게이션 바가 중요한 내용을 담기에 적합합니다.
이 화면에서 중요한 내용은 몇 초 만에 다 볼 수 있습니다.읽기보다는 스캐닝에 적합한 디자인을 만든다
패턴을 적용할 때 스캔하는 사람들을 고려해서 콘텐츠를 그에 맞게 F자로 배치합니다.
유저들이 흥미를 느낄만한 콘텐츠로 새 단락을 시작합니다.
사람들은 페이지에서 가장 지배적인 요소(가장 시각적으로 비중을 많이 차지하는 요소)를 먼저 보기 때문에 타이포그래피를 사용해서 텍스트 중요성을 표시하거나(예: 텍스트 내에서 키워드 강조 표시) 특정 색상을 이용해서 버튼을 강조하는 등 중요한 것들에 시각적인 무게를 더하면 좋습니다.
단락 당 하나의 주제만 다루고 가능한 한 불렛 포인트를 사용합니다.
사용자가 가로로 스캐닝하기 때문에 스캐닝의 시작점인 왼쪽이나 마지막 지점에 가장 중요한 콘텐츠(예 : CTA)를 놓습니다.
사이드바를 최대한 사용하기
사이드바는 사용자들이 더 깊이 있게 서비스를 사용하게 하기 위해 존재합니다.
사용자의 참여를 유도하는데 사이드바를 사용하세요.
사용자가 보고 싶지만 기본 콘텐츠와 흐름이 맞지 않는 광고, '관련 기사'목록, 소셜 미디어 위젯 등을 담는 것을 추천합니다.
카테고리 목록, 태그 클라우드, "인기 게시물"위젯 등 사용자가 특정 콘텐츠를 찾을 수 있는 도구로 사용해도 좋습니다.
이디엄은 서브 내비게이션을 사이드바에 담습니다.지루한 레이아웃 피하기
F패턴의 단점은 단조로울 수 있다는 점입니다. 반복적이고 유사한 콘텐츠로 인해 사용자가 쉽게 단조로워질 수 있습니다. 지루해하는 사용자가 생기고, 사이트의 요소들이 무뎌지기 시작하면 이점이 없기 때문에 스캔 영역 내에 하나의 불일치하는 어색한 요소를 추가해 사용자의 참여를 유지하도록 합니다.
레이아웃의 "예상을 깨는"이 기법은 지루한 콘텐츠의 세로 길이가 길 때나 스크롤이 지겨워질 때 유용하게 사용할 수 있습니다.
결론
F 모양 패턴은 사람의 눈의 일반적인 추세를 따르기 때문에 레이아웃 구조를 최적화시킬 수 있습니다.
그러나 템플릿을 따르는 것이 아니기 때문에 굳이 가이드라인을 엄격하게 따를 필요는 없습니다.
Z패턴은 무엇이며 어느 때 좋을까?
Z패턴 레이아웃은 문자 Z의 모양을 따릅니다.
Z패턴 디자인은 사용자가 육안으로 페이지를 스캔할 때 눈이 왼쪽에서 오른쪽으로, 위에서 아래로 이동하는 경로를 사용합니다.
먼저 사람들이 왼쪽 상단에서 오른쪽 상단으로 스캔하여 수평선을 만듭니다. 다음으로 페이지의 왼쪽과 아래쪽으로 대각선을 만듭니다. 마지막으로 다시 오른쪽으로 가로질러 두 번째 수평선을 형성합니다.
사용자의 눈이 이 패턴으로 움직이면 가상의 "Z"모양이 됩니다.
이 패턴은 대부분의 서양 독자들이 책을 위에서 아래로, 왼쪽에서 오른쪽으로 스캔할 때와 같은 방식으로 작동하기 때문에 효과적입니다.
Z패턴을 언제 사용하면 좋을까?
Z패턴 스캔은 텍스트가 중앙에 있지 않은 페이지에서 발생합니다 (기사 나 검색 결과와 같이 텍스트가 많은 페이지의 경우 F패턴을 사용하는 것이 좋습니다).
따라서 Z패턴은 최소한의 정보와 몇 가지 주요 요소로 이루어진 단순한 디자인에 적합한 솔루션입니다.
주로 하나 또는 두 개의 주요 요소를 중심으로 하는 미니멀리스트 페이지 또는 랜딩 페이지는 Z 패턴을 구현하여 사용자가 자연스러운 흐름을 따르도록 권장할 수 있습니다.
Z패턴을 어떻게 사용하면 좋을까?
페이지 레이아웃 디자인을 시작하기 전에 우리는 다음 질문에 대한 답을 찾아야 합니다.
유저가 페이지에 방문하면 어떤 정보를 확인하게 하고 싶습니까?
어떤 순서로 정보를 보길 원하십니까?
그들이 무엇을 하기를 원하십니까?
Z패턴의 전제는 실제로 매우 간단합니다. 페이지에 문자 Z를 그려두면 됩니다.
그리고 적절한 요소의 배치를 통해 사람들이 가장 중요한 정보를 먼저 보고 다음으로 가장 중요한 정보를 두 번째로 보게 되도록 만들면 됩니다.
Z패턴을 만들 때 페이지의 한 부분에서 다른 방향으로 눈을 안내하도록 시각적 흐름을 만드는 것이 중요합니다. 시각적 흐름을 만들 때 염두에 두어야 할 점과 모범사례는 다음과 같습니다.
# 1번 : 유저의 출발점입니다. 로고를 주로 이곳에 많이 배치합니다.
# 2번 : 유저가 보고 싶은 항목을 Z의 상단을 따라 먼저 배치합니다. 눈은 자연스럽게 Z의 경로를 따라갈 것입니다. 2번 요소에 시각적 무게를 더합니다. 버튼(또는 다른 주요 요소)을 밝고 화려하게 만들어 사용자가 Z 패턴을 따라가도록 안내합니다.
# 페이지의 중앙 영역. 이 영역의 트릭은 사용자가 관심을 갖는 콘텐츠로 채우면서 다음 줄로 시선을 계속 유도하는 것입니다. 예를 들어, 페이지 중앙에 히어로 이미지를 배치하여 상단 및 하단 섹션을 분리하고 Z 경로를 따라 눈을 안내할 수 있습니다.
# 3번 : 사용자에게 최종 CTA를 설명합니다. 예를 들어 페이지에서 판매하려는 제품을 홍보할 경우 잠재 고객이 구매 버튼을 보기 전에 유도하는 문구 등을 여기소 노출합니다. 3번 영역을 통해 혜택이나 기타 유용한 정보를 제공할 수 있습니다.
# 4번 : 여기는 결승선이며 3번에서 CTA를 유도하기 이상적인 장소입니다.
Z 레이아웃의 사용아래에서 Basecamp와 Evernote의 두 가지 Z 레이아웃 예를 볼 수 있습니다.
Zig-Zag 패턴
Z패턴에 대해 알아야 할 흥미롭고 유용한 점은 이 패턴을 일련의 z 움직임으로 보아 확장할 수 있다는 것입니다.
아래에서 볼 수 있듯이 Dropbox는 몇 가지 주요 제품 기능을 안내하고 "무료 가입"CTA를 사용하여 반복된 Z 패턴을 마무리합니다.
이 레이아웃에서 "자세히 알아보기"버튼은 전체 내용을 읽을 필요 없이 사용자가 다음 관련 페이지로 이동하는 데 도움이 되는 CTA의 역할을 합니다.
결론
Z 패턴에는 이점이 많으며 그렇기 때문에 수많은 웹사이트에서 채택되었습니다.
Z 패턴을 사용해 정보를 시각적으로 배치하여 사용성을 눈에 띄게 향상할 수 있습니다. 정보의 우선순위를 정한 뒤 배치해 보세요.
