brunch

매거진 UX 디자인의 모든 것

라이킷 75 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Dec 04. 2017

웹 콘텐츠를 읽는 Z 형 패턴

UX 디자인 배우기 #129

Today UX 아티클

오늘은 웹 콘텐츠를 읽는 Z형 패턴에 대해 얘기하고자 합니다.

Nich Babich의 원문 번역한 글입니다.

모든 유저가 여러분이 작성한 글을 한 글자 한 글자 읽는다고 상상하기 쉽습니다. 꿈 깨십시오. 유저는 읽지 않고, 훑어봅니다.

유저는 웹 페이지를 읽지 않는다. 그들은 훑어본다.

훑어본다는 것(scanning) 눈길을 끄는 부분에서만 멈추어서 읽는다는 뜻입니다.

디자이너는 유저가 웹페이지를 볼 때 어디를 보게 할지 어느 정도 통제할 수 있습니다. 방문자의 눈이 따라가야 하는 적정 경로를 만들고자 한다면, 우리 눈이 어떻게 정보를 처리하는지 이해해야 합니다. 이번 글에서는, 그에 관한 이론을 설명하고 Z 패턴을 활용하여 웹 디자인에서 시각적 계층구조를 만드는 방법을 설명하고자 합니다.

Z 패턴이란 무엇이며, 작동 원리는 무엇인가

예상하셨겠지만, Z 패턴 레이아웃은 알파벳 Z의 모양을 따릅니다. Z 패턴 사람의 눈이 페이지를 훑어볼 때 움직이는 경로로, 왼쪽에서 오른쪽으로, 상단에서 하단으로 움직이는 형태를 뜻합니다.

먼저, 사람들은 왼쪽 상단에서 오른쪽 상단으로 가로로 훑어봅니다.

그다음으로, 왼쪽 하단으로 움직이며 대각선을 그립니다.

끝으로, 다시 오른쪽으로 움직이며 두 번째 가로선을 그립니다.

Z 레이아웃의 사례. Image credit: Tutplus

대부분의 서양 독자들은 책을 읽을 때 이런 식으로 위에서 아래로, 왼쪽에서 오른쪽으로 훑어보기 때문에 이를 웹사이트에도 적용할 수 있습니다.

어디에 사용해야 하는가

Z 패턴으로 훑어보는 행동은 텍스트가 중심이 되지 않는 페이지에서 발생합니다(기사나 검색 결과와 같이 텍스트가 많은 페이지의 경우, F 패턴을 사용하는 것이 낫습니다). 최소한의 카피와 몇 가지 핵심 요소만으로 디자인된 간단한 디자인의 경우에 Z 패턴은 좋은 솔루션이 됩니다. 주로 한 두 가지 메인 요소로만 구성된 미니멀리스트 페이지나 랜딩 페이지에서 유저가 이 자연스러운 방법을 따를 수 있도록 Z 패턴을 적용할 수 있을 것입니다.

Z 레이아웃은 간결성과 행동유도가 가장 중요한 디자인 프로젝트에서 진정으로 빛을 발하게 됩니다. Z 레이아웃 예시: 페이스북 랜딩 페이지.

어떻게 사용해야 하는가

페이지 디자인을 시작하기 전에, 다음 질문에 대한 답을 찾는 것이 필수적입니다.

방문자가 페이지에 들어왔을 때 그들이 어떤 정보를 인지하기를 원하는가?

그들이 어떤 순서로 정보를 보기를 원하는가? 그들이 어떤 행동을 하길 원하는가?

Z- 레이아웃의 전제는 매우 간단합니다. 말 그대로 페이지에 문자 Z를 도입하는 겁니다. 이상적으로는 사람들이 가장 중요한 정보를 먼저 보고, 다음으로 중요한 정보를 두 번째로 보길 원할 것입니다. 따라서 중요한 요소는 유저가 훑어보는 경로를 따라 배치되어야 하며, 적시에 적절한 정보가 유저에게 제공되어야 합니다.

플로우를 만드는 것은 필수입니다

플로우(flow)는 여러분이 원하는 대로 페이지의 특정 부분에서 다른 부분으로 유저의 눈길이 움직일 수 있도록 리드하는 것입니다. 시각적인 강조 효과와 유도를 잘 조합하여 플로우를 만들 수 있습니다. 다음은 플로우를 만들 때 기억해 둬야 할 몇 가지입니다.

Point #1

첫 번째 지점은 유저의 여정이 시작되는 지점입니다. 로고가 배치되어야 할 가장 좋은 위치입니다.

Point #2

독자가 첫 번째로 보았으면 하는 항목은 Z의 첫 번째 가로선을 따라서 배치해야 합니다. 눈은 자연스럽게 Z 경로를 따라갈 것이기 때문에, 두 번째로 중요한 “행동 유도” 요소는 가로선의 끝부분에 배치하도록 합니다. 여기에서 추가되는 요소에는 좀 더 시각적인 강조 효과를 주어야 합니다. 버튼(혹은 다른 핵심 요소)을 밝거나 컬러풀하게 만들어서 유저의 주의를 끌어야 하며, 유저가 Z 패턴을 따라갈 수 있도록 안내해야 합니다.

페이지 중앙

이 영역은 유저가 관심을 가지는 내용으로 채우되, 다음 가로선이 있는 아래쪽으로 눈길이 내려가도록 유도해야 합니다. 가령, 히어로 이미지를 페이지 중앙에 배치하여 상단과 하단 섹션을 구분하고 눈길이 Z 경로를 따르도록 유도할 수 있습니다.

Point #3

이 부분의 목적은 Point #4에 있는 마지막 행동 유도 요소로 유저를 안내하는 것입니다. 예를 들어, 팔고자 하는 제품을 홍보하는 페이지의 경우, 그들이 “지금 구매하기” 버튼을 보기 전에 그들을 설득할 수 있는 카피를 잠재 고객에게 보여주고 싶을 것입니다. 그렇다면, Point#3을 활용하여 그들에게 도움이 되거나 유용한 정보를 제공할 수 있습니다.

Point #4

Point #4는 결승선으로, Point #3와 #4 사이의 가로선에는 유저의 시선을 코너로 유도할 수 있는 내용이 들어가야 합니다. Point #4 자체는 주요 행동 유도 요소가 배치되기에 가장 최적화된 장소입니다.

다음은 Z 레이아웃을 잘 활용한 Basecamp와 Evernote 사례입니다.

지그재그 패턴

Z 패턴에 대한 흥미롭고 유용한 사실 하나는 이 패턴을 확장하면 한 번에 크게 Z로 움직이는 대신 지그재그로 여러 번 움직이는 패턴이 된다는 것입니다.

아래 사례에서 볼 수 있듯이 Dropbox에서는 제품의 핵심 기능을 설명하는데 Z패턴을 반복하여 사용하고, 마지막 부분을 “무료 회원가입”으로 마무리하고 있습니다. 이 레이아웃에서 “더 알아보기” 버튼은 두 번째로 중요한 역할을 하는 행동유도 버튼으로, 독자가 전체 카피를 읽을 필요 없이 관심 있는 부분에 대해서는 관련 페이지로 이동할 수 있게 해줍니다.

결론

Z 레이아웃은 훌륭한 장점을 가지고 있기 때문에 많은 웹사이트에서 이를 적용하고 있습니다. 여러분도 Z 패턴을 활용하여 눈이 자연스럽게 움직이는 부분을 따라서 중요한 정보를 배치하면 정보가 눈에 더 잘 들어오게 웹사이트를 만들 수 있을 것입니다. 여러분이 전달하고자 하는 정보의 우선순위를 정해야 한다는 점을 기억하세요.

“F”형 패턴에 대한 포스트도 확인해보세요!

F-Shaped Pattern for Reading Content

This article will walk you through the principles of the F-Layout, why it works, and how you can create your own. What is the F-Pattern and how it works? The F-Pattern describes the most common user eye-scanning patterns when it comes to blocks of content. F for fast. That’s

babich.biz

전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)

https://brunch.co.kr/@ebprux/1332

전민수 UX 컨설턴트 소개

저는 2001년 이비피알유엑스 설립하였고, 2001년부터 현재까지 한국적 상황에 적합한 UX 방법론 및 사용성 연구하고 있습니다. 또한 해외 UI/UX 트랜드 심도 있는 연구도 함께 진행하고 있습니다. UI/

brunch.co.kr/@ebprux/1332

[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중

(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)

https://ebprux.liveklass.com/

UX 스터디

ebprux.liveklass.com

[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중